New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot run npm run test on Chrome or PhantomJS #4654

Closed
zwolej opened this Issue Feb 13, 2017 · 10 comments

Comments

Projects
None yet
5 participants
@zwolej

zwolej commented Feb 13, 2017

I have almost fresh new project based on:

@angular/cli: 1.0.0-beta.31
node: 6.2.1
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

When I am trying to run npm run test with defaults, I am getting.

...
Can't bind to 'routerLink' since it isn't a known property of 'a'.
...

wird is that in npm run start everything works fine including routings, since I have impoterd in imports RouterModule in app.module.ts.

So I've tried to change to PhantomJS by installing:

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

In Karma i added:

require('karma-phantomjs-launcher'),
...
browsers: ['PhantomJS'],

and I am getting

 TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                                 ply')
  at webpack:///~/@angular/common/src/pipes/intl.js:187:0 <- src/test.ts:34435

I added also in pollyfills.ts (after npm run install --save-dev intl)

import 'intl';
import 'intl/locale-data/jsonp/en';

but still I cannot run tests, any ideas?

@ruffiem

This comment has been minimized.

Show comment
Hide comment
@ruffiem

ruffiem Feb 13, 2017

Contributor

@zwolej you need to uncomment those from your polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/array';
import 'intl';  // Run `npm install --save intl`.
Contributor

ruffiem commented Feb 13, 2017

@zwolej you need to uncomment those from your polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/array';
import 'intl';  // Run `npm install --save intl`.
@zwolej

This comment has been minimized.

Show comment
Hide comment
@zwolej

zwolej Feb 13, 2017

@ruffiem now I am getting on PhantomJS

