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

…13769)
WordPress · Mar 6, 2019 · 9dc5202 · 9dc5202
1 parent 978e8f7
commit 9dc5202
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"]' );