Introduce Jest Unit Testing framework

.babelrc

@@ -10,5 +10,12 @@
     "transform-async-to-generator",
     "transform-react-jsx",
     "syntax-dynamic-import"
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        ["transform-es2015-modules-commonjs", "dynamic-import-node"]
+      ]
+    }
+  }
 }

client/talk-plugin-commentbox/__tests__/commentBox.spec.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import {expect} from 'chai';
-import CommentBox from '../CommentBox';
-
-describe('CommentBox', () => {
-  let comment;
-  let render;
-  beforeEach(() => {
-    comment = {};
-    const postItem = (item) => {
-      comment.posted = item;
-      return Promise.resolve(4);
-    };
-    render = shallow(<CommentBox
-      postItem={postItem}
-      updateItem={(e) => comment.text = e.target.value}
-      item_id={'1'}
-      comments={['1', '2', '3']}/>);
-  });
-
-  it('should render the CommentBox appropriately', () => {
-    expect(render.contains('<div class="CommentBox"')).to.be.true;
-    expect(render.contains('<button class="postCommentButton"')).to.be.true;
-  });
-});

jest.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const {pluginsPath} = require('./plugins');
+
+const buildTargets = [
+  'coral-admin',
+  'coral-docs'
+];
+
+const buildEmbeds = [
+  'stream'
+];
+
+// jest.config.js
+module.exports = {
+  testMatch: ['**/client/**/__tests__/**/*.js?(x)'],
+  setupTestFrameworkScriptFile: '<rootDir>/test/client/setupJest.js',
+  modulePaths: [
+    '<rootDir>/plugins',
+    '<rootDir>/client',
+    ...buildTargets.map((target) => path.join('<rootDir>', 'client', target, 'src')),
+    ...buildEmbeds.map((embed) => path.join('<rootDir>', 'client', `coral-embed-${embed}`, 'src')),
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'yaml', 'yml'],
+  moduleDirectories: ['node_modules'],
+
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '\\.ya?ml$': '<rootDir>/test/client/yamlTransformer.js'
+  },
+
+  moduleNameMapper: {
+    '^plugin-api\\/(.*)$': '<rootDir>/plugin-api/$1',
+    '^plugins\\/(.*)$': '<rootDir>/plugins/$1',
+    '^pluginsConfig$': pluginsPath,
+
+    '\\.(scss|css|less)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg)$': '<rootDir>/test/client/fileMock.js'
+  }
+};

package.json

@@ -15,6 +15,7 @@
     "lint": "eslint --ext=.js --ext=.json bin/* .",
     "lint-fix": "yarn lint --fix",
     "test": "TEST_MODE=unit NODE_ENV=test mocha -R ${MOCHA_REPORTER:-spec}",
+    "test-jest": "TEST_MODE=unit NODE_ENV=test jest",
     "test-cover": "TEST_MODE=unit NODE_ENV=test istanbul cover _mocha --report text --check-coverage -- -R spec",
     "heroku-postbuild": "./bin/cli plugins reconcile && yarn build",
     "generate-introspection": "WEBPACK=TRUE NODE_ENV=test ./scripts/generateIntrospectionResult.js"
@@ -159,6 +160,7 @@
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
     "react-tagsinput": "^3.17.0",
+    "react-test-renderer": "15.5",
     "react-toastify": "^1.5.0",
     "react-transition-group": "^1.1.3",
     "recompose": "^0.23.1",
@@ -179,17 +181,24 @@
     "url-search-params": "^0.9.0",
     "uuid": "^3.1.0",
     "webpack": "^2.3.1",
+    "webpack-sources": "^1.0.1",
     "yaml-loader": "^0.4.0",
     "yamljs": "^0.2.10"
   },
   "devDependencies": {
     "@coralproject/eslint-config-talk": "^0.0.3",
+    "babel-jest": "^21.2.0",
+    "babel-plugin-dynamic-import-node": "^1.1.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
     "chai-http": "^3.0.0",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-15": "^1.0.0",
     "eslint": "^4.5.0",
     "eslint-plugin-mocha": "^4.11.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^21.2.1",
     "mocha": "^3.1.2",
     "mocha-junit-reporter": "^1.12.1",
     "nodemon": "^1.11.0",

test/client/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@coralproject/eslint-config-talk/client"
+}

test/client/fileMock.js

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

test/client/setupJest.js

@@ -0,0 +1,38 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+
+Enzyme.configure({adapter: new Adapter()});
+
+// Storage Mock
+
+// TODO: If our code is written well, there shouldn't be a hardcoded dependency
+// to the local storage, and this global mock wouldn't be needed.
+
+function storageMock() {
+  let storage = {};
+
+  return {
+    setItem: function(key, value) {
+      storage[key] = value || '';
+    },
+    getItem: function(key) {
+      return key in storage ? storage[key] : null;
+    },
+    removeItem: function(key) {
+      delete storage[key];
+    },
+    get length() {
+      return Object.keys(storage).length;
+    },
+    key: function(i) {
+      let keys = Object.keys(storage);
+      return keys[i] || null;
+    }
+  };
+}
+
+// mock the localStorage
+window.localStorage = storageMock();
+
+// mock the sessionStorage
+window.sessionStorage = storageMock();

test/client/yamlTransformer.js

@@ -0,0 +1,8 @@
+const yaml = require('yamljs');
+
+module.exports = {
+  process(src) {
+    const data = yaml.parse(src);
+    return `module.exports = ${JSON.stringify(data)};`;
+  },
+};