Merge pull request #971 from storybooks/test-storyshots

Test storyshots

.travis.yml

@@ -11,6 +11,7 @@ before_install: ./scripts/travis/before_install.sh
 after_success: ./scripts/travis/after_success.sh
 script:
   - npm run bootstrap
+  - (cd examples/test-cra && npm install)
   - npm run lint
   - npm run test -- --coverage
   - npm run coverage

addons/storyshots/README.md

@@ -96,3 +96,7 @@ initStoryshots({
   storyNameRegex: /buttons/
 });
 ```
+
+### `framework`
+
+If you are running tests from outside of your app's directory, storyshot's detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this.

addons/storyshots/package.json

@@ -22,11 +22,6 @@
     "react-dom": "^15.5.4"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.0.0-alpha.1",
-    "@storybook/addon-links": "^3.0.0-alpha.1",
-    "@storybook/addons": "^3.0.0-alpha.0",
-    "@storybook/channels": "^3.0.0-alpha.0",
-    "@storybook/react": "^3.0.0-alpha.1",
     "babel-runtime": "^6.23.0",
     "prop-types": "^15.5.8",
     "read-pkg-up": "^2.0.0"

addons/storyshots/src/index.js

@@ -12,16 +12,21 @@ let configPath;
 const babel = require('babel-core');
 
 const pkg = readPkgUp.sync().pkg;
-const isStorybook =
-  (pkg.devDependencies && pkg.devDependencies['@storybook/react']) ||
-  (pkg.dependencies && pkg.dependencies['@storybook/react']);
-const isRNStorybook =
-  (pkg.devDependencies && pkg.devDependencies['@storybook/react-native']) ||
-  (pkg.dependencies && pkg.dependencies['@storybook/react-native']);
+
+const hasDependency = function(name) {
+  return (
+    (pkg.devDependencies && pkg.devDependencies[name]) ||
+    (pkg.dependencies && pkg.dependencies[name])
+  );
+};
 
 export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());
 
+  const isStorybook = options.framework === 'react' || hasDependency('@storybook/react');
+  const isRNStorybook =
+    options.framework === 'react-native' || hasDependency('@storybook/react-native');
+
   if (isStorybook) {
     storybook = require.requireActual('@storybook/react');
     const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;

examples/test-cra/package.json

@@ -22,7 +22,9 @@
     "@storybook/channels": "file:../../lib/channels",
     "@storybook/channel-postmessage": "file:../../lib/channel-postmessage",
     "@storybook/ui": "file:../../lib/ui",
-    "react-scripts": "0.9.5"
+    "@storybook/addon-storyshots": "file:../../addons/storyshots",
+    "react-scripts": "1.0.2",
+    "react-test-renderer": "^15.4.2"
   },
   "private": true
 }

examples/test-cra/src/__snapshots__/storyshots.test.js.snap

@@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  onClick={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#FFFFFF",
+      "border": "1px solid #eee",
+      "borderRadius": 3,
+      "cursor": "pointer",
+      "fontSize": 15,
+      "margin": 10,
+      "padding": "3px 10px",
+    }
+  }
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<div
+  style={
+    Object {
+      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "margin": 15,
+      "maxWidth": 600,
+    }
+  }
+>
+  <h1>
+    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
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      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
+     
+    <a
+      href="#"
+      onClick={[Function]}
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+    >
+      stories
+    </a>
+     
+    for a component called
+     
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    Here's how to add your 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      App
+    </code>
+     component as a story.
+    <div
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<pre>
+        // Add this code to \\"src/stories/index.js\\"
+        
+        import '../index.css';
+        import App from '../App';
+        
+        storiesOf('App', module)
+          .add('default view', () => (
+            &lt;App /&gt;
+          ))
+        </pre>",
+        }
+      }
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "margin": "10px 0",
+          "padding": "1px 10px",
+        }
+      }
+    />
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the
+     
+    <a
+      href="https://storybooks.js.org/docs/react-storybook/basics/writing-stories"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+     
+    section in our documentation.
+  </p>
+</div>
+`;

examples/test-cra/src/storyshots.test.js

@@ -0,0 +1,7 @@
+import initStoryshots from '@storybook/addon-storyshots';
+import path from 'path';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+});