Angular2 Karma test runner not reloading

Question

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?

Can you please post the spec file , the error it self specifies that it isnot able to fins the required attribute in the spec file known as HTML Element it might be comming based on certain trigger need to see the spec file — Rahul Singh
I've added the spec code. Keep in mind that it has no problem finding this with a fresh start of "npm test". — Michael Witt

Rahul Singh Rahul Singh · Accepted Answer · 2017-03-29T17:46:30

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

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

Angular2 Karma test runner not reloading

1 Answers