Use jest for unittesting - standardize unit testing epic

.bettercodehub.yml

@@ -0,0 +1,14 @@
+component_depth: 2
+languages:
+- javascript
+
+- name: javascript
+  production:
+    exclude:
+      - .*\.test\.js
+      - .*\/__test__\/.*\.js
+      - .*\/__mock__\/.*\.js
+  test:
+    include:
+      - .*\.test\.js
+      - .*\/__test__\/.*\.js

.gitignore

@@ -5,6 +5,9 @@ npm-shrinkwrap.json
 dist
 .tern-port
 *.DS_Store
+.jest
+junit.xml
+coverage/
 *.lerna_backup
 build
 packages/examples/automated-*

.jestrc

@@ -0,0 +1,19 @@
+{
+  "cacheDirectory": ".jest",
+  "clearMocks": true,
+  "moduleNameMapper": {
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
+  },
+  "roots": ["packages"],
+  "collectCoverage": false,
+  "collectCoverageFrom": [
+    "packages/**/*.{js,jsx}"
+  ],
+  "coverageDirectory": "coverage",
+  "testEnvironment": "jsdom",
+  "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
+  "snapshotSerializers": [
+    "enzyme-to-json/serializer"
+  ]
+}

.travis.yml

@@ -3,12 +3,17 @@ cache:
   yarn: true
   directories:
     - node_modules
+    - .jest
 notifications:
   email: false
 node_js:
   - "node"
 before_install: ./scripts/travis/before_install.sh
 after_success: ./scripts/travis/after_success.sh
-script: npm run lint && npm run test
+script:
+  - "npm run lint"
+  - "npm run test"
+  - "npm run coverage"
+  - "npm run test-examples"
 git:
   depth: 1

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

packages/examples/cra-storybook/src/index.js → examples/cra-storybook/src/index.js

@@ -3,7 +3,4 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));

packages/examples/cra-storybook/src/stories/Button.js → examples/cra-storybook/src/stories/Button.js

@@ -11,10 +11,7 @@ const buttonStyles = {
 };
 
 const Button = ({ children, onClick }) => (
-  <button
-    style={buttonStyles}
-    onClick={onClick}
-  >
+  <button style={buttonStyles} onClick={onClick}>
     {children}
   </button>
 );

packages/examples/cra-storybook/src/stories/Welcome.js → examples/cra-storybook/src/stories/Welcome.js

