@wordpress/e2e-tests 7.10.0 → 7.11.1

package/assets/small-post-with-containers.html

@@ -1,77 +0,0 @@
-<!-- wp:columns {"align":"full"} -->
-<div class="wp-block-columns alignfull"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:heading {"level":3} -->
-<h3 class="wp-block-heading">Heading</h3>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>one</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>two</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>three</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:heading {"level":3} -->
-<h3 class="wp-block-heading">Heading</h3>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>one</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>two</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>three</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"><!-- wp:heading {"level":3} -->
-<h3 class="wp-block-heading">Heading</h3>
-<!-- /wp:heading -->
-
-<!-- wp:paragraph -->
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>one</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>two</li>
-<!-- /wp:list-item -->
-
-<!-- wp:list-item -->
-<li>three</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list --></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->

package/config/performance-reporter.js

@@ -1,177 +0,0 @@
-/**
- * External dependencies
- */
-const { readFileSync, existsSync } = require( 'fs' );
-const path = require( 'path' );
-const chalk = require( 'chalk' );
-
-function average( array ) {
-	return array.reduce( ( a, b ) => a + b ) / array.length;
-}
-
-function round( number, decimalPlaces = 2 ) {
-	const factor = Math.pow( 10, decimalPlaces );
-	return Math.round( number * factor ) / factor;
-}
-
-const title = chalk.bold;
-const success = chalk.bold.green;
-
-class PerformanceReporter {
-	onTestResult( test ) {
-		const basename = path.basename( test.path, '.js' );
-		const filepath = path.join(
-			process.env.WP_ARTIFACTS_PATH,
-			basename + '.performance-results.json'
-		);
-
-		if ( ! existsSync( filepath ) ) {
-			return;
-		}
-
-		const results = readFileSync( filepath, 'utf8' );
-		const {
-			serverResponse,
-			firstPaint,
-			domContentLoaded,
-			loaded,
-			firstContentfulPaint,
-			firstBlock,
-			type,
-			typeContainer,
-			focus,
-			listViewOpen,
-			inserterOpen,
-			inserterHover,
-			inserterSearch,
-		} = JSON.parse( results );
-
-		if ( serverResponse && serverResponse.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Loading Time:' ) }
-Average time to server response (subtracted from client side metrics): ${ success(
-				round( average( serverResponse ) ) + 'ms'
-			) }
-Average time to first paint: ${ success(
-				round( average( firstPaint ) ) + 'ms'
-			) }
-Average time to DOM content load: ${ success(
-				round( average( domContentLoaded ) ) + 'ms'
-			) }
-Average time to load: ${ success( round( average( loaded ) ) + 'ms' ) }
-Average time to first contentful paint: ${ success(
-				round( average( firstContentfulPaint ) ) + 'ms'
-			) }
-Average time to first block: ${ success(
-				round( average( firstBlock ) ) + 'ms'
-			) }` );
-		}
-
-		if ( type && type.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Typing:' ) }
-Average time to type character: ${ success( round( average( type ) ) + 'ms' ) }
-Slowest time to type character: ${ success(
-				round( Math.max( ...type ) ) + 'ms'
-			) }
-Fastest time to type character: ${ success(
-				round( Math.min( ...type ) ) + 'ms'
-			) }` );
-		}
-
-		if ( typeContainer && typeContainer.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Typing within a container:' ) }
-Average time to type within a container: ${ success(
-				round( average( typeContainer ) ) + 'ms'
-			) }
-Slowest time to type within a container: ${ success(
-				round( Math.max( ...typeContainer ) ) + 'ms'
-			) }
-Fastest time to type within a container: ${ success(
-				round( Math.min( ...typeContainer ) ) + 'ms'
-			) }` );
-		}
-
-		if ( focus && focus.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Block Selection:' ) }
-Average time to select a block: ${ success( round( average( focus ) ) + 'ms' ) }
-Slowest time to select a block: ${ success(
-				round( Math.max( ...focus ) ) + 'ms'
-			) }
-Fastest time to select a block: ${ success(
-				round( Math.min( ...focus ) ) + 'ms'
-			) }` );
-		}
-
-		if ( listViewOpen && listViewOpen.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Opening List View:' ) }
-Average time to open list view: ${ success(
-				round( average( listViewOpen ) ) + 'ms'
-			) }
-Slowest time to open list view: ${ success(
-				round( Math.max( ...listViewOpen ) ) + 'ms'
-			) }
-Fastest time to open list view: ${ success(
-				round( Math.min( ...listViewOpen ) ) + 'ms'
-			) }` );
-		}
-
-		if ( inserterOpen && inserterOpen.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Opening Global Inserter:' ) }
-Average time to open global inserter: ${ success(
-				round( average( inserterOpen ) ) + 'ms'
-			) }
-Slowest time to open global inserter: ${ success(
-				round( Math.max( ...inserterOpen ) ) + 'ms'
-			) }
-Fastest time to open global inserter: ${ success(
-				round( Math.min( ...inserterOpen ) ) + 'ms'
-			) }` );
-		}
-
-		if ( inserterSearch && inserterSearch.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Inserter Search:' ) }
-Average time to type the inserter search input: ${ success(
-				round( average( inserterSearch ) ) + 'ms'
-			) }
-Slowest time to type the inserter search input: ${ success(
-				round( Math.max( ...inserterSearch ) ) + 'ms'
-			) }
-Fastest time to type the inserter search input: ${ success(
-				round( Math.min( ...inserterSearch ) ) + 'ms'
-			) }` );
-		}
-
-		if ( inserterHover && inserterHover.length ) {
-			// eslint-disable-next-line no-console
-			console.log( `
-${ title( 'Inserter Block Item Hover:' ) }
-Average time to move mouse between two block item in the inserter: ${ success(
-				round( average( inserterHover ) ) + 'ms'
-			) }
-Slowest time to move mouse between two block item in the inserter: ${ success(
-				round( Math.max( ...inserterHover ) ) + 'ms'
-			) }
-Fastest time to move mouse between two block item in the inserter: ${ success(
-				round( Math.min( ...inserterHover ) ) + 'ms'
-			) }` );
-		}
-
-		// eslint-disable-next-line no-console
-		console.log( '' );
-	}
-}
-
-module.exports = PerformanceReporter;

package/config/setup-performance-test.js

@@ -1,51 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	clearLocalStorage,
-	enablePageDialogAccept,
-	setBrowserViewport,
-	trashAllPosts,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * Timeout, in seconds, that the test should be allowed to run.
- *
- * @type {string|undefined}
- */
-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 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 other posts/comments/etc. aren't dirtying tests and tests don't
-// depend on each other's side-effects.
-beforeAll( async () => {
-	enablePageDialogAccept();
-
-	await trashAllPosts();
-	await trashAllPosts( 'wp_block' );
-	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
-	await clearLocalStorage();
-	await setupPage();
-} );
-
-afterEach( async () => {
-	// 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/jest.performance.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-	...require( '@wordpress/scripts/config/jest-e2e.config' ),
-	testMatch: [ '**/performance/*.test.js' ],
-	setupFiles: [ '<rootDir>/config/is-gutenberg-plugin.js' ],
-	setupFilesAfterEnv: [
-		'<rootDir>/config/setup-performance-test.js',
-		'@wordpress/jest-console',
-		'@wordpress/jest-puppeteer-axe',
-		'expect-puppeteer',
-	],
-	transformIgnorePatterns: [
-		'node_modules',
-		'scripts/config/puppeteer.config.js',
-	],
-	reporters: [ 'default', '<rootDir>/config/performance-reporter.js' ],
-};

package/specs/editor/plugins/block-variations.test.js

@@ -1,191 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	searchForBlock,
-	pressKeyWithModifier,
-	openDocumentSettingsSidebar,
-	togglePreferencesOption,
-	toggleMoreMenu,
-	canvas,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block variations', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-variations' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-variations' );
-	} );
-
-	const expectInserterItem = async ( blockTitle ) => {
-		const inserterItem = await page.$x(
-			`//button[contains(@class, 'block-editor-block-types-list__item')]//span[text()="${ blockTitle }"]`
-		);
-		expect( inserterItem ).toBeDefined();
-		expect( inserterItem ).toHaveLength( 1 );
-	};
-
-	test( 'Search for the overridden default Quote block', async () => {
-		await searchForBlock( 'Quote' );
-
-		expect( await page.$( '.editor-block-list-item-quote' ) ).toBeNull();
-		expectInserterItem( 'Large Quote' );
-	} );
-
-	test( 'Insert the overridden default Quote block variation', async () => {
-		await insertBlock( 'Large Quote' );
-
-		expect(
-			await canvas().$(
-				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
-			)
-		).toBeDefined();
-	} );
-
-	test( 'Insert the Large Quote block variation with slash command', async () => {
-		await insertBlock( 'Paragraph' );
-
-		await page.keyboard.type( '/large' );
-		await page.keyboard.press( 'Enter' );
-
-		expect(
-			await canvas().$(
-				'.wp-block[data-type="core/quote"] blockquote.is-style-large'
-			)
-		).toBeDefined();
-	} );
-
-	test( 'Search for the Paragraph block with 2 additional variations', async () => {
-		await searchForBlock( 'Paragraph' );
-
-		expectInserterItem( 'Paragraph' );
-		expectInserterItem( 'Success Message' );
-		expectInserterItem( 'Warning Message' );
-	} );
-
-	test( 'Insert the Success Message block variation', async () => {
-		await insertBlock( 'Success Message' );
-
-		const successMessageBlock = await canvas().$(
-			'.wp-block[data-type="core/paragraph"]'
-		);
-		expect( successMessageBlock ).toBeDefined();
-		expect(
-			await successMessageBlock.evaluate( ( node ) => node.innerText )
-		).toBe( 'This is a success message!' );
-	} );
-	test( 'Pick the additional variation in the inserted Columns block', async () => {
-		await insertBlock( 'Columns' );
-
-		const fourColumnsVariation = await canvas().waitForSelector(
-			'.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]'
-		);
-		await fourColumnsVariation.click();
-		expect(
-			await canvas().$$(
-				'.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]'
-			)
-		).toHaveLength( 4 );
-	} );
-	// @see @wordpres/block-editor/src/components/use-block-display-information (`useBlockDisplayInformation` hook).
-	describe( 'testing block display information with matching variations', () => {
-		beforeEach( async () => {
-			await togglePreferencesOption(
-				'General',
-				'Display block breadcrumbs',
-				true
-			);
-			await toggleMoreMenu( 'close' );
-		} );
-
-		afterEach( async () => {
-			await togglePreferencesOption(
-				'General',
-				'Display block breadcrumbs',
-				false
-			);
-			await toggleMoreMenu( 'close' );
-		} );
-
-		const getActiveBreadcrumb = async () =>
-			page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-block-breadcrumb__current'
-					).textContent
-			);
-		const getFirstNavigationItem = async () => {
-			await pressKeyWithModifier( 'access', 'o' );
-			// This also returns the visually hidden text `(selected block)`.
-			// For example `Paragraph(selected block)`. In order to hide this
-			// implementation detail and search for childNodes, we choose to
-			// test with `String.prototype.startsWith()`.
-			return page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-list-view-block-select-button'
-					).textContent
-			);
-		};
-		const getBlockCardDescription = async () => {
-			await openDocumentSettingsSidebar();
-			return page.evaluate(
-				() =>
-					document.querySelector(
-						'.block-editor-block-card__description'
-					).textContent
-			);
-		};
-
-		it( 'should show block information when no matching variation is found', async () => {
-			await insertBlock( 'Large Quote' );
-			// Select the quote block.
-			await page.keyboard.press( 'ArrowDown' );
-			const breadcrumb = await getActiveBreadcrumb();
-			expect( breadcrumb ).toEqual( 'Quote' );
-			const navigationItem = await getFirstNavigationItem();
-			expect( navigationItem.startsWith( 'Quote' ) ).toBeTruthy();
-			const description = await getBlockCardDescription();
-			expect( description ).toEqual(
-				'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar'
-			);
-		} );
-		it( 'should display variations info if all declared', async () => {
-			await insertBlock( 'Success Message' );
-			const breadcrumb = await getActiveBreadcrumb();
-			expect( breadcrumb ).toEqual( 'Success Message' );
-			const navigationItem = await getFirstNavigationItem();
-			expect(
-				navigationItem.startsWith( 'Success Message' )
-			).toBeTruthy();
-			const description = await getBlockCardDescription();
-			expect( description ).toEqual(
-				'This block displays a success message. This description overrides the default one provided for the Paragraph block.'
-			);
-		} );
-		it( 'should display mixed block and variation match information', async () => {
-			// Warning Message variation is missing the `description`.
-			await insertBlock( 'Warning Message' );
-			const breadcrumb = await getActiveBreadcrumb();
-			expect( breadcrumb ).toEqual( 'Warning Message' );
-			const navigationItem = await getFirstNavigationItem();
-			expect(
-				navigationItem.startsWith( 'Warning Message' )
-			).toBeTruthy();
-			const description = await getBlockCardDescription();
-			expect( description ).toEqual(
-				'Start with the basic building block of all narrative.'
-			);
-		} );
-	} );
-} );

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

