Edit Post: Add unit tests to the publish panels fills

WordPress · May 21, 2018 · efa8098 · efa8098
1 parent 82eaceb
commit efa8098
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 5 deletions.
diff --git a/edit-post/README.md b/edit-post/README.md
@@ -140,6 +140,7 @@ const { PluginPrePublishPanel } = wp.editPost;
 
 const MyPluginPrePublishPanel = () => (
 	<PluginPrePublishPanel
+		className="my-plugin-pre-publish-panel"
 		title={ __( 'My panel title' ) }
 		initialOpen={ true }
 	>
@@ -150,6 +151,13 @@ const MyPluginPrePublishPanel = () => (
 
 #### Props
 
+##### className
+
+An optional class name added to the panel.
+
+- Type: `String`
+- Required: No
+
 ##### title
 
 Title displayed at the top of the panel.
@@ -176,8 +184,9 @@ _Example:_
 const { __ } = wp.i18n;
 const { PluginPostPublishPanel } = wp.editPost;
 
-const MyPluginPrePublishPanel = () => (
+const MyPluginPostPublishPanel = () => (
 	<PluginPostPublishPanel
+		className="my-plugin-post-publish-panel"
 		title={ __( 'My panel title' ) }
 		initialOpen={ true }
 	>
@@ -188,6 +197,13 @@ const MyPluginPrePublishPanel = () => (
 
 #### Props
 
+##### className
+
+An optional class name added to the panel.
+
+- Type: `String`
+- Required: No
+
 ##### title
 
 Title displayed at the top of the panel.

diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/index.js b/edit-post/components/sidebar/plugin-post-publish-panel/index.js
@@ -5,9 +5,13 @@ import { createSlotFill, PanelBody } from '@wordpress/components';
 
 const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
 
-const PluginPostPublishPanel = ( { children, title, initialOpen = false } ) => (
+const PluginPostPublishPanel = ( { children, className, title, initialOpen = false } ) => (
 	<Fill>
-		<PanelBody initialOpen={ initialOpen || ! title } title={ title }>
+		<PanelBody
+			className={ className }
+			initialOpen={ initialOpen || ! title }
+			title={ title }
+		>
 			{ children }
 		</PanelBody>
 	</Fill>

diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPostPublishPanel renders fill properly 1`] = `
+<div>
+  <PanelBody
+    className="my-plugin-post-publish-panel"
+    initialOpen={true}
+    key="1---0/.0"
+    title="My panel title"
+  >
+    <div
+      className="components-panel__body my-plugin-post-publish-panel is-opened"
+    >
+      <h2
+        className="components-panel__body-title"
+      >
+        <Button
+          aria-expanded={true}
+          className="components-panel__body-toggle"
+          onClick={[Function]}
+        >
+          <button
+            aria-expanded={true}
+            className="components-button components-panel__body-toggle"
+            onClick={[Function]}
+            type="button"
+          >
+            <Dashicon
+              icon="arrow-up"
+            >
+              <svg
+                aria-hidden={true}
+                className="dashicon dashicons-arrow-up"
+                focusable="false"
+                height={20}
+                role="img"
+                viewBox="0 0 20 20"
+                width={20}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 13l4.03-6L15 13H7z"
+                />
+              </svg>
+            </Dashicon>
+            My panel title
+          </button>
+        </Button>
+      </h2>
+      My panel content
+    </div>
+  </PanelBody>
+</div>
+`;
diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/index.js b/edit-post/components/sidebar/plugin-post-publish-panel/test/index.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostPublishPanel from '../';
+
+describe( 'PluginPostPublishPanel', () => {
+	test( 'renders fill properly', () => {
+		const wrapper = mount(
+			<SlotFillProvider>
+				<PluginPostPublishPanel
+					className="my-plugin-post-publish-panel"
+					title="My panel title"
+					initialOpen={ true }
+				>
+					My panel content
+				</PluginPostPublishPanel>
+				<PluginPostPublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( wrapper.find( 'Slot' ).children() ).toMatchSnapshot();
+	} );
+} );
diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/index.js b/edit-post/components/sidebar/plugin-pre-publish-panel/index.js
@@ -5,9 +5,13 @@ import { createSlotFill, PanelBody } from '@wordpress/components';
 
 const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
 
-const PluginPrePublishPanel = ( { children, title, initialOpen = false } ) => (
+const PluginPrePublishPanel = ( { children, className, title, initialOpen = false } ) => (
 	<Fill>
-		<PanelBody initialOpen={ initialOpen || ! title } title={ title }>
+		<PanelBody
+			className={ className }
+			initialOpen={ initialOpen || ! title }
+			title={ title }
+		>
 			{ children }
 		</PanelBody>
 	</Fill>

diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPrePublishPanel renders fill properly 1`] = `
+<div>
+  <PanelBody
+    className="my-plugin-pre-publish-panel"
+    initialOpen={true}
+    key="1---0/.0"
+    title="My panel title"
+  >
+    <div
+      className="components-panel__body my-plugin-pre-publish-panel is-opened"
+    >
+      <h2
+        className="components-panel__body-title"
+      >
+        <Button
+          aria-expanded={true}
+          className="components-panel__body-toggle"
+          onClick={[Function]}
+        >
+          <button
+            aria-expanded={true}
+            className="components-button components-panel__body-toggle"
+            onClick={[Function]}
+            type="button"
+          >
+            <Dashicon
+              icon="arrow-up"
+            >
+              <svg
+                aria-hidden={true}
+                className="dashicon dashicons-arrow-up"
+                focusable="false"
+                height={20}
+                role="img"
+                viewBox="0 0 20 20"
+                width={20}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 13l4.03-6L15 13H7z"
+                />
+              </svg>
+            </Dashicon>
+            My panel title
+          </button>
+        </Button>
+      </h2>
+      My panel content
+    </div>
+  </PanelBody>
+</div>
+`;
diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/index.js b/edit-post/components/sidebar/plugin-pre-publish-panel/test/index.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPrePublishPanel from '../';
+
+describe( 'PluginPrePublishPanel', () => {
+	test( 'renders fill properly', () => {
+		const wrapper = mount(
+			<SlotFillProvider>
+				<PluginPrePublishPanel
+					className="my-plugin-pre-publish-panel"
+					title="My panel title"
+					initialOpen={ true }
+				>
+					My panel content
+				</PluginPrePublishPanel>
+				<PluginPrePublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( wrapper.find( 'Slot' ).children() ).toMatchSnapshot();
+	} );
+} );