How to run jasmine tests without browser ? #2013

radenui · 2016-09-07T21:01:59Z

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 !

The text was updated successfully, but these errors were encountered:

deebloo · 2016-09-07T22:17:59Z

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

oravecz · 2016-09-08T01:22:46Z

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 · 2016-09-08T07:40:06Z

Works like a charm, thanks !

Change karma config file - launch PhantomJS instead of Chrome, set PhantomJS as browser. Run $ npm i --save-dev karma-phantomjs-launcher so karma knows about new launcher. This is as per angular/angular-cli#2013 This errors - http://stackoverflow.com/questions/42640317/phantomjs-error-while-running-tests-in-angular-cli/42657675#42657675 Once polyfills added, $ npm install --save intl Newly installed packages reflected in packages.json

xtreemrage · 2017-04-28T12:06:33Z

@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 #4654

cbeldacap · 2017-05-17T16:41:49Z

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 · 2017-05-19T00:40:04Z

@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 · 2017-06-15T10:14:11Z

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

skofgar · 2017-06-17T01:49:47Z

@dujuanxian
you might need to turn on polyfills?
see above or #6377

https://stackoverflow.com/questions/42660902/phantomjs-does-not-work-with-karma-in-angular2-project and angular/angular-cli#2013

luiscvalmeida · 2017-07-26T09:36:58Z

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 · 2017-07-26T09:47:57Z

@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 · 2017-07-26T10:04:29Z

@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 · 2017-07-26T12:58:30Z

@luiscvalmeida See below:

cbeldacap · 2017-07-27T07:42:57Z

@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 · 2017-07-27T10:05:23Z

@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 · 2017-07-27T10:17:44Z

@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 · 2017-07-27T15:35:39Z

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

luiscvalmeida · 2017-07-27T16:12:05Z

@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 · 2017-10-13T11:32:49Z

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 · 2017-10-13T11:40:44Z

@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 · 2017-10-13T11:54:08Z

@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 · 2017-10-13T12:33:54Z

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 · 2017-10-13T12:41:12Z

@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 · 2017-10-17T12:41:06Z

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 · 2017-10-17T14:34:22Z

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

darsana · 2017-10-18T04:42:37Z

Version Details

cbeldacap · 2017-10-18T06:18:13Z

@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 · 2017-11-09T19:52:57Z

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 · 2018-01-05T09:32:15Z

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)

from angular/angular-cli#2013 (comment)

angular/angular-cli#2013 (comment)

angular-automatic-lock-bot · 2019-09-08T15:41:40Z

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.

_{This action has been performed automatically by a bot.}

radenui changed the title ~~How to run jasmine tests without browser~~ How to run jasmine tests without browser ? Sep 7, 2016

radenui closed this as completed Sep 8, 2016

Angelmmiguel mentioned this issue Feb 2, 2017

Configure UI testing helm/monocular#78

Closed

rjcorwin mentioned this issue Feb 7, 2017

Tangerine v3.x.x Backend Architecture Tangerine-Community/Tangerine#211

Closed

reckerswartz mentioned this issue Feb 14, 2018

Run javascript unit tests on CI DavyJonesLocker/client_side_validations#591

Closed

9034725985 added a commit to streamclient/streamclient that referenced this issue Oct 21, 2018

install google chrome

c4650f0

from angular/angular-cli#2013 (comment)

9034725985 added a commit to streamclient/streamclient that referenced this issue Oct 21, 2018

add custom launcher

28099d5

angular/angular-cli#2013 (comment)

ahnjaeshin mentioned this issue Nov 1, 2018

Karma 작동 불량 swsnu/swppfall2018#136

Open

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to run jasmine tests without browser ? #2013

How to run jasmine tests without browser ? #2013

radenui commented Sep 7, 2016

deebloo commented Sep 7, 2016

oravecz commented Sep 8, 2016

radenui commented Sep 8, 2016

xtreemrage commented Apr 28, 2017 •

edited

Loading

cbeldacap commented May 17, 2017

skofgar commented May 19, 2017 •

edited

Loading

dujuanxian commented Jun 15, 2017

skofgar commented Jun 17, 2017

luiscvalmeida commented Jul 26, 2017 •

edited

Loading

cbeldacap commented Jul 26, 2017

luiscvalmeida commented Jul 26, 2017

cbeldacap commented Jul 26, 2017

cbeldacap commented Jul 27, 2017

luiscvalmeida commented Jul 27, 2017

cbeldacap commented Jul 27, 2017

kkrishan commented Jul 27, 2017 •

edited

Loading

luiscvalmeida commented Jul 27, 2017

darsana commented Oct 13, 2017 •

edited

Loading

cbeldacap commented Oct 13, 2017 •

edited

Loading

cbeldacap commented Oct 13, 2017

darsana commented Oct 13, 2017

cbeldacap commented Oct 13, 2017

darsana commented Oct 17, 2017 •

edited

Loading

cbeldacap commented Oct 17, 2017

darsana commented Oct 18, 2017

cbeldacap commented Oct 18, 2017

mihailo-misic commented Nov 9, 2017

Brampage commented Jan 5, 2018 •

edited

Loading

angular-automatic-lock-bot bot commented Sep 8, 2019

How to run jasmine tests without browser ? #2013

How to run jasmine tests without browser ? #2013

Comments

radenui commented Sep 7, 2016

deebloo commented Sep 7, 2016

oravecz commented Sep 8, 2016

radenui commented Sep 8, 2016

xtreemrage commented Apr 28, 2017 • edited Loading

cbeldacap commented May 17, 2017

1. Install phantomjs:

2. Add import to karma.conf.js:

3. Install intl

4. Uncomment polyfills' imports:

5. Target for es5 instead of es6 in tsconfig.spec.json:

skofgar commented May 19, 2017 • edited Loading

dujuanxian commented Jun 15, 2017

skofgar commented Jun 17, 2017

luiscvalmeida commented Jul 26, 2017 • edited Loading

cbeldacap commented Jul 26, 2017

luiscvalmeida commented Jul 26, 2017

cbeldacap commented Jul 26, 2017

cbeldacap commented Jul 27, 2017

luiscvalmeida commented Jul 27, 2017

cbeldacap commented Jul 27, 2017

kkrishan commented Jul 27, 2017 • edited Loading

luiscvalmeida commented Jul 27, 2017

darsana commented Oct 13, 2017 • edited Loading

cbeldacap commented Oct 13, 2017 • edited Loading

cbeldacap commented Oct 13, 2017

darsana commented Oct 13, 2017

cbeldacap commented Oct 13, 2017

darsana commented Oct 17, 2017 • edited Loading

cbeldacap commented Oct 17, 2017

darsana commented Oct 18, 2017

cbeldacap commented Oct 18, 2017

mihailo-misic commented Nov 9, 2017

Brampage commented Jan 5, 2018 • edited Loading

angular-automatic-lock-bot bot commented Sep 8, 2019

xtreemrage commented Apr 28, 2017 •

edited

Loading

1. Install `phantomjs`:

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

5. Target for `es5` instead of `es6` in `tsconfig.spec.json`:

skofgar commented May 19, 2017 •

edited

Loading

luiscvalmeida commented Jul 26, 2017 •

edited

Loading

kkrishan commented Jul 27, 2017 •

edited

Loading

darsana commented Oct 13, 2017 •

edited

Loading

cbeldacap commented Oct 13, 2017 •

edited

Loading

darsana commented Oct 17, 2017 •

edited

Loading

Brampage commented Jan 5, 2018 •

edited

Loading