Merge pull request #2295 from storybooks/add-addon-jest

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,129 @@
+# 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:generate-output": "jest --json --outputFile=jest-test-results.json"
+}
+```
+
+You may want to add it the result file to `.gitignore`, since it's a generated file:
+```
+jest-test-results.json
+```
+But much like lockfiles and snapshots checking-in generated files can have certain advantages as well. It's up to you.
+We recommend to **do** check in the test results file so starting storybook from an clean git clone doesn't require running all tests first, 
+but this can mean you'll experience merge conflicts on this file in the future. (*re-generating this file is super easy though, just like lockfiles and snapshots*)
+
+## Generating the test results
+
+You need to make sure the generated test-restuls file exists before you start storybook.
+During development you will likely start jest in watch-mode 
+and so the json file will be re-generated every time code or tests change.
+
+```sh
+npm run test:generate-output -- --watch
+```
+
+This change will then be HMR (hot module reloaded) using webpack and displayed by this addon.
+
+If you want to pre-run jest automaticly during development or a static build, 
+you may need to consider that if your tests fail, the script receives a non-0 exit code and will exit.
+You could create a `prebuild:storybook` npm script, which will never fail by appending `|| true`:
+```json
+"scripts": {
+  "test:generate-output": "jest --json --outputFile=.jest-test-results.json || true",
+  "test": "jest",
+  "prebuild:storybook": "npm run test:generate-output",
+  "build:storybook": "build-storybook -c .storybook -o build/",
+  "predeploy": "npm run build:storybook",
+  "deploy": "gh-pages -d build/",
+}
+```
+
+### 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'))
+  .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
+    <div>Jest results in storybook</div>
+  ));
+```
+
+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'))
+  .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (
+    <div>Jest results in storybook</div>
+  ));
+```
+
+## 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/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@storybook/addon-jest",
+  "version": "3.2.16",
+  "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/components": "^3.2.16",
+    "global": "^4.3.2",
+    "prop-types": "^15.6.0",
+    "glamor": "^2.20.40",
+    "glamorous": "^4.11.0"
+  },
+  "devDependencies": {
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^3.2.16",
+    "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,35 @@
+import PropTypes from 'prop-types';
+
+import glamorous from 'glamorous';
+
+const Indicator = glamorous.div(
+  ({ color, size }) => ({
+    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,
+  }),
+  ({ styles }) => ({
+    ...styles,
+  })
+);
+
+Indicator.defaultProps = {
+  right: false,
+  children: '',
+};
+
+Indicator.propTypes = {
+  color: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  children: PropTypes.node,
+  right: PropTypes.bool,
+};
+
+export default Indicator;

addons/jest/src/components/Panel.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import glamorous from 'glamorous';
+
+import { baseFonts } from '@storybook/components';
+
+import Indicator from './Indicator';
+import Result, { FailedResult } from './Result';
+import provideJestResult from '../hoc/provideJestResult';
+import colors from '../colors';
+
+const List = glamorous.ul({
+  listStyle: 'none',
+  fontSize: 14,
+  padding: 0,
+  margin: '10px 0',
+});
+
+const Item = glamorous.li({
+  display: 'block',
+  margin: '10px 0',
+  padding: 0,
+});
+
+const NoTests = glamorous.div({
+  padding: '10px 20px',
+  flex: 1,
+  ...baseFonts,
+});
+
+const FileTitle = glamorous.h2({
+  margin: 0,
+  fontWeight: 500,
+  fontSize: 18,
+});
+
+const SuiteHead = glamorous.div({
+  display: 'flex',
+  alignItems: 'baseline',
+  justifyContent: 'space-between',
+  position: 'relative',
+  paddingTop: 10,
+});
+
+const SuiteTotals = glamorous(({ successNumber, failedNumber, result, className }) => (
+  <div className={className}>
+    {successNumber > 0 && <div style={{ color: colors.success }}>{successNumber} passed</div>}
+    {failedNumber > 0 && <div style={{ color: colors.error }}>{failedNumber} failed</div>}
+    <div>{result.assertionResults.length} total</div>
+    <div>
+      <strong>{result.endTime - result.startTime}ms</strong>
+    </div>
+  </div>
+))({
+  display: 'flex',
+  alignItems: 'center',
+  color: colors.grey,
+  fontSize: '10px',
+
+  '& > *': {
+    marginLeft: 10,
+  },
+});
+
+const SuiteProgress = glamorous(({ successNumber, result, className }) => (
+  <div className={className} role="progressbar">
+    <span style={{ width: `${successNumber / result.assertionResults.length * 100}%` }}>
+      {`${successNumber / result.assertionResults.length * 100}%`}
+    </span>
+  </div>
+))(() => ({
+  width: '100%',
+  backgroundColor: colors.error,
+  height: 4,
+  top: 0,
+  position: 'absolute',
+  left: 0,
+  borderRadius: 3,
+  overflow: 'hidden',
+  appearance: 'none',
+
+  '& > span': {
+    backgroundColor: colors.success,
+    bottom: 0,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    boxShadow: '4px 0 0 white',
+  },
+}));
+
+const SuiteTitle = glamorous.div({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const Content = glamorous(({ tests, className }) => (
+  <div className={className}>
+    {tests.map(({ name, result }) => {
+      if (!result) {
+        return <NoTests>This story has tests configures, but no file not found</NoTests>;
+      }
+
+      const successNumber = result.assertionResults.filter(({ status }) => status === 'passed')
+        .length;
+      const failedNumber = result.assertionResults.length - successNumber;
+
+      return (
+        <section key={name}>
+          <SuiteHead>
+            <SuiteTitle>
+              <Indicator
+                color={result.status === 'passed' ? colors.success : colors.error}
+                size={16}
+                styles={{ marginRight: 5 }}
+              >
+                {result.status}
+              </Indicator>
+              <FileTitle>{name}</FileTitle>
+            </SuiteTitle>
+            <SuiteTotals {...{ successNumber, failedNumber, result }} />
+            <SuiteProgress {...{ successNumber, failedNumber, result }} />
+          </SuiteHead>
+          <List>
+            {result.assertionResults.map(res => (
+              <Item key={res.fullName || res.title}>
+                {res.failureMessages && res.failureMessages.length ? (
+                  <FailedResult {...res} />
+                ) : (
+                  <Result {...res} />
+                )}
+              </Item>
+            ))}
+          </List>
+        </section>
+      );
+    })}
+  </div>
+))({
+  padding: '10px 20px',
+  flex: '1 1 0%',
+  ...baseFonts,
+});
+
+const Panel = ({ tests }) =>
+  tests ? <Content tests={tests} /> : <NoTests>This story has no tests configures</NoTests>;
+
+Panel.defaultProps = {
+  tests: null,
+};
+
+Panel.propTypes = {
+  tests: PropTypes.arrayOf(
+    PropTypes.shape({
+      result: PropTypes.object,
+    })
+  ),
+};
+
+export default provideJestResult(Panel);