Testing: Add e2e tests for Plugins API (#7269)

.eslintignore

@@ -2,4 +2,5 @@ build
 build-module
 coverage
 node_modules
+test/e2e/test-plugins
 vendor

.gitignore

@@ -2,7 +2,6 @@
 build
 build-module
 coverage
-/hooks
 node_modules
 gutenberg.zip
 languages/gutenberg.pot

test/e2e/specs/__snapshots__/plugins-api.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Using Plugins API Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>My title plugin</strong><button type=\\"button\\" aria-expanded=\\"true\\" aria-label=\\"Unpin from toolbar\\" class=\\"components-button components-icon-button is-toggled\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-star-filled\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><em>(No title)</em></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;

test/e2e/specs/plugins-api.test.js

@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import '../support/bootstrap';
+import { newPost, newDesktopBrowserPage, toggleMoreMenuItem } from '../support/utils';
+import { activatePlugin, deactivatePlugin } from '../support/plugins';
+
+describe( 'Using Plugins API', () => {
+	beforeAll( async () => {
+		await newDesktopBrowserPage();
+		await activatePlugin( 'gutenberg-test-plugin-plugins-api' );
+		await newPost();
+	} );
+
+	afterAll( async () => {
+		await newDesktopBrowserPage();
+		await deactivatePlugin( 'gutenberg-test-plugin-plugins-api' );
+	} );
+
+	it( 'Should open plugins sidebar using More Menu item and render content', async () => {
+		await toggleMoreMenuItem( 'My title plugin' );
+
+		const pluginSidebarContent = await page.$eval( '.edit-post-sidebar', ( el ) => el.innerHTML );
+		expect( pluginSidebarContent ).toMatchSnapshot();
+	} );
+
+	it( 'Should close plugins sidebar using More Menu item', async () => {
+		await toggleMoreMenuItem( 'My title plugin' );
+
+		const pluginSidebar = await page.$( '.edit-post-sidebar' );
+		expect( pluginSidebar ).toBeNull();
+	} );
+} );

test/e2e/specs/templates.test.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage } from '../support/utils';
+import { newPost, newDesktopBrowserPage, toggleMoreMenuItem } from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
 describe( 'Using a CPT with a predefined template', () => {
@@ -19,9 +19,7 @@ describe( 'Using a CPT with a predefined template', () => {
 
 	it( 'Should add a custom post types with a predefined template', async () => {
 		//Switch to Code Editor to check HTML output
-		await page.click( '.edit-post-more-menu [aria-label="More"]' );
-		const codeEditorButton = ( await page.$x( '//button[contains(text(), \'Code Editor\')]' ) )[ 0 ];
-		await codeEditorButton.click( 'button' );
+		await toggleMoreMenuItem( 'Code Editor' );
 
 		// Assert that the post already contains the template defined blocks
 		const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );

test/e2e/support/utils.js

@@ -147,3 +147,14 @@ export async function pressWithModifier( modifier, key ) {
 	await page.keyboard.press( key );
 	return page.keyboard.up( modifier );
 }
+
+/**
+ * Toggles More Menu item, searchers for the button with the text provided and clicks it.
+ *
+ * @param {string} buttonLabel The label to search the button for.
+ */
+export async function toggleMoreMenuItem( buttonLabel ) {
+	await page.click( '.edit-post-more-menu [aria-label="More"]' );
+	const itemButton = ( await page.$x( `//button[contains(text(), \'${ buttonLabel }\')]` ) )[ 0 ];
+	await itemButton.click( 'button' );
+}

test/e2e/test-plugins/plugins-api.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Plugins API
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-plugin-plugins-api
+ */
+wp_enqueue_script(
+	'gutenberg-test-plugins-api',
+	plugins_url( 'plugins-api/index.js', __FILE__ ),
+	array(
+		'wp-components',
+		'wp-data',
+		'wp-element',
+		'wp-edit-post',
+		'wp-i18n',
+		'wp-plugins',
+	),
+	filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/index.js' ),
+	true
+);

test/e2e/test-plugins/plugins-api/index.js

@@ -0,0 +1,89 @@
+var Button = wp.components.Button;
+var PanelBody = wp.components.PanelBody;
+var PanelRow = wp.components.PanelRow;
+var withDispatch = wp.data.withDispatch;
+var withSelect = wp.data.withSelect;
+var Fragment = wp.element.Fragment;
+var compose = wp.element.compose;
+var el = wp.element.createElement;
+var __ = wp.i18n.__;
+var registerPlugin = wp.plugins.registerPlugin;
+var PluginSidebar = wp.editPost.PluginSidebar;
+var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
+
+function SidebarContents( props ) {
+	var noTitle = el(
+		'em',
+		{},
+		__( '(No title)' )
+	);
+	return (
+		el(
+			PanelBody,
+			{},
+			el(
+				PanelRow,
+				{},
+				props.title || noTitle
+			),
+			el(
+				PanelRow,
+				{},
+				el(
+					Button,
+					{ isPrimary: true, onClick: props.onReset },
+					__( 'Reset' )
+				)
+			)
+		)
+	);
+}
+
+var SidebarContentsWithDataHandling = compose( [
+	withSelect( function( select ) {
+		return {
+			title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
+		};
+	} ),
+	withDispatch( function( dispatch ) {
+		return {
+			onReset: function() {
+				dispatch( 'core/editor' ).editPost( {
+					title: ''
+				} );
+			}
+		};
+	} )
+] )( SidebarContents );
+
+function MyTitlePlugin() {
+	return (
+		el(
+			Fragment,
+			{},
+			el(
+				PluginSidebar,
+				{
+					name: 'my-title-sidebar',
+					title: 'My title plugin'
+				},
+				el(
+					SidebarContentsWithDataHandling,
+					{}
+				)
+			),
+			el(
+				PluginSidebarMoreMenuItem,
+				{
+					target: 'my-title-sidebar'
+				},
+				__( 'My title plugin' )
+			)
+		)
+	);
+}
+
+registerPlugin( 'my-title-plugin', {
+	icon: 'welcome-write-blog',
+	render: MyTitlePlugin
+} );