Testing: Add e2e test for PluginPostStatusInfo (#7284)

* Testing: Update Plugins API e2e tests * Testing: Add e2e test for PluginPostStatusInfo * Remove accidently merged comments * Testing: Add plugin registration for Publish Panels * Tests: Address feedback from review
WordPress · Jun 25, 2018 · e7961cb · e7961cb
1 parent e222ccb
commit e7961cb
Show file tree

Hide file tree

Showing 9 changed files with 244 additions and 108 deletions.
diff --git a/test/e2e/specs/__snapshots__/plugins-api.test.js.snap b/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=\\"https://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=\\"https://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=\\"https://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=\\"https://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=\\"https://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=\\"https://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>"`;
diff --git a/test/e2e/specs/plugins-api.test.js b/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();
+ } );
  } );
 } );
diff --git a/test/e2e/specs/templates.test.js b/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 );

diff --git a/test/e2e/support/utils.js b/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() );
 }
-
diff --git a/test/e2e/test-plugins/plugins-api.php b/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
 );
diff --git a/test/e2e/test-plugins/plugins-api/index.js b/test/e2e/test-plugins/plugins-api/index.js
diff --git a/test/e2e/test-plugins/plugins-api/post-status-info.js b/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
+} );
diff --git a/test/e2e/test-plugins/plugins-api/publish-panel.js b/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
+} );