887 Generate snapshot per story file

addons/storyshots/README.md

@@ -145,6 +145,10 @@ Just render the story, don't check the output at all (useful if you just want to
 
 Like the default, but allows you to specify a set of options for the test renderer. [See for example here](https://github.com/storybooks/storybook/blob/b915b5439786e0edb17d7f5ab404bba9f7919381/examples/test-cra/src/storyshots.test.js#L14-L16).
 
+### `multiSnapshotWithOptions(options)`
+
+Like `snapshotWithOptions`, but generate a separate snapshot file for each stories file rather than a single monolithic file (as is the convention in Jest). This makes it dramatically easier to review changes.
+
 ### `shallowSnapshot`
 
 Take a snapshot of a shallow-rendered version of the component.

addons/storyshots/package.json

@@ -11,11 +11,13 @@
   "scripts": {
     "build-storybook": "build-storybook",
     "prepublish": "babel ./src --out-dir ./dist",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "example": "jest storyshot.test"
   },
   "dependencies": {
     "babel-runtime": "^6.23.0",
     "global": "^4.3.2",
+    "jest-specific-snapshot": "^0.2.0",
     "prop-types": "^15.5.10",
     "read-pkg-up": "^2.0.0"
   },
@@ -24,11 +26,14 @@
     "@storybook/channels": "^3.2.0",
     "@storybook/react": "^3.2.8",
     "babel-cli": "^6.24.1",
+    "babel-jest": "^20.0.3",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react-dom": "^15.6.1",
+    "jest": "^20.0.4",
+    "jest-cli": "^20.0.4"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.2.6",

addons/storyshots/src/index.js

@@ -7,7 +7,13 @@ import runWithRequireContext from './require_context';
 import createChannel from './storybook-channel-mock';
 import { snapshot } from './test-bodies';
 
-export { snapshotWithOptions, snapshot, shallowSnapshot, renderOnly } from './test-bodies';
+export {
+  snapshot,
+  multiSnapshotWithOptions,
+  snapshotWithOptions,
+  shallowSnapshot,
+  renderOnly,
+} from './test-bodies';
 
 let storybook;
 let configPath;
@@ -48,6 +54,7 @@ export default function testStorySnapshots(options = {}) {
     runWithRequireContext(content, contextOpts);
   } else if (isRNStorybook) {
     storybook = require.requireActual('@storybook/react-native');
+
     configPath = path.resolve(options.configPath || 'storybook');
     require.requireActual(configPath);
   } else {
@@ -70,13 +77,15 @@ export default function testStorySnapshots(options = {}) {
 
   // eslint-disable-next-line
   for (const group of stories) {
-    if (options.storyKindRegex && !group.kind.match(options.storyKindRegex)) {
+    const { fileName, kind } = group;
+
+    if (options.storyKindRegex && !kind.match(options.storyKindRegex)) {
       // eslint-disable-next-line
       continue;
     }
 
     describe(suite, () => {
-      describe(group.kind, () => {
+      describe(kind, () => {
         // eslint-disable-next-line
         for (const story of group.stories) {
           if (options.storyNameRegex && !story.name.match(options.storyNameRegex)) {
@@ -85,7 +94,7 @@ export default function testStorySnapshots(options = {}) {
           }
 
           it(story.name, () => {
-            const context = { kind: group.kind, story: story.name };
+            const context = { fileName, kind, story: story.name };
             options.test({ story, context });
           });
         }

addons/storyshots/src/test-bodies.js

@@ -1,12 +1,41 @@
+import path from 'path';
 import renderer from 'react-test-renderer';
 import shallow from 'react-test-renderer/shallow';
+import 'jest-specific-snapshot';
 
-export const snapshotWithOptions = options => ({ story, context }) => {
+function getRenderedTree(story, context, options) {
   const storyElement = story.render(context);
-  const tree = renderer.create(storyElement, options).toJSON();
+  return renderer.create(storyElement, options).toJSON();
+}
+
+function getSnapshotFileName(context) {
+  const fileName = context.fileName;
+
+  if (!fileName) {
+    return null;
+  }
+
+  const { dir, name } = path.parse(fileName);
+  return path.format({ dir: path.join(dir, '__snapshots__'), name, ext: '.storyshot' });
+}
+
+export const snapshotWithOptions = options => ({ story, context }) => {
+  const tree = getRenderedTree(story, context, options);
   expect(tree).toMatchSnapshot();
 };
 
+export const multiSnapshotWithOptions = options => ({ story, context }) => {
+  const tree = getRenderedTree(story, context, options);
+  const snapshotFileName = getSnapshotFileName(context);
+
+  if (!snapshotFileName) {
+    expect(tree).toMatchSnapshot();
+    return;
+  }
+
+  expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+};
+
 export const snapshot = snapshotWithOptions({});
 
 export function shallowSnapshot({ story, context }) {

addons/storyshots/stories/directly_required/__snapshots__/index.storyshot

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Another Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Another Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;

addons/storyshots/stories/required_with_context/__snapshots__/Button.stories.storyshot

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  😀 😎 👍 💯
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  className="css-1yjiefr"
+  onClick={[Function]}
+>
+  Hello Button
+</button>
+`;

addons/storyshots/stories/required_with_context/__snapshots__/Welcome.stories.storyshot

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<article
+  className="css-1fqbdip"
+>
+  <h1
+    className="css-nil"
+  >
+    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
+
+    <a
+      className="css-ca0824"
+      onClick={[Function]}
+      role="button"
+      tabIndex="0"
+    >
+      stories
+    </a>
+
+    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"
+    >
+      .storybook/webpack.config.js
+    </code>
+
+    to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;

addons/storyshots/stories/storyshot.test.js

@@ -0,0 +1,8 @@
+import path from 'path';
+import initStoryshots, { multiSnapshotWithOptions } from '../src';
+
+initStoryshots({
+  framework: 'react',
+  configPath: path.join(__dirname, '..', '.storybook'),
+  test: multiSnapshotWithOptions({}),
+});

app/react-native/src/preview/index.js

@@ -23,7 +23,10 @@ export default class Preview {
     if (module && module.hot) {
       // TODO remove the kind on dispose
     }
-    return new StoryKindApi(this._stories, this._addons, this._decorators, kind);
+
+    const fileName = module ? module.filename : null;
+
+    return new StoryKindApi(this._stories, this._addons, this._decorators, kind, fileName);
   }
 
   setAddon(addon) {
@@ -44,11 +47,14 @@ export default class Preview {
 
   getStorybook() {
     return this._stories.getStoryKinds().map(kind => {
+      const fileName = this._stories.getStoryFileName(kind);
+
       const stories = this._stories.getStories(kind).map(name => {
         const render = this._stories.getStory(kind, name);
         return { name, render };
       });
-      return { kind, stories };
+
+      return { kind, fileName, stories };
     });
   }
 

app/react-native/src/preview/story_kind.js

@@ -1,10 +1,11 @@
 /* eslint no-underscore-dangle: 0 */
 
 export default class StoryKindApi {
-  constructor(stories, addons, decorators, kind) {
+  constructor(stories, addons, decorators, kind, fileName) {
     this.kind = kind;
     this._stories = stories;
     this._decorators = decorators.slice();
+    this._fileName = fileName;
     Object.assign(this, addons);
   }
 
@@ -15,7 +16,7 @@ export default class StoryKindApi {
 
   add(story, fn) {
     const decorated = this._decorate(fn);
-    this._stories.addStory(this.kind, story, decorated);
+    this._stories.addStory(this.kind, story, decorated, this._fileName);
     return this;
   }
 

app/react-native/src/preview/story_store.js

@@ -9,11 +9,12 @@ export default class StoryStore extends EventEmitter {
     this._data = {};
   }
 
-  addStory(kind, name, fn) {
+  addStory(kind, name, fn, fileName) {
     count += 1;
     if (!this._data[kind]) {
       this._data[kind] = {
         kind,
+        fileName,
         index: count,
         stories: {},
       };
@@ -46,6 +47,15 @@ export default class StoryStore extends EventEmitter {
       .map(info => info.name);
   }
 
+  getStoryFileName(kind) {
+    const storiesKind = this._data[kind];
+    if (!storiesKind) {
+      return null;
+    }
+
+    return storiesKind.fileName;
+  }
+
   getStory(kind, name) {
     const storiesKind = this._data[kind];
     if (!storiesKind) {

app/react/src/client/preview/client_api.js

@@ -76,8 +76,10 @@ export default class ClientApi {
         getStory
       );
 
+      const fileName = m ? m.filename : null;
+
       // Add the fully decorated getStory function.
-      this._storyStore.addStory(kind, storyName, fn);
+      this._storyStore.addStory(kind, storyName, fn, fileName);
       return api;
     };
 
@@ -91,11 +93,14 @@ export default class ClientApi {
 
   getStorybook() {
     return this._storyStore.getStoryKinds().map(kind => {
+      const fileName = this._storyStore.getStoryFileName(kind);
+
       const stories = this._storyStore.getStories(kind).map(name => {
         const render = this._storyStore.getStory(kind, name);
         return { name, render };
       });
-      return { kind, stories };
+
+      return { kind, fileName, stories };
     });
   }
 }