karma-remap-istanbul with Quickstart angular 2 configuration shows application output on browser

[shaikhspear16]

I have taken the latest Angular 2 Quickstart clone. I have updated the karma.config.js file according to the steps mentioned. My test cases run and the coverage report is generated in Typescript which is great!

The Chrome browser shows the default page of the application when test cases are run as follows:

karma.config.js file:

module.exports = function (config) {

  var appBase = 'app/';      // transpiled app JS and map files
  var appSrcBase = 'app/';      // app source TS files
  var appAssets = '/base/app/'; // component assets fetched by Angular's compiler

  // Testing helpers (optional) are conventionally in a folder called `testing`
  var testingBase = 'testing/'; // transpiled test JS and map files
  var testingSrcBase = 'testing/'; // test source TS files

  config.set({
    basePath: '',
    frameworks: ['jasmine'],

    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-remap-istanbul'),
      require('karma-coverage')
    ],

    client: {
      builtPaths: [appBase, testingBase], // add more spec base paths as needed
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },

    customLaunchers: {
      // From the CLI. Not used here but interesting
      // chrome setup for travis CI using chromium
      Chrome_travis_ci: {
        base: 'Chrome',
        flags: ['--no-sandbox']
      }
    },

    files: [
      // System.js for module loading
      'node_modules/systemjs/dist/system.src.js',

      // Polyfills
      'node_modules/core-js/client/shim.js',
      'node_modules/reflect-metadata/Reflect.js',

      // zone.js
      'node_modules/zone.js/dist/zone.js',
      'node_modules/zone.js/dist/long-stack-trace-zone.js',
      'node_modules/zone.js/dist/proxy.js',
      'node_modules/zone.js/dist/sync-test.js',
      'node_modules/zone.js/dist/jasmine-patch.js',
      'node_modules/zone.js/dist/async-test.js',
      'node_modules/zone.js/dist/fake-async-test.js',

      // RxJs
      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },

      // Paths loaded via module imports:
      // Angular itself
      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },

      { pattern: 'systemjs.config.js', included: false, watched: false },
      { pattern: 'systemjs.config.extras.js', included: false, watched: false },
      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels

      // transpiled application & spec code paths loaded via module imports
      { pattern: appBase + '**/*.js', included: false, watched: true },
      { pattern: testingBase + '**/*.js', included: false, watched: true },

      // Asset (HTML & CSS) paths loaded via Angular's component compiler
      // (these paths need to be rewritten, see proxies section)
      { pattern: appBase + '**/*.html', included: false, watched: true },
      { pattern: appBase + '**/*.css', included: false, watched: true },

      // Paths for debugging with source maps in dev tools
      { pattern: appSrcBase + '**/*.ts', included: false, watched: false },
      { pattern: appBase + '**/*.js.map', included: false, watched: false },
      { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
      { pattern: testingBase + '**/*.js.map', included: false, watched: false }
    ],

    // Proxied base paths for loading assets
    proxies: {
      // required for component assets fetched by Angular's compiler
      "/app/": appAssets
    },

    exclude: [],

    preprocessors: {
      'app/**/!(*spec).js': ['coverage']
    },
    //    reporters: ['progress', 'kjhtml'],

    reporters: ['progress', 'coverage', 'karma-remap-istanbul'],
    remapIstanbulReporter: {
      reports: {
        html: 'coverage'
      }
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  })
}

Why does the application output show?

[mattlewis92]

Sorry I'm not quite sure I understand your question, are you asking why this window opens when your tests run?

[shaikhspear16]

The "Hello Angular" on the page is actually in my code's app.html file (page that loads with npm start). Ideally when you run karma tests this window comes up as a blank white page. I am afraid as my application matures, the application home page will be shown when test cases run with karma.

[mattlewis92]

That's how karma works - it will compile and test your components in the browser so you'll see the output of the compiled component in the browser window. If you call fixture.destroy() after the test is run it should remove it from the DOM. Alternatively just use a headless browser instead which won't have a browser window.