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

Author: youknowriad

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

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(

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

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

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')]`
 	);

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 }"]` );
 }

packages/e2e-test-utils/src/wait-for-animation.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 () => {

packages/e2e-tests/config/setup-test-framework.js

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

packages/e2e-tests/plugins/disable-animations.php

@@ -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();
 };