initial commit

addons/jest/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 3 versions", "IE >= 11"]
+      }
+    }],
+    "react"
+  ]
+}

addons/jest/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

addons/jest/.eslintrc.js

@@ -0,0 +1,37 @@
+module.exports = {
+  "extends": ["airbnb", "prettier"],
+  plugins: ["react"],
+  rules: {
+    "arrow-parens": ['error', 'as-needed'],
+    "comma-dangle": [1, {
+      "arrays": 'always-multiline',
+      "objects": 'always-multiline',
+      "imports": 'always-multiline',
+      "exports": 'always-multiline',
+      "functions": "ignore",
+    }],
+    "import/prefer-default-export": 0,
+    "react/forbid-prop-types": 0,
+    "react/no-danger": 0,
+    "react/jsx-no-target-blank": 0,
+    "react/require-default-props": 0,
+    "import/no-extraneous-dependencies": 2,
+    "react/jsx-filename-extension": 0,
+    "jsx-a11y/href-no-hash": 0,
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "commonjs": true,
+    "node": true,
+    "jest": true,
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        config: 'webpack-development.config.js'
+      },
+    },
+  },
+};
+

addons/jest/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+.jest-test-results.json
+build

addons/jest/README.md

@@ -0,0 +1,104 @@
+# Storybook addon Jest
+
+Brings Jest results in storybook.
+
+[![Storybook Jest Addon Demo](storybook-addon-jest.gif)](https://renaudtertrais.github.io/storybook-addon-jest)
+
+> Checkout the above [Live Storybook](https://renaudtertrais.github.io/storybook-addon-jest).
+
+## 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
+```
+
+### 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
+- [ ] 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/renaudtertrais/storybook-addon-jest',
+  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,63 @@
+{
+  "name": "storybook-addon-jest",
+  "version": "0.0.1",
+  "description": "React storybook addon that show component jest report",
+  "main": "dist/index.js",
+  "homepage": "https://github.com/renaudtertrais/storybook-addon-jest",
+  "bugs": "https://github.com/renaudtertrais/storybook-addon-jest/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/renaudtertrais/storybook-addon-jest"
+  },
+  "files": [
+    "dist",
+    "styles.js",
+    "register.js"
+  ],
+  "scripts": {
+    "test:example": "jest example --json --outputFile=example/.jest-test-results.json",
+    "clean:storybook": "rm -rf build",
+    "prebuild:storybook": "npm run clean:storybook",
+    "build:storybook": "build-storybook -c example/.storybook -o build/",
+    "predeploy": "npm run build:storybook",
+    "deploy": "gh-pages -d build",
+    "storybook": "cross-env NODE_ENV=development start-storybook -p 3001 -c example/.storybook",
+    "prebuild": "npm run clear",
+    "build": "cross-env NODE_ENV=production babel -d ./dist ./src",
+    "prepublish": "npm run build ",
+    "clear": "rm -rf ./dist"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@storybook/addon-options": "^3.2.14",
+    "@storybook/react": "^3.2.14",
+    "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",
+    "gh-pages": "^1.0.0",
+    "jest": "^21.2.1",
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0",
+    "style-loader": "^0.19.0"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^3.2.14",
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT"
+}

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,24 @@
+import React from 'react';
+
+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>
+);
+
+export default Indicator;