From b41ffb691cce988ece0c37450e3e71ba5a88fe9e Mon Sep 17 00:00:00 2001
From: Martin Lehmann <martin.lehmann@finn.no>
Date: Wed, 21 Mar 2018 15:38:11 +0100
Subject: [PATCH] Fix storyshots renderer option

---
 addons/storyshots/README.md                   |   2 +-
 addons/storyshots/src/index.js                |   2 +-
 .../storyshot.enzyme.test.js.snap             | 298 +++++++++++-------
 3 files changed, 185 insertions(+), 117 deletions(-)

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
index 1744d2c8daad..5d1af9463357 100644
--- a/addons/storyshots/README.md
+++ b/addons/storyshots/README.md
@@ -349,7 +349,7 @@ Run a custom test function for each story, rather than the default (a vanilla sn
 
 ### `renderer`
 
-Pass a custom renderer (such as enzymes `mount`) to record snapshots.
+Pass a custom renderer (such as enzymes `mount`) to record snapshots. Note that setting `test` overrides `renderer`.
 
 ```js
 import initStoryshots from '@storybook/addon-storyshots';
diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js
index 3d651486582f..302492d62b1c 100644
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@@ -53,7 +53,7 @@ export default function testStorySnapshots(options = {}) {
     serializer: options.serializer,
   };
 
-  const testMethod = options.test || snapshotWithOptions({ options: snapshotOptions });
+  const testMethod = options.test || snapshotWithOptions(snapshotOptions);
 
   methods.forEach(method => {
     if (typeof testMethod[method] === 'function') {
diff --git a/addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap
index 4457ca09552d..fda5d5e1a7d3 100644
--- a/addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap
+++ b/addons/storyshots/stories/__snapshots__/storyshot.enzyme.test.js.snap
@@ -1,144 +1,212 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Another Button with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
+<Button
   onClick={[Function]}
 >
-  <span
-    aria-label="so cool"
-    role="img"
+  <Component
+    className="css-1yjiefr"
+    onClick={[Function]}
   >
-    😀 😎 👍 💯
-  </span>
-</button>
+    <button
+      className="css-1yjiefr"
+      onClick={[Function]}
+    >
+      <span
+        aria-label="so cool"
+        role="img"
+      >
+        😀 😎 👍 💯
+      </span>
+    </button>
+  </Component>
+</Button>
 `;
 
 exports[`Storyshots Another Button with text 1`] = `
-<button
-  className="css-1yjiefr"
+<Button
   onClick={[Function]}
 >
-  Hello Button
-</button>
+  <Component
+    className="css-1yjiefr"
+    onClick={[Function]}
+  >
+    <button
+      className="css-1yjiefr"
+      onClick={[Function]}
+    >
+      Hello Button
+    </button>
+  </Component>
+</Button>
 `;
 
 exports[`Storyshots Button with some emoji 1`] = `
-<button
-  className="css-1yjiefr"
+<Button
   onClick={[Function]}
 >
-  <span
-    aria-label="so cool"
-    role="img"
+  <Component
+    className="css-1yjiefr"
+    onClick={[Function]}
   >
-    😀 😎 👍 💯
-  </span>
-</button>
+    <button
+      className="css-1yjiefr"
+      onClick={[Function]}
+    >
+      <span
+        aria-label="so cool"
+        role="img"
+      >
+        😀 😎 👍 💯
+      </span>
+    </button>
+  </Component>
+</Button>
 `;
 
 exports[`Storyshots Button with text 1`] = `
-<button
-  className="css-1yjiefr"
+<Button
   onClick={[Function]}
 >
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<article
-  className="css-1fqbdip"
->
-  <h1
-    className="css-nil"
+  <Component
+    className="css-1yjiefr"
+    onClick={[Function]}
   >
-    Welcome to storybook
-  </h1>
-  <p>
-    This is a UI component dev environment for your app.
-  </p>
-  <p>
-    We've added some basic stories inside the 
-    <code
-      className="css-mteq83"
-    >
-      src/stories
-    </code>
-     directory.
-    <br />
-    A story is a single state of one or more UI components. You can have as many stories as you want.
-    <br />
-    (Basically a story is like a visual test case.)
-  </p>
-  <p>
-    See these sample
-     
     <button
-      className="css-1opliz7"
+      className="css-1yjiefr"
       onClick={[Function]}
     >
-      stories
+      Hello Button
     </button>
-     
-    for a component called 
-    <code
-      className="css-mteq83"
-    >
-      Button
-    </code>
-    .
-  </p>
-  <p>
-    Just like that, you can add your own components as stories.
-    <br />
-    You can also edit those components and see changes right away.
-    <br />
-    (Try editing the 
-    <code
-      className="css-mteq83"
-    >
-      Button
-    </code>
-     stories located at
-     
-    <code
-      className="css-mteq83"
-    >
-      src/stories/index.js
-    </code>
-    .)
-  </p>
-  <p>
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    Have a look at the
-     
-    <a
-      className="css-ca0824"
-      href="https://storybook.js.org/basics/writing-stories"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      Writing Stories
-    </a>
-     
-    section in our documentation.
-  </p>
-  <p
-    className="css-bwdon3"
-  >
-    <b>
-      NOTE:
-    </b>
-    <br />
-    Have a look at the 
-    <code
-      className="css-mteq83"
+  </Component>
+</Button>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<Welcome
+  showApp={[Function]}
+  showKind={null}
+  showStory={null}
+>
+  <glamorous(article)>
+    <article
+      className="css-1fqbdip"
     >
-      .storybook/webpack.config.js
-    </code>
-     to add webpack loaders and plugins you are using in this project.
-  </p>
-</article>
+      <glamorous(h1)>
+        <h1
+          className="css-nil"
+        >
+          Welcome to storybook
+        </h1>
+      </glamorous(h1)>
+      <p>
+        This is a UI component dev environment for your app.
+      </p>
+      <p>
+        We've added some basic stories inside the 
+        <glamorous(code)>
+          <code
+            className="css-mteq83"
+          >
+            src/stories
+          </code>
+        </glamorous(code)>
+         directory.
+        <br />
+        A story is a single state of one or more UI components. You can have as many stories as you want.
+        <br />
+        (Basically a story is like a visual test case.)
+      </p>
+      <p>
+        See these sample
+         
+        <glamorous(glamorous(glamorous(a)))
+          onClick={[Function]}
+        >
+          <button
+            className="css-1opliz7"
+            onClick={[Function]}
+          >
+            stories
+          </button>
+        </glamorous(glamorous(glamorous(a)))>
+         
+        for a component called 
+        <glamorous(code)>
+          <code
+            className="css-mteq83"
+          >
+            Button
+          </code>
+        </glamorous(code)>
+        .
+      </p>
+      <p>
+        Just like that, you can add your own components as stories.
+        <br />
+        You can also edit those components and see changes right away.
+        <br />
+        (Try editing the 
+        <glamorous(code)>
+          <code
+            className="css-mteq83"
+          >
+            Button
+          </code>
+        </glamorous(code)>
+         stories located at
+         
+        <glamorous(code)>
+          <code
+            className="css-mteq83"
+          >
+            src/stories/index.js
+          </code>
+        </glamorous(code)>
+        .)
+      </p>
+      <p>
+        Usually we create stories with smaller UI components in the app.
+        <br />
+        Have a look at the
+         
+        <glamorous(a)
+          href="https://storybook.js.org/basics/writing-stories"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <a
+            className="css-ca0824"
+            href="https://storybook.js.org/basics/writing-stories"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Writing Stories
+          </a>
+        </glamorous(a)>
+         
+        section in our documentation.
+      </p>
+      <glamorous(p)>
+        <p
+          className="css-bwdon3"
+        >
+          <b>
+            NOTE:
+          </b>
+          <br />
+          Have a look at the 
+          <glamorous(code)>
+            <code
+              className="css-mteq83"
+            >
+              .storybook/webpack.config.js
+            </code>
+          </glamorous(code)>
+           to add webpack loaders and plugins you are using in this project.
+        </p>
+      </glamorous(p)>
+    </article>
+  </glamorous(article)>
+</Welcome>
 `;