From 25c95c3e143c54687bda855bc565e2e79ac50b91 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 10 Sep 2024 15:24:02 +0200
Subject: [PATCH] Disable modal animations in tests

---
 .../src/confirm-dialog/test/index.tsx         | 21 ++++++++++++++++++-
 packages/components/src/guide/test/index.tsx  | 19 +++++++++++++++++
 packages/components/src/modal/test/index.tsx  | 19 +++++++++++++++++
 .../components/src/tooltip/test/index.tsx     | 19 +++++++++++++++++
 4 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/confirm-dialog/test/index.tsx b/packages/components/src/confirm-dialog/test/index.tsx
index 65867e827f4845..6d43ceb71f3b90 100644
--- 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
index eff2886cb038b9..a28ed7c0d14117 100644
--- 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
index a0d0ee2653edb4..cafb4f6052ae7e 100644
--- 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
index 67922ab1d5ac41..bbb6a98da507b5 100644
--- 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(