feat(html-reporter): use mutation-testing-elements

Implement new report using the new [mutation-testing-elements](https://github.com/stryker-mutator/mutation-testing-elements/tree/master/packages/mutation-testing-elements#readme).

Dropped support for older browsers as well as Edge.
Chromium and firefox browsers are supported.

e2e/test/babel-transpiling/verify/verify.ts

@@ -1,11 +1,5 @@
-import { expect } from 'chai';
-import { fsAsPromised } from '@stryker-mutator/util';
 import { expectScoreResult } from '../../../helpers';
 
-async function expectFileExists(path: string) {
-  expect(await fsAsPromised.exists(path), `File ${path} does not exist`).eq(true);
-}
-
 describe('Verify stryker has ran correctly', () => {
 
   it('should report expected score', async () => {
@@ -19,27 +13,4 @@ describe('Verify stryker has ran correctly', () => {
       timedOut: 0
     });
   });
-
-  describe('html reporter', () => {
-
-    it('should report in html files', async () => {
-      await Promise.all([
-        expectFileExists('reports/mutation/html/Bank.js.html'),
-        expectFileExists('reports/mutation/html/Casino.js.html'),
-        expectFileExists('reports/mutation/html/User.js.html'),
-        expectFileExists('reports/mutation/html/index.html')
-      ]);
-    });
-
-    it('should copy over the resources', async () => {
-      await Promise.all([
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker.css'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker.js'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker-80x80.png'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/js/bootstrap.min.js'),
-        expectFileExists('reports/mutation/html/strykerResources/highlightjs/styles/default.css')
-      ]);
-    });
-  });
 });

e2e/test/karma-jasmine/stryker.conf.js

@@ -3,7 +3,7 @@ module.exports = function (config) {
     mutate: ['src/*.js'],
     testFramework: 'jasmine',
     testRunner: 'karma',
-    reporters: ['clear-text', 'html'],
+    reporters: ['clear-text', 'html', 'event-recorder'],
     maxConcurrentTestRunners: 2,
     karma: {
       config: {

e2e/test/karma-jasmine/verify/verify.ts

@@ -1,32 +1,12 @@
-import * as chai from 'chai';
-import { fsAsPromised } from '@stryker-mutator/util';
-import * as chaiAsPromised from 'chai-as-promised';
-chai.use(chaiAsPromised);
-const expect = chai.expect;
-const expectFileExists = (path: string) => expect(fsAsPromised.exists(path), `File ${path} does not exist`).to.eventually.eq(true);
+import { expectScoreResult } from '../../../helpers';
 
 describe('Verify stryker has ran correctly', () => {
 
-  describe('html reporter', () => {
-
-    it('should report in html files', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/Add.js.html'),
-        expectFileExists('reports/mutation/html/Circle.js.html'),
-        expectFileExists('reports/mutation/html/index.html')
-      ]);
-    });
-
-    it('should copy over the resources', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker.css'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker.js'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker-80x80.png'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/js/bootstrap.min.js'),
-        expectFileExists('reports/mutation/html/strykerResources/highlightjs/styles/default.css')
-      ]);
+  it('should report correct score', async () => {
+    await expectScoreResult({
+      killed: 16,
+      mutationScore: 64,
+      survived: 9
     });
   });
-
 });

e2e/test/karma-mocha/stryker.conf.js

