[Tests] Reorg of karma tests and coverage setup, add jsdom, resolves #…

…4039, #3519

Removes isparta in favour of istanbul alpha with source map
reconciliation support built in. Refactors several tests into
shallow rendered unit tests. Adds JSDOM globals to the test suite
so components dependent on DOM APIs can be effectively unit tested
using enzyme.

.babelrc

@@ -5,6 +5,9 @@
     "transform-dev-warning"
   ],
   "env": {
+    "test": {
+      "sourceMaps": "inline"
+    },
     "docs-production": {
       "plugins": [
         ["transform-replace-object-assign", "simple-assign"],

.istanbul.yml

@@ -1,7 +1,16 @@
 instrumentation:
   root: src
+  default-excludes: true
   excludes:
     - "**/svg-icons/**"
     - "**/*.spec.js"
   extensions:
     - .js
+  variable: __coverage__
+  es-modules: true
+  include-all-sources: true
+reporting:
+  print: summary
+  reports:
+    - lcov
+  dir: ./test/coverage

.travis.yml

@@ -1,9 +1,14 @@
+---
 language: node_js
 node_js:
   - "stable"
 sudo: false
+cache:
+  directories:
+    - node_modules
 script:
   - npm run lint
-  - npm test
+  - npm run test:coverage
   - ./node_modules/.bin/codecov
+  - npm run test:karma
   - cd packages/material-ui-codemod && npm install && npm test

package.json

@@ -27,16 +27,15 @@
     "build:copy-files": "babel-node ./scripts/copy-files.js",
     "clean:build": "rimraf build",
     "coverage": "npm run test",
-    "coverage:combine": "istanbul report --dir test/coverage/combined --include test/**/*coverage.json text-summary lcovonly json",
     "lint": "eslint src docs/src test/browser test/unit && echo \"eslint: no lint errors\"",
     "prebuild": "npm run clean:build",
-    "test": "npm run test:unit && npm run test:browser && npm run test:unit:coverage && npm run coverage:combine",
-    "test:browser": "npm run test:browser:base -- --single-run",
-    "test:browser:watch": "npm run test:browser:base -- --auto-watch",
-    "test:browser:base": "karma start test/karma.conf.js",
-    "test:unit": "babel-node test/unit.js",
-    "test:unit:watch": "babel-node test/unit.watch.js",
-    "test:unit:coverage": "babel-node node_modules/.bin/isparta cover --report lcovonly --include-all-sources --dir test/coverage/unit test/unit.js"
+    "test": "cross-env NODE_ENV=test babel-node test/index.js",
+    "test:coverage": "cross-env NODE_ENV=test babel-node ./node_modules/istanbul/lib/cli.js cover test/index.js",
+    "test:karma": "karma start test/karma.conf.js --single-run",
+    "test:integration": "cross-env NODE_ENV=test babel-node test/index.js integration",
+    "test:integration:watch": "cross-env NODE_ENV=test babel-node test/watch.js integration",
+    "test:unit": "cross-env NODE_ENV=test babel-node test/index.js unit",
+    "test:unit:watch": "cross-env NODE_ENV=test babel-node test/watch.js unit"
   },
   "peerDependencies": {
     "react": "^15.0.0",
@@ -74,16 +73,16 @@
     "babel-runtime": "^6.3.19",
     "chai": "^3.2.0",
     "codecov": "^1.0.1",
+    "cross-env": "^1.0.7",
     "enzyme": "^2.0.0",
     "eslint": "^2.5.1",
     "eslint-plugin-babel": "^3.1.0",
     "eslint-plugin-material-ui": "./packages/eslint-plugin-material-ui",
     "eslint-plugin-react": "^4.0.0",
     "fs-extra": "^0.26.7",
     "glob": "^7.0.0",
-    "isparta": "^4.0.0",
-    "isparta-loader": "^2.0.0",
-    "istanbul": "^0.4.2",
+    "istanbul": "^1.0.0-alpha.2",
+    "jsdom": "^8.4.0",
     "json-loader": "^0.5.4",
     "karma": "^0.13.3",
     "karma-chai-sinon": "^0.1.5",

src/Avatar/Avatar.spec.js

@@ -8,6 +8,7 @@ import getMuiTheme from '../styles/getMuiTheme';
 describe('<Avatar />', () => {
   const muiTheme = getMuiTheme();
   const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+
   const testChildren = <div className="unique">Hello World</div>;
 
   it('renders children by default', () => {

src/Checkbox/Checkbox.spec.js

@@ -0,0 +1,73 @@
+/* eslint-env mocha */
+import React from 'react';
+import {shallow} from 'enzyme';
+import {mount} from 'enzyme';
+import {assert} from 'chai';
+import Checkbox from './Checkbox';
+import getMuiTheme from '../styles/getMuiTheme';
+
+describe('<Checkbox />', () => {
+  /* eslint-disable max-len */
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+  const mountWithContext = (node) => mount(node, {context: {muiTheme}});
+
+  it('should display checkmark when checked by default', () => {
+    const wrapper = shallowWithContext(
+      <Checkbox defaultChecked={true} />
+    );
+
+    const enhancedSwitch = wrapper.find('EnhancedSwitch');
+    const svgs = wrapper.prop('switchElement').props.children;
+    const checkMarkNode = shallow(svgs[1]);
+
+    assert.ok(enhancedSwitch.prop('switched'));
+    assert.ok(checkMarkNode.is('ToggleCheckBox'));
+    assert.strictEqual(checkMarkNode.props().style.opacity, 1);
+  });
+
+
+  it('should NOT display checkmark when not checked by default', () => {
+    const wrapper = shallowWithContext(
+      <Checkbox defaultChecked={false} />
+    );
+
+    const enhancedSwitch = wrapper.find('EnhancedSwitch');
+    const svgs = wrapper.prop('switchElement').props.children;
+    const checkMarkNode = shallow(svgs[1]);
+
+    assert.notOk(enhancedSwitch.prop('switched'));
+    assert.ok(checkMarkNode.is('ToggleCheckBox'));
+    assert.strictEqual(checkMarkNode.props().style.opacity, 0);
+  });
+
+
+  describe('when initially unchecked', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = mountWithContext(
+        <Checkbox defaultChecked={false} />
+      );
+    });
+
+    it('should display checkmark when clicked once', () => {
+      const input = wrapper.find('input');
+      input.node.checked = !input.node.checked;
+      input.simulate('change');
+      const enhancedSwitch = wrapper.find('EnhancedSwitch');
+      assert.ok(enhancedSwitch.prop('switched'));
+    });
+
+
+    it('should NOT display checkmark when clicked twice', () => {
+      const input = wrapper.find('input');
+      input.node.checked = !input.node.checked;
+      input.simulate('change');
+      input.node.checked = !input.node.checked;
+      input.simulate('change');
+      const enhancedSwitch = wrapper.find('EnhancedSwitch');
+      assert.notOk(enhancedSwitch.prop('switched'));
+    });
+  });
+});