Angular-cli + ngx-bootstrap karma testing, is there any extra set-up?

[lordmat0]

Hi there,

I've searched but wasn't able to find anything.

I'm trying to get ngx-bootstrap working with karma tests from Angular-cli.
Copying the alert example from http://valor-software.com/ngx-bootstrap/#/alerts
works fine but both the
Drop button: http://valor-software.com/ngx-bootstrap/#/dropdowns
and According: http://valor-software.com/ngx-bootstrap/#/accordion

Fail with:

TypeError: Cannot create property '__creationTrace__' on string '__zone_symbol__optimizedZoneEventTask'
	    at Object.onScheduleTask (http://localhost:9876/_karma_webpack_/vendor.bundle.js:29269:38)
	    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2814:51)
	    at Object.onScheduleTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2710:29)
	    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2814:51)
	    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2645:43)
	    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleEventTask (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2671:25)
	    at HTMLDivElement.addEventListener (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:3971:29)
	    at DomEventsPlugin.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DomEventsPlugin.addEventListener (http://localhost:9876/_karma_webpack_/vendor.bundle.js:87438:17)
	    at EventManager.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.EventManager.addEventListener (http://localhost:9876/_karma_webpack_/vendor.bundle.js:86776:23)
	    at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.listen (http://localhost:9876/_karma_webpack_/vendor.bundle.js:87297:36)
	Failed: Cannot read property 'debugElement' of undefined
TypeError: Cannot read property 'debugElement' of undefined
	    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/main.bundle.js:90:26)
	    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2801:26)
	    at AsyncTestZoneSpec.webpackJsonp.../../../../zone.js/dist/async-test.js.AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:28639:39)
	    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:29412:39)
	    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2800:32)
	    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2564:47)
	    at runInTestZone (http://localhost:9876/_karma_webpack_/vendor.bundle.js:76965:25)
	    at Object.<anonymous> (http://localhost:9876/_karma_webpack_/vendor.bundle.js:76904:13)
	    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2801:26)
	    at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/vendor.bundle.js:29415:39)

Module:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {
  AccordionModule,
  AlertModule,
  BsDropdownModule,
  ButtonsModule,
  CollapseModule,
  DatepickerModule
} from 'ngx-bootstrap';
import {FormsModule} from '@angular/forms';
import {NavbarComponent} from './navbar.component';


@NgModule({
  declarations: [
    NavbarComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AlertModule.forRoot(),
    DatepickerModule.forRoot(),
    BsDropdownModule.forRoot(),
    AccordionModule.forRoot(),
    ButtonsModule.forRoot(),
    CollapseModule.forRoot()
  ],
  exports: [
    NavbarComponent
  ]
})
export class NavbarModule {
}

Test:

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

import {NavbarComponent} from './navbar.component';
import {NavbarModule} from './navbar.module';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
import {Ng2BootstrapModule} from 'ngx-bootstrap';

describe('NavbarComponent', () => {
  let component: NavbarComponent;
  let fixture: ComponentFixture<NavbarComponent>;
  // let navbarElement: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        NavbarModule
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NavbarComponent);
    component = fixture.componentInstance;
    // navbarElement = fixture.debugElement;
    fixture.detectChanges();
  });

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

Thanks,
Matthew

[stefanlangerhebo]

It's an issue related to zone.js 0.8.13. Revert it to 0.8.12 and everything should be working.
See: angular/zone.js#832

[lordmat0]

Thanks that solved the issue, closing

[osadan]

I have version 0.8.12 and still get this error