Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Puppeteer API to simulate reduced motion in e2e tests #18453

Closed
wants to merge 1 commit into from
+16 −33
Closed

Use Puppeteer API to simulate reduced motion in e2e tests #18453

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
@@ -156,49 +156,49 @@ jobs:
- npm run test-php && npm run test-unit-php-multisite

- name: E2E tests (Admin) (1/4)
env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 0' < ~/.jest-e2e-tests )

- name: E2E tests (Admin) (2/4)
env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 1' < ~/.jest-e2e-tests )

- name: E2E tests (Admin) (3/4)
env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 2' < ~/.jest-e2e-tests )

- name: E2E tests (Admin) (4/4)
env: FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 3' < ~/.jest-e2e-tests )

- name: E2E tests (Author) (1/4)
env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: E2E_ROLE=author PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 0' < ~/.jest-e2e-tests )

- name: E2E tests (Author) (2/4)
env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: E2E_ROLE=author PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 1' < ~/.jest-e2e-tests )

- name: E2E tests (Author) (3/4)
env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: E2E_ROLE=author PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 2' < ~/.jest-e2e-tests )

- name: E2E tests (Author) (4/4)
env: E2E_ROLE=author FORCE_REDUCED_MOTION=true PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
env: E2E_ROLE=author PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
script:
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
- $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 3' < ~/.jest-e2e-tests )
7 changes: 3 additions & 4 deletions packages/compose/src/hooks/use-reduced-motion/index.js
View file
Original file line number Diff line number Diff line change
@@ -17,9 +17,8 @@ const IS_IE =
*
* @return {boolean} Reduced motion preference value.
*/
const useReducedMotion =
process.env.FORCE_REDUCED_MOTION || IS_IE ?
() => true :
() => useMediaQuery( '(prefers-reduced-motion: reduce)' );
const useReducedMotion = IS_IE ?
() => true :
() => useMediaQuery( '(prefers-reduced-motion: reduce)' );

export default useReducedMotion;
2 changes: 2 additions & 0 deletions packages/e2e-test-utils/src/create-new-post.js
View file
Original file line number Diff line number Diff line change
@@ -39,4 +39,6 @@ export async function createNewPost( {

await page.reload();
}

await page.emulateMediaFeatures( [ { name: 'prefers-reduced-motion', value: 'reduce' } ] );
}
2 changes: 0 additions & 2 deletions packages/e2e-tests/config/setup-test-framework.js
View file
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@ import { get } from 'lodash';
* WordPress dependencies
*/
import {
activatePlugin,
clearLocalStorage,
enablePageDialogAccept,
isOfflineMode,
@@ -210,7 +209,6 @@ beforeAll( async () => {

await trashExistingPosts();
await setupBrowser();
await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
} );

afterEach( async () => {
18 changes: 0 additions & 18 deletions packages/e2e-tests/plugins/disable-animations.php
View file

This file was deleted.

1 change: 1 addition & 0 deletions packages/e2e-tests/specs/editor/various/preview.test.js
View file
Original file line number Diff line number Diff line change
@@ -207,6 +207,7 @@ describe( 'Preview with Custom Fields enabled', () => {
beforeEach( async () => {
await createNewPost();
await toggleCustomFieldsOption( true );
await page.emulateMediaFeatures( [ { name: 'prefers-reduced-motion', value: 'reduce' } ] );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it only take effect in specific test?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toggleCustomFieldsOption called before reloads the page. My thinking was maybe we need this on each page load, but Travis doesn't not agree with me anyway.

I'm not sure yet why this PR is not working as intended.

} );

afterEach( async () => {
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/editor/various/undo.test.js
View file
Original file line number Diff line number Diff line change
@@ -330,6 +330,7 @@ describe( 'undo', () => {
await page.keyboard.type( 'original' );
await saveDraft();
await page.reload();
await page.emulateMediaFeatures( [ { name: 'prefers-reduced-motion', value: 'reduce' } ] ); s;

// Issue is demonstrated by forcing state merges (multiple inputs) on
// an existing text after a fresh reload.
1 change: 1 addition & 0 deletions packages/e2e-tests/specs/performance/performance.test.js
View file
Original file line number Diff line number Diff line change
@@ -53,6 +53,7 @@ describe( 'Performance', () => {
while ( i-- ) {
startTime = new Date();
await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } );
await page.emulateMediaFeatures( [ { name: 'prefers-reduced-motion', value: 'reduce' } ] );
}

await insertBlock( 'Paragraph' );
1 change: 0 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
@@ -58,7 +58,6 @@ module.exports = {
new DefinePlugin( {
// Inject the `GUTENBERG_PHASE` global, used for feature flagging.
'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 CustomTemplatedPathPlugin( {
basename( path, data ) {