@wordpress/e2e-tests 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 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.0",
+	"version": "5.3.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.0",
-		"@wordpress/jest-console": "^6.1.0",
-		"@wordpress/jest-puppeteer-axe": "^5.1.0",
-		"@wordpress/scripts": "^24.2.0",
-		"@wordpress/url": "^3.19.0",
+		"@wordpress/e2e-test-utils": "^8.3.0",
+		"@wordpress/jest-console": "^6.2.0",
+		"@wordpress/jest-puppeteer-axe": "^5.2.0",
+		"@wordpress/scripts": "^24.3.0",
+		"@wordpress/url": "^3.20.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

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/various/reusable-blocks.test.js

@@ -363,9 +363,8 @@ describe( 'Reusable blocks', () => {
 		const quoteBlock = await page.waitForSelector(
 			'.block-editor-block-list__block[aria-label="Block: Quote"]'
 		);
-		await quoteBlock.click();
 		// Select the quote block.
-		await page.keyboard.press( 'ArrowDown' );
+		await quoteBlock.focus();
 		await openDocumentSettingsSidebar();
 		await page.waitForXPath(
 			'//*[@role="region"][@aria-label="Editor settings"]//button[.="Styles"]'

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/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 -->"
-		` );
-	} );
-} );