@wordpress/e2e-tests 6.3.3 → 6.4.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.4.0 (2023-02-15)
+
 ## 6.3.0 (2023-02-01)
 
 ## 6.2.0 (2023-01-11)

package/config/setup-performance-test.js

@@ -19,9 +19,11 @@ const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT;
 // The Jest timeout is increased because these tests are a bit slow.
 jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
 
-async function setupBrowser() {
-	await clearLocalStorage();
+async function setupPage() {
 	await setBrowserViewport( 'large' );
+	await page.emulateMediaFeatures( [
+		{ name: 'prefers-reduced-motion', value: 'reduce' },
+	] );
 }
 
 // Before every test suite run, delete all content created by the test. This ensures
@@ -32,13 +34,18 @@ beforeAll( async () => {
 
 	await trashAllPosts();
 	await trashAllPosts( 'wp_block' );
-	await setupBrowser();
+	await clearLocalStorage();
+	await setupPage();
 	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
-	await page.emulateMediaFeatures( [
-		{ name: 'prefers-reduced-motion', value: 'reduce' },
-	] );
 } );
 
 afterEach( async () => {
-	await setupBrowser();
+	// Clear localStorage between tests so that the next test starts clean.
+	await clearLocalStorage();
+	// Close the previous page entirely and create a new page, so that the next test
+	// isn't affected by page unload work.
+	await page.close();
+	page = await browser.newPage();
+	// Set up testing config on new page.
+	await setupPage();
 } );

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "6.3.3",
+	"version": "6.4.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^9.3.2",
-		"@wordpress/jest-console": "^6.9.1",
-		"@wordpress/jest-puppeteer-axe": "^5.9.1",
-		"@wordpress/scripts": "^25.3.3",
-		"@wordpress/url": "^3.27.1",
+		"@wordpress/e2e-test-utils": "^9.4.0",
+		"@wordpress/jest-console": "^6.10.0",
+		"@wordpress/jest-puppeteer-axe": "^5.10.0",
+		"@wordpress/scripts": "^25.4.0",
+		"@wordpress/url": "^3.28.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
+	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
 }

package/specs/editor/various/links.test.js

