Fix flaky CTA test (#3057)

tests/e2e/specs/stories-editor/animations.js

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, clickButton, saveDraft } from '@wordpress/e2e-test-utils';
+import { createNewPost, saveDraft } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
-import { activateExperience, deactivateExperience, insertBlock, selectBlockByClassName, openPreviewPage } from '../../utils';
+import { activateExperience, clickButton, deactivateExperience, insertBlock, selectBlockByClassName, openPreviewPage } from '../../utils';
 
 describe( 'Story Animations', () => {
 	beforeAll( async () => {

tests/e2e/specs/stories-editor/code-editor.js

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, switchEditorModeTo } from '@wordpress/e2e-test-utils';
+import { createNewPost } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
-import { activateExperience, deactivateExperience } from '../../utils';
+import { activateExperience, deactivateExperience, switchEditorModeTo } from '../../utils';
 
 describe( 'Code Editor', () => {
 	beforeAll( async () => {

tests/e2e/specs/stories-editor/cta.js

@@ -4,15 +4,16 @@
 import {
 	visitAdminPage,
 	createNewPost,
-	clickButton,
 	getAllBlocks,
+	selectBlockByClientId,
 } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
 import {
 	activateExperience,
+	clickButton,
 	clickButtonByLabel,
 	goToPreviousPage,
 	deactivateExperience,
@@ -47,9 +48,7 @@ describe( 'Stories Editor Screen', () => {
 		expect( nodes ).toHaveLength( 1 );
 	} );
 
-	// Disable reason: Test is flaky in headless mode - needs to be investigated.
-	// eslint-disable-next-line jest/no-disabled-tests
-	it.skip( 'should display validation error when CTA block is on the first Page', async () => {
+	it( 'should display validation error when CTA block is on the first Page', async () => {
 		await createNewPost( { postType: 'amp_story' } );
 
 		const firstPageClientId = ( await getAllBlocks() )[ 0 ].clientId;
@@ -60,6 +59,7 @@ describe( 'Stories Editor Screen', () => {
 		await goToPreviousPage();
 
 		await page.waitForSelector( `#block-${ firstPageClientId }.amp-page-active` );
+		await selectBlockByClientId( firstPageClientId );
 
 		await clickButtonByLabel( 'More options' );
 		await clickButton( 'Remove Block' );

tests/e2e/specs/stories-editor/featured-image-automatically-set.js

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { clickButton, createNewPost, getAllBlocks, selectBlockByClientId } from '@wordpress/e2e-test-utils';
+import { createNewPost, getAllBlocks, selectBlockByClientId } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
-import { activateExperience, deactivateExperience, insertBlock, uploadMedia } from '../../utils';
+import { activateExperience, clickButton, deactivateExperience, insertBlock, uploadMedia } from '../../utils';
 
 const FEATURED_IMAGE_NOTICE_TEXT = 'Selecting a featured image is required.';
 const LARGE_IMAGE = 'large-image-36521.jpg';

tests/e2e/specs/stories-editor/page.js

@@ -1,14 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, saveDraft, clickButton, selectBlockByClientId, getAllBlocks } from '@wordpress/e2e-test-utils';
+import { createNewPost, saveDraft, selectBlockByClientId, getAllBlocks } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
 import {
 	activateExperience,
 	deactivateExperience,
+	clickButton,
 	clickButtonByLabel,
 	getSidebarPanelToggleByTitle,
 	uploadMedia,

tests/e2e/utils/click-button.js

@@ -0,0 +1,13 @@
+/**
+ * Clicks a button based on the text on the button.
+ *
+ * This is almost a copy of the upstream util, however, it uses page.evaluate for clicking since it seems to work more reliably.
+ *
+ * @param {string} buttonText The text that appears on the button to click.
+ */
+export async function clickButton( buttonText ) {
+	const button = await page.waitForXPath( `//button[contains(text(), '${ buttonText }')]` );
+	await page.evaluate( ( btn ) => {
+		btn.click();
+	}, button );
+}

tests/e2e/utils/index.js

@@ -2,6 +2,7 @@ export { activatePlugin } from './activate-plugin';
 export { deactivatePlugin } from './deactivate-plugin';
 export { activateExperience } from './activate-experience';
 export { deactivateExperience } from './deactivate-experience';
+export { clickButton } from './click-button';
 export { clickButtonByLabel } from './click-button-by-label';
 export { getSidebarPanelToggleByTitle } from './get-sidebar-panel-toggle-by-title';
 export { insertBlock } from './insert-block';
@@ -10,6 +11,7 @@ export { openPreviewPage } from './open-preview-page';
 export { openTemplateInserter } from './open-template-inserter';
 export { searchForBlock } from './search-for-block';
 export { selectBlockByClassName } from './select-block-by-classname';
+export { switchEditorModeTo } from './switch-editor-mode-to';
 export { uploadMedia } from './upload-media';
 export { getBlocksOnPage } from './get-blocks-on-page';
 export { goToPreviousPage } from './go-to-previous-page';

tests/e2e/utils/switch-editor-mode-to.js

@@ -0,0 +1,22 @@
+/**
+ * Switches editor mode.
+ *
+ * This is almost a copy from upstream switchEditorModeTo util, however, it uses page.evaluate for clicking
+ * since that seems to work more reliably.
+ *
+ * @param {string} mode String editor mode.
+ */
+export async function switchEditorModeTo( mode ) {
+	const selector = '.edit-post-more-menu [aria-label="More tools & options"]';
+	await page.waitForSelector( selector );
+	await page.evaluate( ( sel ) => {
+		document.querySelector( sel ).click();
+	}, selector );
+	const [ button ] = await page.$x(
+		`//button[contains(text(), '${ mode } Editor')]`
+	);
+
+	await page.evaluate( ( btn ) => {
+		btn.click( 'button' );
+	}, button );
+}