add support for storyshots to save files according to different patterns

addons/storyshots/README.md

@@ -127,6 +127,18 @@ initStoryshots({
 
 If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this.
 
+### `filesPattern`
+
+It allows you to generate separate snapshot files according to your needs. Please check [snapshotPerStoryFile](#snapshotPerStoryFile) and [snapshotPerStoryAdded](#snapshotPerStoryAdded) below.
+
+```js
+import initStoryshots, { snapshotPerStoryAdded } from '@storybook/addon-storyshots';
+
+initStoryshots({
+  filesPattern: snapshotPerStoryAdded,
+});
+```
+
 ### `test`
 
 Run a custom test function for each story, rather than the default (a vanilla snapshot test). Setting `test` will take precedence over the `renderer` option. See the exports section below for more details.
@@ -191,30 +203,34 @@ 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)`
+### `snapshotPerStoryFile`
+
+It generates 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.
+
+### `snapshotPerStoryAdded`
 
-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.
+Like `snapshotPerStoryFile`, but generate a separate snapshot file for each stories added, rather than a single file snapshopt per story file. This makes it even easier to review changes.
 
 ### `shallowSnapshot`
 
 Take a snapshot of a shallow-rendered version of the component. Note that this option will be overriden if you pass a `renderer` option.
 
-### `getSnapshotFileName`
+### `filesPattern.getSnapshotFileName`
 
-Utility function used in `multiSnapshotWithOptions`. This is made available for users who implement custom test functions that also want to take advantage of multi-file storyshots.
+Utility function used in `snapshotWithOptions`. This is made available for users who implement custom test functions that also want to take advantage of multi-file storyshots.
 
 ###### Example:
 
 Let's say we wanted to create a test function for shallow && multi-file snapshots:
 
 ```js
-import initStoryshots, { getSnapshotFileName } from '@storybook/addon-storyshots';
+import initStoryshots, { snapshotPerStoryFile } from '@storybook/addon-storyshots';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 
 initStoryshots({
   test: ({ story, context }) => {
-    const snapshotFileName = getSnapshotFileName(context);
+    const snapshotFileName = snapshotPerStoryFile.getSnapshotFileName(context);
     const storyElement = story.render(context);
     const shallowTree = shallow(storyElement);
 

addons/storyshots/package.json

@@ -22,7 +22,8 @@
     "global": "^4.3.2",
     "jest-specific-snapshot": "^0.2.0",
     "prop-types": "^15.6.0",
-    "read-pkg-up": "^3.0.0"
+    "read-pkg-up": "^3.0.0",
+    "sanitize-filename": "^1.6.1"
   },
   "devDependencies": {
     "@storybook/addons": "^3.3.0-alpha.4",

addons/storyshots/src/index.js

@@ -8,17 +8,10 @@ import addons from '@storybook/addons';
 import runWithRequireContext from './require_context';
 import createChannel from './storybook-channel-mock';
 import { snapshotWithOptions } from './test-bodies';
-import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
 
-export {
-  snapshot,
-  multiSnapshotWithOptions,
-  snapshotWithOptions,
-  shallowSnapshot,
-  renderOnly,
-} from './test-bodies';
+export { snapshot, snapshotWithOptions, shallowSnapshot, renderOnly } from './test-bodies';
 
-export { getSnapshotFileName };
+export { snapshotPerStoryFile, snapshotPerStoryAdded } from './utils';
 
 let storybook;
 let configPath;
@@ -36,6 +29,8 @@ const hasDependency = name =>
 export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());
 
+  const filesPattern = options.filesPattern || {};
+
   const isStorybook =
     options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
   const isRNStorybook =
@@ -90,6 +85,23 @@ export default function testStorySnapshots(options = {}) {
   options.test =
     options.test || snapshotWithOptions({ options: snapshotOptions });
 
+  const storyFileExists = fileName =>
+    filesPattern.getPossibleStoriesFiles(fileName).some(fs.existsSync);
+
+  if (filesPattern.getPossibleStoriesFiles) {
+    describe('Storyshots Integrity', () => {
+      describe('Abandoned Storyshots', () => {
+        const storyshots = glob.sync('**/*.storyshot');
+
+        const abandonedStoryshots = storyshots.filter(fileName => !storyFileExists(fileName));
+
+        expect(abandonedStoryshots).toHaveLength(0);
+      });
+    });
+  }
+
+  const { getSnapshotFileName } = filesPattern;
+
   // eslint-disable-next-line
   for (const group of stories) {
     const { fileName, kind } = group;
@@ -113,23 +125,11 @@ export default function testStorySnapshots(options = {}) {
             return options.test({
               story,
               context,
+              getSnapshotFileName,
             });
           });
         }
       });
     });
   }
 }
