Unable to run unit tests using ng test with Angular projects with Polymer elements

msbasanth commented 6 years ago

Expected behaviour

We should be able to run unit test using Angular CLI

Actual behaviour

In debug browser, a test that passes according to the command line fails in the debug browser with error message: [object ErrorEvent] thrown.

Environment Details

"dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "@angular/service-worker": "^1.0.0-beta.16", "@codebakery/origami": "^2.0.0-alpha.2", "core-js": "^2.4.1", "rxjs": "^5.5.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "^1.5.0", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "codelyzer": "~3.2.0", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "polymer-webpack-loader": "^2.0.0", "protractor": "~5.1.2", "script-loader": "^0.7.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "2.4.2" }

Karma version (output of karma --version):
Relevant part of your karma.config.js file ustomLaunchers: { Chrome_with_debugging: { base: 'Chrome', flags: ['--remote-debugging-port=9222'], debug: true } }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false });
Steps to reproduce the behaviour

run unit tests on an angular project with polymer used https://github.com/hotforfeature/angular-polymer-starter-kit
With minimal changes I could see Jasmine started running the unit tests after adding CUSTOM_ELEMENTS_SCHEMA & importing RouterTestingModule.

import { TestBed, async } from '/testing'; import { AppComponent } from './app.component'; import { RouterTestingModule } from '/testing'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '';

describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], imports: [RouterTestingModule], }).compileComponents(); })); it('should create the app', async(() => { const fixture = TestBed.overrideComponent(AppComponent, { set: { template: '' }}).createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); }));

On running ng test: After this change I started seeing the error: Unit test: AppComponent should create the app [object ErrorEvent] thrown [object ErrorEvent] thrown [object ErrorEvent] thrown [object ErrorEvent] thrown [object ErrorEvent] thrown [object ErrorEvent] thrown [object ErrorEvent] thrown

