CODEWITHSUNDEEP
unit-testingangularkarma-runnerkarma-mocha
Arran Bartish
Arran Bartish

Reputation: 144

Tests repeat with angular4 + mocha + karma

Question/Issue

I've converted a basic project generated by angular-cli 1.0.0 from using jasmine to using mocha. Why as I complete the conversion to mocha, do all the tests run twice? Interestingly when we run the same tests/code with wallabyjs runner, or with a downgraded angular2, then the tests only run once.

To reproduce from scratch I took 3 steps with an optional 4th. Unfortunately there is a lot of code involved, so I've provided a repository to demonstrate and a command to follow along each step which can be found in the step detail.

Step 1 create project with angular-cli

Detail

Step 2 validate that jasmine tests run using karma and wallaby both locally and on CI

Detail

Step 3 introduce mocha and convert specs from jasmine to mocha

Detail

Optional Observation

One of the strangest things that I've observed is that using angular 2 does not have the same behavior!

Step 4 downgrade angular from 4 to 2

Step Detail

Upvotes: 0

Views: 1905

Answers (1)

Arran Bartish
Arran Bartish

Reputation: 144

Frameworks configuration of karma is the issue

Because wallabyjs is working as expected, I've spent much of my time exploring karma and karma-mocha with a focus on the karma.conf.js

Broken karma.conf.js

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],
    plugins: [
      require('karma-mocha'),
      require('karma-chai'),
      require('karma-sinon'),
      require('karma-sinon-chai'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-mocha-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-istanbul-threshold'),
      require('@angular/cli/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false },
      { pattern: 'node_modules/chai/chai.js', instrument: false },
      { pattern: 'node_modules/sinon-chai/lib/sinon-chai.js', instrument: false },
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly', 'json' ],
      fixWebpackSourcePaths: true
    },
    istanbulThresholdReporter: {
      src: 'coverage/coverage-final.json',
      reporters: ['text'],
      thresholds: {
        global: {
          statements: 95.01,
          branches: 75.59,
          lines: 91.89,
          functions: 89.23
        },
        each: {
          statements: 75.76,
          branches: 33.33,
          lines: 75,
          functions: 41.67
        }
      }
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul', 'istanbul-threshold']
              : ['progress', 'mocha'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

The approach I took was the best practice of just "try stuff until it works", which translates to me removing parts of the configuration line by line to see if it was important and to see if it changed the behavior.

Resolution

Specifically the fix was removing sinon-chai and optionally chai from the frameworks array.

frameworks: ['mocha', 'chai', 'sinon-chai', '@angular/cli'],

becomes

frameworks: ['mocha', '@angular/cli'],

Resources

The working code can be found at this commit with this diff using angular-cli / karma / mocha / angular4

Travis build result

Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 0 of 3 SUCCESS (0 secs / 0 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 1 of 3 SUCCESS (0 secs / 0.062 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 2 of 3 SUCCESS (0 secs / 0.079 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0 secs / 0.086 secs)
Chromium 53.0.2785 (Ubuntu 0.0.0): Executed 3 of 3 SUCCESS (0.32 secs / 0.086 secs)

Upvotes: 1

Related Questions