feat(metadata-sidebar): Move AutofillContextProvider out of test-utils

box · Oct 10, 2024 · b17dc53 · b17dc53
1 parent c6aba6d
commit b17dc53
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 32 deletions.
diff --git a/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx b/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx
@@ -1,13 +1,30 @@
 import React from 'react';
-import { type MetadataTemplateInstance } from '@box/metadata-editor';
+import { AutofillContextProvider, type MetadataTemplateInstance } from '@box/metadata-editor';
 import userEvent from '@testing-library/user-event';
+import { TooltipProvider } from '@box/blueprint-web';
+import { IntlProvider } from 'react-intl';
 import { screen, render } from '../../../test-utils/testing-library';
 import MetadataInstanceEditor, { MetadataInstanceEditorProps } from '../MetadataInstanceEditor';
+import { FeatureProvider } from '../../common/feature-checking';
 
 const mockOnCancel = jest.fn();
 const mockOnDiscardUnsavedChanges = jest.fn();
 const mockSetIsUnsavedChangesModalOpen = jest.fn();
 
+jest.unmock('react-intl');
+
+const wrapper = ({ children }) => (
+    <AutofillContextProvider fetchSuggestions={() => Promise.resolve([])} isAiSuggestionsFeatureEnabled>
+        <FeatureProvider features={{}}>
+            <TooltipProvider>
+                <IntlProvider locale="en">{children}</IntlProvider>
+            </TooltipProvider>
+        </FeatureProvider>
+    </AutofillContextProvider>
+);
+
+const renderWithAutofill = element => render(element, { wrapper });
+
 describe('MetadataInstanceEditor', () => {
     const mockCustomMetadataTemplate: MetadataTemplateInstance = {
         id: 'template-id',
@@ -62,48 +79,48 @@ describe('MetadataInstanceEditor', () => {
     };
 
     test('should render MetadataInstanceForm with correct props', () => {
-        render(<MetadataInstanceEditor {...defaultProps} />);
+        renderWithAutofill(<MetadataInstanceEditor {...defaultProps} />);
 
         const templateHeader = screen.getByText(mockMetadataTemplateInstance.displayName);
         expect(templateHeader).toBeInTheDocument();
     });
 
     test('should render MetadataInstanceForm with Custom Template', () => {
         const props = { ...defaultProps, template: mockCustomMetadataTemplate };
-        render(<MetadataInstanceEditor {...props} />);
+        renderWithAutofill(<MetadataInstanceEditor {...props} />);
 
         const templateHeader = screen.getByText('Custom Metadata');
         expect(templateHeader).toBeInTheDocument();
     });
 
     test('should render UnsavedChangesModal if isUnsavedChangesModalOpen is true', async () => {
         const props = { ...defaultProps, isUnsavedChangesModalOpen: true };
-        const { findByText } = render(<MetadataInstanceEditor {...props} />);
+        const { findByText } = renderWithAutofill(<MetadataInstanceEditor {...props} />);
 
         const unsavedChangesModal = await findByText('Unsaved Changes');
         expect(unsavedChangesModal).toBeInTheDocument();
     });
 
     test('should render MetadataInstanceForm with Delete button disabled', () => {
         const props = { ...defaultProps, isDeleteButtonDisabled: true };
-        render(<MetadataInstanceEditor {...props} />);
+        renderWithAutofill(<MetadataInstanceEditor {...props} />);
 
         const deleteButton = screen.getByRole('button', { name: 'Delete' });
         expect(deleteButton).toBeDisabled();
     });
 
     test('should render MetadataInstanceForm with Delete button enabled', () => {
-        render(<MetadataInstanceEditor {...defaultProps} />);
+        renderWithAutofill(<MetadataInstanceEditor {...defaultProps} />);
 
         const deleteButton = screen.getByRole('button', { name: 'Delete' });
         expect(deleteButton).toBeEnabled();
     });
 
     test('Should call onCancel when canceling editing', async () => {
         const props: MetadataInstanceEditorProps = { ...defaultProps, template: mockCustomMetadataTemplate };
-        const { findByRole } = render(<MetadataInstanceEditor {...props} />);
-        const cancelButton = await findByRole('button', { name: 'Cancel' });
+        renderWithAutofill(<MetadataInstanceEditor {...props} />);
 
+        const cancelButton = await screen.findByRole('button', { name: 'Cancel' });
         await userEvent.click(cancelButton);
 
         expect(mockOnCancel).toHaveBeenCalled();
@@ -114,9 +131,10 @@ describe('MetadataInstanceEditor', () => {
             ...defaultProps,
             template: mockCustomMetadataTemplateWithField,
         };
-        const { rerender, findByRole, findByText } = render(<MetadataInstanceEditor {...props} />);
-        const input = await findByRole('textbox');
-        const cancelButton = await findByRole('button', { name: 'Cancel' });
+        const { rerender } = renderWithAutofill(<MetadataInstanceEditor {...props} />);
+
+        const input = await screen.findByRole('textbox');
+        const cancelButton = await screen.findByRole('button', { name: 'Cancel' });
 
         await userEvent.type(input, 'Lorem ipsum dolor.');
         await userEvent.click(cancelButton);
@@ -125,10 +143,11 @@ describe('MetadataInstanceEditor', () => {
         expect(mockSetIsUnsavedChangesModalOpen).toHaveBeenCalledWith(true);
 
         rerender(<MetadataInstanceEditor {...props} isUnsavedChangesModalOpen={true} />);
-        const unsavedChangesModal = await findByText('Unsaved Changes');
+
+        const unsavedChangesModal = await screen.findByText('Unsaved Changes');
 
         expect(unsavedChangesModal).toBeInTheDocument();
-        const unsavedChangesModalDiscardButton = await findByRole('button', { name: 'Discard Changes' });
+        const unsavedChangesModalDiscardButton = await screen.findByRole('button', { name: 'Discard Changes' });
 
         await userEvent.click(unsavedChangesModalDiscardButton);
 

diff --git a/src/test-utils/testing-library.tsx b/src/test-utils/testing-library.tsx
@@ -4,36 +4,29 @@ import { render, type RenderOptions } from '@testing-library/react';
 // Data Providers
 import { TooltipProvider } from '@box/blueprint-web';
 import { IntlProvider } from 'react-intl';
-import { AutofillContextProvider } from '@box/metadata-editor';
 
 import { FeatureProvider } from '../elements/common/feature-checking';
 
 jest.unmock('react-intl');
 
-const Wrapper = ({
-    children,
-    features = {},
-    fetchSuggestions = () => Promise.resolve([]),
-    isAiSuggestionsFeatureEnabled = false,
-}) => (
-    <AutofillContextProvider
-        fetchSuggestions={fetchSuggestions}
-        isAiSuggestionsFeatureEnabled={isAiSuggestionsFeatureEnabled}
-    >
-        <FeatureProvider features={features}>
-            <TooltipProvider>
-                <IntlProvider locale="en">{children}</IntlProvider>
-            </TooltipProvider>
-        </FeatureProvider>
-    </AutofillContextProvider>
+const Wrapper = ({ children, features = {} }) => (
+    <FeatureProvider features={features}>
+        <TooltipProvider>
+            <IntlProvider locale="en">{children}</IntlProvider>
+        </TooltipProvider>
+    </FeatureProvider>
 );
 
-type RenderConnectedOptions = Omit<RenderOptions, 'wrapper'> & {
+type RenderConnectedOptions = RenderOptions & {
+    // Omit<RenderOptions, 'wrapper'> & {
     wrapperProps?: Record<string, unknown>;
 };
 
 const renderConnected = (element, options: RenderConnectedOptions = {}) =>
-    render(element, { wrapper: props => <Wrapper {...props} {...options.wrapperProps} />, ...options });
+    render(element, {
+        wrapper: options.wrapper ? options.wrapper : props => <Wrapper {...props} {...options.wrapperProps} />,
+        ...options,
+    });
 
 export * from '@testing-library/react';
 export { renderConnected as render };