Merge pull request #7 from storybooks/add-storyshots-repo

Add storyshots repo

packages/storyshots/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "es2015", "react"
+  ],
+  "plugins": [
+    "transform-runtime"
+  ]
+}

packages/storyshots/.npmignore

@@ -0,0 +1,2 @@
+src
+.babelrc

packages/storyshots/.storybook/config.js

@@ -0,0 +1,10 @@
+import { configure } from '@kadira/storybook';
+
+const req = require.context('../stories/required_with_context', true, /.stories.js$/)
+
+function loadStories() {
+  req.keys().forEach((filename) => req(filename))
+  require('../stories/directly_required')
+}
+
+configure(loadStories, module);

packages/storyshots/CHANGELOG.md

@@ -0,0 +1,136 @@
+# ChangeLog
+
+### v3.2.2
+16-February-2016
+
+Move set channel to happen before anything runs because addons might init expecting the channel to exist. [PR75](https://github.com/storybooks/storyshots/pull/75)
+
+### v3.2.1
+21-January-2016
+
+Provide mock Storybook Channel to Storybook addons. [PR72](https://github.com/storybooks/storyshots/pull/72)
+
+### v3.2.0
+30-December-2016
+
+Add support to filter stories by story name using a regexp. [PR70](https://github.com/storybooks/storyshots/pull/70)
+
+### v3.1.1
+27-December-2016
+
+Pass storybook context to render function of stories. [PR69](https://github.com/storybooks/storyshots/pull/69)
+
+### v3.1.0
+24-December-2016
+
+Add support for require.context. [PR67](https://github.com/storybooks/storyshots/pull/67)
+
+### v3.0.0
+22-December-2016
+
+This is a brand new version of StoryShots where it allows you to use StoryShots inside Jest. Earlier we have also bundled a CLI tool which uses some of the internal modules used by Jest.
+
+But it seems like we are building an our own Jest with that. That's why we decided to go with this approach.
+
+If you still like to use our CLI version, use this [version](https://github.com/storybooks/storyshots/tree/v2.1.0).
+(It's working but we no longer maintain it.)
+
+### v2.1.0
+8-November-2016
+
+Default loaders support markdown file [PR56](https://github.com/kadirahq/storyshots/pull/56)
+
+### v2.0.2
+7-November-2016
+
+* `NODE_ENV` is set to `"development"` by default [PR50](https://github.com/kadirahq/storyshots/pull/50)
+* `require.context` regexp test includes the begining `./` of filenames [PR55](https://github.com/kadirahq/storyshots/pull/55)
+
+### v2.0.1
+20-October-2016
+
+Prepare channel before reading storybook as some addons use it before running stories. [PR41](https://github.com/kadirahq/storyshots/pull/41)
+
+### v2.0.0
+11-October-2016
+
+* Update `jest-snapshot` to version 16.0.0. [PR39](https://github.com/kadirahq/storyshots/pull/39)
+* Use a directory and extension different from regular jest snapshots for storyshots. [PR40](https://github.com/kadirahq/storyshots/pull/40)
+
+#### Migrating from 1.x.x
+
+From version 2.0.0 by default storyshot files will be stored in a directory named `__storyshots__` (instead of `__snapshots__`) inside storybook config directory. Further storyshot files will use extension `.shot` instead of `.snap`.
+
+These changes are important because they allow storyshots to be used with jest in the same project. See [issue#34](https://github.com/kadirahq/storyshots/issues/34) for more info.
+
+This mean that once storyshots is updated to 2.0.0 it wont check your existing snapshots. It will create new snapshots in the new location and you can delete old ones.
+
+To update safely, follow these steps.
+
+1. Run your 1.x.x version of storyshots and make sure all stories pass.
+2. Update storyshots. `npm install @kadira/storyshots@^2.0.0 --save-dev`
+3. Delete `__snapshots__` directory and contents from your storybook config directory. Also remove it from your version control system.
+4. Run updated storyshots and add the newly added `__storyshots__` directory to your version control system.
+
+Done!
+
+### v1.1.5
+9-October-2016
+
+Fix issue where `require.context` did not work with regexps for full path. [PR37](https://github.com/kadirahq/storyshots/pull/37)
+
+### v1.1.4
+6-October-2016
+
+Add support for `require.context` inside storybook config module. The regression introduced in v1.1.2 is addressed. [PR33](https://github.com/kadirahq/storyshots/pull/30)
+
+### v1.1.3
+30-September-2016
+
+v1.1.2 introduce a [regression](https://github.com/kadirahq/storyshots/pull/30#issuecomment-250805615). So this revert that version.
+
+### v1.1.2
+30-September-2016
+
+Add support for `require.context` inside storybook config module. [PR30](https://github.com/kadirahq/storyshots/pull/30)
+
+### v1.1.1
+28-September-2016
+
+* Watch mode Summary shows the stats for the last run only. [PR27](https://github.com/kadirahq/storyshots/pull/27)
+* If some tests fail exit with status code 1. [PR28](https://github.com/kadirahq/storyshots/pull/28)
+
+### v1.1.0
+27-September-2016
+
+Add `--exclude` flag to avoid running stories matching a given regexp. [PR24](https://github.com/kadirahq/storyshots/pull/24) [PR25](https://github.com/kadirahq/storyshots/pull/25)
+
+### v1.0.5
+25-September-2016
+
+* Fix missing dependencies. [PR21](https://github.com/kadirahq/storyshots/pull/21)
+* Context should contain only the story name. [PR20](https://github.com/kadirahq/storyshots/pull/20)
+
+### v1.0.4
+
+Invalid Version. Same as v1.0.3
+
+### v1.0.3
+23-September-2016
+
+Fix a typo in the console Summary message.
+
+### v1.0.1
+22-September-2016
+
+Fix: Allow module loaders to return something. [PR14](https://github.com/kadirahq/storyshots/pull/14)
+
+### v1.0.1
+22-September-2016
+
+Fix a typo.
+
+### v1.0.0
+22-September-2016
+
+Initial Release.

packages/storyshots/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Kadira Inc. <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/storyshots/README.md

@@ -0,0 +1,87 @@
+# StoryShots [![CircleCI](https://circleci.com/gh/storybooks/storyshots.svg?style=shield)](https://circleci.com/gh/storybooks/storyshots)
+
+Jest Snapshot Testing for [Storybook](https://getstorybook.io/).<br/>
+(Supports both [React](https://github.com/storybooks/react-storybook) and [React Native](https://github.com/storybooks/react-native-storybook) Storybook)
+
+![StoryShots In Action](docs/storyshots-fail.png)
+
+With StoryShots, you could use your existing Storybook stories as the input for Jest Snapshot Testing.
+
+> Now, we don't ship a CLI tool for storyshots. Check version [2.x](https://github.com/storybooks/storyshots/tree/v2.1.0) for that.
+
+## Getting Started
+
+First of all, you need to use the latest version of React Storybook.
+So, do this:
+
+```sh
+npm update @kadira/storybook
+```
+
+Then add the following NPM module into your app.
+
+```sh
+npm i -D storyshots
+```
+
+## Configure your app for Jest
+
+Usually, you might already have completed this step. If not, here are some resources for you.
+
+* If you are using Create React App, it's already configured for Jest. You just need to create a filename with the extension `.test.js`.
+* Otherwise check this Egghead [lesson](https://egghead.io/lessons/javascript-test-javascript-with-jest).
+
+## Configure Storyshots
+
+Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer).
+Then add following content to it:
+
+```js
+import initStoryshots from 'storyshots';
+initStoryshots();
+```
+
+That's all.
+
+Now run your Jest test command. (Usually, `npm test`.) Then you can see all of your stories are converted as Jest snapshot tests.
+
+![](docs/storyshots.png)
+
+## Options
+
+### `configPath`
+
+By default Storyshots assume the default config directory path for your project as below:
+
+* For React Storybook: `.storybook`
+* For React Native Storybook: `storybook`
+
+If you are using a different config directory path, you could change it like this:
+
+```js
+initStoryshots({
+  configPath: '.my-storybook-config-dir'
+});
+```
+
+### `suit`
+
+By default, we group stories inside Jest test suit called "StoryShots". You could change it like this:
+
+```js
+initStoryshots({
+  suit: 'MyStoryShots'
+});
+```
+
+### `storyRegex`
+
+If you'd like to only run a subset of the stories for your snapshot tests:
+
+```js
+initStoryshots({
+  storyRegex: /buttons/
+});
+```
+
+Here is an example of [a regex](https://regex101.com/r/vkBaAt/2) which does not pass if `"Relay"` is in the name: `/^((?!(r|R)elay).)*$/`.

packages/storyshots/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "storyshots",
+  "version": "3.2.2",
+  "description": "StoryShots - Jest Snapshot Testing for React Storybook.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storyshots.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "scripts": {
+    "prepublish": "babel ./src --out-dir ./dist",
+    "test": "jest",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.14.0",
+    "babel-jest": "^18.0.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "jest": "^18.0.0",
+    "react-dom": "^15.4.1"
+  },
+  "dependencies": {
+    "@kadira/storybook": "^2.21.0",
+    "@kadira/storybook-addons": "^1.6.1",
+    "@kadira/storybook-channel": "^1.1.0",
+    "babel-runtime": "^6.20.0",
+    "react": "^15.4.1",
+    "react-test-renderer": "^15.3.1",
+    "read-pkg-up": "^2.0.0"
+  }
+}

packages/storyshots/src/index.js

@@ -0,0 +1,73 @@
+import renderer from 'react-test-renderer';
+import path from 'path';
+import readPkgUp from 'read-pkg-up';
+import addons from '@kadira/storybook-addons';
+import runWithRequireContext from './require_context';
+import createChannel from './storybook-channel-mock';
+const { describe, it, expect } = global;
+
+let storybook;
+let configPath;
+
+const babel = require('babel-core');
+
+const pkg = readPkgUp.sync().pkg;
+const isStorybook = (pkg.devDependencies && pkg.devDependencies['@kadira/storybook']) ||
+  (pkg.dependencies && pkg.dependencies['@kadira/storybook']);
+const isRNStorybook = (pkg.devDependencies &&
+  pkg.devDependencies['@kadira/react-native-storybook']) ||
+  (pkg.dependencies && pkg.dependencies['@kadira/react-native-storybook']);
+
+export default function testStorySnapshots(options = {}) {
+  addons.setChannel(createChannel());
+
+  if (isStorybook) {
+    storybook = require.requireActual('@kadira/storybook');
+    const loadBabelConfig = require('@kadira/storybook/dist/server/babel_config').default;
+    const configDirPath = path.resolve(options.configPath || '.storybook');
+    configPath = path.join(configDirPath, 'config.js');
+
+    const content = babel.transformFileSync(configPath, babelConfig).code;
+    const contextOpts = {
+      filename: configPath,
+      dirname: configDirPath
+    };
+    const babelConfig = loadBabelConfig(configDirPath);
+
+    runWithRequireContext(content, contextOpts);
+  } else if (isRNStorybook) {
+    storybook = require.requireActual('@kadira/react-native-storybook');
+    configPath = path.resolve(options.configPath || 'storybook');
+    require.requireActual(configPath);
+  } else {
+    throw new Error(
+      'storyshots is intended only to be used with react storybook or react native storybook'
+    );
+  }
+
+  if (typeof describe !== 'function') {
+    throw new Error('testStorySnapshots is intended only to be used inside jest');
+  }
+
+  const suit = options.suit || 'Storyshots';
+  const stories = storybook.getStorybook();
+
+  for (const group of stories) {
+    describe(suit, () => {
+      describe(group.kind, () => {
+        for (const story of group.stories) {
+          if (options.storyRegex && !story.name.match(options.storyRegex)) {
+            continue;
+          }
+
+          it(story.name, () => {
+            const context = { kind: group.kind, story: story.name };
+            const renderedStory = story.render(context);
+            const tree = renderer.create(renderedStory).toJSON();
+            expect(tree).toMatchSnapshot();
+          });
+        }
+      });
+    });
+  }
+}