diff --git a/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx b/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx
index 2ff00ff0c0..c5e30162b3 100644
--- a/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx
+++ b/src/elements/content-sidebar/__tests__/MetadataInstanceEditor.test.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { type MetadataTemplateInstance } from '@box/metadata-editor';
-import { screen, render, fireEvent, act } from '../../../test-utils/testing-library';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '../../../test-utils/testing-library';
import MetadataInstanceEditor, { MetadataInstanceEditorProps } from '../MetadataInstanceEditor';
const mockOnCancel = jest.fn();
@@ -58,6 +59,21 @@ describe('MetadataInstanceEditor', () => {
onUnsavedChangesModalCancel: mockOnUnsavedChangesModalCancel,
};
+ // Mock window.matchMedia to simulate media query behavior for tests
+ // in which UnsavedChangesModal component relies on it.
+ const mockMatchMedia = () =>
+ Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: jest.fn().mockImplementation(query => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ })),
+ });
+
test('should render MetadataInstanceForm with correct props', () => {
render();
@@ -73,60 +89,51 @@ describe('MetadataInstanceEditor', () => {
expect(templateHeader).toBeInTheDocument();
});
- test('should render UnsavedChangesModal if isUnsavedChangesModalOpen is true', () => {
- // Mock window.matchMedia to simulate media query behavior for this test,
- // as the UnsavedChangesModal component relies on it.
- Object.defineProperty(window, 'matchMedia', {
- writable: true,
- value: jest.fn().mockImplementation(query => ({
- matches: false,
- media: query,
- onchange: null,
- addEventListener: jest.fn(),
- removeEventListener: jest.fn(),
- dispatchEvent: jest.fn(),
- })),
- });
+ test('should render UnsavedChangesModal if isUnsavedChangesModalOpen is true', async () => {
+ mockMatchMedia();
const props = { ...defaultProps, isUnsavedChangesModalOpen: true };
- render();
+ const { findByText } = render();
- const unsavedChangesModal = screen.getByText('Unsaved Changes');
+ const unsavedChangesModal = await findByText('Unsaved Changes');
expect(unsavedChangesModal).toBeInTheDocument();
});
- test('Should call onCancel when canceling editing', () => {
+ test('Should call onCancel when canceling editing', async () => {
const props: MetadataInstanceEditorProps = { ...defaultProps, template: mockCustomMetadataTemplate };
- const { getByRole } = render();
+ const { findByRole } = render();
+ const cancelButton = await findByRole('button', { name: 'Cancel' });
- act(() => {
- fireEvent.click(getByRole('button', { name: 'Cancel' }));
- });
+ await userEvent.click(cancelButton);
expect(mockOnCancel).toHaveBeenCalled();
});
- test('Should call onUnsavedChangesModalCancel instead onCancel when canceling through UnsavedChangesModal', () => {
- const props: MetadataInstanceEditorProps = { ...defaultProps, template: mockCustomMetadataTemplateWithField };
- const { getByRole, rerender } = render();
- const input = getByRole('textbox');
+ test('Should call onUnsavedChangesModalCancel instead onCancel when canceling through UnsavedChangesModal', async () => {
+ mockMatchMedia();
- act(() => {
- fireEvent.change(input, { target: { value: 'Lorem ipsum dolor.' } });
- fireEvent.click(getByRole('button', { name: 'Cancel' }));
- });
+ const props: MetadataInstanceEditorProps = {
+ ...defaultProps,
+ template: mockCustomMetadataTemplateWithField,
+ };
+ const { rerender, findByRole, findByText } = render();
+ const input = await findByRole('textbox');
+ const cancelButton = await findByRole('button', { name: 'Cancel' });
+
+ await userEvent.type(input, 'Lorem ipsum dolor.');
+ await userEvent.click(cancelButton);
expect(mockOnCancel).not.toHaveBeenCalled();
expect(mockSetIsUnsavedChangesModalOpen).toHaveBeenCalledWith(true);
rerender();
- const unsavedChangesModal = screen.getByText('Unsaved Changes');
+ const unsavedChangesModal = await findByText('Unsaved Changes');
expect(unsavedChangesModal).toBeInTheDocument();
+ const unsavedChangesModalCancelButton = await findByRole('button', { name: 'Cancel' });
+
+ await userEvent.click(unsavedChangesModalCancelButton);
- act(() => {
- fireEvent.click(getByRole('button', { name: 'Cancel' }));
- });
expect(mockOnUnsavedChangesModalCancel).toHaveBeenCalled();
});
});