From b78f33700b8ff581af0b52862708fb5920090594 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 28 Apr 2017 20:29:01 +1000 Subject: [PATCH 1/3] Make storybook et al peer deps. Storyshots wants to plugin to the version used by the app, not have its own version. So its a clear peer dep. Not sure it should depend on *storybook* at all given it is optional whether the user uses it or `react-native-storybook` --- packages/storyshots/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/storyshots/package.json b/packages/storyshots/package.json index 9739ad9e2b97..a053d99a47e4 100644 --- a/packages/storyshots/package.json +++ b/packages/storyshots/package.json @@ -22,15 +22,15 @@ "react-dom": "^15.5.4" }, "dependencies": { - "@kadira/storybook": "*", - "@kadira/storybook-addons": "*", - "@kadira/storybook-channel": "*", "babel-runtime": "^6.20.0", "prop-types": "^15.5.7", "read-pkg-up": "^2.0.0" }, "peerDependencies": { "react": "*", - "react-test-renderer": "*" + "react-test-renderer": "*", + "@kadira/storybook": "*", + "@kadira/storybook-addons": "*", + "@kadira/storybook-channel": "*" } } From 10d74a3dac0145b6ef969d1be9c68188a048a3c7 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 28 Apr 2017 20:39:27 +1000 Subject: [PATCH 2/3] Use storyshots in the CRA test app --- examples/cra-storybook/.babelrc | 3 + examples/cra-storybook/package.json | 4 +- .../src/__snapshots__/storyshots.test.js.snap | 177 ++++++++++++++++++ examples/cra-storybook/src/storyshots.test.js | 2 + 4 files changed, 185 insertions(+), 1 deletion(-) create mode 100644 examples/cra-storybook/.babelrc create mode 100644 examples/cra-storybook/src/__snapshots__/storyshots.test.js.snap create mode 100644 examples/cra-storybook/src/storyshots.test.js diff --git a/examples/cra-storybook/.babelrc b/examples/cra-storybook/.babelrc new file mode 100644 index 000000000000..1a22e535eed3 --- /dev/null +++ b/examples/cra-storybook/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": "react-app" +} diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json index d8c252de2a54..f026760c2aa6 100644 --- a/examples/cra-storybook/package.json +++ b/examples/cra-storybook/package.json @@ -4,7 +4,9 @@ "private": true, "devDependencies": { "@kadira/storybook": "*", - "react-scripts": "0.9.5" + "react-scripts": "0.9.5", + "react-test-renderer": "^15.5.4", + "storyshots": "*" }, "dependencies": { "react": "^15.4.2", diff --git a/examples/cra-storybook/src/__snapshots__/storyshots.test.js.snap b/examples/cra-storybook/src/__snapshots__/storyshots.test.js.snap new file mode 100644 index 000000000000..fbcbc9023c2b --- /dev/null +++ b/examples/cra-storybook/src/__snapshots__/storyshots.test.js.snap @@ -0,0 +1,177 @@ +exports[`Storyshots Button with some emoji 1`] = ` + +`; + +exports[`Storyshots Button with text 1`] = ` + +`; + +exports[`Storyshots Welcome to Storybook 1`] = ` +
+

+ Welcome to STORYBOOK +

+

+ This is a UI component dev environment for your app. +

+

+ We\'ve added some basic stories inside the + + + src/stories + + + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + + + stories + + + for a component called + + + Button + + . +

+

+ Just like that, you can add your own components as stories. +
+ Here\'s how to add your + + App + + component as a story. +

+ // Add this code to \"src/stories/index.js\" + + import \'../index.css\'; + import App from \'../App\'; + + storiesOf(\'App\', module) + .add(\'default view\', () => ( + <App /> + )) + ", + } + } + style={ + Object { + "backgroundColor": "#f3f2f2", + "margin": "10px 0", + "padding": "1px 10px", + } + } /> +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the + + + Writing Stories + + + section in our documentation. +

+
+`; diff --git a/examples/cra-storybook/src/storyshots.test.js b/examples/cra-storybook/src/storyshots.test.js new file mode 100644 index 000000000000..63f7047152ab --- /dev/null +++ b/examples/cra-storybook/src/storyshots.test.js @@ -0,0 +1,2 @@ +import initStoryshots from 'storyshots'; +initStoryshots(); From c1c048929950b1b93312dc558a2b73048537f05d Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Wed, 19 Apr 2017 22:33:09 +1000 Subject: [PATCH 3/3] Add a `noMatchSnapshots` option. --- packages/storyshots/README.md | 4 ++++ packages/storyshots/src/index.js | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/storyshots/README.md b/packages/storyshots/README.md index de1482563970..5ac030cc1373 100644 --- a/packages/storyshots/README.md +++ b/packages/storyshots/README.md @@ -97,3 +97,7 @@ initStoryshots({ ``` 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).)*$/`. + +### `noMatchSnapshots` + +If you don't want to run snapshot tests, but instead just ensure that your stories render without error, pass `noMatchSnapshots: true`. This will "smoke" test your stories and make sure you haven't broken anything, which is appropriate early in the development process. diff --git a/packages/storyshots/src/index.js b/packages/storyshots/src/index.js index e91c11601fe6..66797601e665 100644 --- a/packages/storyshots/src/index.js +++ b/packages/storyshots/src/index.js @@ -72,7 +72,9 @@ export default function testStorySnapshots(options = {}) { const context = { kind: group.kind, story: story.name }; const renderedStory = story.render(context); const tree = renderer.create(renderedStory).toJSON(); - expect(tree).toMatchSnapshot(); + if (!options.noMatchSnapshots) { + expect(tree).toMatchSnapshot(); + } }); } });