Angular-cli: Testing with PhantomJS

[ghost]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.1.2
node: 6.10.3
os: win32 x64
@angular/cli: 1.1.2
@angular/animations: 4.2.2
@angular/common: 4.2.2
@angular/compiler: 4.2.2
@angular/compiler-cli: 4.2.2
@angular/core: 4.2.2
@angular/forms: 4.2.2
@angular/http: 4.2.2
@angular/platform-browser: 4.2.2
@angular/platform-browser-dynamic: 4.2.2
@angular/router: 4.2.2
@angular/language-service: 4.2.2

Repro steps.

• Install 2 npm packages :

  npm install -D karma-phantomjs-launcher karma-mocha-reporter

• Modify your karma.conf.js to this :

  module.exports = function(config) {
  config.set({
  basePath: '',
  frameworks: ['jasmine', '@angular/cli'],
  plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-phantomjs-launcher'),
  require('karma-jasmine-html-reporter'),
  require('karma-coverage-istanbul-reporter'),
  require('karma-mocha-reporter'),
  require('@angular/cli/plugins/karma')
  ],
  client: {
  clearContext: false // leave Jasmine Spec Runner output visible in browser
  },
  coverageIstanbulReporter: {
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true
  },
  angularCli: {
  environment: 'dev'
  },
  reporters: ['progress', 'kjhtml', 'mocha'],
  port: 9876,
  colors: true,
  logLevel: config.LOG_INFO,
  autoWatch: true,
  browsers: ['Chrome', 'PhantomJS'],
  singleRun: false
  });
  };

The log given by the failure.

PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
    TypeError: undefined is not an object (evaluating '((Object)).assign.apply')
    at http://localhost:9876/_karma_webpack_/vendor.bundle.js:6626

Desired functionality.

I would like to test my project with PhantomJS and mocha (but PhantomJS is the problem here)

Mention any other details that might be useful.

My project is brand new, runing karma start works with chrome, but running

karma start --browsers PhantomJS --reporters mocha

Doesn't work at all.

[ghost]

I forgot to mention I've found topics talking about that, saying that you had to uncomment lines in polyfill.ts. The only problem is that I don't have any polyfill.ts in my project (I am up to date with all the versions, and only launched ng new my project, so I guess polyfill.ts isn't existing anymore)

[Brocco]

In new projects the polyfills.ts file is in src dir by default. You can see the file here and is configurable in .angular-cli.json with this value

[blingwang]

I experienced the same issue even for testing with Chrome for a CircleCi job in a Linux container. The issue was fixed by uncommenting the 'core-js' data types in the polyfill.ts

[ghost]

Thank you, but as @Brocco said, I just didn't correctly saw the polyfill file. Just uncommenting all of it resolved my issue ! (Well, a part of it)

[yankee42]

While this makes the tests work with phantomjs, it also means that the polyfills are included in production build. If this is not needed, then this will needlessly increase the resulting application file.

So is there any any other way? I tried adding the imports to the test.ts but this did not work.

[fredgate]

I have same problem.
In polyfills.ts, I uncommented imports of core-js to allow e2e tests to be run with phantomjs on integration server (vsts).
But now the polyfills are also included with my production build, increasing the size of javascript files by 50 Kb.
It would be nice if we can have separate polyfills, some for e2e tests and others for production.
In .angular-cli.json file, we could have an additional option to override polyfills for e2e tests :

"e2e":  {
    "protractor": {
        ....
    },
    "polyfills": "polyfills-e2e.ts"
}

[lukengda]

@fredgate The same problem applies for karma testing via PhantomJS

[opiepj]

@yankee42 @fredgate You could create two apps in your cli. Seems overkill for just testing though... which you can split it.

[DanielKucal]

I needed to import core-js/es7 and core-js/es6/promise in polyfills.ts to satisfy PhantomJS.