Disable modal animations in tests

WordPress · Sep 10, 2024 · 25c95c3 · 25c95c3
1 parent 0658696
commit 25c95c3
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 1 deletion.
diff --git a/packages/components/src/confirm-dialog/test/index.tsx b/packages/components/src/confirm-dialog/test/index.tsx
@@ -11,7 +11,26 @@ import { ConfirmDialog } from '..';
 
 const noop = () => {};
 
-describe( 'Confirm', () => {
+describe( 'Confirm Dialog', () => {
+	// Mock `matchMedia` so that all animations are skipped,
+	// since js-dom does not support fully CSS animations.
+	const originalMatchMedia = window.matchMedia;
+	const mockedMatchMedia = jest.fn( ( query: string ) => {
+		if ( /prefers-reduced-motion/.test( query ) ) {
+			return { matches: true } as ReturnType< typeof window.matchMedia >;
+		}
+
+		return originalMatchMedia( query );
+	} );
+
+	beforeAll( () => {
+		window.matchMedia = jest.fn( mockedMatchMedia );
+	} );
+
+	afterAll( () => {
+		window.matchMedia = originalMatchMedia;
+	} );
+
 	describe( 'Confirm component', () => {
 		describe( 'Structure', () => {
 			it( 'should render correctly', () => {

diff --git a/packages/components/src/guide/test/index.tsx b/packages/components/src/guide/test/index.tsx
@@ -15,6 +15,25 @@ const defaultProps = {
 };
 
 describe( 'Guide', () => {
+	// Mock `matchMedia` so that all animations are skipped,
+	// since js-dom does not support fully CSS animations.
+	const originalMatchMedia = window.matchMedia;
+	const mockedMatchMedia = jest.fn( ( query: string ) => {
+		if ( /prefers-reduced-motion/.test( query ) ) {
+			return { matches: true } as ReturnType< typeof window.matchMedia >;
+		}
+
+		return originalMatchMedia( query );
+	} );
+
+	beforeAll( () => {
+		window.matchMedia = jest.fn( mockedMatchMedia );
+	} );
+
+	afterAll( () => {
+		window.matchMedia = originalMatchMedia;
+	} );
+
 	it( 'renders nothing when there are no pages', () => {
 		render( <Guide { ...defaultProps } pages={ [] } /> );
 		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();

diff --git a/packages/components/src/modal/test/index.tsx b/packages/components/src/modal/test/index.tsx
@@ -18,6 +18,25 @@ import type { ModalProps } from '../types';
 const noop = () => {};
 
 describe( 'Modal', () => {
+	// Mock `matchMedia` so that all animations are skipped,
+	// since js-dom does not support fully CSS animations.
+	const originalMatchMedia = window.matchMedia;
+	const mockedMatchMedia = jest.fn( ( query: string ) => {
+		if ( /prefers-reduced-motion/.test( query ) ) {
+			return { matches: true } as ReturnType< typeof window.matchMedia >;
+		}
+
+		return originalMatchMedia( query );
+	} );
+
+	beforeAll( () => {
+		window.matchMedia = jest.fn( mockedMatchMedia );
+	} );
+
+	afterAll( () => {
+		window.matchMedia = originalMatchMedia;
+	} );
+
 	it( 'applies the aria-describedby attribute when provided', () => {
 		render(
 			<Modal

diff --git a/packages/components/src/tooltip/test/index.tsx b/packages/components/src/tooltip/test/index.tsx
@@ -42,6 +42,25 @@ const hoverOutside = async () => {
 };
 
 describe( 'Tooltip', () => {
+	// Mock `matchMedia` so that all animations are skipped,
+	// since js-dom does not support fully CSS animations.
+	const originalMatchMedia = window.matchMedia;
+	const mockedMatchMedia = jest.fn( ( query: string ) => {
+		if ( /prefers-reduced-motion/.test( query ) ) {
+			return { matches: true } as ReturnType< typeof window.matchMedia >;
+		}
+
+		return originalMatchMedia( query );
+	} );
+
+	beforeAll( () => {
+		window.matchMedia = jest.fn( mockedMatchMedia );
+	} );
+
+	afterAll( () => {
+		window.matchMedia = originalMatchMedia;
+	} );
+
 	describe( 'basic behavior', () => {
 		it( 'should not render the tooltip if multiple children are passed', async () => {
 			render(