-
-describe('Storyshots Integrity', () => {
-  describe('Abandoned Storyshots', () => {
-    const storyshots = glob.sync('**/*.storyshot');
-
-    const abandonedStoryshots = storyshots.filter(fileName => {
-      const possibleStoriesFiles = getPossibleStoriesFiles(fileName);
-      return !possibleStoriesFiles.some(fs.existsSync);
-    });
-
-    expect(abandonedStoryshots).toHaveLength(0);
-  });
-});

addons/storyshots/src/test-bodies.js

@@ -1,7 +1,6 @@
 import reactTestRenderer from 'react-test-renderer';
 import shallow from 'react-test-renderer/shallow';
 import 'jest-specific-snapshot';
-import { getSnapshotFileName } from './utils';
 
 function getRenderedTree(story, context, { renderer, serializer, ...rendererOptions }) {
   const currentRenderer = renderer || reactTestRenderer.create;
@@ -10,10 +9,14 @@ function getRenderedTree(story, context, { renderer, serializer, ...rendererOpti
   return serializer ? serializer(tree) : tree;
 }
 
-export const snapshotWithOptions = options => ({ story, context, snapshotFileName }) => {
+export const snapshotWithOptions = options => ({ story, context, snapshotFileName, getSnapshotFileName }) => {
   const tree = getRenderedTree(story, context, options);
 
   if (snapshotFileName) {
+    expect(tree).toMatchSpecificSnapshot(snapshotFileName);
+  } else if (getSnapshotFileName) {
+    snapshotFileName = getSnapshotFileName(context);
+
     expect(tree).toMatchSpecificSnapshot(snapshotFileName);
   } else {
     expect(tree).toMatchSnapshot();
@@ -24,10 +27,6 @@ export const snapshotWithOptions = options => ({ story, context, snapshotFileNam
   }
 };
 
-export const multiSnapshotWithOptions = options => ({ story, context }) => {
-  snapshotWithOptions(options)({ story, context, snapshotFileName: getSnapshotFileName(context) });
-};
-
 export const snapshot = snapshotWithOptions({});
 
 export function shallowSnapshot({ story, context, options: { renderer, serializer } }) {

addons/storyshots/src/utils.js

@@ -1,25 +1,47 @@
 import path from 'path';
+import sanitize from 'sanitize-filename';
 
-function getStoryshotFile(fileName) {
-  const { dir, name } = path.parse(fileName);
-  return path.format({ dir: path.join(dir, '__snapshots__'), name, ext: '.storyshot' });
-}
+export const snapshotPerStoryFile = {
+  getSnapshotFileName(context) {
+    const { fileName } = context;
 
-export function getPossibleStoriesFiles(storyshotFile) {
-  const { dir, name } = path.parse(storyshotFile);
+    if (!fileName) {
+      return null;
+    }
 
-  return [
-    path.format({ dir: path.dirname(dir), name, ext: '.js' }),
-    path.format({ dir: path.dirname(dir), name, ext: '.jsx' }),
-  ];
-}
+    const { dir, name } = path.parse(fileName);
+    return path.format({ dir: path.join(dir, '__snapshots__'), name, ext: '.storyshot' });
+  },
+  getPossibleStoriesFiles(storyshotFile) {
+    const { dir, name } = path.parse(storyshotFile);
 
-export function getSnapshotFileName(context) {
-  const { fileName } = context;
-
-  if (!fileName) {
-    return null;
+    return [
+      path.format({ dir: path.dirname(dir), name, ext: '.js' }),
+      path.format({ dir: path.dirname(dir), name, ext: '.jsx' }),
+    ];
   }
+};
+
+export const snapshotPerStoryAdded = {
+  getSnapshotFileName(context) {
+    const { fileName, kind, story } = context;
+
+    if (!fileName) {
+      return null;
+    }
 
-  return getStoryshotFile(fileName);
-}
+    const { dir } = path.parse(fileName);
+    const name = sanitize(`${kind}--${story}`)
+    return path.format({ dir: path.join(dir, '__snapshots__'), name, ext: '.storyshot' });
+  },
+  getPossibleStoriesFiles(storyshotFile) {
+    const { dir } = path.parse(storyshotFile);
+
+    return [
+      path.format({ dir: path.dirname(dir), name: 'stories', ext: '.js' }),
+      path.format({ dir: path.dirname(dir), name: 'stories', ext: '.js' }),
+      path.format({ dir: path.dirname(dir), name: '.stories', ext: '.jsx' }),
+      path.format({ dir: path.dirname(dir), name: '.stories', ext: '.jsx' }),
+    ];
+  }
+};