Angular-cli: How to run jasmine tests without browser ?

[radenui]

OS: Ubuntu 14.04.3 in a docker environment, without web browser (it's actually running in Cloud9)

Version: angular-cli: 1.0.0-beta.11-webpack.8
node: 6.5.0
os: linux x64

Without any browser installed in the os, I cannot find a way to execute jasmine unit tests in spec files.

running ng test :

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.

WARNING in ./src/app/app.component.ts
[208, 7]: comment must start with a space
[20, 3]: Declaration of public instance member variable not allowed to appear after declaration of public instance member function
...
07 09 2016 20:57:41.939:WARN [karma]: No captured browser, open http://0.0.0.0:9876/
07 09 2016 20:57:41.947:INFO [karma]: Karma v0.13.22 server started at http://0.0.0.0:9876/
07 09 2016 20:57:41.955:INFO [launcher]: Starting browser Chrome
07 09 2016 20:57:41.958:ERROR [launcher]: No binary for Chrome browser on your platform.
  Please, set "CHROME_BIN" env variable.

No error shown even if some tests have
expect(true).toEqual(false);

Is there a way to execute these tests in a console-only environment ?

Thanks !

[deebloo]

by default the cli installs the karma-chrome-launcher. you could try installing a headless browser like phantomjs

[oravecz]

Here is how I did it.

$ npm --version
3.10.6
$ ng --version
angular-cli: 1.0.0-beta.11-webpack.8
node: 6.4.0
os: darwin x64

npm i --save-dev karma-phantomjs-launcher

Then I modified the plugins property of the karma.conf.js file, adding the PhantomJS plugin to the list. Also add PhantomJS to the browsers property.

plugins: [
    require( 'karma-jasmine' ),
    require( 'karma-chrome-launcher' ),
    require( 'karma-phantomjs-launcher' ),
    require( 'karma-remap-istanbul' ),
    require( 'angular-cli/plugins/karma' )
],
...
browsers: [ 'PhantomJS', 'Chrome' ],

Since you want a completely headless experience, you can remove Chrome from the browsers property, and remove the karma-chrome-launcher from the plugins array as well.

[radenui]

Works like a charm, thanks !

[xtreemrage]

@oravecz
Thanks for the information, I needed to uncomment some things before I could fully use PhantomJS. These where all in the polyfills.ts file:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

Info from here https://github.com/angular/angular-cli/issues/4654

[cbeldacap]

Hi all,

For me it's still not working. I've followed all these steps as well.

---

### 1. Install phantomjs:

npm install --save-dev phantomjs phantomjs-prebuilt karma-phantomjs-launcher

### 2. Add import to karma.conf.js:

require('karma-phantomjs-launcher'),

(...)

browsers: ['PhantomJS'],

### 3. Install intl
npm install --save-dev intl

### 4. Uncomment polyfills' imports:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/string';
import 'core-js/es6/array';

import 'intl';  // Run `npm install --save intl`.

### 5. Target for es5 instead of es6 in tsconfig.spec.json:
"target": "es5",

---

But still doesn't work. I receive this from running:
ng test --browsers PhantomJS --watch=false

Already tried to increase the timeout value but there is no difference.

Does anybody know if I'm skipping some steps here?

Thanks so much in advance.

[skofgar]

@cbeldacap I just learned that phantomjs is deprecated and renamed to phantomjs-prebuilt (via, phantomjs-repo). So you should be able to remove it from your package.json and change:
--save-dev phantomjs phantomjs-prebuilt karma-phantomjs-launcher
to:
--save-dev phantomjs-prebuilt karma-phantomjs-launcher

[dujuanxian]

@cbeldacap Same issue for me. Have you got solution now?

[skofgar]

@dujuanxian
you might need to turn on polyfills?
see above or https://github.com/angular/angular-cli/issues/6377

[luiscvalmeida]

Same as @cbeldacap , added karma-phantojs-launcher, changed browsers: ['Chrome'] to browsers: ['PhantomJS'] on karma.conf.js, uncommented everything on polyfils.ts and still it throws me errors.

PS: target was already set to es5 on tsconfig.spec.ts.

```
@angular/cli: 1.2.4
node: 8.2.1
os: darwin x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.1

[cbeldacap]

@luiscvalmeida Hi Luis, finally I could solve it uncommenting some polyfills:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
// import 'core-js/es6/function';    
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
// import 'core-js/es6/date';
import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/set';

And it started working fine!

[luiscvalmeida]

@cbeldacap still doesn't work for me:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  SyntaxError: Invalid character: '`'
  at http://localhost:9876/_karma_webpack_/scripts.bundle.js:42

What's your angular-cli version, and node version? could you print the ng -v output please?

[cbeldacap]

@luiscvalmeida See below:

[cbeldacap]

@luiscvalmeida Anyway, if PhantomJS is not mandatory you could go for ChromeHeadless. From yesterday (AFAIK) is available the 60th version even in Windows10.

You could configure it in your karma.conf.js like this:

customLaunchers: {
(...)
     ChromeHeadless:  {
        base:   'Chrome',
        flags:  [
          '--headless',
          '--disable-gpu',
          '--remote-debugging-port=9222',
        ],
      }
(...)
},
browsers: ['Chrome', 'ChromeHeadless', 'PhantomJS']

[luiscvalmeida]

@cbeldacap you only need to specify browsers: ['ChromeHeadless'] using karma-chrome-launcher (just remember to update this to the latest version, and you don't need to add customLaunchers.

PhantomJS is out of question, I need to had a bunch of polyfills (and those will end up on my final production build using the polyfills.ts file and I don't want that), to make it happen and still Phantom crashes trying to understand ES6 template literals.

Trying now to install Chrome on my jenkins slave that runs the tests, but this slave is using CentOS and I'm having a really hard time setting this up.

[cbeldacap]

@luiscvalmeida Totally understand that. So, if you get something at installing Chrome in your Jenkins slave, please let us know here :P so we can improve our CI with more possibilities.

Thanks a lot in advance
Cristóbal

[kkrishan]

@cbeldacap @luiscvalmeida . Same issue ,no idea which way to go anyhelp will be much appreciated stackoverflow link.

[luiscvalmeida]

@kkrishan replied there, but essentially @cbeldacap, I gave up on the CentOS, changed to Ubuntu server and installed Chrome in there, works like a charm, even e2e tests with protractor run in there.

[darsana]

Tried to run the unit test using Karama, Jasmin, PhantomJS

When run the test command ng test getting the result like below, Anybody knows about this ?

13 10 2017 11:19:47.282:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket UPfLMUiRjmUpAQq2AAAA with id 59115869

[cbeldacap]

@darsana @luiscvalmeida @kkrishan I strongly recommend using ChromeHeadless instead of PhantomJS. I've installed it as a "Custom Tool" in my Jenkins and it works fine :)

I've used this script to install it:

if ! which google-chrome > /dev/null; then
sudo su << EOF
wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list
apt-get update && apt-get -y install google-chrome-stable
EOF
fi

Tool home: /opt/chrome

I'm also using the new Chrome version (60 I think) which I can use locally in my Win10 machine as well. As far as I know it was ready before that version for Linux.

Conclusion: I'm not using PhantomJS again.

Hope it helps :)

[cbeldacap]

@darsana specifically with your problem, could it be possible that you're running more than one browser at a time?

I mean, instead of running ng test --browsers [browser_name] (i.e. "ChromeHeadless", "Chrome", "PhantomJS"...) are you running just ng test.

If you have several browsers in your karma.conf.js it is possible that they are failing.

[darsana]

tried by specifying the browser like this
ng test --browsers PhantomJS --watch=false

Got the response like this ...

so now changed the browsers : ['ChromeHeadless'] , Is that required any extra plugin ?

[cbeldacap]

@darsana You can have a customLaunchers section in your karma.conf.js like this:

customLaunchers: {
(...)
     ChromeHeadless:  {
        base:   'Chrome',
        flags:  [
          '--headless',
          '--disable-gpu',
          '--remote-debugging-port=9222',
        ],
      }
(...)
},
browsers: ['Chrome', 'ChromeHeadless', 'PhantomJS']

Launch tests with Chrome: ng test --browsers Chrome
Launch tests with PhantomJS ng test --browsers PhantomJS
Launch tests with ChromeHeadless ng test --browsers ChromeHeadless

A priori your console output does not seem like an error. Just like the process is starting, but not failing. If the process is going on for some time you can have timeout problems though

[darsana]

Added customLaunchers section in karma.conf.js and run the ng test --browsers ChromeHeadless command ,But getting the result like below, How can we find the reason behind the issue.These test cases are running fine with command ng test --browsers Chrome in a browser environment.

[cbeldacap]

@darsana Can you please paste your AngularCLI and Node version? ($ ng version)

[darsana]

Version Details

[cbeldacap]

@darsana could not tell the reason, but some stuff started working for me when I moved to version 8.x of node. I would consider the option of updating NodeJS to i.e. 8.4, NPM to 5.x and then upgrade @angular/cli to its latest.

[mihailo-misic]

This configuration worked for me:

• OS: Linux Mint
• Chrome: 62.0.3202.89
• Node: 8.9.0
• npm: 5.5.1
• ng-cli: 1.3.1

karma.conf.js

customLaunchers: {
    ChromeHeadless: {
        base: 'Chrome',
        flags: [
            '--headless',
            '--disable-gpu',
            '--no-sandbox',
            '--remote-debugging-port=9222',
        ]
    }
},
browsers: [
    'Chrome',
    'ChromeHeadless',
],

And simply running the following command from the app directory:

ng test --browsers="ChromeHeadless"

_Hope somebody finds this useful, ChromeHeadless is a much better option then PhantomJS_

[Brampage]

For more information on Chrome Headless you can check this issue inside the Karma repository. (This comment (inside the issue) shows the same solution as @mihailo-misic)

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>