Add a plugin to disable the CSS animation for more stable e2e tests (#…

…13769)
WordPress · Mar 6, 2019 · 696d07c · 696d07c
1 parent ffdf9d5
commit 696d07c
Show file tree

Hide file tree

Showing 19 changed files with 24 additions and 83 deletions.
diff --git a/packages/e2e-test-utils/src/activate-plugin.js b/packages/e2e-test-utils/src/activate-plugin.js
@@ -13,6 +13,10 @@ import { visitAdminPage } from './visit-admin-page';
 export async function activatePlugin( slug ) {
  await switchUserToAdmin();
  await visitAdminPage( 'plugins.php' );
+ const disableLink = await page.$( `tr[data-slug="${ slug }"] .deactivate a` );
+ if ( disableLink ) {
+ return;
+ }
  await page.click( `tr[data-slug="${ slug }"] .activate a` );
  await page.waitForSelector( `tr[data-slug="${ slug }"] .deactivate a` );
  await switchUserToTest();

diff --git a/packages/e2e-test-utils/src/click-on-more-menu-item.js b/packages/e2e-test-utils/src/click-on-more-menu-item.js
@@ -3,11 +3,6 @@
  */
 import { first } from 'lodash';
 
-/**
- * Internal dependencies
- */
-import { waitForAnimation } from './wait-for-animation';
-
 /**
  * Clicks on More Menu item, searches for the button with the text provided and clicks it.
  *
@@ -17,7 +12,6 @@ export async function clickOnMoreMenuItem( buttonLabel ) {
  await expect( page ).toClick(
  '.edit-post-more-menu [aria-label="Show more tools & options"]'
  );
- await waitForAnimation();
  const moreMenuContainerSelector =
  '//*[contains(concat(" ", @class, " "), " edit-post-more-menu__content ")]';
  let elementToClick = first( await page.$x(

diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js
@@ -40,7 +40,6 @@ export { toggleScreenOption } from './toggle-screen-option';
 export { transformBlockTo } from './transform-block-to';
 export { uninstallPlugin } from './uninstall-plugin';
 export { visitAdminPage } from './visit-admin-page';
-export { waitForAnimation } from './wait-for-animation';
 export { waitForWindowDimensions } from './wait-for-window-dimensions';
 
 export * from './mocks';
diff --git a/packages/e2e-test-utils/src/search-for-block.js b/packages/e2e-test-utils/src/search-for-block.js
@@ -1,16 +1,10 @@
-/**
- * Internal dependencies
- */
-import { waitForAnimation } from './wait-for-animation';
-
 /**
  * Search for block in the global inserter
  *
  * @param {string} searchTerm The text to search the inserter for.
  */
 export async function searchForBlock( searchTerm ) {
  await page.click( '.edit-post-header [aria-label="Add block"]' );
- await waitForAnimation();
  // Waiting here is necessary because sometimes the inserter takes more time to
  // render than Puppeteer takes to complete the 'click' action
  await page.waitForSelector( '.editor-inserter__menu' );

diff --git a/packages/e2e-test-utils/src/switch-editor-mode-to.js b/packages/e2e-test-utils/src/switch-editor-mode-to.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { waitForAnimation } from './wait-for-animation';
-
 /**
  * Switches editor mode.
  *
@@ -12,7 +7,6 @@ export async function switchEditorModeTo( mode ) {
  await page.click(
  '.edit-post-more-menu [aria-label="Show more tools & options"]'
  );
- await waitForAnimation();
  const [ button ] = await page.$x(
  `//button[contains(text(), '${ mode } Editor')]`
  );

diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { waitForAnimation } from './wait-for-animation';
-
 /**
  * Converts editor's block type.
  *
@@ -12,7 +7,6 @@ export async function transformBlockTo( name ) {
  await page.mouse.move( 200, 300, { steps: 10 } );
  await page.mouse.move( 250, 350, { steps: 10 } );
  await page.click( '.editor-block-switcher__toggle' );
- await waitForAnimation();
  await page.waitForSelector( `.editor-block-types-list__item[aria-label="${ name }"]` );
  await page.click( `.editor-block-types-list__item[aria-label="${ name }"]` );
 }
diff --git a/packages/e2e-test-utils/src/wait-for-animation.js b/packages/e2e-test-utils/src/wait-for-animation.js
diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js
@@ -13,6 +13,7 @@ import {
  enablePageDialogAccept,
  setBrowserViewport,
  visitAdminPage,
+ activatePlugin,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -154,6 +155,7 @@ beforeAll( async () => {
 
  await trashExistingPosts();
  await setupBrowser();
+ await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
 } );
 
 afterEach( async () => {

diff --git a/packages/e2e-tests/plugins/disable-animations.php b/packages/e2e-tests/plugins/disable-animations.php
@@ -0,0 +1,18 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Disables the CSS animations
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-disable-animations
+ */
+
+/**
+ * Enqueue CSS stylesheet disabling animations.
+ */
+function enqueue_disable_animations_stylesheet() {
+ $custom_css = '* { animation-duration: 1ms !important; }';
+ wp_add_inline_style( 'wp-components', $custom_css );
+}
+
+add_action( 'enqueue_block_editor_assets', 'enqueue_disable_animations_stylesheet' );
diff --git a/packages/e2e-tests/specs/block-deletion.test.js b/packages/e2e-tests/specs/block-deletion.test.js
@@ -6,7 +6,6 @@ import {
  getEditedPostContent,
  createNewPost,
  pressKeyWithModifier,
- waitForAnimation,
 } from '@wordpress/e2e-test-utils';
 
 const addThreeParagraphsToNewPost = async () => {
@@ -22,7 +21,6 @@ const addThreeParagraphsToNewPost = async () => {
 
 const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
  await expect( page ).toClick( '.editor-block-settings-menu__toggle' );
- await waitForAnimation();
  const itemButton = ( await page.$x( `//*[contains(@class, "editor-block-settings-menu__popover")]//button[contains(text(), '${ buttonLabel }')]` ) )[ 0 ];
  await itemButton.click();
 };

diff --git a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js
@@ -7,12 +7,10 @@ import {
  getEditedPostContent,
  pressKeyTimes,
  pressKeyWithModifier,
- waitForAnimation,
 } from '@wordpress/e2e-test-utils';
 
 async function openBlockNavigator() {
  await pressKeyWithModifier( 'access', 'o' );
- await waitForAnimation();
 }
 
 describe( 'Navigating the block hierarchy', () => {
@@ -28,7 +26,6 @@ describe( 'Navigating the block hierarchy', () => {
 
  // Navigate to the columns blocks.
  await page.click( '[aria-label="Block Navigation"]' );
- await waitForAnimation();
  const columnsBlockMenuItem = ( await page.$x( "//button[contains(@class,'editor-block-navigation__item') and contains(text(), 'Columns')]" ) )[ 0 ];
  await columnsBlockMenuItem.click();
 

diff --git a/packages/e2e-tests/specs/editor-modes.test.js b/packages/e2e-tests/specs/editor-modes.test.js
@@ -5,7 +5,6 @@ import {
  clickBlockAppender,
  createNewPost,
  switchEditorModeTo,
- waitForAnimation,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
@@ -26,7 +25,6 @@ describe( 'Editing modes (visual/HTML)', () => {
  // Change editing mode from "Visual" to "HTML".
  await page.waitForSelector( 'button[aria-label="More options"]' );
  await page.click( 'button[aria-label="More options"]' );
- await waitForAnimation();
  let changeModeButton = await page.waitForXPath( '//button[text()="Edit as HTML"]' );
  await changeModeButton.click();
 
@@ -40,7 +38,6 @@ describe( 'Editing modes (visual/HTML)', () => {
  // Change editing mode from "HTML" back to "Visual".
  await page.waitForSelector( 'button[aria-label="More options"]' );
  await page.click( 'button[aria-label="More options"]' );
- await waitForAnimation();
  changeModeButton = await page.waitForXPath( '//button[text()="Edit visually"]' );
  await changeModeButton.click();
 
@@ -56,7 +53,6 @@ describe( 'Editing modes (visual/HTML)', () => {
  // Change editing mode from "Visual" to "HTML".
  await page.waitForSelector( 'button[aria-label="More options"]' );
  await page.click( 'button[aria-label="More options"]' );
- await waitForAnimation();
  const changeModeButton = await page.waitForXPath( '//button[text()="Edit as HTML"]' );
  await changeModeButton.click();
 
@@ -73,7 +69,6 @@ describe( 'Editing modes (visual/HTML)', () => {
  // Change editing mode from "Visual" to "HTML".
  await page.waitForSelector( 'button[aria-label="More options"]' );
  await page.click( 'button[aria-label="More options"]' );
- await waitForAnimation();
  const changeModeButton = await page.waitForXPath( '//button[text()="Edit as HTML"]' );
  await changeModeButton.click();
 

diff --git a/packages/e2e-tests/specs/font-size-picker.test.js b/packages/e2e-tests/specs/font-size-picker.test.js
@@ -6,7 +6,6 @@ import {
  getEditedPostContent,
  createNewPost,
  pressKeyTimes,
- waitForAnimation,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Font Size Picker', () => {
@@ -19,7 +18,6 @@ describe( 'Font Size Picker', () => {
  await clickBlockAppender();
  await page.keyboard.type( 'Paragraph to be made "large"' );
  await page.click( '.components-font-size-picker__selector' );
- await waitForAnimation();
  const changeSizeButton = await page.waitForSelector( '.components-button.is-font-large' );
  await changeSizeButton.click();
 

diff --git a/packages/e2e-tests/specs/invalid-block.test.js b/packages/e2e-tests/specs/invalid-block.test.js
@@ -4,7 +4,6 @@
 import {
  createNewPost,
  clickBlockAppender,
- waitForAnimation,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'invalid blocks', () => {
@@ -20,7 +19,6 @@ describe( 'invalid blocks', () => {
  // Click the 'more options'
  await page.mouse.move( 200, 300, { steps: 10 } );
  await page.click( 'button[aria-label="More options"]' );
- await waitForAnimation();
 
  // Change to HTML mode and close the options
  const changeModeButton = await page.waitForXPath( '//button[text()="Edit as HTML"]' );