Update StoryShots to work with the existing configuration

WordPress · Oct 22, 2019 · 3684187 · 3684187
1 parent dc8691d
commit 3684187
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 35 deletions.
diff --git a/packages/components/src/clipboard-button/stories/index.js b/packages/components/src/clipboard-button/stories/index.js
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import ClipboardButton from '../';
 
-export default { title: 'ClipboardButton', component: ClipboardButton };
+export default { title: 'ClipboardButton(DontTest)', component: ClipboardButton };
 
 const ClipboardButtonWithState = ( { copied, ...props } ) => {
 	const [ isCopied, setCopied ] = useState( copied );

diff --git a/packages/components/storybook/config.js b/packages/components/storybook/config.js
@@ -14,8 +14,9 @@ addDecorator( withA11y );
 addDecorator( withKnobs );
 configure(
 	[
-		// require.context( '../docs', true, /\/.+\.mdx$/ ),
+		// StoryShots addon doesn't support MDX files at the moment.
+		process.env.NODE_ENV !== 'test' && require.context( '../docs', true, /\/.+\.mdx$/ ),
 		require.context( '../src', true, /\/stories\/.+\.js$/ ),
-	],
+	].filter( Boolean ),
 	module
 );
diff --git a/packages/components/storybook/test/__snapshots__/index.js.snap b/packages/components/storybook/test/__snapshots__/index.js.snap
@@ -282,36 +282,6 @@ exports[`@wordpress/components Button Disabled Link 1`] = `
 </button>
 `;
 
-exports[`@wordpress/components Button Group Default 1`] = `
-<div
-  className="components-button-group"
-  role="group"
->
-  <button
-    className="components-button is-button is-primary"
-    style={
-      Object {
-        "margin": "0 4px",
-      }
-    }
-    type="button"
-  >
-    Button 1
-  </button>
-  <button
-    className="components-button is-button is-primary"
-    style={
-      Object {
-        "margin": "0 4px",
-      }
-    }
-    type="button"
-  >
-    Button 2
-  </button>
-</div>
-`;
-
 exports[`@wordpress/components Button Large 1`] = `
 <button
   className="components-button is-button is-default is-large"
@@ -367,6 +337,135 @@ exports[`@wordpress/components Button Toggled 1`] = `
 </button>
 `;
 
+exports[`@wordpress/components ButtonGroup Default 1`] = `
+<div
+  className="components-button-group"
+  role="group"
+>
+  <button
+    className="components-button is-button is-primary"
+    style={
+      Object {
+        "margin": "0 4px",
+      }
+    }
+    type="button"
+  >
+    Button 1
+  </button>
+  <button
+    className="components-button is-button is-primary"
+    style={
+      Object {
+        "margin": "0 4px",
+      }
+    }
+    type="button"
+  >
+    Button 2
+  </button>
+</div>
+`;
+
+exports[`@wordpress/components CheckboxControl All 1`] = `
+<div
+  className="components-base-control"
+>
+  <div
+    className="components-base-control__field"
+  >
+    <label
+      className="components-base-control__label"
+      htmlFor="inspector-checkbox-control-1"
+    >
+      User
+    </label>
+    <span
+      className="components-checkbox-control__input-container"
+    >
+      <input
+        aria-describedby="inspector-checkbox-control-1__help"
+        checked={true}
+        className="components-checkbox-control__input"
+        id="inspector-checkbox-control-1"
+        onChange={[Function]}
+        type="checkbox"
+        value="1"
+      />
+      <svg
+        aria-hidden="true"
+        className="dashicon dashicons-yes components-checkbox-control__checked"
+        focusable="false"
+        height={20}
+        role="img"
+        viewBox="0 0 20 20"
+        width={20}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
+        />
+      </svg>
+    </span>
+    <label
+      className="components-checkbox-control__label"
+      htmlFor="inspector-checkbox-control-1"
+    >
+      Is author
+    </label>
+  </div>
+  <p
+    className="components-base-control__help"
+    id="inspector-checkbox-control-1__help"
+  >
+    Is the user an author or not?
+  </p>
+</div>
+`;
+
+exports[`@wordpress/components CheckboxControl Default 1`] = `
+<div
+  className="components-base-control"
+>
+  <div
+    className="components-base-control__field"
+  >
+    <span
+      className="components-checkbox-control__input-container"
+    >
+      <input
+        checked={true}
+        className="components-checkbox-control__input"
+        id="inspector-checkbox-control-0"
+        onChange={[Function]}
+        type="checkbox"
+        value="1"
+      />
+      <svg
+        aria-hidden="true"
+        className="dashicon dashicons-yes components-checkbox-control__checked"
+        focusable="false"
+        height={20}
+        role="img"
+        viewBox="0 0 20 20"
+        width={20}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z"
+        />
+      </svg>
+    </span>
+    <label
+      className="components-checkbox-control__label"
+      htmlFor="inspector-checkbox-control-0"
+    >
+      Is author
+    </label>
+  </div>
+</div>
+`;
+
 exports[`@wordpress/components ColorIndicator Default 1`] = `
 <span
   className="component-color-indicator"
@@ -509,10 +608,10 @@ exports[`@wordpress/components Icon Default 1`] = `
     aria-hidden="true"
     className="dashicon dashicons-screenoptions"
     focusable="false"
-    height={20}
+    height="24"
     role="img"
     viewBox="0 0 20 20"
-    width={20}
+    width="24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path

diff --git a/packages/components/storybook/test/index.js b/packages/components/storybook/test/index.js
@@ -7,4 +7,5 @@ import path from 'path';
 initStoryshots( {
 	configPath: path.resolve( __dirname, '../' ),
 	suite: '@wordpress/components',
+	storyKindRegex: /^((?!.*?DontTest).)*$/,
 } );