@@ -8,6 +8,7 @@ import {
 	createNewPost,
 	pressKeyWithModifier,
 	showBlockToolbar,
+	pressKeyTimes,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Links', () => {
@@ -119,6 +120,10 @@ describe( 'Links', () => {
 		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
+		// Open settings.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Space' );
+
 		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
@@ -524,6 +529,10 @@ describe( 'Links', () => {
 		await waitForURLFieldAutoFocus();
 		await page.keyboard.type( 'w.org' );
 
+		// Toggle link settings open
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Space' );
+
 		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
@@ -532,10 +541,9 @@ describe( 'Links', () => {
 		// a changing value of the setting.
 		await page.waitForSelector( ':focus.components-form-toggle__input' );
 
-		// Close dialog. Expect that "Open in new tab" would have been applied
+		// Submit link. Expect that "Open in new tab" would have been applied
 		// immediately.
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
+		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for Gutenberg to finish the job.
@@ -596,8 +604,10 @@ describe( 'Links', () => {
 			// Press Cmd+K to insert a link.
 			await pressKeyWithModifier( 'primary', 'K' );
 
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
 
 			const textInput = await page
 				.waitForXPath(
@@ -624,11 +634,17 @@ describe( 'Links', () => {
 				'//button[contains(@aria-label, "Edit")]'
 			);
 			await editButton.click();
+
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
 
-			// Tabbing back should land us in the text input.
+			await page.keyboard.press( 'Tab' );
+
+			// Tabbing should land us in the text input.
 			const { isTextInput, textValue } = await page.evaluate( () => {
 				const el = document.activeElement;
 
@@ -685,7 +701,12 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
+
+			await page.keyboard.press( 'Tab' );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -715,9 +736,14 @@ describe( 'Links', () => {
 			await editButton.click();
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
 
-			// Tabbing back should land us in the text input.
+			await page.keyboard.press( 'Tab' );
+
+			// Tabbing should land us in the text input.
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
 			);
@@ -761,11 +787,13 @@ describe( 'Links', () => {
 			await editButton.click();
 			await waitForURLFieldAutoFocus();
 
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
+
 			// Move focus back to RichText for the underlying link.
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
+			await pressKeyTimes( 'Tab', 5 );
 
 			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
@@ -773,7 +801,7 @@ describe( 'Links', () => {
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 
 			// Move back to the text input.
-			await page.keyboard.press( 'Tab' );
+			await pressKeyTimes( 'Tab', 3 );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -971,8 +999,14 @@ describe( 'Links', () => {
 			await page.keyboard.press( 'Tab' );
 			await page.keyboard.press( 'Enter' );
 
+			await waitForURLFieldAutoFocus();
+
+			// Toggle link settings open
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Space' );
+
 			// Move to Link Text field.
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			await page.keyboard.press( 'Tab' );
 
 			// Change text to "z"
 			await page.keyboard.type( 'z' );

package/specs/editor/various/list-view.test.js

@@ -5,6 +5,7 @@ import {
 	createNewPost,
 	insertBlock,
 	getEditedPostContent,
+	isListViewOpen,
 	openListView,
 	pressKeyWithModifier,
 	pressKeyTimes,
@@ -327,4 +328,87 @@ describe( 'List view', () => {
 		);
 		await expect( listViewGroupBlockRight ).toHaveFocus();
 	} );
+
+	async function getActiveElementLabel() {
+		return page.evaluate(
+			() =>
+				document.activeElement.getAttribute( 'aria-label' ) ||
+				document.activeElement.textContent
+		);
+	}
+
+	// If list view sidebar is open and focus is not inside the sidebar, move focus to the sidebar when using the shortcut. If focus is inside the sidebar, shortcut should close the sidebar.
+	it( 'ensures the list view global shortcut works properly', async () => {
+		// Insert some blocks of different types.
+		await insertBlock( 'Image' );
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Paragraph text.' );
+
+		// Open list view sidebar.
+		await pressKeyWithModifier( 'access', 'o' );
+
+		// Navigate to the image block.
+		await page.keyboard.press( 'ArrowUp' );
+		// Check if image block link in the list view has focus by XPath selector.
+		const listViewImageBlock = await page.waitForXPath(
+			'//a[contains(., "Image")]'
+		);
+		await expect( listViewImageBlock ).toHaveFocus();
+		// Select the image block in the list view to move focus to it in the canvas.
+		await page.keyboard.press( 'Enter' );
+
+		// Check if image block upload button has focus by XPath selector.
+		const imageBlockUploadButton = await page.waitForXPath(
+			'//button[contains(text(), "Upload")]'
+		);
+		await expect( imageBlockUploadButton ).toHaveFocus();
+
+		// Since focus is now at the image block upload button in the canvas, pressing the list view shortcut should bring focus back to the image block in the list view.
+		await pressKeyWithModifier( 'access', 'o' );
+		await expect( listViewImageBlock ).toHaveFocus();
+
+		// Since focus is now inside the list view, the shortcut should close the sidebar.
+		await pressKeyWithModifier( 'access', 'o' );
+		// Focus should now be on the paragraph block since that is where we opened the list view sidebar. This is not a perfect solution, but current functionality prevents a better way at the moment. Get the current block aria-label and compare.
+		await expect( await getActiveElementLabel() ).toEqual(
+			'Paragraph block'
+		);
+		// List view sidebar should be closed.
+		await expect( await isListViewOpen() ).toBeFalsy();
+
+		// Open list view sidebar.
+		await pressKeyWithModifier( 'access', 'o' );
+
+		// Focus the list view close button and make sure the shortcut will close the list view. This is to catch a bug where elements could be out of range of the sidebar region. Must shift+tab 3 times to reach cclose button before tabs.
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveElementLabel() ).toEqual(
+			'Close Document Overview Sidebar'
+		);
+
+		// Close the list view sidebar.
+		await pressKeyWithModifier( 'access', 'o' );
+		// List view sidebar should be closed.
+		await expect( await isListViewOpen() ).toBeFalsy();
+
+		// Open list view sidebar.
+		await pressKeyWithModifier( 'access', 'o' );
+
+		// Focus the outline tab and select it. This test ensures the outline tab receives similar focus events based on the shortcut.
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await expect( await getActiveElementLabel() ).toEqual( 'Outline' );
+		await page.keyboard.press( 'Enter' );
+
+		// From here, tab in to the editor so focus can be checked on return to the outline tab in the sidebar.
+		await pressKeyTimes( 'Tab', 2 );
+		// Focus should be placed on the outline tab button since there is nothing to focus inside the tab itself.
+		await pressKeyWithModifier( 'access', 'o' );
+		await expect( await getActiveElementLabel() ).toEqual( 'Outline' );
+
+		// Close the list view sidebar.
+		await pressKeyWithModifier( 'access', 'o' );
+		// List view sidebar should be closed.
+		await expect( await isListViewOpen() ).toBeFalsy();
+	} );
 } );

package/specs/performance/front-end-block-theme.test.js

@@ -12,6 +12,7 @@ import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 describe( 'Front End Performance', () => {
 	const results = {
 		timeToFirstByte: [],
+		largestContentfulPaint: [],
 	};
 
 	beforeAll( async () => {
@@ -44,4 +45,50 @@ describe( 'Front End Performance', () => {
 			);
 		}
 	} );
+
+	it( 'Largest Contentful Paint (LCP)', async () => {
+		// Based on https://addyosmani.com/blog/puppeteer-recipes/#performance-observer-lcp
+		function calcLCP() {
+			// By using -1 we know when it didn't record any event.
+			window.largestContentfulPaint = -1;
+
+			const observer = new PerformanceObserver( ( entryList ) => {
+				const entries = entryList.getEntries();
+				const lastEntry = entries[ entries.length - 1 ];
+				// According to the spec, we can use startTime
+				// as it'll report renderTime || loadTime:
+				// https://www.w3.org/TR/largest-contentful-paint/#largestcontentfulpaint
+				window.largestContentfulPaint = lastEntry.startTime;
+			} );
+
+			observer.observe( {
+				type: 'largest-contentful-paint',
+				buffered: true,
+			} );
+
+			document.addEventListener( 'visibilitychange', () => {
+				if ( document.visibilityState === 'hidden' ) {
+					observer.takeRecords();
+					observer.disconnect();
+				}
+			} );
+		}
+
+		// We derive the 75th percentile of the TTFB based on these results.
+		// By running it 16 times, the percentile value would be (75/100)*16=12,
+		// meaning that we discard the worst 4 values.
+		let i = 16;
+		while ( i-- ) {
+			await page.evaluateOnNewDocument( calcLCP );
+			// By waiting for networkidle we make sure navigation won't be considered finished on load,
+			// hence, it'll paint the page and largest-contentful-paint events will be dispatched.
+			// https://pptr.dev/api/puppeteer.page.goto#remarks
+			await page.goto( createURL( '/' ), { waitUntil: 'networkidle0' } );
+
+			const lcp = await page.evaluate(
+				() => window.largestContentfulPaint
+			);
+			results.largestContentfulPaint.push( lcp );
+		}
+	} );
 } );

package/specs/performance/front-end-classic-theme.test.js

@@ -7,14 +7,16 @@ import { writeFileSync } from 'fs';
 /**
  * WordPress dependencies
  */
-import { createURL, logout } from '@wordpress/e2e-test-utils';
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 
 describe( 'Front End Performance', () => {
 	const results = {
 		timeToFirstByte: [],
+		largestContentfulPaint: [],
 	};
 
 	beforeAll( async () => {
+		await activateTheme( 'twentytwentyone' );
 		await logout();
 	} );
 
@@ -42,4 +44,50 @@ describe( 'Front End Performance', () => {
 			);
 		}
 	} );
+
+	it( 'Largest Contentful Paint (LCP)', async () => {
+		// Based on https://addyosmani.com/blog/puppeteer-recipes/#performance-observer-lcp
+		function calcLCP() {
+			// By using -1 we know when it didn't record any event.
+			window.largestContentfulPaint = -1;
+
+			const observer = new PerformanceObserver( ( entryList ) => {
+				const entries = entryList.getEntries();
+				const lastEntry = entries[ entries.length - 1 ];
+				// According to the spec, we can use startTime
+				// as it'll report renderTime || loadTime:
+				// https://www.w3.org/TR/largest-contentful-paint/#largestcontentfulpaint
+				window.largestContentfulPaint = lastEntry.startTime;
+			} );
+
+			observer.observe( {
+				type: 'largest-contentful-paint',
+				buffered: true,
+			} );
+
+			document.addEventListener( 'visibilitychange', () => {
+				if ( document.visibilityState === 'hidden' ) {
+					observer.takeRecords();
+					observer.disconnect();
+				}
+			} );
+		}
+
+		// We derive the 75th percentile of the TTFB based on these results.
+		// By running it 16 times, the percentile value would be (75/100)*16=12,
+		// meaning that we discard the worst 4 values.
+		let i = 16;
+		while ( i-- ) {
+			await page.evaluateOnNewDocument( calcLCP );
+			// By waiting for networkidle we make sure navigation won't be considered finished on load,
+			// hence, it'll paint the page and largest-contentful-paint events will be dispatched.
+			// https://pptr.dev/api/puppeteer.page.goto#remarks
+			await page.goto( createURL( '/' ), { waitUntil: 'networkidle0' } );
+
+			const lcp = await page.evaluate(
+				() => window.largestContentfulPaint
+			);
+			results.largestContentfulPaint.push( lcp );
+		}
+	} );
 } );

package/specs/performance/post-editor.test.js

@@ -105,28 +105,43 @@ describe( 'Post Editor Performance', () => {
 			readFile( join( __dirname, '../../assets/large-post.html' ) )
 		);
 		await saveDraft();
-		let i = 5;
+		const draftURL = await page.url();
+
+		// Number of sample measurements to take.
+		const samples = 5;
+		// Number of throwaway measurements to perform before recording samples.
+		// Having at least one helps ensure that caching quirks don't manifest in
+		// the results.
+		const throwaway = 1;
+
+		let i = throwaway + samples;
 		while ( i-- ) {
-			await page.reload();
+			await page.close();
+			page = await browser.newPage();
+
+			await page.goto( draftURL );
 			await page.waitForSelector( '.edit-post-layout', {
 				timeout: 120000,
 			} );
 			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
-			const {
-				serverResponse,
-				firstPaint,
-				domContentLoaded,
-				loaded,
-				firstContentfulPaint,
-				firstBlock,
-			} = await getLoadingDurations();
 
-			results.serverResponse.push( serverResponse );
-			results.firstPaint.push( firstPaint );
-			results.domContentLoaded.push( domContentLoaded );
-			results.loaded.push( loaded );
-			results.firstContentfulPaint.push( firstContentfulPaint );
-			results.firstBlock.push( firstBlock );
+			if ( i < samples ) {
+				const {
+					serverResponse,
+					firstPaint,
+					domContentLoaded,
+					loaded,
+					firstContentfulPaint,
+					firstBlock,
+				} = await getLoadingDurations();
+
+				results.serverResponse.push( serverResponse );
+				results.firstPaint.push( firstPaint );
+				results.domContentLoaded.push( domContentLoaded );
+				results.loaded.push( loaded );
+				results.firstContentfulPaint.push( firstContentfulPaint );
+				results.firstBlock.push( firstBlock );
+			}
 		}
 	} );
 

package/specs/performance/site-editor.test.js

@@ -30,34 +30,29 @@ import {
 
 jest.setTimeout( 1000000 );
 
+const results = {
+	serverResponse: [],
+	firstPaint: [],
+	domContentLoaded: [],
+	loaded: [],
+	firstContentfulPaint: [],
+	firstBlock: [],
+	type: [],
+	typeContainer: [],
+	focus: [],
+	inserterOpen: [],
+	inserterHover: [],
+	inserterSearch: [],
+	listViewOpen: [],
+};
+
+let id;
+
 describe( 'Site Editor Performance', () => {
 	beforeAll( async () => {
 		await activateTheme( 'emptytheme' );
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
-	} );
-
-	it( 'Loading', async () => {
-		const results = {
-			serverResponse: [],
-			firstPaint: [],
-			domContentLoaded: [],
-			loaded: [],
-			firstContentfulPaint: [],
-			firstBlock: [],
-			type: [],
-			typeContainer: [],
-			focus: [],
-			inserterOpen: [],
-			inserterHover: [],
-			inserterSearch: [],
-			listViewOpen: [],
-		};
 
 		const html = readFile(
 			join( __dirname, '../../assets/large-post.html' )
@@ -80,41 +75,73 @@ describe( 'Site Editor Performance', () => {
 		}, html );
 		await saveDraft();
 
-		const id = await page.evaluate( () =>
+		id = await page.evaluate( () =>
 			new URL( document.location ).searchParams.get( 'post' )
 		);
+	} );
 
+	afterAll( async () => {
+		await deleteAllTemplates( 'wp_template' );
+		await deleteAllTemplates( 'wp_template_part' );
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	beforeEach( async () => {
 		await visitSiteEditor( {
 			postId: id,
 			postType: 'page',
 			path: '/navigation/single',
 		} );
+	} );
+
+	it( 'Loading', async () => {
+		const editorURL = await page.url();
 
-		let i = 3;
+		// Number of sample measurements to take.
+		const samples = 3;
+		// Number of throwaway measurements to perform before recording samples.
+		// Having at least one helps ensure that caching quirks don't manifest in
+		// the results.
+		const throwaway = 1;
+
+		let i = throwaway + samples;
 
 		// Measuring loading time.
 		while ( i-- ) {
-			await page.reload();
+			await page.close();
+			page = await browser.newPage();
+
+			await page.goto( editorURL );
 			await page.waitForSelector( '.edit-site-visual-editor', {
 				timeout: 120000,
 			} );
 			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
-			const {
-				serverResponse,
-				firstPaint,
-				domContentLoaded,
-				loaded,
-				firstContentfulPaint,
-				firstBlock,
-			} = await getLoadingDurations();
-
-			results.serverResponse.push( serverResponse );
-			results.firstPaint.push( firstPaint );
-			results.domContentLoaded.push( domContentLoaded );
-			results.loaded.push( loaded );
-			results.firstContentfulPaint.push( firstContentfulPaint );
-			results.firstBlock.push( firstBlock );
+
+			if ( i < samples ) {
+				const {
+					serverResponse,
+					firstPaint,
+					domContentLoaded,
+					loaded,
+					firstContentfulPaint,
+					firstBlock,
+				} = await getLoadingDurations();
+
+				results.serverResponse.push( serverResponse );
+				results.firstPaint.push( firstPaint );
+				results.domContentLoaded.push( domContentLoaded );
+				results.loaded.push( loaded );
+				results.firstContentfulPaint.push( firstContentfulPaint );
+				results.firstBlock.push( firstBlock );
+			}
 		}
+	} );
+
+	it( 'Typing', async () => {
+		await page.waitForSelector( '.edit-site-visual-editor', {
+			timeout: 120000,
+		} );
+		await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 
 		// Measuring typing performance inside the post content.
 		await canvas().waitForSelector(
@@ -125,7 +152,7 @@ describe( 'Site Editor Performance', () => {
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
 		await insertBlock( 'Paragraph' );
-		i = 200;
+		let i = 200;
 		const traceFile = __dirname + '/trace.json';
 		await page.tracing.start( {
 			path: traceFile,

package/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Heading can be created by prefixing existing content with number signs and a space 1`] = `
-"<!-- wp:heading {\\"level\\":4} -->
-<h4 class=\\"wp-block-heading\\">4</h4>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading can be created by prefixing number sign and a space 1`] = `
-"<!-- wp:heading {\\"level\\":3} -->
-<h3 class=\\"wp-block-heading\\">3</h3>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should correctly apply named colors 1`] = `
-"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
-<h2 class=\\"wp-block-heading has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should create a paragraph block above when pressing enter at the start 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\">a</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should create a paragraph block below when pressing enter at the end 1`] = `
-"<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\">a</h2>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Heading should not work with the list input rule 1`] = `
-"<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\">1. H</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Heading should work with the format input rules 1`] = `
-"<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"><code>code</code></h2>
-<!-- /wp:heading -->"
-`;

package/specs/editor/blocks/heading.test.js

@@ -1,113 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	getEditedPostContent,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Heading', () => {
-	const COLOR_ITEM_SELECTOR =
-		'.block-editor-panel-color-gradient-settings__dropdown';
-	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
-	const COLOR_INPUT_FIELD_SELECTOR =
-		'.components-color-picker .components-input-control__input';
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by prefixing number sign and a space', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '### 3' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be created by prefixing existing content with number signs and a space', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '4' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.type( '#### ' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should not work with the list input rule', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## 1. H' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should work with the format input rules', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## `code`' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should create a paragraph block above when pressing enter at the start', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '## a' );
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should create a paragraph block below when pressing enter at the end', async () => {
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '## a' );
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'should correctly apply custom colors', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '### Heading' );
-
-		const textColorButton = await page.waitForSelector(
-			COLOR_ITEM_SELECTOR
-		);
-		await textColorButton.click();
-
-		const customTextColorButton = await page.waitForSelector(
-			CUSTOM_COLOR_BUTTON_X_SELECTOR
-		);
-
-		await customTextColorButton.click();
-		await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
-		await page.click( COLOR_INPUT_FIELD_SELECTOR );
-		await pressKeyWithModifier( 'primary', 'A' );
-		await page.keyboard.type( '4b7f4d' );
-		await page.keyboard.press( 'Enter' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
-		<h3 class=\\"wp-block-heading has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
-		<!-- /wp:heading -->"
-	` );
-	} );
-
-	it( 'should correctly apply named colors', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '## Heading' );
-
-		const textColorButton = await page.waitForSelector(
-			COLOR_ITEM_SELECTOR
-		);
-		await textColorButton.click();
-
-		const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
-		const [ colorButton ] = await page.$x( colorButtonSelector );
-		await colorButton.click();
-		await page.waitForXPath(
-			`${ colorButtonSelector }[@aria-pressed='true']`
-		);
-		await page.click( 'h2[data-type="core/heading"]' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

package/specs/editor/blocks/query.test.js

@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	deactivatePlugin,
-	createNewPost,
-	insertBlock,
-	publishPost,
-	trashAllPosts,
-} from '@wordpress/e2e-test-utils';
-
-const createDemoPosts = async () => {
-	await createNewPost( { postType: 'post', title: `Post 1` } );
-	await publishPost();
-};
-
-describe( 'Query block', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-query-block' );
-		await createDemoPosts();
-	} );
-	afterAll( async () => {
-		await trashAllPosts();
-		await deactivatePlugin( 'gutenberg-test-query-block' );
-	} );
-	beforeEach( async () => {
-		await createNewPost( { postType: 'page', title: `Query Page` } );
-	} );
-	afterEach( async () => {
-		await trashAllPosts( 'page' );
-	} );
-	describe( 'Query block insertion', () => {
-		it( 'List', async () => {
-			await insertBlock( 'Query' );
-			// Wait for the choose pattern button
-			const choosePatternButton = await page.waitForSelector(
-				'div[data-type="core/query"] button.is-primary'
-			);
-			await choosePatternButton.click();
-			// Wait for pattern blocks to be loaded.
-			await page.waitForSelector(
-				'.block-library-query-pattern__selection-content iframe[title="Editor canvas"]'
-			);
-			// Choose the standard pattern.
-			const chosenPattern = await page.waitForSelector(
-				'.block-editor-block-patterns-list__item[aria-label="Standard"]'
-			);
-			chosenPattern.click();
-			// Wait for pattern setup to go away.
-			await page.waitForSelector(
-				'.block-library-query-pattern__selection-content',
-				{
-					hidden: true,
-				}
-			);
-			/**
-			 * We can't use `getEditedPostContent` easily for now because
-			 * `query` makes used of `instanceId` so it's not very reliable.
-			 * This should be revisited.
-			 */
-			await page.waitForSelector( '.wp-block-post-date' );
-			await page.waitForSelector( '.wp-block-post-title' );
-		} );
-	} );
-} );