Use jest instead of karma for running tests (#1768)

Jest is faster, has more flexibility to run a subset of the tests, and will allow 
us to remove a bunch of our assertion libraries.

Many thanks to @grampelberg for prior work on this (#1000)

This PR:
- changes the test runner from karma to jest
- moves individual tests from /test/ to/js/components` where jest expects them

.travis.yml

@@ -49,7 +49,7 @@ jobs:
       install:
         - ./bin/web
       script:
-        - ./bin/web test --reporters dots
+        - ./bin/web test --reporters=jest-dot-reporter
 
     - language: generic
       script:

TEST.md

@@ -40,16 +40,39 @@ go vet ./...
 ## Javascript
 
 Javascript dependencies are managed via [yarn](https://yarnpkg.com/) and
-[webpack](https://webpack.js.org/). To fetch dependencies and run tests, run:
+[webpack](https://webpack.js.org/). We use [jest](https://facebook.github.io/jest) as
+our test runner.
+
+To fetch dependencies and run tests, run:
 
 ```bash
+bin/web setup
 bin/web test
 
 # or alternatively:
 
 cd web/app
 yarn && NODE_ENV=test yarn webpack
-NODE_ENV=test yarn karma start --single-run
+yarn jest "$*"
+```
+
+For faster testing, run a subset of the tests by passing flags to jest.
+
+Run tests on files that have changed since the last commit:
+```bash
+bin/web test -o
+```
+
+Run tests that match a spec name (regex):
+```bash
+bin/web test -t name-of-spec
+```
+
+Run watch mode:
+
+```bash
+bin/web test --watch # runs -o by default (tests only files changed since last commit)
+bin/web test --watchAll # runs all tests after a change to a file
 ```
 
 # Integration tests

bin/web

@@ -19,7 +19,7 @@ USAGE: web <command>
   * setup - get the environment setup for development
       Note: any command line options are passed on to yarn
   * test - run the tests
-      Note: any command line options are passed on to karma
+      Note: any command line options are passed on to the test runner (jest)
 USAGE
 }; function --help { -h ;}
 
@@ -81,7 +81,7 @@ function setup {
 
 function test {
   cd $ROOT/web/app
-  yarn karma start --single-run $*
+  yarn jest "$*"
 }
 
 function main {

web/app/__mocks__/fileMock.js

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

web/app/__mocks__/styleMock.js

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

web/app/js/components/BreadcrumbHeader.test.jsx

@@ -1,7 +1,6 @@
 import Adapter from 'enzyme-adapter-react-16';
-import { Breadcrumb } from 'antd';
-import BreadcrumbHeader from '../js/components/BreadcrumbHeader.jsx';
 import { BrowserRouter } from 'react-router-dom';
+import BreadcrumbHeader from './BreadcrumbHeader.jsx';
 import { expect } from 'chai';
 import React from 'react';
 import Enzyme, { mount } from 'enzyme';
@@ -11,7 +10,7 @@ Enzyme.configure({ adapter: new Adapter() });
 const loc = {
   pathname: '',
   hash: '',
-  pathPrefix: '',
+  pathPrefix: '/path/prefix',
   search: '',
 };
 
@@ -28,7 +27,7 @@ describe('Tests for <BreadcrumbHeader>', () => {
       </BrowserRouter>
     );
 
-    const crumbs = component.find(Breadcrumb.Item);
+    const crumbs = component.find("a");
     expect(crumbs).to.have.length(3);
   });
 });

web/app/js/components/GrafanaLink.test.jsx

@@ -1,8 +1,8 @@
 import Adapter from 'enzyme-adapter-react-16';
-import ApiHelpers from '../js/components/util/ApiHelpers.jsx';
+import ApiHelpers from './util/ApiHelpers.jsx';
 import { expect } from 'chai';
-import GrafanaLink from '../js/components/GrafanaLink.jsx';
-import { routerWrap } from './testHelpers.jsx';
+import GrafanaLink from './GrafanaLink.jsx';
+import { routerWrap } from '../../test/testHelpers.jsx';
 import sinon from 'sinon';
 import sinonStubPromise from 'sinon-stub-promise';
 import Enzyme, { mount } from 'enzyme';

web/app/js/components/MetricsTable.test.js

@@ -1,8 +1,8 @@
 import Adapter from 'enzyme-adapter-react-16';
-import ApiHelpers from '../js/components/util/ApiHelpers.jsx';
-import BaseTable from '../js/components/BaseTable.jsx';
+import ApiHelpers from './util/ApiHelpers.jsx';
+import BaseTable from './BaseTable.jsx';
 import { expect } from 'chai';
-import { MetricsTableBase } from '../js/components/MetricsTable.jsx';
+import { MetricsTableBase } from './MetricsTable.jsx';
 import React from 'react';
 import Enzyme, { shallow } from 'enzyme';
 

web/app/js/components/NetworkGraph.test.jsx

@@ -1,7 +1,7 @@
 import Adapter from 'enzyme-adapter-react-16';
-import emojivotoPodFixtures from './fixtures/emojivotoPods.json';
+import emojivotoPodFixtures from '../../test/fixtures/emojivotoPods.json';
 import { expect } from 'chai';
-import { NetworkGraphBase } from '../js/components/NetworkGraph.jsx';
+import { NetworkGraphBase } from './NetworkGraph.jsx';
 import React from 'react';
 import Enzyme, { shallow } from 'enzyme';
 

web/app/js/components/ResourceList.test.jsx

@@ -1,10 +1,10 @@
 import Adapter from 'enzyme-adapter-react-16';
-import deployRollup from './fixtures/deployRollup.json';
-import ErrorBanner from '../js/components/ErrorBanner.jsx';
+import deployRollup from '../../test/fixtures/deployRollup.json';
+import ErrorBanner from './ErrorBanner.jsx';
 import { expect } from 'chai';
-import MetricsTable from '../js/components/MetricsTable.jsx';
+import MetricsTable from './MetricsTable.jsx';
 import React from 'react';
-import { ResourceListBase } from '../js/components/ResourceList.jsx';
+import { ResourceListBase } from './ResourceList.jsx';
 import { Spin } from 'antd';
 import Enzyme, { shallow } from 'enzyme';
 

web/app/js/components/ServiceMesh.test.jsx

@@ -1,10 +1,10 @@
 import _ from 'lodash';
 import Adapter from 'enzyme-adapter-react-16';
 import { expect } from 'chai';
-import nsFixtures from './fixtures/namespaces.json';
-import podFixtures from './fixtures/podRollup.json';
-import { routerWrap } from './testHelpers.jsx';
-import ServiceMesh from '../js/components/ServiceMesh.jsx';
+import nsFixtures from '../../test/fixtures/namespaces.json';
+import podFixtures from '../../test/fixtures/podRollup.json';
+import { routerWrap } from '../../test/testHelpers.jsx';
+import ServiceMesh from './ServiceMesh.jsx';
 import sinon from 'sinon';
 import sinonStubPromise from 'sinon-stub-promise';
 import Enzyme, { mount } from 'enzyme';

web/app/js/components/Sidebar.test.jsx

@@ -1,11 +1,11 @@
 import Adapter from "enzyme-adapter-react-16";
-import ApiHelpers from "../js/components/util/ApiHelpers.jsx";
+import ApiHelpers from "./util/ApiHelpers.jsx";
 import { BrowserRouter } from 'react-router-dom';
 import { expect } from 'chai';
-import namespaceFixtures from './fixtures/namespaces.json';
+import namespaceFixtures from '../../test/fixtures/namespaces.json';
 import React from "react";
 import { Select } from 'antd';
-import Sidebar from "../js/components/Sidebar.jsx";
+import Sidebar from "./Sidebar.jsx";
 import sinon from "sinon";
 import sinonStubPromise from "sinon-stub-promise";
 import Enzyme, { mount } from "enzyme";

web/app/js/components/Version.test.jsx

@@ -1,9 +1,9 @@
 import Adapter from 'enzyme-adapter-react-16';
-import ApiHelpers from '../js/components/util/ApiHelpers.jsx';
+import ApiHelpers from './util/ApiHelpers.jsx';
 import { BrowserRouter } from 'react-router-dom';
 import { expect } from 'chai';
 import React from 'react';
-import Sidebar from '../js/components/Sidebar.jsx';
+import Sidebar from './Sidebar.jsx';
 import sinon from 'sinon';
 import sinonStubPromise from 'sinon-stub-promise';
 import Enzyme, { mount } from 'enzyme';

web/app/js/components/util/ApiHelpers.test.jsx

@@ -2,11 +2,11 @@
 import _ from 'lodash';
 import 'raf/polyfill'; // the polyfill import must be first
 import Adapter from 'enzyme-adapter-react-16';
-import ApiHelpers from '../js/components/util/ApiHelpers.jsx';
+import ApiHelpers from './ApiHelpers.jsx';
 import Enzyme from 'enzyme';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
-import { routerWrap } from './testHelpers.jsx';
+import { routerWrap } from '../../../test/testHelpers.jsx';
 import sinon from 'sinon';
 import sinonStubPromise from 'sinon-stub-promise';
 /* eslint-enable */

web/app/js/components/util/MetricUtils.test.js

@@ -1,13 +1,13 @@
 import _ from 'lodash';
-import deployRollupFixtures from './fixtures/deployRollup.json';
+import deployRollupFixtures from '../../../test/fixtures/deployRollup.json';
 import { expect } from 'chai';
-import multiDeployRollupFixtures from './fixtures/multiDeployRollup.json';
-import multiResourceRollupFixtures from './fixtures/allRollup.json';
-import Percentage from '../js/components/util/Percentage';
+import multiDeployRollupFixtures from '../../../test/fixtures/multiDeployRollup.json';
+import multiResourceRollupFixtures from '../../../test/fixtures/allRollup.json';
+import Percentage from './Percentage';
 import {
   processMultiResourceRollup,
   processSingleResourceRollup
-} from '../js/components/util/MetricUtils.jsx';
+} from './MetricUtils.jsx';
 
 describe('MetricUtils', () => {
   describe('processSingleResourceRollup', () => {

web/app/js/components/util/Utils.test.js

@@ -4,7 +4,7 @@ import {
   metricToFormatter,
   styleNum,
   toClassName
-} from '../js/components/util/Utils.js';
+} from './Utils.js';
 
 // introduce some binary floating point rounding errors, like ya do
 function float(num) {

web/app/karma.conf.js

@@ -1,22 +0,0 @@
-// use the same babel compilation etc. as what's defined in the webpack config
-var webpackConfig = require('./webpack.config.js');
-
-// Karma configuration
-module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['mocha', 'sinon-chai'],
-    files: [
-      { pattern: 'test/*.+(js|jsx)', watched: false }, // all js, jsx files in "test/"
-    ],
-    preprocessors: {
-      'test/*.+(js|jsx)': ['webpack']
-    },
-    reporters: ['nyan'],
-    browsers: ['jsdom'],
-    webpack: webpackConfig,
-    webpackMiddleware: {
-      stats: 'normal'
-    }
-  });
-};

web/app/package.json

@@ -9,13 +9,6 @@
     "d3": "^4.11.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
-    "jsdom": "^11.5.1",
-    "karma": "^1.7.1",
-    "karma-jsdom-launcher": "^6.1.2",
-    "karma-mocha": "^1.3.0",
-    "karma-nyan-reporter": "^0.2.5",
-    "karma-sinon-chai": "^1.3.3",
-    "karma-webpack": "^2.0.6",
     "lodash": "^4.17.10",
     "mocha": "^4.0.1",
     "moment": "^2.18.1",
@@ -38,6 +31,7 @@
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.3",
+    "babel-jest": "^23.6.0",
     "babel-loader": "^7.1.4",
     "babel-plugin-import": "^1.7.0",
     "babel-preset-env": "^1.7.0",
@@ -52,6 +46,9 @@
     "eslint-plugin-react": "^7.5.1",
     "file-loader": "^1.1.5",
     "history": "^4.7.2",
+    "jest": "^23.6.0",
+    "jest-dot-reporter": "^1.0.7",
+    "jest-enzyme": "^7.0.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
     "less-vars-to-js": "^1.3.0",
@@ -62,5 +59,13 @@
     "style-loader": "^0.21.0",
     "url-loader": "^1.0.1",
     "webpack-cli": "^3.0.7"
+  },
+  "jest": {
+    "testEnvironment": "enzyme",
+    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
   }
 }