Merge coverage from cypress and unit tests (#225)

* Merge coverage from cypress and unit tests

* Use start-server-and-test

* Use mocha-headless-chrome instead of karma

* Remove karma.conf.js

.babelrc

@@ -5,5 +5,10 @@
   "plugins": [
     "add-module-exports",
     "lodash"
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": [ "istanbul" ]
+    }
+  }
 }

.gitignore

@@ -5,6 +5,7 @@
 /cypress/
 /dist/
 /node_modules/
+/test/unit/dist
 /.DS_Store
 /.sass-cache
 /npm-debug.log*

.travis.yml

@@ -21,7 +21,6 @@ jobs:
   include:
     - stage: test
       script:
-        - yarn build
         - yarn test:ci
       after_script:
         - codeclimate-test-reporter < coverage/lcov.info

cypress.json

@@ -1,5 +1,8 @@
 {
-  "fixturesFolder": "test/fixtures",
-  "integrationFolder": "test/integration",
+  "coverageFolder": "coverage",
+  "fixturesFolder": "test/cypress/fixtures",
+  "integrationFolder": "test/cypress/integration",
+  "pluginsFile": "test/cypress/plugins/index.js",
+  "supportFile": "test/cypress/support/index.js",
   "video": false
 }

package.json

@@ -21,15 +21,16 @@
     "postbuild": "rm -f dist/removable-*",
     "clean": "rm -rf dist",
     "cy:open": "./node_modules/.bin/cypress open",
-    "cy:run": "./node_modules/.bin/cypress run",
+    "cy:run": "./node_modules/.bin/cypress run --env coverage=true",
+    "mocha-headless-chrome": "mocha-headless-chrome -c coverage/coverage.json -f test/unit/index.html -a no-sandbox",
+    "posttest:ci": "nyc report --reporter=lcov --reporter=text",
     "start": "yarn watch",
     "start-test-server": "http-server",
+    "test:build": "cross-env NODE_ENV=test yarn build",
     "test:ci": "yarn test:unit:ci && yarn test:cy:ci",
-    "test:cy:ci": "start-server-and-test start-test-server http://localhost:8080 cy:run",
+    "test:cy:ci": "yarn test:build && start-server-and-test start-test-server http://localhost:8080 cy:run",
     "test:cy:watch": "start-server-and-test start-test-server http://localhost:8080 cy:open",
-    "test:unit:ci": "karma start --single-run --browsers ChromeHeadlessNoSandbox",
-    "test:unit:watch": "karma start --browsers Chrome",
-    "test": "mocha",
+    "test:unit:ci": "cross-env NODE_ENV=test webpack --config webpack.test.config.js && yarn mocha-headless-chrome",
     "watch": "yarn clean && webpack --watch --mode development"
   },
   "homepage": "http://shipshapecode.github.io/shepherd/docs/welcome/",
@@ -45,16 +46,18 @@
   },
   "devDependencies": {
     "autoprefixer": "^9.1.3",
-    "babel-core": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-loader": "^7.1.4",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-env": "^1.6.1",
     "browser-sync": "^2.24.6",
     "browser-sync-webpack-plugin": "^2.2.2",
     "chai": "^4.1.2",
     "codeclimate-test-reporter": "^0.5.0",
     "copy-webpack-plugin": "^4.5.2",
+    "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "cypress": "^3.0.3",
     "del": "^3.0.0",
@@ -68,17 +71,12 @@
     "http-server": "^0.11.1",
     "inject-loader": "^4.0.1",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "karma": "^3.0.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.2",
-    "karma-coverage-istanbul-reporter": "^2.0.2",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.0",
+    "istanbul-lib-coverage": "^1.2.0",
     "lodash-webpack-plugin": "^0.11.5",
     "mocha": "^5.2.0",
+    "mocha-headless-chrome": "^2.0.1",
     "node-sass": "^4.9.2",
+    "nyc": "^12.0.2",
     "postcss": "^7.0.2",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
@@ -94,5 +92,9 @@
   },
   "engines": {
     "node": ">= 6.*"
+  },
+  "nyc": {
+    "temp-directory": "./coverage",
+    "report-dir": "./coverage"
   }
 }

