Update E2E tests for Twenty Twenty theme (#17566)

* Update 'Heading › it should correctly apply named colors' test for Twenty Twenty

* Update 'TypeWriter' tests for Twenty Twenty

* Update 'Font Size Picker › should apply a named font size using the font size input' test for Twenty Twenty

* Update 'Preview with Custom Fields enabled › displays edits to the post title and content in the preview' test for Twenty Twenty

* Fix 'Managing reusable blocks › Should import reusable blocks' test

* TypeWriter E2E tests: Use <= instead of <

packages/e2e-tests/specs/blocks/__snapshots__/heading.test.js.snap

@@ -19,8 +19,8 @@ exports[`Heading it should correctly apply custom colors 1`] = `
 `;
 
 exports[`Heading it should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"textColor\\":\\"white\\"} -->
-<h2 class=\\"has-white-color\\">Heading</h2>
+"<!-- wp:heading {\\"textColor\\":\\"accent\\"} -->
+<h2 class=\\"has-accent-color\\">Heading</h2>
 <!-- /wp:heading -->"
 `;
 

packages/e2e-tests/specs/blocks/heading.test.js

@@ -77,11 +77,11 @@ describe( 'Heading', () => {
 		const [ colorPanelToggle ] = await page.$x( COLOR_PANEL_TOGGLE_X_SELECTOR );
 		await colorPanelToggle.click();
 
-		const whiteColorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: White']`;
-		const [ whiteColorButton ] = await page.$x( whiteColorButtonSelector );
-		await whiteColorButton.click();
+		const accentColorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: Accent Color']`;
+		const [ accentColorButton ] = await page.$x( accentColorButtonSelector );
+		await accentColorButton.click();
 		await page.click( '.wp-block-heading' );
-		await page.waitForXPath( `${ whiteColorButtonSelector }[@aria-pressed='true']` );
+		await page.waitForXPath( `${ accentColorButtonSelector }[@aria-pressed='true']` );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );

packages/e2e-tests/specs/font-size-picker.test.js

@@ -31,7 +31,7 @@ describe( 'Font Size Picker', () => {
 
 		await page.click( '.blocks-font-size .components-range-control__number' );
 		// This should be the "small" font-size of the current theme.
-		await page.keyboard.type( '19.5' );
+		await page.keyboard.type( '16' );
 
 		// Ensure content matches snapshot.
 		const content = await getEditedPostContent();

packages/e2e-tests/specs/manage-reusable-blocks.test.js

@@ -16,7 +16,7 @@ describe( 'Managing reusable blocks', () => {
 	 * @return {Promise} Promise resolving to number of post list entries.
 	 */
 	async function getNumberOfEntries() {
-		return page.evaluate( () => document.querySelectorAll( '.entry' ).length );
+		return page.evaluate( () => document.querySelectorAll( '.hentry' ).length );
 	}
 
 	beforeAll( async () => {

packages/e2e-tests/specs/preview.test.js

@@ -239,11 +239,11 @@ describe( 'Preview with Custom Fields enabled', () => {
 		// Return to editor and modify the title and content.
 		await editorPage.bringToFront();
 		await editorPage.click( '.editor-post-title__input' );
-		await pressKeyWithModifier( 'shift', 'Home' );
+		await pressKeyWithModifier( 'primary', 'a' );
 		await editorPage.keyboard.press( 'Delete' );
 		await editorPage.keyboard.type( 'title 2' );
 		await editorPage.keyboard.press( 'Tab' );
-		await pressKeyWithModifier( 'shift', 'Home' );
+		await pressKeyWithModifier( 'primary', 'a' );
 		await editorPage.keyboard.press( 'Delete' );
 		await editorPage.keyboard.type( 'content 2' );
 

packages/e2e-tests/specs/typewriter.test.js

@@ -63,7 +63,7 @@ describe( 'TypeWriter', () => {
 
 		const positionAfterArrowUp = await getCaretPosition();
 
-		expect( positionAfterArrowUp ).toBeLessThan( newPosition );
+		expect( positionAfterArrowUp ).toBeLessThanOrEqual( newPosition );
 
 		// Should be scrolled to new position.
 		await page.keyboard.press( 'Enter' );
@@ -75,6 +75,13 @@ describe( 'TypeWriter', () => {
 		// Create first block.
 		await page.keyboard.press( 'Enter' );
 
+		// Create blocks until there is a scrollable container.
+		while ( await page.evaluate( () =>
+			! wp.dom.getScrollContainer( document.activeElement )
+		) ) {
+			await page.keyboard.press( 'Enter' );
+		}
+
 		await page.evaluate( () =>
 			wp.dom.getScrollContainer( document.activeElement ).scrollTop = 1
 		);
@@ -107,6 +114,13 @@ describe( 'TypeWriter', () => {
 		// Create first block.
 		await page.keyboard.press( 'Enter' );
 
+		// Create blocks until there is a scrollable container.
+		while ( await page.evaluate( () =>
+			! wp.dom.getScrollContainer( document.activeElement )
+		) ) {
+			await page.keyboard.press( 'Enter' );
+		}
+
 		let count = 0;
 
 		// Create blocks until the the typewriter effect kicks in.
@@ -131,7 +145,7 @@ describe( 'TypeWriter', () => {
 
 		const newBottomPosition = await getCaretPosition();
 
-		expect( newBottomPosition ).toBeLessThan( bottomPostition );
+		expect( newBottomPosition ).toBeLessThanOrEqual( bottomPostition );
 
 		// Should maintain new caret position.
 		await page.keyboard.press( 'Enter' );