CODEWITHSUNDEEP
angularnpmkarma-runnerkarma-jasmine
Michael Witt
Michael Witt

Reputation: 1712

Angular2 Karma test runner not reloading

I'm running through the Angular2 testing tutorial. I'm pretty new to Jasmine/Karma so this may be something basic. I've noticed that once I have the "npm test" running that if I make a change, the test runner tries to reload but gets an error:

ERROR in C:/dev/unittest1/src/app/banner-inline/banner-inline.component.spec.ts (12,11): Cannot find name 'HTMLElement'.)

Here is the spec code (pretty much just taken from here):

import { ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core';

import { BannerInlineComponent } from './banner-inline.component';

describe('BannerInlineComponent (inline template)', () => {

  let comp: BannerInlineComponent;
  let fixture: ComponentFixture<BannerInlineComponent>;
  let de: DebugElement;
  let el: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [BannerInlineComponent], // declare the test component
      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }]
    });

    fixture = TestBed.createComponent(BannerInlineComponent);

    comp = fixture.componentInstance; // BannerInlineComponent test instance

    // query for the title <h1> by CSS element selector
    de = fixture.debugElement.query(By.css('h1'));
    el = de.nativeElement;
  });

  it('should display original title', () => {
    expect(el.textContent).toContain(comp.title);
  });

  it('should still see original title after comp.title change', () => {
    const oldTitle = comp.title;
    comp.title = 'Test Title';
    fixture.detectChanges();
    // Displayed title is old because Angular didn't hear the change :(
    expect(el.textContent).toContain(oldTitle);
  });

  it('should display updated title after detectChanges', () => {
    comp.title = 'Test Title';
    fixture.detectChanges(); // detect changes explicitly
    expect(el.textContent).toContain(comp.title);
  });
});

If I stop the test runner and restart it, everything works fine. Why am I getting this error and how can I prevent it?

Upvotes: 0

Views: 655

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 19622

I guess in your tsconfig.json in your project you should add the dom library to the lib array:

"lib": ["es6", "dom", "es2015.iterable"],

Upvotes: 1

Related Questions