src/js/bind.js

@@ -1,4 +1,4 @@
-import { parseShorthand } from './utils';
+import { parseShorthand } from './utils.js';
 import _ from 'lodash';
 
 /**

src/js/shepherd.js

@@ -1,6 +1,6 @@
-import { Evented } from './evented';
-import { Step } from './step';
-import { Shepherd, Tour } from './tour';
+import { Evented } from './evented.js';
+import { Step } from './step.js';
+import { Shepherd, Tour } from './tour.js';
 
 Object.assign(Shepherd, { Tour, Step, Evented });
 

src/js/step.js

@@ -1,8 +1,8 @@
 import _ from 'lodash';
-import { Evented } from './evented';
+import { Evented } from './evented.js';
 import 'element-matches';
-import { bindAdvance, bindButtonEvents, bindCancelLink, bindMethods } from './bind';
-import { createFromHTML, parsePosition, setupPopper } from './utils';
+import { bindAdvance, bindButtonEvents, bindCancelLink, bindMethods } from './bind.js';
+import { createFromHTML, parsePosition, setupPopper } from './utils.js';
 
 /**
  * Creates incremented ID for each newly created step

src/js/tour.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import { Evented } from './evented';
-import { Step } from './step';
-import { bindMethods } from './bind';
+import { Evented } from './evented.js';
+import { Step } from './step.js';
+import { bindMethods } from './bind.js';
 
 const Shepherd = new Evented();
 

test/cypress/plugins/index.js

@@ -0,0 +1,30 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+let coverageMap;
+
+module.exports = (on, config) => {
+  if(config.env.coverage) {
+    const istanbul = require('istanbul-lib-coverage');
+    coverageMap = istanbul.createCoverageMap({});
+
+    on('task', {
+      'coverage'(coverage) {
+        coverageMap.merge(coverage);
+        return JSON.stringify(coverageMap);
+      }
+    });
+  }
+
+  return config;
+};

test/cypress/support/commands.js

@@ -0,0 +1,31 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+
+if(Cypress.env('coverage')) {
+  afterEach(function() {
+    const coverageFile = `${ Cypress.config('coverageFolder') }/out.json`;
+
+    cy.window().then(win => {
+      const coverage = win.__coverage__;
+
+      if(!coverage) return;
+
+      cy.task('coverage', coverage).then(map => {
+        cy.writeFile(coverageFile, map);
+
+        if(Cypress.env('coverage') === 'open') {
+          cy.exec('nyc report --reporter=html');
+        }
+      });
+    });
+  });
+}

test/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

test/unit/index.html

@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Mocha Tests</title>
+  <link href="../../node_modules/mocha/mocha.css" rel="stylesheet"/>
+  <script src="../../node_modules/mocha/mocha.js"></script>
+</head>
+<body>
+<div id="mocha"></div>
+<script src="dist/bundle.js"></script>
+</body>
+</html>

test/unit/run.js

@@ -0,0 +1,7 @@
+import './test.evented.js';
+import './test.step.js';
+import './test.tour.js';
+import './test.utils.js';
+
+mocha.checkLeaks();
+mocha.run();

test/unit/setup.js

@@ -0,0 +1 @@
+mocha.setup('bdd');

test/test.evented.js → test/unit/test.evented.js

@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import { Evented } from '../src/js/evented';
+import { Evented } from '../../src/js/evented.js';
 
 describe('Evented', () => {
   let testEvent, testOnTriggered;

test/test.step.js → test/unit/test.step.js

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
-import Shepherd from '../src/js/shepherd';
-import { Step } from '../src/js/step';
+import Shepherd from '../../src/js/shepherd.js';
+import { Step } from '../../src/js/step.js';
 // since importing non UMD, needs assignment
 window.Shepherd = Shepherd;