From 3070a72385e8beec6587321eb29ec33c1fedc4c3 Mon Sep 17 00:00:00 2001 From: Krystof Woldrich Date: Fri, 14 Feb 2025 18:51:29 +0100 Subject: [PATCH 1/3] chore(feedback): Use `Widget` instead of `Form` --- CHANGELOG.md | 8 +-- ...orm.styles.ts => FeedbackWidget.styles.ts} | 4 +- .../{FeedbackForm.tsx => FeedbackWidget.tsx} | 14 ++--- ...kForm.types.ts => FeedbackWidget.types.ts} | 8 +-- ...mManager.tsx => FeedbackWidgetManager.tsx} | 37 ++++++------ packages/core/src/js/feedback/defaults.ts | 4 +- packages/core/src/js/feedback/integration.ts | 10 ++-- packages/core/src/js/index.ts | 4 +- packages/core/src/js/sdk.tsx | 6 +- ...kForm.test.tsx => FeedbackWidget.test.tsx} | 56 +++++++++---------- ...est.tsx => FeedbackWidgetManager.test.tsx} | 42 +++++++------- ....tsx.snap => FeedbackWidget.test.tsx.snap} | 12 ++-- samples/expo/app/(tabs)/index.tsx | 2 +- samples/react-native/src/App.tsx | 6 +- .../react-native/src/Screens/ErrorsScreen.tsx | 4 +- 15 files changed, 109 insertions(+), 108 deletions(-) rename packages/core/src/js/feedback/{FeedbackForm.styles.ts => FeedbackWidget.styles.ts} (94%) rename packages/core/src/js/feedback/{FeedbackForm.tsx => FeedbackWidget.tsx} (93%) rename packages/core/src/js/feedback/{FeedbackForm.types.ts => FeedbackWidget.types.ts} (97%) rename packages/core/src/js/feedback/{FeedbackFormManager.tsx => FeedbackWidgetManager.tsx} (76%) rename packages/core/test/feedback/{FeedbackForm.test.tsx => FeedbackWidget.test.tsx} (86%) rename packages/core/test/feedback/{FeedbackFormManager.test.tsx => FeedbackWidgetManager.test.tsx} (66%) rename packages/core/test/feedback/__snapshots__/{FeedbackForm.test.tsx.snap => FeedbackWidget.test.tsx.snap} (99%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 946f6c6188..119499381f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,14 +10,14 @@ ### Features -- User Feedback Form Component Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435)) +- User Feedback Widget Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435)) - To collect user feedback from inside your application call `Sentry.showFeedbackForm()` or add the `FeedbackForm` component. + To collect user feedback from inside your application call `Sentry.showFeedbackWidget()` or add the `FeedbackWidget` component. ```jsx - import { FeedbackForm } from "@sentry/react-native"; + import { FeedbackWidget } from "@sentry/react-native"; ... - + ``` ### Fixes diff --git a/packages/core/src/js/feedback/FeedbackForm.styles.ts b/packages/core/src/js/feedback/FeedbackWidget.styles.ts similarity index 94% rename from packages/core/src/js/feedback/FeedbackForm.styles.ts rename to packages/core/src/js/feedback/FeedbackWidget.styles.ts index 1e90af07c6..5b4ee0bc6e 100644 --- a/packages/core/src/js/feedback/FeedbackForm.styles.ts +++ b/packages/core/src/js/feedback/FeedbackWidget.styles.ts @@ -1,13 +1,13 @@ import type { ViewStyle } from 'react-native'; -import type { FeedbackFormStyles } from './FeedbackForm.types'; +import type { FeedbackWidgetStyles } from './FeedbackWidget.types'; const PURPLE = 'rgba(88, 74, 192, 1)'; const FORGROUND_COLOR = '#2b2233'; const BACKROUND_COLOR = '#ffffff'; const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)'; -const defaultStyles: FeedbackFormStyles = { +const defaultStyles: FeedbackWidgetStyles = { container: { flex: 1, padding: 20, diff --git a/packages/core/src/js/feedback/FeedbackForm.tsx b/packages/core/src/js/feedback/FeedbackWidget.tsx similarity index 93% rename from packages/core/src/js/feedback/FeedbackForm.tsx rename to packages/core/src/js/feedback/FeedbackWidget.tsx index b6aac2f412..05bd20f3c8 100644 --- a/packages/core/src/js/feedback/FeedbackForm.tsx +++ b/packages/core/src/js/feedback/FeedbackWidget.tsx @@ -17,23 +17,23 @@ import { View } from 'react-native'; -import { NATIVE } from './../wrapper'; +import { NATIVE } from '../wrapper'; import { sentryLogo } from './branding'; import { defaultConfiguration } from './defaults'; -import defaultStyles from './FeedbackForm.styles'; -import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types'; +import defaultStyles from './FeedbackWidget.styles'; +import type { FeedbackWidgetProps, FeedbackWidgetState, FeedbackWidgetStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackWidget.types'; import { isValidEmail } from './utils'; /** * @beta * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback. */ -export class FeedbackForm extends React.Component { - public static defaultProps: Partial = { +export class FeedbackWidget extends React.Component { + public static defaultProps: Partial = { ...defaultConfiguration } - public constructor(props: FeedbackFormProps) { + public constructor(props: FeedbackWidgetProps) { super(props); const currentUser = { @@ -159,7 +159,7 @@ export class FeedbackForm extends React.Component { onFormClose(); this.setState({ isVisible: false }); diff --git a/packages/core/src/js/feedback/FeedbackForm.types.ts b/packages/core/src/js/feedback/FeedbackWidget.types.ts similarity index 97% rename from packages/core/src/js/feedback/FeedbackForm.types.ts rename to packages/core/src/js/feedback/FeedbackWidget.types.ts index b0393c788a..0957206b48 100644 --- a/packages/core/src/js/feedback/FeedbackForm.types.ts +++ b/packages/core/src/js/feedback/FeedbackWidget.types.ts @@ -4,12 +4,12 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'; /** * The props for the feedback form */ -export interface FeedbackFormProps +export interface FeedbackWidgetProps extends FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackCallbacks, ImagePickerConfiguration { - styles?: FeedbackFormStyles; + styles?: FeedbackWidgetStyles; } /** @@ -226,7 +226,7 @@ export interface ImagePicker { /** * The styles for the feedback form */ -export interface FeedbackFormStyles { +export interface FeedbackWidgetStyles { container?: ViewStyle; title?: TextStyle; label?: TextStyle; @@ -245,7 +245,7 @@ export interface FeedbackFormStyles { /** * The state of the feedback form */ -export interface FeedbackFormState { +export interface FeedbackWidgetState { isVisible: boolean; name: string; email: string; diff --git a/packages/core/src/js/feedback/FeedbackFormManager.tsx b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx similarity index 76% rename from packages/core/src/js/feedback/FeedbackFormManager.tsx rename to packages/core/src/js/feedback/FeedbackWidgetManager.tsx index b7b9f9fe55..46e13aa483 100644 --- a/packages/core/src/js/feedback/FeedbackFormManager.tsx +++ b/packages/core/src/js/feedback/FeedbackWidgetManager.tsx @@ -2,13 +2,13 @@ import { logger } from '@sentry/core'; import * as React from 'react'; import { Animated, KeyboardAvoidingView, Modal, Platform, View } from 'react-native'; -import { FeedbackForm } from './FeedbackForm'; -import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles'; -import type { FeedbackFormStyles } from './FeedbackForm.types'; +import { FeedbackWidget } from './FeedbackWidget'; +import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackWidget.styles'; +import type { FeedbackWidgetStyles } from './FeedbackWidget.types'; import { getFeedbackOptions } from './integration'; import { isModalSupported } from './utils'; -class FeedbackFormManager { +class FeedbackWidgetManager { private static _isVisible = false; private static _setVisibility: (visible: boolean) => void; @@ -35,31 +35,31 @@ class FeedbackFormManager { } } -interface FeedbackFormProviderProps { +interface FeedbackWidgetProviderProps { children: React.ReactNode; - styles?: FeedbackFormStyles; + styles?: FeedbackWidgetStyles; } -interface FeedbackFormProviderState { +interface FeedbackWidgetProviderState { isVisible: boolean; backgroundOpacity: Animated.Value; } -class FeedbackFormProvider extends React.Component { - public state: FeedbackFormProviderState = { +class FeedbackWidgetProvider extends React.Component { + public state: FeedbackWidgetProviderState = { isVisible: false, backgroundOpacity: new Animated.Value(0), }; - public constructor(props: FeedbackFormProviderProps) { + public constructor(props: FeedbackWidgetProviderProps) { super(props); - FeedbackFormManager.initialize(this._setVisibilityFunction); + FeedbackWidgetManager.initialize(this._setVisibilityFunction); } /** * Animates the background opacity when the modal is shown. */ - public componentDidUpdate(_prevProps: any, prevState: FeedbackFormProviderState): void { + public componentDidUpdate(_prevProps: any, prevState: FeedbackWidgetProviderState): void { if (!prevState.isVisible && this.state.isVisible) { Animated.timing(this.state.backgroundOpacity, { toValue: 1, @@ -76,7 +76,7 @@ class FeedbackFormProvider extends React.Component { */ public render(): React.ReactNode { if (!isModalSupported()) { - logger.error('FeedbackForm Modal is not supported in React Native < 0.71 with Fabric renderer.'); + logger.error('FeedbackWidget Modal is not supported in React Native < 0.71 with Fabric renderer.'); return <>{this.props.children}; } @@ -100,7 +100,7 @@ class FeedbackFormProvider extends React.Component { style={modalBackground} > - @@ -118,13 +118,14 @@ class FeedbackFormProvider extends React.Component { }; private _handleClose = (): void => { - FeedbackFormManager.hide(); + FeedbackWidgetManager.hide(); this.setState({ isVisible: false }); }; } -const showFeedbackForm = (): void => { - FeedbackFormManager.show(); +const showFeedbackWidget = (): void => { + FeedbackWidgetManager.show(); }; -export { showFeedbackForm, FeedbackFormProvider }; +export { showFeedbackWidget, FeedbackWidgetProvider }; +FeedbackWidget diff --git a/packages/core/src/js/feedback/defaults.ts b/packages/core/src/js/feedback/defaults.ts index a1d8e74b62..e282b8d2e6 100644 --- a/packages/core/src/js/feedback/defaults.ts +++ b/packages/core/src/js/feedback/defaults.ts @@ -1,6 +1,6 @@ import { Alert } from 'react-native'; -import type { FeedbackFormProps } from './FeedbackForm.types'; +import type { FeedbackWidgetProps } from './FeedbackWidget.types'; const FORM_TITLE = 'Report a Bug'; const NAME_PLACEHOLDER = 'Your Name'; @@ -20,7 +20,7 @@ const ADD_SCREENSHOT_LABEL = 'Add a screenshot'; const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot'; const GENERIC_ERROR_TEXT = 'Unable to send feedback due to an unexpected error.'; -export const defaultConfiguration: Partial = { +export const defaultConfiguration: Partial = { // FeedbackCallbacks onFormOpen: () => { // Does nothing by default diff --git a/packages/core/src/js/feedback/integration.ts b/packages/core/src/js/feedback/integration.ts index 31fb463971..4a040de350 100644 --- a/packages/core/src/js/feedback/integration.ts +++ b/packages/core/src/js/feedback/integration.ts @@ -1,16 +1,16 @@ import type { Integration } from '@sentry/core'; -import type { FeedbackFormProps } from './FeedbackForm.types'; +import type { FeedbackWidgetProps } from './FeedbackWidget.types'; export const FEEDBACK_FORM_INTEGRATION_NAME = 'MobileFeedback'; type FeedbackIntegration = Integration & { - options: Partial; + options: Partial; }; -let savedOptions: Partial = {}; +let savedOptions: Partial = {}; -export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): FeedbackIntegration => { +export const feedbackIntegration = (initOptions: FeedbackWidgetProps = {}): FeedbackIntegration => { savedOptions = initOptions; return { @@ -19,4 +19,4 @@ export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): Feedba }; }; -export const getFeedbackOptions = (): Partial => savedOptions; +export const getFeedbackOptions = (): Partial => savedOptions; diff --git a/packages/core/src/js/index.ts b/packages/core/src/js/index.ts index a07e89f92a..4508684156 100644 --- a/packages/core/src/js/index.ts +++ b/packages/core/src/js/index.ts @@ -85,5 +85,5 @@ export type { TimeToDisplayProps } from './tracing'; export { Mask, Unmask } from './replay/CustomMask'; -export { FeedbackForm } from './feedback/FeedbackForm'; -export { showFeedbackForm } from './feedback/FeedbackFormManager'; +export { FeedbackWidget } from './feedback/FeedbackWidget'; +export { showFeedbackWidget } from './feedback/FeedbackWidgetManager'; diff --git a/packages/core/src/js/sdk.tsx b/packages/core/src/js/sdk.tsx index 606e2cf5ea..5edba50b48 100644 --- a/packages/core/src/js/sdk.tsx +++ b/packages/core/src/js/sdk.tsx @@ -8,7 +8,7 @@ import { import * as React from 'react'; import { ReactNativeClient } from './client'; -import { FeedbackFormProvider } from './feedback/FeedbackFormManager'; +import { FeedbackWidgetProvider } from './feedback/FeedbackWidgetManager'; import { getDevServer } from './integrations/debugsymbolicatorutils'; import { getDefaultIntegrations } from './integrations/default'; import type { ReactNativeClientOptions, ReactNativeOptions, ReactNativeWrapperOptions } from './options'; @@ -164,9 +164,9 @@ export function wrap

>( return ( - + - + ); diff --git a/packages/core/test/feedback/FeedbackForm.test.tsx b/packages/core/test/feedback/FeedbackWidget.test.tsx similarity index 86% rename from packages/core/test/feedback/FeedbackForm.test.tsx rename to packages/core/test/feedback/FeedbackWidget.test.tsx index 92ed48fe4a..287f69c99a 100644 --- a/packages/core/test/feedback/FeedbackForm.test.tsx +++ b/packages/core/test/feedback/FeedbackWidget.test.tsx @@ -3,8 +3,8 @@ import { fireEvent, render, waitFor } from '@testing-library/react-native'; import * as React from 'react'; import { Alert } from 'react-native'; -import { FeedbackForm } from '../../src/js/feedback/FeedbackForm'; -import type { FeedbackFormProps, FeedbackFormStyles, ImagePicker } from '../../src/js/feedback/FeedbackForm.types'; +import { FeedbackWidget } from '../../src/js/feedback/FeedbackWidget'; +import type { FeedbackWidgetProps, FeedbackWidgetStyles, ImagePicker } from '../../src/js/feedback/FeedbackWidget.types'; const mockOnFormClose = jest.fn(); const mockOnAddScreenshot = jest.fn(); @@ -27,7 +27,7 @@ jest.mock('@sentry/core', () => ({ lastEventId: jest.fn(), })); -const defaultProps: FeedbackFormProps = { +const defaultProps: FeedbackWidgetProps = { onFormClose: mockOnFormClose, onAddScreenshot: mockOnAddScreenshot, onSubmitSuccess: mockOnSubmitSuccess, @@ -51,7 +51,7 @@ const defaultProps: FeedbackFormProps = { genericError: 'Generic error', }; -const customStyles: FeedbackFormStyles = { +const customStyles: FeedbackWidgetStyles = { container: { backgroundColor: '#ffffff', }, @@ -96,45 +96,45 @@ const customStyles: FeedbackFormStyles = { }, }; -describe('FeedbackForm', () => { +describe('FeedbackWidget', () => { afterEach(() => { jest.clearAllMocks(); }); it('matches the snapshot with default configuration', () => { - const { toJSON } = render(); + const { toJSON } = render(); expect(toJSON()).toMatchSnapshot(); }); it('matches the snapshot with custom texts', () => { - const { toJSON } = render(); + const { toJSON } = render(); expect(toJSON()).toMatchSnapshot(); }); it('matches the snapshot with custom styles', () => { const customStyleProps = {styles: customStyles}; - const { toJSON } = render(); + const { toJSON } = render(); expect(toJSON()).toMatchSnapshot(); }); it('matches the snapshot with default configuration and screenshot button', () => { - const { toJSON } = render(); + const { toJSON } = render(); expect(toJSON()).toMatchSnapshot(); }); it('matches the snapshot with custom texts and screenshot button', () => { - const { toJSON } = render(); + const { toJSON } = render(); expect(toJSON()).toMatchSnapshot(); }); it('matches the snapshot with custom styles and screenshot button', () => { const customStyleProps = {styles: customStyles}; - const { toJSON } = render(); + const { toJSON } = render(); expect(toJSON()).toMatchSnapshot(); }); it('renders correctly', () => { - const { getByPlaceholderText, getByText, getByTestId, queryByText } = render(); + const { getByPlaceholderText, getByText, getByTestId, queryByText } = render(); expect(getByText(defaultProps.formTitle)).toBeTruthy(); expect(getByTestId('sentry-logo')).toBeTruthy(); // default showBranding is true @@ -150,19 +150,19 @@ describe('FeedbackForm', () => { }); it('renders attachment button when the enableScreenshot is true', () => { - const { getByText } = render(); + const { getByText } = render(); expect(getByText(defaultProps.addScreenshotButtonLabel)).toBeTruthy(); }); it('does not render the sentry logo when showBranding is false', () => { - const { queryByTestId } = render(); + const { queryByTestId } = render(); expect(queryByTestId('sentry-logo')).toBeNull(); }); it('name and email are prefilled when sentry user is set', () => { - const { getByPlaceholderText } = render(); + const { getByPlaceholderText } = render(); const nameInput = getByPlaceholderText(defaultProps.namePlaceholder); const emailInput = getByPlaceholderText(defaultProps.emailPlaceholder); @@ -176,14 +176,14 @@ describe('FeedbackForm', () => { expect(mockGetUser).not.toHaveBeenCalled(); // Render the component - render(); + render(); // After rendering, check that getUser was called twice (email and name) expect(mockGetUser).toHaveBeenCalledTimes(2); }); it('shows an error message if required fields are empty', async () => { - const { getByText } = render(); + const { getByText } = render(); fireEvent.press(getByText(defaultProps.submitButtonLabel)); @@ -194,7 +194,7 @@ describe('FeedbackForm', () => { it('shows an error message if the email is not valid and the email is required', async () => { const withEmailProps = {...defaultProps, ...{isEmailRequired: true}}; - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'not-an-email'); @@ -208,7 +208,7 @@ describe('FeedbackForm', () => { }); it('calls captureFeedback when the form is submitted successfully', async () => { - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com'); @@ -226,7 +226,7 @@ describe('FeedbackForm', () => { }); it('shows success message when the form is submitted successfully', async () => { - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com'); @@ -244,7 +244,7 @@ describe('FeedbackForm', () => { throw new Error('Test error'); }); - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com'); @@ -262,7 +262,7 @@ describe('FeedbackForm', () => { throw new Error('Test error'); }); - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com'); @@ -276,7 +276,7 @@ describe('FeedbackForm', () => { }); it('calls onSubmitSuccess when the form is submitted successfully', async () => { - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com'); @@ -290,7 +290,7 @@ describe('FeedbackForm', () => { }); it('calls onFormSubmitted when the form is submitted successfully', async () => { - const { getByPlaceholderText, getByText } = render(); + const { getByPlaceholderText, getByText } = render(); fireEvent.changeText(getByPlaceholderText(defaultProps.namePlaceholder), 'John Doe'); fireEvent.changeText(getByPlaceholderText(defaultProps.emailPlaceholder), 'john.doe@example.com'); @@ -304,7 +304,7 @@ describe('FeedbackForm', () => { }); it('calls onAddScreenshot when the screenshot button is pressed and no image picker library is integrated', async () => { - const { getByText } = render(); + const { getByText } = render(); fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel)); @@ -321,7 +321,7 @@ describe('FeedbackForm', () => { launchImageLibraryAsync: mockLaunchImageLibrary, }; - const { getByText } = render(); + const { getByText } = render(); fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel)); @@ -338,7 +338,7 @@ describe('FeedbackForm', () => { launchImageLibrary: mockLaunchImageLibrary, }; - const { getByText } = render(); + const { getByText } = render(); fireEvent.press(getByText(defaultProps.addScreenshotButtonLabel)); @@ -348,7 +348,7 @@ describe('FeedbackForm', () => { }); it('calls onFormClose when the cancel button is pressed', () => { - const { getByText } = render(); + const { getByText } = render(); fireEvent.press(getByText(defaultProps.cancelButtonLabel)); diff --git a/packages/core/test/feedback/FeedbackFormManager.test.tsx b/packages/core/test/feedback/FeedbackWidgetManager.test.tsx similarity index 66% rename from packages/core/test/feedback/FeedbackFormManager.test.tsx rename to packages/core/test/feedback/FeedbackWidgetManager.test.tsx index 9fe53af4c6..2d9bfcc926 100644 --- a/packages/core/test/feedback/FeedbackFormManager.test.tsx +++ b/packages/core/test/feedback/FeedbackWidgetManager.test.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { Text } from 'react-native'; import { defaultConfiguration } from '../../src/js/feedback/defaults'; -import { FeedbackFormProvider, showFeedbackForm } from '../../src/js/feedback/FeedbackFormManager'; +import { FeedbackWidgetProvider, showFeedbackWidget } from '../../src/js/feedback/FeedbackWidgetManager'; import { feedbackIntegration } from '../../src/js/feedback/integration'; import { isModalSupported } from '../../src/js/feedback/utils'; @@ -18,50 +18,50 @@ beforeEach(() => { logger.error = jest.fn(); }); -describe('FeedbackFormManager', () => { - it('showFeedbackForm displays the form when FeedbackFormProvider is used', () => { +describe('FeedbackWidgetManager', () => { + it('showFeedbackWidget displays the form when FeedbackWidgetProvider is used', () => { mockedIsModalSupported.mockReturnValue(true); const { getByText, getByTestId } = render( - + App Components - + ); - showFeedbackForm(); + showFeedbackWidget(); expect(getByTestId('feedback-form-modal')).toBeTruthy(); expect(getByText('App Components')).toBeTruthy(); }); - it('showFeedbackForm does not display the form when Modal is not available', () => { + it('showFeedbackWidget does not display the form when Modal is not available', () => { mockedIsModalSupported.mockReturnValue(false); const { getByText, queryByTestId } = render( - + App Components - + ); - showFeedbackForm(); + showFeedbackWidget(); expect(queryByTestId('feedback-form-modal')).toBeNull(); expect(getByText('App Components')).toBeTruthy(); expect(logger.error).toHaveBeenLastCalledWith( - 'FeedbackForm Modal is not supported in React Native < 0.71 with Fabric renderer.', + 'FeedbackWidget Modal is not supported in React Native < 0.71 with Fabric renderer.', ); }); - it('showFeedbackForm does not throw an error when FeedbackFormProvider is not used', () => { + it('showFeedbackWidget does not throw an error when FeedbackWidgetProvider is not used', () => { expect(() => { - showFeedbackForm(); + showFeedbackWidget(); }).not.toThrow(); }); - it('showFeedbackForm displays the form with the feedbackIntegration options', () => { + it('showFeedbackWidget displays the form with the feedbackIntegration options', () => { mockedIsModalSupported.mockReturnValue(true); const { getByPlaceholderText, getByText } = render( - + App Components - + ); feedbackIntegration({ @@ -69,25 +69,25 @@ describe('FeedbackFormManager', () => { submitButtonLabel: 'Custom Submit Button', }); - showFeedbackForm(); + showFeedbackWidget(); expect(getByPlaceholderText('Custom Message Placeholder')).toBeTruthy(); expect(getByText('Custom Submit Button')).toBeTruthy(); }); - it('showFeedbackForm displays the form with the feedbackIntegration options merged with the defaults', () => { + it('showFeedbackWidget displays the form with the feedbackIntegration options merged with the defaults', () => { mockedIsModalSupported.mockReturnValue(true); const { getByPlaceholderText, getByText, queryByText } = render( - + App Components - + ); feedbackIntegration({ submitButtonLabel: 'Custom Submit Button', }), - showFeedbackForm(); + showFeedbackWidget(); expect(queryByText(defaultConfiguration.submitButtonLabel)).toBeFalsy(); // overridden value expect(getByText('Custom Submit Button')).toBeTruthy(); // overridden value diff --git a/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap b/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap similarity index 99% rename from packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap rename to packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap index a3c2857ac9..cab16ba16e 100644 --- a/packages/core/test/feedback/__snapshots__/FeedbackForm.test.tsx.snap +++ b/packages/core/test/feedback/__snapshots__/FeedbackWidget.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FeedbackForm matches the snapshot with custom styles 1`] = ` +exports[`FeedbackWidget matches the snapshot with custom styles 1`] = ` `; -exports[`FeedbackForm matches the snapshot with custom styles and screenshot button 1`] = ` +exports[`FeedbackWidget matches the snapshot with custom styles and screenshot button 1`] = ` `; -exports[`FeedbackForm matches the snapshot with custom texts 1`] = ` +exports[`FeedbackWidget matches the snapshot with custom texts 1`] = ` `; -exports[`FeedbackForm matches the snapshot with custom texts and screenshot button 1`] = ` +exports[`FeedbackWidget matches the snapshot with custom texts and screenshot button 1`] = ` `; -exports[`FeedbackForm matches the snapshot with default configuration 1`] = ` +exports[`FeedbackWidget matches the snapshot with default configuration 1`] = ` `; -exports[`FeedbackForm matches the snapshot with default configuration and screenshot button 1`] = ` +exports[`FeedbackWidget matches the snapshot with default configuration and screenshot button 1`] = ` { - Sentry.showFeedbackForm(); + Sentry.showFeedbackWidget(); }} />