887 Generate snapshot per story file

addons/storyshots/.gitignore

@@ -0,0 +1 @@
+*.storyshot

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.3",
     "babel-cli": "^6.24.1",
+    "babel-jest": "^20.0.3",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "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.0",

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;
@@ -21,6 +27,16 @@ const hasDependency = name =>
   (pkg.devDependencies && pkg.devDependencies[name]) ||
   (pkg.dependencies && pkg.dependencies[name]);
 
+function patchStoriesOfFunction(storybookImpl) {
+  const realStoriesOf = storybookImpl.storiesOf;
+  // eslint-disable-next-line
+  storybookImpl.storiesOf = (kind, module) => {
+    const storyFileName = module ? module.filename : '';
+    const newKindName = `${storyFileName}?${kind}`;
+    return realStoriesOf(newKindName, module);
+  };
+}
+
 export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());
 
@@ -45,9 +61,14 @@ export default function testStorySnapshots(options = {}) {
       dirname: configDirPath,
     };
 
+    patchStoriesOfFunction(storybook);
+
     runWithRequireContext(content, contextOpts);
   } else if (isRNStorybook) {
     storybook = require.requireActual('@storybook/react-native');
+
+    patchStoriesOfFunction(storybook);
+
     configPath = path.resolve(options.configPath || 'storybook');
     require.requireActual(configPath);
   } else {
@@ -70,13 +91,17 @@ export default function testStorySnapshots(options = {}) {
 
   // eslint-disable-next-line
   for (const group of stories) {
-    if (options.storyKindRegex && !group.kind.match(options.storyKindRegex)) {
+    const groupKindParts = group.kind.split('?');
+    const [storyFileName, kind] =
+      groupKindParts.length === 1 ? ['', groupKindParts[0]] : groupKindParts;
+
+    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 +110,7 @@ export default function testStorySnapshots(options = {}) {
           }
 
           it(story.name, () => {
-            const context = { kind: group.kind, story: story.name };
+            const context = { storyFileName, kind, story: story.name };
             options.test({ story, context });
           });
         }

addons/storyshots/src/test-bodies.js

@@ -1,12 +1,30 @@
+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.storyFileName || __filename;
+  const { dir, name } = path.parse(fileName);
+  return path.format({ dir, 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);
+  expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+};
+
 export const snapshot = snapshotWithOptions({});
 
 export function shallowSnapshot({ story, context }) {

addons/storyshots/stories/storyshot.test.js

@@ -0,0 +1,5 @@
+import initStoryshots, { multiSnapshotWithOptions } from '../src';
+
+initStoryshots({
+  test: multiSnapshotWithOptions({}),
+});