@@ -1,77 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { saveResultsFile } from './utils';
-
-describe( 'Front End Performance', () => {
-	const results = {
-		timeToFirstByte: [],
-		largestContentfulPaint: [],
-		lcpMinusTtfb: [],
-	};
-
-	beforeAll( async () => {
-		await activateTheme( 'gutenberg-test-themes/twentytwentythree' );
-		await logout();
-	} );
-
-	afterAll( async () => {
-		saveResultsFile( __filename, results );
-	} );
-
-	it( 'Report TTFB, LCP, and LCP-TTFB', 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();
-				}
-			} );
-		}
-
-		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, ttfb } = await page.evaluate( () => {
-				const [ { responseStart, startTime } ] =
-					performance.getEntriesByType( 'navigation' );
-				return {
-					lcp: window.largestContentfulPaint,
-					ttfb: responseStart - startTime,
-				};
-			} );
-
-			results.largestContentfulPaint.push( lcp );
-			results.timeToFirstByte.push( ttfb );
-			results.lcpMinusTtfb.push( lcp - ttfb );
-		}
-	} );
-} );

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

@@ -1,77 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
-
-/**
- * Internal dependencies
- */
-import { saveResultsFile } from './utils';
-
-describe( 'Front End Performance', () => {
-	const results = {
-		timeToFirstByte: [],
-		largestContentfulPaint: [],
-		lcpMinusTtfb: [],
-	};
-
-	beforeAll( async () => {
-		await activateTheme( 'gutenberg-test-themes/twentytwentyone' );
-		await logout();
-	} );
-
-	afterAll( async () => {
-		saveResultsFile( __filename, results );
-	} );
-
-	it( 'Report TTFB, LCP, and LCP-TTFB', 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();
-				}
-			} );
-		}
-
-		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, ttfb } = await page.evaluate( () => {
-				const [ { responseStart, startTime } ] =
-					performance.getEntriesByType( 'navigation' );
-				return {
-					lcp: window.largestContentfulPaint,
-					ttfb: responseStart - startTime,
-				};
-			} );
-
-			results.largestContentfulPaint.push( lcp );
-			results.timeToFirstByte.push( ttfb );
-			results.lcpMinusTtfb.push( lcp - ttfb );
-		}
-	} );
-} );