From 9e4bcb8c8cb50c19ef28246c74f7c6a97db63430 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 24 Oct 2019 14:48:24 +0200
Subject: [PATCH] Use the list of skipped components in the Storyshot setup

---
 .../src/clipboard-button/stories/index.js     |   2 +-
 .../test/__snapshots__/index.js.snap          | 207 ++++++++++++++++++
 packages/components/storybook/test/index.js   |  14 +-
 3 files changed, 221 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/clipboard-button/stories/index.js b/packages/components/src/clipboard-button/stories/index.js
index 10f9fb0ec7928..7e0146448d56d 100644
--- 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(DontTest)', component: ClipboardButton };
+export default { title: 'ClipboardButton', component: ClipboardButton };
 
 const ClipboardButtonWithState = ( { copied, ...props } ) => {
 	const [ isCopied, setCopied ] = useState( copied );
diff --git a/packages/components/storybook/test/__snapshots__/index.js.snap b/packages/components/storybook/test/__snapshots__/index.js.snap
index cf85860e7c05f..1221f6dfb3f67 100644
--- a/packages/components/storybook/test/__snapshots__/index.js.snap
+++ b/packages/components/storybook/test/__snapshots__/index.js.snap
@@ -477,6 +477,194 @@ exports[`@wordpress/components ColorIndicator Default 1`] = `
 />
 `;
 
+exports[`@wordpress/components ColorPalette Default 1`] = `
+<div
+  className="components-circular-option-picker"
+>
+  <div
+    className="components-circular-option-picker__option-wrapper"
+  >
+    <button
+      aria-label="Color: red"
+      aria-pressed={false}
+      className="components-circular-option-picker__option"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "#f00",
+        }
+      }
+      type="button"
+    />
+  </div>
+  <div
+    className="components-circular-option-picker__option-wrapper"
+  >
+    <button
+      aria-label="Color: white"
+      aria-pressed={false}
+      className="components-circular-option-picker__option"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "#fff",
+        }
+      }
+      type="button"
+    />
+  </div>
+  <div
+    className="components-circular-option-picker__option-wrapper"
+  >
+    <button
+      aria-label="Color: blue"
+      aria-pressed={false}
+      className="components-circular-option-picker__option"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "#00f",
+        }
+      }
+      type="button"
+    />
+  </div>
+  <div
+    className="components-circular-option-picker__custom-clear-wrapper"
+  >
+    <div
+      className="components-circular-option-picker__dropdown-link-action"
+    >
+      <button
+        aria-expanded={false}
+        aria-label="Custom color picker"
+        className="components-button is-link"
+        onClick={[Function]}
+        type="button"
+      >
+        Custom Color
+      </button>
+    </div>
+    <button
+      className="components-button components-circular-option-picker__clear is-button is-default is-small"
+      onClick={[Function]}
+      type="button"
+    >
+      Clear
+    </button>
+  </div>
+</div>
+`;
+
+exports[`@wordpress/components ColorPalette With Knobs 1`] = `
+<div
+  className="components-circular-option-picker"
+>
+  <div
+    className="components-circular-option-picker__option-wrapper"
+  >
+    <button
+      aria-label="Color: red"
+      aria-pressed={false}
+      className="components-circular-option-picker__option"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "#f00",
+        }
+      }
+      type="button"
+    />
+  </div>
+  <div
+    className="components-circular-option-picker__option-wrapper"
+  >
+    <button
+      aria-label="Color: white"
+      aria-pressed={false}
+      className="components-circular-option-picker__option"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "#fff",
+        }
+      }
+      type="button"
+    />
+  </div>
+  <div
+    className="components-circular-option-picker__option-wrapper"
+  >
+    <button
+      aria-label="Color: blue"
+      aria-pressed={false}
+      className="components-circular-option-picker__option"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "color": "#00f",
+        }
+      }
+      type="button"
+    />
+  </div>
+  <div
+    className="components-circular-option-picker__custom-clear-wrapper"
+  >
+    <div
+      className="components-circular-option-picker__dropdown-link-action"
+    >
+      <button
+        aria-expanded={false}
+        aria-label="Custom color picker"
+        className="components-button is-link"
+        onClick={[Function]}
+        type="button"
+      >
+        Custom Color
+      </button>
+    </div>
+    <button
+      className="components-button components-circular-option-picker__clear is-button is-default is-small"
+      onClick={[Function]}
+      type="button"
+    >
+      Clear
+    </button>
+  </div>
+</div>
+`;
+
 exports[`@wordpress/components Dashicon Default 1`] = `
 <svg
   aria-hidden="true"
@@ -1134,3 +1322,22 @@ exports[`@wordpress/components ScrollLock Default 1`] = `
   </div>
 </div>
 `;
+
+exports[`@wordpress/components VisuallyHidden Default 1`] = `
+Array [
+  <div
+    className="components-visually-hidden"
+  >
+    This should not show.
+  </div>,
+  <div>
+    This text will 
+    <span
+      className="components-visually-hidden"
+    >
+      but not inline 
+    </span>
+     always show.
+  </div>,
+]
+`;
diff --git a/packages/components/storybook/test/index.js b/packages/components/storybook/test/index.js
index ac956cd5c6be9..596ba77194bc0 100644
--- a/packages/components/storybook/test/index.js
+++ b/packages/components/storybook/test/index.js
@@ -4,8 +4,20 @@
 import initStoryshots from '@storybook/addon-storyshots';
 import path from 'path';
 
+/**
+ * The list of components that should be skipped because they
+ * don't work with the default Storyshots setup.
+ *
+ * @type {string[]}
+ */
+const skippedComponents = [
+	'ClipboardButton',
+];
+
 initStoryshots( {
 	configPath: path.resolve( __dirname, '../' ),
 	suite: '@wordpress/components',
-	storyKindRegex: /^((?!.*?DontTest).)*$/,
+	storyKindRegex: new RegExp(
+		`^((?!${ skippedComponents.join( '|' ) }).)*$`
+	),
 } );