From 914f543e1e50d8c65c05a417efbdf539ef0d7a63 Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Fri, 20 Aug 2021 11:46:50 +0800
Subject: [PATCH] Emulate reduced-motion in e2e tests (#34132)

---
 .github/workflows/end2end-test.yml                |  2 +-
 .../compose/src/hooks/use-reduced-motion/index.js | 15 ++-------------
 packages/e2e-tests/CHANGELOG.md                   |  4 ++++
 packages/e2e-tests/config/setup-test-framework.js |  3 +++
 .../specs/widgets/editing-widgets.test.js         | 13 -------------
 tools/webpack/shared.js                           |  3 ---
 typings/gutenberg-env/index.d.ts                  |  1 -
 7 files changed, 10 insertions(+), 31 deletions(-)

diff --git a/.github/workflows/end2end-test.yml b/.github/workflows/end2end-test.yml
index d8e822c2576c3d..d42e10dc26098d 100644
--- a/.github/workflows/end2end-test.yml
+++ b/.github/workflows/end2end-test.yml
@@ -38,7 +38,7 @@ jobs:
             - name: Npm install and build
               run: |
                   npm ci
-                  FORCE_REDUCED_MOTION=true npm run build
+                  npm run build
 
             - name: Install WordPress
               run: |
diff --git a/packages/compose/src/hooks/use-reduced-motion/index.js b/packages/compose/src/hooks/use-reduced-motion/index.js
index 8b2224c868beb9..0fda4f80066b1e 100644
--- a/packages/compose/src/hooks/use-reduced-motion/index.js
+++ b/packages/compose/src/hooks/use-reduced-motion/index.js
@@ -3,23 +3,12 @@
  */
 import useMediaQuery from '../use-media-query';
 
-/**
- * Whether or not the user agent is Internet Explorer.
- *
- * @type {boolean}
- */
-const IS_IE =
-	typeof window !== 'undefined' &&
-	window.navigator.userAgent.indexOf( 'Trident' ) >= 0;
-
 /**
  * Hook returning whether the user has a preference for reduced motion.
  *
  * @return {boolean} Reduced motion preference value.
  */
-const useReducedMotion =
-	process.env.FORCE_REDUCED_MOTION || IS_IE
-		? () => true
-		: () => useMediaQuery( '(prefers-reduced-motion: reduce)' );
+const useReducedMotion = () =>
+	useMediaQuery( '(prefers-reduced-motion: reduce)' );
 
 export default useReducedMotion;
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
index 80075cb1ad6c5d..98ecc8a031a227 100644
--- a/packages/e2e-tests/CHANGELOG.md
+++ b/packages/e2e-tests/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Emulate `prefers-reduced-motion: reduce` [#34132](https://github.com/WordPress/gutenberg/pull/34132).
+
 ## 2.4.0 (2021-07-29)
 
 ### New Features
diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js
index 33388eb989ab67..c7c3fe750c7c29 100644
--- a/packages/e2e-tests/config/setup-test-framework.js
+++ b/packages/e2e-tests/config/setup-test-framework.js
@@ -240,6 +240,9 @@ beforeAll( async () => {
 	await trashAllPosts( 'wp_block' );
 	await setupBrowser();
 	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
+	await page.emulateMediaFeatures( [
+		{ name: 'prefers-reduced-motion', value: 'reduce' },
+	] );
 } );
 
 afterEach( async () => {
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
index 1a8094e9e1f00d..728541cead9e19 100644
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -56,23 +56,10 @@ describe( 'Widgets screen', () => {
 	beforeAll( async () => {
 		// TODO: Ideally we can bundle our test theme directly in the repo.
 		await activateTheme( 'twentytwenty' );
-		// Reduced motion is needed to immediately show and dismiss the snackbars.
-		await page.emulateMediaFeatures( [
-			{
-				name: 'prefers-reduced-motion',
-				value: 'reduce',
-			},
-		] );
 		await deleteAllWidgets();
 	} );
 
 	afterAll( async () => {
-		await page.emulateMediaFeatures( [
-			{
-				name: 'prefers-reduced-motion',
-				value: 'no-preference',
-			},
-		] );
 		await activateTheme( 'twentytwentyone' );
 	} );
 
diff --git a/tools/webpack/shared.js b/tools/webpack/shared.js
index f365a70d08a442..e16b44b7d491da 100644
--- a/tools/webpack/shared.js
+++ b/tools/webpack/shared.js
@@ -71,9 +71,6 @@ const plugins = [
 		'process.env.GUTENBERG_PHASE': JSON.stringify(
 			parseInt( process.env.npm_package_config_GUTENBERG_PHASE, 10 ) || 1
 		),
-		'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
-			process.env.FORCE_REDUCED_MOTION
-		),
 	} ),
 	new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
 	mode === 'production' && new ReadableJsAssetsWebpackPlugin(),
diff --git a/typings/gutenberg-env/index.d.ts b/typings/gutenberg-env/index.d.ts
index 0d4d4e47028daf..7fe6d587446f59 100644
--- a/typings/gutenberg-env/index.d.ts
+++ b/typings/gutenberg-env/index.d.ts
@@ -1,6 +1,5 @@
 interface Environment {
 	NODE_ENV: unknown;
-	FORCE_REDUCED_MOTION: boolean | undefined;
 }
 interface Process {
 	env: Environment;