Add addon jest

.gitignore

@@ -19,3 +19,5 @@ package-lock.json
 .nvmrc
 storybook-static
 integration/__image_snapshots__/__diff_output__
+.jest-test-results.json
+

addons/jest/README.md

@@ -0,0 +1,133 @@
+# Storybook addon Jest
+
+Brings Jest results in storybook.
+
+[![Storybook Jest Addon Demo](@storybook/addon-jest.gif)](https://@storybook/addon-jest-example.herokuapp.com/)
+
+> Checkout the above [Live Storybook](https://@storybook/addon-jest-example.herokuapp.com/).
+
+## Getting started
+
+### Install
+
+`npm install --save-dev @storybook/addon-jest`
+
+or
+
+`yarn add --dev @storybook/addon-jest`
+
+### Jest Configuration
+
+When running **Jest**, be sure to save the results in a json file:
+
+`package.json`
+
+```js
+"scripts": {
+  "test": "jest --json --outputFile=.jest-test-results.json"
+}
+```
+
+Add it the result file to `.gitignore`:
+
+```
+.jest-test-results.json
+```
+
+**Known issue**: if you use a deploy script using for example `gh-pages`, be sure to not put
+the `test` script that write the result in part of the script process (in `predeploy` for example).
+Instead use a different script:
+
+```json
+"scripts": {
+  "test:output": "jest --json --outputFile=.jest-test-results.json",
+  "test": "jest",
+  "prebuild:storybook": "npm run test",
+  "build:storybook": "build-storybook -c .storybook -o build/",
+  "predeploy": "npm run build:storybook",
+  "deploy": "gh-pages -d build/",
+}
+```
+
+Then in dev use:
+
+```sh
+npm run test:output -- --watch
+```
+
+When deploying:
+
+```sh
+npm run deploy
+```
+
+### Register
+
+Register addon at `.storybook/addons.js`
+
+```js
+import '@storybook/addon-jest/register';
+```
+
+## Usage
+
+Assuming that you have created a test files `MyComponent.test.js` and `MyOtherComponent.test.js`
+
+In your `story.js`
+
+```js
+import jestTestResults from '../.jest-test-results.json';
+import withTests from '@storybook/addon-jest';
+
+storiesOf('MyComponent', module)
+  .addDecorator(withTests(jestTestResults, { filesExt: '.test.js' })('MyComponent', 'MyOtherComponent'));
+```
+
+Or in order to avoid importing `.jest-test-results.json` in each story, you can create a simple file `withTests.js`:
+
+```js
+import jestTestResults from '../.jest-test-results.json';
+import withTests from '@storybook/addon-jest';
+
+export default withTests(jestTestResults, {
+  filesExt: '.test.js',
+});
+```
+
+Then in your story:
+
+```js
+// import your file
+import withTests from '.withTests';
+
+storiesOf('MyComponent', module)
+  .addDecorator(withTests('MyComponent', 'MyOtherComponent'));
+```
+
+### Styling
+
+The panel comes with a basic design. If you want to make it look a bit nicer, you add github markdown style by importing it in `.storybook/addons.js`
+
+```js
+import '@storybook/addon-jest/register';
+import '@storybook/addon-jest/styles';
+```
+
+If you already use `storybook-readme` addon, you do not need to import it.
+
+## TODO
+
+- [ ] Add coverage
+- [ ] Display nested test better (describe)
+- [ ] Display the date of the test
+- [ ] Add unit tests
+- [ ] Add linting
+- [ ] Split <TestPanel />
+
+## Contributing
+
+Every ideas and contributions are welcomed.
+
+## Licence
+
+MIT © 2017-present Renaud Tertrais

addons/jest/example/.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-options/register';
+// --> import 'storybook-addon-jest/register'
+import '../../register';
+// --> import 'storybook-addon-jest/styles'
+import '../../dist/styles';
+

addons/jest/example/.storybook/config.js

@@ -0,0 +1,17 @@
+import { configure, addDecorator } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+// --> import { setupJestAddon } from 'storybook-addon-jest';
+
+
+setOptions({
+  name: 'JEST ADDON',
+  url: 'https://github.com/storybooks/storybook',
+  downPanelInRight: true,
+  showLeftPanel: true,
+});
+
+function loadStories() {
+  require('../List.story');
+}
+
+configure(loadStories, module);

addons/jest/example/List.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const List = ({ items }) => <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>;
+
+List.defaultProps = {
+  items: [],
+};
+
+export default List;

addons/jest/example/List.story.js

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withTests from './withTests';
+import List from './List';
+
+storiesOf('List', module)
+  .addDecorator(withTests('List'))
+  .add('3 items', () => (
+    <List items={['foo', 'bar']} />
+  ));

addons/jest/example/List.test.js

@@ -0,0 +1,13 @@
+describe('Description: ', () => {
+  it('should contain 3 items', () => {
+    expect(3).toBe(3);
+  });
+
+  it('should work fine', () => {
+    expect(true).toBe(true);
+  });
+});
+
+test('Failing test',() => {
+  expect(['foo', 'bar', 'baz']).toEqual(['foo', 'bar']);
+})

addons/jest/example/withTests.js

@@ -0,0 +1,9 @@
+// ---> import { withTests } from 'storybook-addon-jest';
+import withTests from '../dist';
+
+import jestTestResuls from './.jest-test-results.json';
+
+
+export default withTests(jestTestResuls, {
+  filesExt: '.test.js',
+});

addons/jest/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@storybook/addon-jest",
+  "version": "3.2.15",
+  "description": "React storybook addon that show component jest report",
+  "keywords": [
+    "addon",
+    "jest",
+    "react",
+    "report",
+    "results",
+    "storybook",
+    "unit-testing"
+  ],
+  "homepage": "https://storybook.js.org",
+  "bugs": "https://github.com/storybooks/storybook",
+  "license": "MIT",
+  "author": "Renaud Tertrais <[email protected]> (https://github.com/renaudtertrais)",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybooks/storybook"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.2.15",
+    "global": "^4.3.2",
+    "prop-types": "^15.6.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "cross-env": "^5.1.1",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.1.1",
+    "eslint": "^4.10.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-prettier": "^2.7.0",
+    "eslint-import-resolver-webpack": "^0.8.3",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "jest": "^21.2.1",
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0",
+    "style-loader": "^0.19.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

addons/jest/register.js

@@ -0,0 +1 @@
+require('./dist/register');

addons/jest/src/colors.js

@@ -0,0 +1,6 @@
+export default {
+  success: 'LIGHTSEAGREEN',
+  error: 'CRIMSON',
+  warning: 'DARKORANGE',
+  grey: 'LIGHTSLATEGRAY',
+};

addons/jest/src/components/Indicator.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Indicator = ({ color, size, children = '', right }) => (
+  <div
+    style={{
+      boxSizing: 'border-box',
+      padding: `0 ${size / 2}px`,
+      minWidth: size,
+      minHeight: size,
+      fontSize: size / 1.4,
+      lineHeight: `${size}px`,
+      color: 'white',
+      textTransform: 'uppercase',
+      borderRadius: size / 2,
+      backgroundColor: color,
+      marginLeft: right ? size / 2 : 0,
+      marginRight: right ? 0 : size / 2,
+    }}
+  >
+    {children}
+  </div>
+);
+Indicator.propTypes = {
+  color: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired,
+  right: PropTypes.bool.isRequired,
+};
+
+export default Indicator;