Failed: undefined is not a constructor (evaluating 'suffix.startsWith('{' + BLOCK_PLACEHOLDER)')
webpack:///~/@angular/compiler/src/shadow_css.js:462:0 <- src/test.ts:57570:40

chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

zwolej commented Feb 13, 2017

@ruffiem now I am getting on PhantomJS

Failed: undefined is not a constructor (evaluating 'suffix.startsWith('{' + BLOCK_PLACEHOLDER)')
webpack:///~/@angular/compiler/src/shadow_css.js:462:0 <- src/test.ts:57570:40

chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

@ruffiem

This comment has been minimized.

Show comment
Hide comment
@ruffiem

ruffiem Feb 13, 2017

Contributor

Also, you do not have to import import 'intl/locale-data/jsonp/en';in your polyfills since intl imports it already.

Contributor

ruffiem commented Feb 13, 2017

Also, you do not have to import import 'intl/locale-data/jsonp/en';in your polyfills since intl imports it already.

@ruffiem

This comment has been minimized.

Show comment
Hide comment
@ruffiem

ruffiem Feb 13, 2017

Contributor

uncomment import 'core-js/es6/set'; since startsWith use get & set but if you keep having such issues, just uncomment the whole es6 suite 👍

Contributor

ruffiem commented Feb 13, 2017

uncomment import 'core-js/es6/set'; since startsWith use get & set but if you keep having such issues, just uncomment the whole es6 suite 👍

@ruffiem

This comment has been minimized.

Show comment
Hide comment
@ruffiem

ruffiem Feb 13, 2017

Contributor

As for Can't bind to 'routerLink' since it isn't a known property of 'a'. means your component does not have access to the RouterModule.

Contributor

ruffiem commented Feb 13, 2017

As for Can't bind to 'routerLink' since it isn't a known property of 'a'. means your component does not have access to the RouterModule.

@zwolej

This comment has been minimized.

Show comment
Hide comment
@zwolej

zwolej Feb 13, 2017

I uncommented all core-js/es6 imports. Now I am getting on phantomjs and chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

I would like only remind that npm run start works great. I can easly naviagte and so on using those routerLinks

zwolej commented Feb 13, 2017

I uncommented all core-js/es6 imports. Now I am getting on phantomjs and chrome

Can't bind to 'routerLinkActive' since it isn't a known property of 'a'.

I would like only remind that npm run start works great. I can easly naviagte and so on using those routerLinks

@Meligy

This comment has been minimized.

Show comment
Hide comment
@Meligy

Meligy Feb 14, 2017

Contributor

This is not a CLI problem. This is an Angular testing StackOverflow type question.

In testing, you get a testing module that is different from your normal module. That's why npm start works.

Check the component that has routeLink, go to the test for that, and add

import { RouterTestingModule } from '@angular/router/testing';

And in the actual test:

    TestBed.configureTestingModule({
      imports: [RouterTestingModule, ....],
      ...
    });

Please check the official testing guide for more:
https://angular.io/docs/ts/latest/guide/testing.html

Cheers,

Contributor

Meligy commented Feb 14, 2017

This is not a CLI problem. This is an Angular testing StackOverflow type question.

In testing, you get a testing module that is different from your normal module. That's why npm start works.

Check the component that has routeLink, go to the test for that, and add

import { RouterTestingModule } from '@angular/router/testing';

And in the actual test:

    TestBed.configureTestingModule({
      imports: [RouterTestingModule, ....],
      ...
    });

Please check the official testing guide for more:
https://angular.io/docs/ts/latest/guide/testing.html

Cheers,

@zwolej

This comment has been minimized.

Show comment
Hide comment
@zwolej

zwolej Feb 15, 2017

Thanks! I didnt used TestBed.createComponent in tests before. Work like a charm.

zwolej commented Feb 15, 2017

Thanks! I didnt used TestBed.createComponent in tests before. Work like a charm.

@zwolej zwolej closed this Feb 15, 2017

@pabagan

This comment has been minimized.

Show comment
Hide comment
@pabagan

pabagan Feb 23, 2017

Same issue here with Angular2 CLI and Phantom.

TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                          ply')  at webpack:/

Solved thanks to @ruffiem but for me worked uncomenting just:

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

Edit: needed to uncomment import 'core-js/es6/string'; or lot of my test breaks (don't know why...)

pabagan commented Feb 23, 2017

Same issue here with Angular2 CLI and Phantom.

TypeError: undefined is not an object (evaluating '(_a = ((Object))).assign.ap                                                                                                                                          ply')  at webpack:/

Solved thanks to @ruffiem but for me worked uncomenting just:

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

Edit: needed to uncomment import 'core-js/es6/string'; or lot of my test breaks (don't know why...)

family-guy added a commit to family-guy/mathdruck-ng1 that referenced this issue Mar 30, 2017

Add polyfills
Unit testing with CSS errors - Failed: undefined is not a
constructor (evaluating 'suffix.startsWith('{' +
BLOCK_PLACEHOLDER)')

To get around this, add polyfills as per
angular/angular-cli#4654
@sarathsaleem

This comment has been minimized.

Show comment
Hide comment
@sarathsaleem

sarathsaleem Jun 18, 2017

I have enabled all the polyfills and change es5 as target, but still getting the the DOM Exception error

LOG: 'Attempting to configure 'innerHTML' with descriptor '{"configurable":true}' on object '[object HTMLUnknownElement]' and got error, giving up: TypeError: Attempting to configurable attribute of unconfigurable property.

PhantomJS 2.1.1 (Mac OS X 0.0.0) AppComponent should create the app FAILED
        NotFoundError: NotFoundError: DOM Exception 8 in src/test.ts (line 83723)
        appendChild@[native code]

Angular version

@angular/cli: 1.0.1
node: 7.7.1
os: darwin x64
@angular/common: 2.4.0
@angular/compiler: 2.4.0
@angular/core: 2.4.0
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/router: 3.4.0
@angular/cli: 1.0.1
@angular/compiler-cli: 2.4.0

any idea?

sarathsaleem commented Jun 18, 2017

I have enabled all the polyfills and change es5 as target, but still getting the the DOM Exception error

LOG: 'Attempting to configure 'innerHTML' with descriptor '{"configurable":true}' on object '[object HTMLUnknownElement]' and got error, giving up: TypeError: Attempting to configurable attribute of unconfigurable property.

PhantomJS 2.1.1 (Mac OS X 0.0.0) AppComponent should create the app FAILED
        NotFoundError: NotFoundError: DOM Exception 8 in src/test.ts (line 83723)
        appendChild@[native code]

Angular version

@angular/cli: 1.0.1
node: 7.7.1
os: darwin x64
@angular/common: 2.4.0
@angular/compiler: 2.4.0
@angular/core: 2.4.0
@angular/forms: 2.4.0
@angular/http: 2.4.0
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.0
@angular/platform-browser-dynamic: 2.4.0
@angular/router: 3.4.0
@angular/cli: 1.0.1
@angular/compiler-cli: 2.4.0

any idea?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment