@wordpress/e2e-tests 5.2.1-next.4d3b314fd5.0 → 5.4.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 5.4.0 (2022-10-19)
+
+## 5.3.0 (2022-10-05)
+
+### New features
+
+-   Added Autocomplete Component e2e test suite. [#42905](https://github.com/WordPress/gutenberg/pull/42905).
+
 ## 5.2.0 (2022-09-21)
 
 ## 5.0.0 (2022-08-24)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "5.2.1-next.4d3b314fd5.0",
+	"version": "5.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": "^8.2.1-next.4d3b314fd5.0",
-		"@wordpress/jest-console": "^6.1.1-next.4d3b314fd5.0",
-		"@wordpress/jest-puppeteer-axe": "^5.1.1-next.4d3b314fd5.0",
-		"@wordpress/scripts": "^24.2.1-next.4d3b314fd5.0",
-		"@wordpress/url": "^3.19.1-next.4d3b314fd5.0",
+		"@wordpress/e2e-test-utils": "^8.4.0",
+		"@wordpress/jest-console": "^6.3.0",
+		"@wordpress/jest-puppeteer-axe": "^5.3.0",
+		"@wordpress/scripts": "^24.4.0",
+		"@wordpress/url": "^3.21.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
 }

package/plugins/class-test-widget.php

@@ -14,7 +14,7 @@ class Test_Widget extends WP_Widget {
 	/**
 	 * Sets up a new test widget instance.
 	 */
-	function __construct() {
+	public function __construct() {
 		parent::__construct(
 			'test_widget',
 			'Test Widget',

package/plugins/test-autocompleter/index.js

@@ -0,0 +1,55 @@
+(function () {
+	const fruits = {
+		name: 'fruit',
+		// The prefix that triggers this completer
+		triggerPrefix: '~',
+		// The option data
+		options: [
+			{ visual: '🍎', name: 'Apple', id: 1 },
+			{ visual: '🍊', name: 'Orange', id: 2 },
+			{ visual: '🍇', name: 'Grapes', id: 3 },
+			{ visual: '🥭', name: 'Mango', id: 4 },
+			{ visual: '🍓', name: 'Strawberry', id: 5 },
+			{ visual: '🫐', name: 'Blueberry', id: 6 },
+			{ visual: '🍒', name: 'Cherry', id: 7 },
+		],
+		// Returns a label for an option like "🍊 Orange"
+		getOptionLabel: ( option ) => `${ option.visual } ${ option.name }`,
+		// Declares that options should be matched by their name
+		getOptionKeywords: ( option ) => [ option.name ],
+		// Declares that the Grapes option is disabled
+		isOptionDisabled: ( option ) => option.name === 'Grapes',
+		// Declares completions should be inserted as abbreviations
+		getOptionCompletion: ( option ) => (
+			option.visual 
+		),
+	};
+
+	function duplicateUserMentions( completers ) {
+		const [ users ] = completers.filter(
+			( completer ) => completer.name === 'users'
+		);
+		return {
+			...users,
+			name: 'users-copy',
+			triggerPrefix: '+',
+			getOptionCompletion: ( user ) => `+${ user.slug }`,
+		};
+	}
+
+	function appendTestCompleters( completers, blockName ) {
+		const copiedUsers = duplicateUserMentions( completers );
+		return blockName === 'core/paragraph'
+			? [ ...completers, fruits, copiedUsers ]
+			: completers;
+	}
+	
+	// Adding the filter with a priority of 11
+	// to ensure it fires after the default user mentions are added.
+	wp.hooks.addFilter(
+		'editor.Autocomplete.completers',
+		'editor/autocompleters/test',
+		appendTestCompleters,
+		11
+	);
+})()

package/plugins/test-autocompleter.php

@@ -0,0 +1,27 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Autocompleter
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-autocompleter
+ */
+
+/**
+ * Registers a custom script for the plugin.
+ */
+function enqueue_test_autocompleter_plugin_script() {
+	wp_enqueue_script(
+		'gutenberg-test-autocompleter',
+		plugins_url( 'test-autocompleter/index.js', __FILE__ ),
+		array(
+			'wp-hooks',
+			'wp-element',
+			'wp-block-editor',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'test-autocompleter/index.js' ),
+		false
+	);
+}
+
+add_action( 'init', 'enqueue_test_autocompleter_plugin_script' );

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

@@ -16,6 +16,7 @@ import {
 	clickButton,
 	openListView,
 	getListViewBlocks,
+	clickBlockToolbarButton,
 } from '@wordpress/e2e-test-utils';
 
 async function upload( selector ) {
@@ -110,7 +111,7 @@ describe( 'Gallery', () => {
 
 		const imageListLink = ( await getListViewBlocks( 'Image' ) )[ 0 ];
 		await imageListLink.click();
-
+		await clickBlockToolbarButton( 'Caption' );
 		const captionElement = await figureElement.$(
 			'.block-editor-rich-text__editable'
 		);

package/specs/editor/various/block-switcher.test.js

@@ -82,9 +82,9 @@ describe( 'Block Switcher', () => {
 		await pressKeyWithModifier( 'alt', 'F10' );
 
 		// Verify the block switcher exists.
-		expect( await hasBlockSwitcher() ).toBeFalsy();
+		expect( await hasBlockSwitcher() ).toBeTruthy();
 		// Verify the correct block transforms appear.
-		expect( await getAvailableBlockTransforms() ).toHaveLength( 0 );
+		expect( await getAvailableBlockTransforms() ).toHaveLength( 1 );
 	} );
 
 	describe( 'Conditional tranformation options', () => {

package/specs/editor/various/splitting-merging.test.js

@@ -236,6 +236,20 @@ describe( 'splitting and merging blocks', () => {
 			await page.keyboard.press( 'Enter' );
 			await page.keyboard.type( 'item 2' );
 			await pressKeyTimes( 'ArrowUp', 3 );
+			await page.keyboard.press( 'Delete' );
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:paragraph -->
+			<p>hi</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>item 1</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>item 2</p>
+			<!-- /wp:paragraph -->"
+		` );
 			await page.keyboard.press( 'Delete' );
 			// Carret should be in the first block and at the proper position.
 			await page.keyboard.type( '-' );
@@ -259,15 +273,25 @@ describe( 'splitting and merging blocks', () => {
 			await page.keyboard.press( 'ArrowUp' );
 			await pressKeyTimes( 'ArrowLeft', 6 );
 			await page.keyboard.press( 'Backspace' );
-			// Carret should be in the first block and at the proper position.
-			await page.keyboard.type( '-' );
 			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
 			"<!-- wp:paragraph -->
 			<p>hi</p>
 			<!-- /wp:paragraph -->
 
 			<!-- wp:paragraph -->
-			<p>-item 1</p>
+			<p>item 1</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p>item 2</p>
+			<!-- /wp:paragraph -->"
+		` );
+			await page.keyboard.press( 'Backspace' );
+			// Carret should be in the first block and at the proper position.
+			await page.keyboard.type( '-' );
+			expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+			"<!-- wp:paragraph -->
+			<p>hi-item 1</p>
 			<!-- /wp:paragraph -->
 
 			<!-- wp:paragraph -->

package/specs/site-editor/multi-entity-saving.test.js

@@ -266,7 +266,7 @@ describe( 'Multi-entity save flow', () => {
 			} );
 
 			// Select the header template part via list view.
-			await page.click( '.edit-site-header-toolbar__list-view-toggle' );
+			await page.click( '.edit-site-header-edit-mode__list-view-toggle' );
 			const headerTemplatePartListViewButton = await page.waitForXPath(
 				'//a[contains(@class, "block-editor-list-view-block-select-button")][contains(., "header")]'
 			);

package/specs/site-editor/settings-sidebar.test.js

@@ -12,13 +12,13 @@ import {
 
 async function toggleSidebar() {
 	await page.click(
-		'.edit-site-header__actions button[aria-label="Settings"]'
+		'.edit-site-header-edit-mode__actions button[aria-label="Settings"]'
 	);
 }
 
 async function getActiveTabLabel() {
 	return await page.$eval(
-		'.edit-site-sidebar__panel-tab.is-active',
+		'.edit-site-sidebar-edit-mode__panel-tab.is-active',
 		( element ) => element.getAttribute( 'aria-label' )
 	);
 }

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

@@ -21,11 +21,11 @@ describe( 'Site Editor Inserter', () => {
 	} );
 
 	it( 'inserter toggle button should toggle global inserter', async () => {
-		await page.click( '.edit-site-header-toolbar__inserter-toggle' );
+		await page.click( '.edit-site-header-edit-mode__inserter-toggle' );
 		await page.waitForSelector( '.edit-site-editor__inserter-panel', {
 			visible: true,
 		} );
-		await page.click( '.edit-site-header-toolbar__inserter-toggle' );
+		await page.click( '.edit-site-header-edit-mode__inserter-toggle' );
 		await page.waitForSelector( '.edit-site-editor__inserter-panel', {
 			hidden: true,
 		} );

package/plugins/nonce.php

@@ -1,16 +0,0 @@
-<?php
-/**
- * Plugin Name: Gutenberg Test Plugin, Nonce
- * Plugin URI: https://github.com/WordPress/gutenberg
- * Author: Gutenberg Team
- *
- * @package gutenberg-test-plugin-nonce
- */
-
-/**
- * Returns the nonce life time.
- */
-function gutenberg_test_plugin_nonce_life() {
-	return 5;
-}
-add_filter( 'nonce_life', 'gutenberg_test_plugin_nonce_life' );

package/specs/editor/plugins/__snapshots__/iframed-block.test.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`changing image size should load script and dependencies in iframe 1`] = `
-"<!-- wp:test/iframed-block -->
-<p class=\\"wp-block-test-iframed-block\\">Iframed Block (saved)</p>
-<!-- /wp:test/iframed-block -->"
-`;

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

@@ -1,49 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	getEditedPostContent,
-	canvas,
-	createNewTemplate,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'changing image size', () => {
-	beforeEach( async () => {
-		await activatePlugin( 'gutenberg-test-iframed-block' );
-		await createNewPost( { postType: 'page' } );
-	} );
-
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-iframed-block' );
-	} );
-
-	it( 'should load script and dependencies in iframe', async () => {
-		await insertBlock( 'Iframed Block' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		const element = await page.waitForSelector(
-			'.wp-block-test-iframed-block'
-		);
-		const text = await element.evaluate( ( el ) => el.textContent );
-
-		expect( text ).toBe( 'Iframed Block (set with jQuery)' );
-
-		await createNewTemplate( 'Iframed Test' );
-
-		const iframeElement = await canvas().waitForSelector(
-			'.wp-block-test-iframed-block'
-		);
-		const iframedText = await iframeElement.evaluate(
-			( el ) => el.textContent
-		);
-
-		// Expect the script to load in the iframe, which replaces the block
-		// text.
-		expect( iframedText ).toBe( 'Iframed Block (set with jQuery)' );
-	} );
-} );

package/specs/editor/plugins/nonce.test.js

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	saveDraft,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Nonce', () => {
-	// While using beforeEach/afterEach is suboptimal for multiple tests, they
-	// are used here to ensure that the nonce plugin doesn't interfere with API
-	// calls made in global before/after calls, which may perform API requests.
-	beforeEach( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-nonce' );
-	} );
-	afterEach( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-nonce' );
-	} );
-
-	it( 'should refresh when expired', async () => {
-		await createNewPost();
-		await page.keyboard.press( 'Enter' );
-		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 5000 );
-		await page.keyboard.type( 'test' );
-		// `saveDraft` waits for saving to be successful, so this test would
-		// timeout if it's not.
-		await saveDraft();
-		// We expect a 403 status once.
-		expect( console ).toHaveErrored();
-	} );
-} );

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

@@ -1,69 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	createUser,
-	deleteUser,
-	getEditedPostContent,
-	pressKeyTimes,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'autocomplete mentions', () => {
-	beforeAll( async () => {
-		await createUser( 'testuser', { firstName: 'Jane', lastName: 'Doe' } );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deleteUser( 'testuser' );
-	} );
-
-	it( 'should insert mention', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'I am @a' );
-		await page.waitForSelector( '.components-autocomplete__result' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '.' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>I am @admin.</p>
-			<!-- /wp:paragraph -->"
-		` );
-	} );
-
-	it( 'should insert mention between two other words', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'Stuck in the middle with you.' );
-		await pressKeyTimes( 'ArrowLeft', 'you.'.length );
-		await page.keyboard.type( '@j' );
-		await page.waitForSelector( '.components-autocomplete__result' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( ' ' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>Stuck in the middle with @testuser you.</p>
-			<!-- /wp:paragraph -->"
-		` );
-	} );
-
-	it( 'should insert two subsequent mentions', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'I am @j' );
-		await page.waitForSelector( '.components-autocomplete__result' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( ' @a' );
-		await page.waitForSelector( '.components-autocomplete__result' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( '.' );
-		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-			"<!-- wp:paragraph -->
-			<p>I am @testuser @admin.</p>
-			<!-- /wp:paragraph -->"
-		` );
-	} );
-} );