Error: Expected undefined to equal 'app'. at stack (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:2176:17) at buildExpectationResult (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:2146:14) at Spec.expectationResultFactory (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:766:18) at Spec.addExpectationResult (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:444:34) at Expectation.addExpectationResult (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:710:21) at Expectation.toEqual (http://localhost:9876/base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?da99c5b057693d025fad3d7685e1590600ca376d:2099:12) at Object.eval (webpack:///D:/PLM_TE/17._Angular2/NgPolyPotractor/angular-polymer-starter-kit-master/src/app/app.component.spec.ts?:33:27) at ZoneDelegate.invoke (webpack:///D:/PLM_TE/17._Angular2/NgPolyPotractor/angular-polymer-starter-kit-master/node_modules/zone.js/dist/zone.js?:388:26) at AsyncTestZoneSpec.onInvoke (webpack:///D:/PLM_TE/17._Angular2/NgPolyPotractor/angular-polymer-starter-kit-master/node_modules/zone.js/dist/async-test.js?:49:39) at ProxyZoneSpec.onInvoke (webpack:///D:/PLM_TE/17._Angular2/NgPolyPotractor/angular-polymer-starter-kit-master/node_modules/zone.js/dist/proxy.js?:76:39) It looks like Polymer elements are null and unable to initialize the component. But I couldn't get any more information. Any idea what I am missing that Jasmine expects.

I tried disabling source_maps as mentioned here, angular/angular-cli#7296 but that also didn't work. [ng test --sm=false]

Regards Basanth

Torqode commented 6 years ago

Also receiving the same [object ErrorEvent] thrown errors. Seems to have happened after updating from zone.js 0.8.19 -> 0.8.20.

johnjbarton commented 6 years ago

Maybe look at #2852

Torqode commented 6 years ago

After investigating, my issue stemmed from a timer from a completely different set of unit tests that was not being disposed and was throwing null reference exceptions each time it triggered.

jasonaibrahim commented 6 years ago

I am also seeing this failure when using ngx-stripe and declaring a stripe element in my component

import {Component, Inject, OnInit} from '@angular/core';
import {Element as StripeElement, StripeService} from 'ngx-stripe';
import {AuthService} from '../../providers/auth.service';
import {User} from '../../models/user';
import {UserService} from '../../providers/user.service';

@Component({
  selector: 'app-billing',
  templateUrl: './billing.component.html',
  styleUrls: ['./billing.component.scss']
})
export class BillingComponent implements OnInit {

  card: StripeElement;
  errorMessage: string = null;

  constructor(private stripeService: StripeService,
              private userService: UserService,
              private auth: AuthService) {
  }
}

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {BillingComponent} from './billing.component';
import {NgxStripeModule} from 'ngx-stripe';
import {UserService} from '../../providers/user.service';
import {userServiceStub} from '../../../test/stubs/user.service.stub.spec';
import {AuthService} from '../../providers/auth.service';
import {authServiceStub} from '../../../test/stubs/auth.service.stub.spec';

describe('BillingComponent', () => {
  let component: BillingComponent;
  let fixture: ComponentFixture<BillingComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BillingComponent ],
      imports: [NgxStripeModule.forRoot('')],
      providers: [
        {provide: UserService, useValue: userServiceStub},
        {provide: AuthService, useValue: authServiceStub},
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BillingComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I am on angular 6. Here is package.json:

"dependencies": {
    "@angular/animations": "6.0.0",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "6.0.0",
    "@angular/http": "6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/platform-server": "6.0.0",
    "@angular/router": "6.0.0",
    "@nguniversal/express-engine": "6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "6.0.0",
    "@types/autolinker": "^0.24.28",
    "@types/express": "^4.0.35",
    "@types/memcached": "^2.2.3",
    "@types/quill": "^1.3.2",
    "@types/request": "^2.0.3",
    "@types/tinycolor2": "^1.1.1",
    "angular2-moment": "^1.3.3",
    "body-parser": "^1.17.1",
    "bulma": "0.7.1",
    "compression": "^1.7.0",
    "core-js": "^2.4.1",
    "domino": "^2.0.1",
    "dotenv": "5.0.1",
    "express": "^4.15.2",
    "feather-icons": "4.7.0",
    "font-awesome": "^4.7.0",
    "helmet": "^3.8.1",
    "http-proxy": "^1.16.2",
    "localforage": "^1.5.0",
    "lodash": "^4.17.4",
    "memcached": "^2.2.2",
    "ngx-stripe": "^0.8.2",
    "npm": "^6.0.0",
    "quill": "^1.3.1",
    "reflect-metadata": "^0.1.10",
    "request": "^2.81.0",
    "rxjs": "6.1.0",
    "rxjs-compat": "^6.0.0-rc.0",
    "simple-oauth2": "^1.1.0",
    "speakingurl": "^14.0.1",
    "tinycolor2": "^1.4.1",
    "url": "^0.11.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.0",
    "@angular/cli": "6",
    "@angular/compiler-cli": "6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "4.3.0",
    "concurrently": "^3.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-mocha-reporter": "^2.2.3",
    "protractor": "5.3.1",
    "ts-node": "6.0.3",
    "tslint": "5.10.0",
    "typescript": "~2.7.2"
  }

also tried disabling source maps to no avail. the only way my entire test suite can run is to disable this tests for this component, which is the only component in my application that makes use of Element imported from ngx-stripe

I thought since stripe provides elements as prebuilt UI components, this issue could be related. If anyone has a suggestion about how to get around this error, would love to hear it

yadavpradeep commented 6 years ago

I am also facing the "Component is created FAILED" once running the npm test. Here is my package.json file.

yadavpradeep commented 6 years ago

"devDependencies": { "@angular/cli": "^1.4.8", "@ionic/app-scripts": "3.1.8", "@ng-idle/core": "^2.0.0-beta.15", "@types/jasmine": "^2.5.41", "@types/node": "^8.0.45", "angular2-template-loader": "^0.6.2", "html-loader": "^0.5.1", "istanbul-instrumenter-loader": "^3.0.0", "jasmine": "^2.5.3", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "^4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "^2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "^1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^2.0.3", "null-loader": "^0.1.1", "protractor": "^5.1.2", "ts-loader": "^3.0.3", "ts-node": "^3.0.2", "typescript": "2.4.2" },

karma-runner / karma