oblador · oblador · Jul 2, 2020 · Apr 2, 2020 · Jun 11, 2020 · techeverri
diff --git a/docs/flaky-tests.md b/docs/flaky-tests.md
@@ -5,12 +5,12 @@ title: Handling Flaky Tests
 
 ## Skipping Tests
 
-In some cases having a story of a component is useful for development purposes, but might be acceptable not to be covered by visual regression tests such as an animated GIF that cannot accurately be covered with a single screenshot. In those cases you can opt out by using `add.skip()`:
+In some cases having a story of a component is useful for development purposes, but might be acceptable not to be covered by visual regression tests such as an animated GIF that cannot accurately be covered with a single screenshot. In those cases you can opt out by passing setting `skip: true` in the `loki` parameter:
 
 ```js
 storiesOf('MyComponent', module)
   .add('enabled story', () => <MyComponent />)
-  .lokiSkip('skipped story', () => <MyComponent />);
+  .add('skipped story', () => <MyComponent />, { loki: { skip: true } });
 ```
 
 ## Asynchronous Stories

diff --git a/examples/react/.loki/reference/chrome_a4_CSF_404_Error.png b/examples/react/.loki/reference/chrome_a4_CSF_404_Error.png
diff --git a/examples/react/.loki/reference/chrome_a4_CSF_TODO.png b/examples/react/.loki/reference/chrome_a4_CSF_TODO.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_CSF_404_Error.png b/examples/react/.loki/reference/chrome_iphone7_CSF_404_Error.png
diff --git a/examples/react/.loki/reference/chrome_iphone7_CSF_TODO.png b/examples/react/.loki/reference/chrome_iphone7_CSF_TODO.png
diff --git a/examples/react/.loki/reference/chrome_laptop_CSF_404_Error.png b/examples/react/.loki/reference/chrome_laptop_CSF_404_Error.png
diff --git a/examples/react/.loki/reference/chrome_laptop_CSF_TODO.png b/examples/react/.loki/reference/chrome_laptop_CSF_TODO.png
diff --git a/examples/react/src/stories/csf.stories.js b/examples/react/src/stories/csf.stories.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Box = ({ color }) => (
+  <div style={{ width: 100, height: 100, background: color }} />
+);
+
+export default {
+  component: Box,
+  title: 'CSF',
+};
+
+export const Error404 = () => <Box color="blue" />;
+
+Error404.story = {
+  name: '404 Error',
+};
+
+export const TODO = () => <Box color="green" />;
+
+TODO.story = {
+  name: '@TODO',
+};
+
+export const Skipped = () => <Box color="red" />;
+
+Skipped.story = {
+  parameters: { loki: { skip: true } },
+};
diff --git a/examples/react/src/stories/index.stories.js b/examples/react/src/stories/index.stories.js
@@ -18,9 +18,11 @@ import ZeroHeightWithPadding from '../ZeroHeightWithPadding';
 import Hover from '../Hover';
 import FocusedInput from '../FocusedInput';
 
-storiesOf('Welcome', module).lokiSkip('to Storybook', () => (
-  <Welcome showApp={linkTo('Button')} />
-));
+storiesOf('Welcome', module)
+  .lokiSkip('to Storybook', () => <Welcome showApp={linkTo('Button')} />)
+  .add('skipped', () => <Welcome showApp={linkTo('Button')} />, {
+    loki: { skip: true },
+  });
 
 storiesOf('Text', module).add('with external font', () => (
   <CursiveText>Hello CursiveText</CursiveText>

diff --git a/fixtures/storybook-dynamic/iframe.html b/fixtures/storybook-dynamic/iframe.html
@@ -1,22 +1,74 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
 
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script>
-          if (window.parent !== window) {
-            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-          }
-        </script>
-        <title>Storybook</title>
-
-
-      </head>
-      <body>
-        <div id="root"></div>
-        <div id="error-display"></div>
-        <script src="static/preview.bundle.js"></script>
-      </body>
-    </html>
-
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }</script><style>#root[hidden],
+      #docs-root[hidden] {
+        display: none !important;
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.cf4424013badd87a0545.bundle.js"></script><script src="vendors~main.cf4424013badd87a0545.bundle.js"></script><script src="main.cf4424013badd87a0545.bundle.js"></script></body></html>