Testing: Add e2e test for PluginPostStatusInfo

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

@@ -1,3 +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>"`;
+exports[`Using Plugins API Sidebar 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>Sidebar 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\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; word-wrap: break-word; resize: none; height: 18px;\\"></textarea></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

@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import '../support/bootstrap';
-import { newPost, newDesktopBrowserPage, toggleMoreMenuItem } from '../support/utils';
+import {
+	clickOnMoreMenuItem,
+	openDocumentSettingsSidebar,
+	newPost,
+	newDesktopBrowserPage,
+} from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
 describe( 'Using Plugins API', () => {
@@ -17,17 +22,28 @@ describe( 'Using Plugins API', () => {
 		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' );
+	describe( 'Post Status Info', () => {
+		it( 'Should render post status info inside Document Setting sidebar', async () => {
+			await openDocumentSettingsSidebar();
 
-		const pluginSidebarContent = await page.$eval( '.edit-post-sidebar', ( el ) => el.innerHTML );
-		expect( pluginSidebarContent ).toMatchSnapshot();
+			const pluginPostStatusInfoText = await page.$eval( '.edit-post-post-status .my-post-status-info-plugin', ( el ) => el.innerText );
+			expect( pluginPostStatusInfoText ).toBe( 'My post status info' );
+		} );
 	} );
 
-	it( 'Should close plugins sidebar using More Menu item', async () => {
-		await toggleMoreMenuItem( 'My title plugin' );
+	describe( 'Sidebar', () => {
+		it( 'Should open plugins sidebar using More Menu item and render content', async () => {
+			await clickOnMoreMenuItem( 'Sidebar title plugin' );
 
-		const pluginSidebar = await page.$( '.edit-post-sidebar' );
-		expect( pluginSidebar ).toBeNull();
+			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 clickOnMoreMenuItem( 'Sidebar 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, toggleMoreMenuItem } from '../support/utils';
+import { clickOnMoreMenuItem, newPost, newDesktopBrowserPage } from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
 describe( 'Using a CPT with a predefined template', () => {
@@ -19,7 +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 toggleMoreMenuItem( 'Code Editor' );
+		await clickOnMoreMenuItem( '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

@@ -190,11 +190,11 @@ export async function pressWithModifier( modifier, key ) {
 }
 
 /**
- * Toggles More Menu item, searchers for the button with the text provided and clicks it.
+ * Clicks on 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 ) {
+export async function clickOnMoreMenuItem( 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' );
@@ -222,7 +222,17 @@ export async function publishPost() {
 	return page.waitForSelector( '.notice-success' );
 }
 
+/**
+ * Clicks on the button in the header which opens Document Settings sidebar when it is closed.
+ */
+export async function openDocumentSettingsSidebar() {
+	const openButton = await page.$( '.edit-post-header__settings button[aria-label="Settings"][aria-expaned="false"]' );
+
+	if ( openButton ) {
+		await page.click( openButton );
+	}
+}
+
 export async function clearLocalStorage() {
 	await page.evaluate( () => window.localStorage.clear() );
 }
-

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

@@ -6,17 +6,45 @@
  *
  * @package gutenberg-test-plugin-plugins-api
  */
+
 wp_enqueue_script(
-	'gutenberg-test-plugins-api',
-	plugins_url( 'plugins-api/index.js', __FILE__ ),
+	'gutenberg-test-plugins-api-post-status-info',
+	plugins_url( 'plugins-api/post-status-info.js', __FILE__ ),
+	array(
+		'wp-edit-post',
+		'wp-element',
+		'wp-i18n',
+		'wp-plugins',
+	),
+	filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/post-status-info.js' ),
+	true
+);
+
+wp_enqueue_script(
+	'gutenberg-test-plugins-api-publish-pane;',
+	plugins_url( 'plugins-api/publish-panel.js', __FILE__ ),
+	array(
+		'wp-edit-post',
+		'wp-element',
+		'wp-i18n',
+		'wp-plugins',
+	),
+	filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/publish-panel.js' ),
+	true
+);
+
+wp_enqueue_script(
+	'gutenberg-test-plugins-api-sidebar',
+	plugins_url( 'plugins-api/sidebar.js', __FILE__ ),
 	array(
 		'wp-components',
 		'wp-data',
-		'wp-element',
 		'wp-edit-post',
+		'wp-editor',
+		'wp-element',
 		'wp-i18n',
 		'wp-plugins',
 	),
-	filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/index.js' ),
+	filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/sidebar.js' ),
 	true
 );

test/e2e/test-plugins/plugins-api/post-status-info.js

@@ -0,0 +1,18 @@
+var el = wp.element.createElement;
+var __ = wp.i18n.__;
+var registerPlugin = wp.plugins.registerPlugin;
+var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo;
+
+function MyPostStatusInfoPlugin() {
+	return el(
+		PluginPostStatusInfo,
+		{
+			className: 'my-post-status-info-plugin',
+		},
+		__( 'My post status info' )
+	);
+}
+
+registerPlugin( 'my-post-status-info-plugin', {
+	render: MyPostStatusInfoPlugin
+} );

test/e2e/test-plugins/plugins-api/publish-panel.js

@@ -0,0 +1,47 @@
+var el = wp.element.createElement;
+var Fragment = wp.element.Fragment;
+var __ = wp.i18n.__;
+var registerPlugin = wp.plugins.registerPlugin;
+var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
+var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
+
+function PanelContent() {
+	return el(
+		'p',
+		{},
+		__( 'Here is the panel content!' )
+	);
+}
+
+function MyPublishPanelPlugin() {
+	return el(
+		Fragment,
+		{},
+		el(
+			PluginPrePublishPanel,
+			{
+				className: 'my-publish-panel-plugin__pre',
+				title: __( 'My pre publish panel' )
+			},
+			el(
+				PanelContent,
+				{}
+			)
+		),
+		el(
+			PluginPostPublishPanel,
+			{
+				className: 'my-publish-panel-plugin__post',
+				title: __( 'My post publish panel' )
+			},
+			el(
+				PanelContent,
+				{}
+			)
+		)
+	);
+}
+
+registerPlugin( 'my-publish-panel-plugin', {
+	render: MyPublishPanelPlugin
+} );