diff --git a/packages/e2e-test-utils/src/activate-plugin.js b/packages/e2e-test-utils/src/activate-plugin.js index ce52f380f266b..1cfe3786f4cdb 100644 --- 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 index 9484a434a8f06..0465441ec6496 100644 --- 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 index 58b388e38c361..5534c981f46a9 100644 --- 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 index f4bd5cc92a802..e96b92839221a 100644 --- a/packages/e2e-test-utils/src/search-for-block.js +++ b/packages/e2e-test-utils/src/search-for-block.js @@ -1,8 +1,3 @@ -/** - * Internal dependencies - */ -import { waitForAnimation } from './wait-for-animation'; - /** * Search for block in the global inserter * @@ -10,7 +5,6 @@ import { waitForAnimation } from './wait-for-animation'; */ 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 index 78225e18f422d..6978b2ee81247 100644 --- 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 index 8fd2db2182521..902d98d35c254 100644 --- 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 deleted file mode 100644 index 63ff4499dff46..0000000000000 --- a/packages/e2e-test-utils/src/wait-for-animation.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Waits for the small delay until the animation finishes. - * - * @param {number} delay Animation Delay. - * - * @return {Promise} Promise resolving after a small delay. - */ -export const waitForAnimation = async ( delay = 100 ) => { - return new Promise( ( resolve ) => setTimeout( resolve, delay ) ); -}; diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js index 20d96e29fb570..5a28430dda2fb 100644 --- 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 new file mode 100644 index 0000000000000..f69e743d430d8 --- /dev/null +++ b/packages/e2e-tests/plugins/disable-animations.php @@ -0,0 +1,18 @@ + { @@ -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 index c22a572399f11..4745768f812c7 100644 --- 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 index 21e746f648eb0..c8572f5526103 100644 --- 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 index 28f9c39cd967c..35c4104207381 100644 --- 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 index c54ea208d8891..a068781ef42ac 100644 --- 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"]' ); diff --git a/packages/e2e-tests/specs/links.test.js b/packages/e2e-tests/specs/links.test.js index 9b35e1aec4778..03e8b6073ac22 100644 --- a/packages/e2e-tests/specs/links.test.js +++ b/packages/e2e-tests/specs/links.test.js @@ -8,7 +8,6 @@ import { pressKeyWithModifier, pressKeyTimes, insertBlock, - waitForAnimation, } from '@wordpress/e2e-test-utils'; /** @@ -41,7 +40,6 @@ describe( 'Links', () => { // Click on the Link button await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -66,7 +64,6 @@ describe( 'Links', () => { // Press Cmd+K to insert a link await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -91,7 +88,6 @@ describe( 'Links', () => { // Press Cmd+K to insert a link await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -134,7 +130,6 @@ describe( 'Links', () => { // Click on the Link button await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -156,7 +151,6 @@ describe( 'Links', () => { // Click on the Link button await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -213,7 +207,6 @@ describe( 'Links', () => { await clickBlockAppender(); await page.keyboard.type( 'Text' ); await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); // Typing "left" should not close the dialog await page.keyboard.press( 'ArrowLeft' ); @@ -236,7 +229,6 @@ describe( 'Links', () => { await moveMouse(); await page.waitForSelector( 'button[aria-label="Link"]' ); await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); // Typing "left" should not close the dialog await page.keyboard.press( 'ArrowLeft' ); @@ -293,14 +285,12 @@ describe( 'Links', () => { await page.keyboard.type( 'This is Gutenberg' ); await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); await page.keyboard.type( titleText ); await page.waitForSelector( '.editor-url-input__suggestion' ); - await waitForAnimation(); const autocompleteSuggestions = await page.$x( `//*[contains(@class, "editor-url-input__suggestion")]//button[contains(text(), '${ titleText }')]` ); // Expect there to be some autocomplete suggestions. @@ -337,14 +327,12 @@ describe( 'Links', () => { // Press Cmd+K to insert a link await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); await page.keyboard.type( titleText ); await page.waitForSelector( '.editor-url-input__suggestion' ); - await waitForAnimation(); const autocompleteSuggestions = await page.$x( `//*[contains(@class, "editor-url-input__suggestion")]//button[contains(text(), '${ titleText }')]` ); // Expect there to be some autocomplete suggestions. @@ -375,7 +363,6 @@ describe( 'Links', () => { // Press Cmd+K to insert a link await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -384,7 +371,6 @@ describe( 'Links', () => { // Trigger the autocomplete suggestion list and select the first suggestion. await page.keyboard.type( titleText ); await page.waitForSelector( '.editor-url-input__suggestion' ); - await waitForAnimation(); await page.keyboard.press( 'ArrowDown' ); // Expect the the escape key to dismiss the popover when the autocomplete suggestion list is open. @@ -393,7 +379,6 @@ describe( 'Links', () => { // Press Cmd+K to insert a link await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -427,7 +412,6 @@ describe( 'Links', () => { await page.keyboard.type( 'This is Gutenberg' ); await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); await waitForAutoFocus(); await page.keyboard.type( URL ); await page.keyboard.press( 'Enter' ); @@ -445,7 +429,6 @@ describe( 'Links', () => { // Press Cmd+K to edit the link and the url-input should become // focused with the value previously inserted. await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); await waitForAutoFocus(); const activeElementParentClasses = await page.evaluate( () => Object.values( document.activeElement.parentElement.classList ) ); expect( activeElementParentClasses ).toContain( 'editor-url-input' ); @@ -458,7 +441,6 @@ describe( 'Links', () => { await page.keyboard.type( 'This is Gutenberg' ); await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); await pressKeyWithModifier( 'primary', 'K' ); - await waitForAnimation(); await waitForAutoFocus(); await page.keyboard.type( 'http://#test.com' ); await page.keyboard.press( 'Enter' ); @@ -482,8 +464,6 @@ describe( 'Links', () => { // Click on the Link button await page.click( 'button[aria-label="Link"]' ); - await waitForAnimation(); - // Wait for the URL field to auto-focus await waitForAutoFocus(); @@ -510,7 +490,6 @@ describe( 'Links', () => { // Select "WordPress". await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); await pressKeyWithModifier( 'primary', 'k' ); - await waitForAnimation(); await waitForAutoFocus(); await page.keyboard.type( 'w.org' ); // Navigate to the settings toggle. diff --git a/packages/e2e-tests/specs/nux.test.js b/packages/e2e-tests/specs/nux.test.js index 4d141c9dcec8b..d8a64be089eca 100644 --- a/packages/e2e-tests/specs/nux.test.js +++ b/packages/e2e-tests/specs/nux.test.js @@ -7,7 +7,6 @@ import { createNewPost, saveDraft, toggleScreenOption, - waitForAnimation, } from '@wordpress/e2e-test-utils'; describe( 'New User Experience (NUX)', () => { @@ -18,7 +17,6 @@ describe( 'New User Experience (NUX)', () => { for ( let i = 1; i < numberOfTips; i++ ) { await page.click( '.nux-dot-tip .components-button.is-link' ); - await waitForAnimation(); } return { numberOfTips, tips }; diff --git a/packages/e2e-tests/specs/plugins/annotations.test.js b/packages/e2e-tests/specs/plugins/annotations.test.js index c07555c618380..5fe99a352eec6 100644 --- a/packages/e2e-tests/specs/plugins/annotations.test.js +++ b/packages/e2e-tests/specs/plugins/annotations.test.js @@ -6,12 +6,10 @@ import { clickOnMoreMenuItem, createNewPost, deactivatePlugin, - waitForAnimation, } from '@wordpress/e2e-test-utils'; 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/plugins/container-blocks.test.js b/packages/e2e-tests/specs/plugins/container-blocks.test.js index 0e71003c9bcc9..2d32224bb3503 100644 --- a/packages/e2e-tests/specs/plugins/container-blocks.test.js +++ b/packages/e2e-tests/specs/plugins/container-blocks.test.js @@ -8,7 +8,6 @@ import { getEditedPostContent, insertBlock, switchEditorModeTo, - waitForAnimation, } from '@wordpress/e2e-test-utils'; describe( 'InnerBlocks Template Sync', () => { @@ -80,7 +79,6 @@ describe( 'Container block without paragraph support', () => { // Open the specific appender used when there's no paragraph support. await page.click( '.editor-inner-blocks .block-list-appender .block-list-appender__toggle' ); - await waitForAnimation(); // Insert an image block. await page.click( '.editor-inserter__results button[aria-label="Image"]' ); diff --git a/packages/e2e-tests/specs/reusable-blocks.test.js b/packages/e2e-tests/specs/reusable-blocks.test.js index bd21960e6adce..f1ef297f311ba 100644 --- a/packages/e2e-tests/specs/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/reusable-blocks.test.js @@ -7,7 +7,6 @@ import { pressKeyWithModifier, searchForBlock, getEditedPostContent, - waitForAnimation, } from '@wordpress/e2e-test-utils'; function waitForAndAcceptDialog() { @@ -42,7 +41,6 @@ describe( 'Reusable Blocks', () => { // Convert block to a reusable block await page.waitForSelector( 'button[aria-label="More options"]' ); await page.click( 'button[aria-label="More options"]' ); - await waitForAnimation(); const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' ); await convertButton.click(); @@ -90,7 +88,6 @@ describe( 'Reusable Blocks', () => { // Convert block to a reusable block await page.waitForSelector( 'button[aria-label="More options"]' ); await page.click( 'button[aria-label="More options"]' ); - await waitForAnimation(); const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' ); await convertButton.click(); @@ -168,7 +165,6 @@ describe( 'Reusable Blocks', () => { // Convert block to a regular block await page.click( 'button[aria-label="More options"]' ); - await waitForAnimation(); const convertButton = await page.waitForXPath( '//button[text()="Convert to Regular Block"]' ); @@ -192,7 +188,6 @@ describe( 'Reusable Blocks', () => { // Delete the block and accept the confirmation dialog await page.click( 'button[aria-label="More options"]' ); - await waitForAnimation(); const deleteButton = await page.waitForXPath( '//button[text()="Remove from Reusable Blocks"]' ); await Promise.all( [ waitForAndAcceptDialog(), deleteButton.click() ] ); @@ -234,7 +229,6 @@ describe( 'Reusable Blocks', () => { // Convert block to a reusable block await page.waitForSelector( 'button[aria-label="More options"]' ); await page.click( 'button[aria-label="More options"]' ); - await waitForAnimation(); const convertButton = await page.waitForXPath( '//button[text()="Add to Reusable Blocks"]' ); await convertButton.click(); @@ -276,7 +270,6 @@ describe( 'Reusable Blocks', () => { // Convert block to a regular block await page.click( 'button[aria-label="More options"]' ); - await waitForAnimation(); const convertButton = await page.waitForXPath( '//button[text()="Convert to Regular Block"]' );