Emulate reduced-motion in e2e tests (#34132)

Author: kevin940726

.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: |

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;

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

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 () => {

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' );
 	} );
 

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(),

typings/gutenberg-env/index.d.ts

@@ -1,6 +1,5 @@
 interface Environment {
 	NODE_ENV: unknown;
-	FORCE_REDUCED_MOTION: boolean | undefined;
 }
 interface Process {
 	env: Environment;