@@ -4,7 +4,7 @@ module.exports = function (config) {
     mutator: 'javascript',
     testFramework: 'mocha',
     testRunner: 'karma',
-    reporters: ['clear-text', 'html'],
+    reporters: ['clear-text', 'html', 'event-recorder'],
     karma: {
       config: {
         frameworks: ['mocha', 'chai'],

e2e/test/karma-mocha/verify/verify.ts

@@ -1,32 +1,13 @@
-import * as chai from 'chai';
-import { fsAsPromised } from '@stryker-mutator/util';
-import * as chaiAsPromised from 'chai-as-promised';
-chai.use(chaiAsPromised);
-const expect = chai.expect;
-const expectFileExists = (path: string) => expect(fsAsPromised.exists(path), `File ${path} does not exist`).to.eventually.eq(true);
+import { expectScoreResult } from '../../../helpers';
 
 describe('Verify stryker has ran correctly', () => {
 
-  describe('html reporter', () => {
-
-    it('should report in html files', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/Add.js.html'),
-        expectFileExists('reports/mutation/html/Circle.js.html'),
-        expectFileExists('reports/mutation/html/index.html')
-      ]);
-    });
-
-    it('should copy over the resources', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker.css'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker.js'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker-80x80.png'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/js/bootstrap.min.js'),
-        expectFileExists('reports/mutation/html/strykerResources/highlightjs/styles/default.css')
-      ]);
+  it('should report correct score', async () => {
+    await expectScoreResult({
+      killed: 16,
+      mutationScore: 64,
+      noCoverage: 6,
+      survived: 3
     });
   });
-
 });

e2e/test/mocha-mocha/verify/verify.ts

@@ -1,32 +1,13 @@
-import * as chai from 'chai';
-import { fsAsPromised } from '@stryker-mutator/util';
-import * as chaiAsPromised from 'chai-as-promised';
-chai.use(chaiAsPromised);
-const expect = chai.expect;
-const expectFileExists = (path: string) => expect(fsAsPromised.exists(path), `File ${path} does not exist`).to.eventually.eq(true);
+import { expectScoreResult } from '../../../helpers';
 
 describe('Verify stryker has ran correctly', () => {
 
-  describe('html reporter', () => {
-
-    it('should report in html files', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/Add.js.html'),
-        expectFileExists('reports/mutation/html/Circle.js.html'),
-        expectFileExists('reports/mutation/html/index.html')
-      ]);
-    });
-
-    it('should copy over the resources', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker.css'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker.js'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker-80x80.png'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/highlightjs/styles/default.css')
-      ]);
+  it('should report correct score', async () => {
+    await expectScoreResult({
+      killed: 16,
+      mutationScore: 64,
+      noCoverage: 0,
+      survived: 9
     });
   });
-
 });

e2e/test/typescript-transpiling/verify/verify.ts

@@ -1,32 +1,12 @@
-import * as chai from 'chai';
-import { fsAsPromised } from '@stryker-mutator/util';
-import * as chaiAsPromised from 'chai-as-promised';
-chai.use(chaiAsPromised);
-const expect = chai.expect;
-const expectFileExists = (path: string) => expect(fsAsPromised.exists(path), `File ${path} does not exist`).to.eventually.eq(true);
+import { expectScoreResult } from '../../../helpers';
 
 describe('Verify stryker has ran correctly', () => {
 
-  describe('html reporter', () => {
-
-    it('should report in html files', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/Add.ts.html'),
-        expectFileExists('reports/mutation/html/Circle.ts.html'),
-        expectFileExists('reports/mutation/html/index.html')
-      ]);
-    });
-
-    it('should copy over the resources', () => {
-      return Promise.all([
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker.css'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker.js'),
-        expectFileExists('reports/mutation/html/strykerResources/stryker/stryker-80x80.png'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/bootstrap/css/bootstrap.min.css'),
-        expectFileExists('reports/mutation/html/strykerResources/highlightjs/styles/default.css')
-      ]);
+  it('should report correct score', async () => {
+    await expectScoreResult({
+      killed: 18,
+      mutationScore: 66.67,
+      survived: 9
     });
   });
-
 });

e2e/test/webpack-zero-conf-karma/stryker.conf.js

@@ -6,7 +6,7 @@ module.exports = function (config) {
     ],
     testFramework: 'jasmine',
     testRunner: 'karma',
-    reporters: ['clear-text', 'html'],
+    reporters: ['clear-text', 'html', 'event-recorder'],
     maxConcurrentTestRunners: 2,
     karma: {
       config: {