Autocomplete Component: add e2e tests (take two)

packages/e2e-tests/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### 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)

packages/e2e-tests/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' );

packages/e2e-tests/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
+	);
+})()