storybook-addon-specifications - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

.storybook/__mocks__/facade.js

@@ -0,9 +1,14 @@
+import {mount} from "enzyme";
+
 export const storiesOf = function storiesOf() {
   var api = {};
+  var story;
   api.add = (name, func)=> {
-    func();
+    story = func();
+    snapshot(name, story);
     return api;
   };
   api.addWithInfo = (name, func)=> {
-    func();
+    story = func();
+    snapshot(name, story);
     return api;
@@ -21,4 +26,11 @@ };
 
+export const snapshot = (name, story) => {
+    it(name, function () {
+      const tree = mount(story).html();
+      expect(tree).toMatchSnapshot();
+    });
+};
+
 export const describe = jasmine.currentEnv_.describe;
 export const it = jasmine.currentEnv_.it;
 

.storybook/__tests__/sample.ci.jest.stories.js

@@ -18,7 +18,2 @@ import React from "react";
       let output = mount(helloWorldStory);
-      expect(output.text()).toContain('Hello Wrld');
-    });
-
-    it('Should have the Hello World label', function () {
-      let output = mount(helloWorldStory);
       expect(output.text()).toContain('Hello World');
@@ -25,0 +20,0 @@ });

package.json

 {
   "name": "storybook-addon-specifications",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Add tests to your react storybook stories",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # Specifications Addon [![npm version](https://img.shields.io/npm/v/storybook-addon-specifications.svg)](https://www.npmjs.com/package/storybook-addon-specifications)
 
+> **Needs at least [react-storybook](https://github.com/kadirahq/react-storybook) 2.2.1**
+
 This addon for storybook will allow you to write tests based on your stories and display results directly inside storybook.
 
-If you want to learn more about the ideas behind this addon, you can read [this article](https://medium.com/@mlthuret/building-a-react-components-living-documentation-using-react-storybook-5f11f0e7d23e#.5g58g5i3t).
+> **If you want to learn more about the ideas behind this addon, you can read this article : [Building a react components living documentation using react-storybook.](https://medium.com/@mlthuret/building-a-react-components-living-documentation-using-react-storybook-5f11f0e7d23e#.5g58g5i3t).**
 
-**needs at least [react-storybook](https://github.com/kadirahq/react-storybook) 2.2.0**
-
 ![](docs/screenshot.png)
 
+## Table of contents
+
+* [Getting Started](#getting-started)
+* [Use your stories with a test runner](#use-your-stories-with-a-test-runner)
+  * [Using JEST](#using-jest)
+    * [Snapshot all your stories automatically](#snapshot-all-your-stories-automatically)
+  * [Using Mocha](#using-mocha)
+
 ## Getting Started
@@ -25,3 +33,3 @@
 
-Import the `specs, describe and it` functions and use it to write your tests. This example uses Enzyme and Chai to perform the testing.
+Import the `specs, describe and it` functions and use it to write your tests. This example uses *enzyme* and *expect* to perform the testing.
 
@@ -40,3 +48,3 @@ The first parameter of the describe function **must be the same** as the story's name.
 stories.add('Hello World', function () {
-  const helloWorldStory =
+  const story =
     <button onClick={action('Hello World')}>
@@ -48,8 +56,3 @@ Hello World
     it('Should have the Hello World label', function () {
-      let output = mount(helloWorldStory);
-      expect(output.text()).toContain('Hello Wrld');
-    });
-
-    it('Should have the Hello World label', function () {
-      let output = mount(helloWorldStory);
+      let output = mount(story);
       expect(output.text()).toContain('Hello World');
@@ -59,26 +62,26 @@ });
 
-  return helloWorldStory;
+  return story;
 });
 ```
 
-Note : if you use enzyme, you'll need to add the following  configuration to your webpack.config.js file. You also needs to add the json library to your dev dependencies. 
+> Note : if you use enzyme, you will need to add the following lines to your webpack.config.js file. You also needs to add the json library to your dev dependencies. 
 
-```
-externals: {
-    'jsdom': 'window',
-    'cheerio': 'window',
-    'react/lib/ExecutionEnvironment': true,
-    'react/lib/ReactContext': 'window',
-    'react/addons': true,
-  }
-```
+>```
+>externals: {
+>    'jsdom': 'window',
+>    'cheerio': 'window',
+>    'react/lib/ExecutionEnvironment': true,
+>    'react/lib/ReactContext': 'window',
+>    'react/addons': true,
+>  }
+>```
 
-## Use your stories with you CI
+## Use your stories with a test runner
 
-Writing tests directly next to the component declaration for the story is already a great thing, but it would be better if those tests can be reused with our CI.
+Writing tests directly next to the component declaration used for the story is already a great thing, but it would be better if those tests can be reused with our test runner, and later be used with our CI.
 
-To do that, the idea is to add to your test runner, all the files used for declaring stories.
+To do that, the idea is to add to the test runner, all the files used for declaring stories.
 But because this addon redefine describe and it functions, you'll need some extra-configuration to make the tests pass within the test runner.
 
-You'll find in this directory examples using JEST or MOCHA.
+This repository has a [directory full of examples](https://github.com/mthuret/storybook-addon-specifications/tree/master/.storybook) where you can find everything that is describe here. 
 
@@ -88,5 +91,5 @@ ### Using JEST
 You can use the mocking functionality of jest to switch between the real describe and it implementation of jest or
-the specifications addon one.
+the one for this addon.
 
-Inside .storybook, you can add a facade.js file with the following content :
+Inside .storybook, add a facade.js file with the following content :
 
@@ -105,3 +108,3 @@ ```js
 
-Create a __mocks__ directory within .storybook and add also a facade.js file.
+Create a \_\_mocks\_\_ directory within .storybook and add also a facade.js file.
 
@@ -133,3 +136,3 @@ ```js
 
-Create also a jest config file with the following content :
+Create or add to your jest config file the following line :
 
@@ -140,3 +143,3 @@ ```js
 
-**Inside your stories file you'll use the .storybook/facade.js file for imports**.
+> **Inside your stories file you must now use the .storybook/facade.js file for imports**.
 
@@ -154,2 +157,60 @@ Finally add this to your jest configuration :
 
+#### Snapshot all your stories automatically
+
+>**Warning :** This part will describe how to add automatically jest snapshot to every story you write. It will allow you to take advantage of this jest feature but will not have any effect inside storybook. Indeed, you don't even need to add this addon to your project if you don't plan to use the specs() function. If I describe the idea here, it's only because it uses the trick I explain before allowing you to write tests inside stories and still be able to execute them with a test runner. 
+
+If you want to use jest snapshot testing with every story you write, that's totally possible. All you need to do is modify a bit the facade.js mock file to look like this :
+
+```js
+import {mount} from "enzyme";
+
+export const storiesOf = function storiesOf() {
+  var api = {};
+  var story;
+  api.add = (name, func)=> {
+    story = func();
+    snapshot(name, story);
+    return api;
+  };
+  api.addWithInfo = (name, func)=> {
+    story = func();
+    snapshot(name, story);
+    return api;
+  };
+  return api;
+};
+export const action = () => {};
+
+export const linkTo = () => {};
+
+export const specs = (spec) => {
+  spec();
+};
+
+export const snapshot = (name, story) => {
+  describe(name + ' snapshot', function () {
+    it(name, function () {
+      const tree = mount(story).html();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+};
+
+export const describe = jasmine.currentEnv_.describe;
+export const it = jasmine.currentEnv_.it;
+```
+
+For every story added to storybook, it will make a snapshot. 
+
+Here, I use enzyme to render the component under testing. I do that because it appears that if you use enzyme for others tests, it doesn't mix well with react-test-renderer. But if you do not use enzyme for your tests, then you should be good to go with react-test-renderer rendering. 
+
+If for any reason you want to choose stories that will be snapshoted, that's also possible.
+ 1. remove snapshot() function calls from add and addWithInfo in facade.js mock file. 
+ 2. use the snapshot() function directly inside the story like you do with specs()
+ 3. Add this line to the facade.js file used for import functions.
+```js
+export const snapshot = () => {};
+```
+When storybook is going to run, it will do nothing with the snapshot function. 
+
 ### Using Mocha
@@ -156,0 +217,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

31

increased by3.33%

Lines of code

613

increased by0.99%

Number of lines in readme file

254

increased by31.61%

Worsened metrics

Total package byte prevSize

99553

decreased by-30.84%

No dependency changes