@@ -22,8 +22,8 @@ const styles = {
   code: {
     fontSize: 15,
     fontWeight: 600,
-    padding: "2px 5px",
-    border: "1px solid #eae9e9",
+    padding: '2px 5px',
+    border: '1px solid #eae9e9',
     borderRadius: 4,
     backgroundColor: '#f3f2f2',
     color: '#3a3a3a',
@@ -33,7 +33,7 @@ const styles = {
     backgroundColor: '#f3f2f2',
     padding: '1px 10px',
     margin: '10px 0',
-  }
+  },
 };
 
 const codeBlock = `
@@ -51,7 +51,7 @@ storiesOf('App', module)
 export default class Welcome extends React.Component {
   showApp(e) {
     e.preventDefault();
-    if(this.props.showApp) this.props.showApp();
+    if (this.props.showApp) this.props.showApp();
   }
 
   render() {
@@ -62,27 +62,48 @@ export default class Welcome extends React.Component {
           This is a UI component dev environment for your app.
         </p>
         <p>
-          We've added some basic stories inside the <code style={styles.code}>src/stories</code> directory.
-          <br/>
+          We've added some basic stories inside the
+          {' '}
+          <code style={styles.code}>src/stories</code>
+          {' '}
+          directory.
+          <br />
           A story is a single state of one or more UI components. You can have as many stories as you want.
-          <br/>
+          <br />
           (Basically a story is like a visual test case.)
         </p>
         <p>
-          See these sample <a style={styles.link} href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code style={styles.code}>Button</code>.
+          See these sample
+          {' '}
+          <a style={styles.link} href="#" onClick={this.showApp.bind(this)}>stories</a>
+          {' '}
+          for a component called
+          {' '}
+          <code style={styles.code}>Button</code>
+          .
         </p>
         <p>
           Just like that, you can add your own components as stories.
           <br />
           Here's how to add your <code style={styles.code}>App</code> component as a story.
           <div
             style={styles.codeBlock}
-            dangerouslySetInnerHTML={{__html: `<pre>${codeBlock}</pre>`}}
+            dangerouslySetInnerHTML={{ __html: `<pre>${codeBlock}</pre>` }}
           />
         </p>
         <p>
           Usually we create stories with smaller UI components in the app.<br />
-          Have a look at the <a style={styles.link} href="https://getstorybook.io/docs/basics/writing-stories" target="_blank">Writing Stories</a> section in our documentation.
+          Have a look at the
+          {' '}
+          <a
+            style={styles.link}
+            href="https://getstorybook.io/docs/basics/writing-stories"
+            target="_blank"
+          >
+            Writing Stories
+          </a>
+          {' '}
+          section in our documentation.
         </p>
       </div>
     );

examples/cra-storybook/src/stories/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf, action, linkTo } from '@kadira/storybook';
+import Button from './Button';
+import Welcome from './Welcome';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Button', module)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);

packages/examples/package.json → examples/package.json

@@ -4,7 +4,6 @@
   "description": "A set of examples of how to use storybook, also used for regression testing",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 0",
     "test:automated-cra-storybook": "node scripts/automated-cra-storybook.js"
   },
   "license": "ISC",

lerna.json

@@ -3,6 +3,6 @@
   "version": "3.0.0",
   "packages": [
     "packages/*",
-    "packages/examples/*"
+    "examples/*"
   ]
 }

package.json

@@ -2,16 +2,28 @@
   "name": "storybook",
   "devDependencies": {
     "babel-eslint": "^7.2.2",
+    "codecov": "^2.1.0",
+    "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb-base": "^11.1.3",
     "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jest": "^19.0.1",
     "eslint-plugin-prettier": "^2.0.1",
+    "jest": "^19.0.2",
+    "jest-enzyme": "^3.0.1",
     "lerna": "2.0.0-rc.2",
-    "prettier": "^1.1.0"
+    "prettier": "^1.1.0",
+    "react": "^15.5.4",
+    "react-addons-test-utils": "^15.5.1",
+    "react-dom": "^15.5.4"
   },
   "scripts": {
-    "postinstall": "lerna bootstrap",
-    "test": "lerna run test",
-    "lint": "eslint ."
+    "postinstall": "lerna bootstrap --hoist",
+    "lint": "eslint .",
+    "test": "jest --config ./.jestrc",
+    "test:watch": "npm test -- --watch",
+    "test-examples": "CI=true lerna run test",
+    "coverage": "codecov"
   }
 }

packages/addon-actions/package.json

@@ -6,8 +6,7 @@
   "scripts": {
     "deploy-storybook": "storybook-to-ghpages",
     "prepublish": "node .scripts/npm-prepublish.js",
-    "storybook": "start-storybook -p 9001",
-    "test": "echo \"Error: no test specified\" && exit 0"
+    "storybook": "start-storybook -p 9001"
   },
   "repository": {
     "type": "git",
@@ -22,9 +21,9 @@
   },
   "homepage": "https://github.com/kadirahq/storybook-addon-actions#readme",
   "devDependencies": {
-    "@kadira/storybook": "^2.20.1",
-    "@kadira/storybook-addons": "^1.3.0",
-    "@kadira/storybook-ui": "^3.0.0",
+    "@kadira/storybook": "*",
+    "@kadira/storybook-addons": "*",
+    "@kadira/storybook-ui": "*",
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
@@ -41,7 +40,7 @@
     "react-inspector": "^1.1.0"
   },
   "peerDependencies": {
-    "@kadira/storybook-addons": "^1.3.0",
+    "@kadira/storybook-addons": "*",
     "react": "*",
     "react-dom": "*"
   }

packages/addon-comments/package.json

@@ -5,7 +5,6 @@
   "main": "preview.js",
   "scripts": {
     "prepublish": ". ./.scripts/prepublish.sh",
-    "test": "mocha --require .scripts/mocha_runner src/**/tests/**/*.js",
     "storybook": "start-storybook -p 3006",
     "storybook-local": "STORYBOOK_CLOUD_SERVER='http://localhost:3003/graphql' start-storybook -p 9010",
     "storybook-remote": "start-storybook -p 3006",
@@ -36,22 +35,16 @@
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "mocha": "^3.0.2",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.6",
-    "enzyme": "^2.2.0",
-    "jsdom": "^9.5.0",
     "git-url-parse": "^6.0.1",
-    "@kadira/storybook": "^2.24.1",
-    "@kadira/storybook-addons": "^1.5.0",
-    "@kadira/storybook-database-cloud": "^2.3.1",
-    "@kadira/storybook-deployer": "^1.2.0",
-    "@kadira/storybook-ui": "^3.4.1",
-    "chokidar": "^1.6.0",
+    "@kadira/storybook": "*",
+    "@kadira/storybook-addons": "*",
+    "@kadira/storybook-database-cloud": "*",
+    "@kadira/storybook-deployer": "*",
+    "@kadira/storybook-ui": "*",
     "shelljs": "^0.7.4"
   },
   "peerDependencies": {
-    "@kadira/storybook-addons": "^1.5.0",
+    "@kadira/storybook-addons": "*",
     "react": "*",
     "react-dom": "*"
   },

packages/addon-comments/src/manager/components/CommentItem/index.js

@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types';
-/* eslint jsx-a11y/href-no-hash:0, no-undef:0, no-alert:0 */
-
 import React, { Component } from 'react';
 import moment from 'moment';
 import renderHTML from 'react-render-html';

packages/addon-comments/src/manager/components/CommentsPanel/index.js

@@ -1,6 +1,4 @@
 import PropTypes from 'prop-types';
-/* eslint no-undef: 0 */
-
 import React, { Component } from 'react';
 import CommentList from '../CommentList';
 import CommentForm from '../CommentForm';

packages/addon-comments/src/manager/containers/CommentsPanel/dataStore.js

@@ -1,5 +1,3 @@
-/* eslint no-param-reassign:0 */
-
 import deepEquals from 'deep-equal';
 import { EventEmitter } from 'events';
 
@@ -27,7 +25,12 @@ export default class DataStore {
     const key = this._getStoryKey(currentStory);
     const item = this.cache[key];
 
-    if (!item) return null;
+    if (!item) {
+      return {
+        comments: [],
+        invalidated: false,
+      };
+    }
 
     const comments = item.comments;
     let invalidated = false;
@@ -67,9 +70,9 @@ export default class DataStore {
       this._fireComments(item.comments);
       // if the cache invalidated we need to load comments again.
       if (item.invalidated) {
-        this._loadUsers().then(() => this._loadComments());
+        return this._loadUsers().then(() => this._loadComments());
       }
-      return;
+      return Promise.resolve(null);
     }
 
     // load comments for the first time.
@@ -117,7 +120,6 @@ export default class DataStore {
         // add to cache
         this._addToCache(currentStory, comments);
 
-        /* eslint no-param-reassign:0 */
         // set comments only if we are on the relavant story
         if (deepEquals(currentStory, this.currentStory)) {
           this._fireComments(comments);
@@ -202,15 +204,15 @@ export default class DataStore {
   }
 
   addComment(comment) {
-    this._addAuthorToTheDatabase()
+    return this._addAuthorToTheDatabase()
       .then(() => this._addPendingComment(comment))
       .then(() => this._addCommentToDatabase(comment))
       .then(() => this._loadUsers())
       .then(() => this._loadComments());
   }
 
   deleteComment(commentId) {
-    this._setDeletedComment(commentId)
+    return this._setDeletedComment(commentId)
       .then(() => this._deleteCommentOnDatabase(commentId))
       .then(() => this._loadComments());
   }