Angular2 Testing "Ich kann den Namen 'HTMLElement' nicht finden"

Question

Ich versuche, Tests in mein bestehendes Projekt einzuführen, aber ich laufe immer wieder auf den gleichen Fehler, was meiner Meinung nach die Ausführung der Tests verbietet. Der Fehler, den ich bekommen ist

ERROR in .../src/app/dashboard.component.spec.ts (15,13). Kann nicht Namen 'Htmlelement' gefunden)

Chrome 57.0.2987 (Mac OS X 10.12.3): ausgeführt 4 von 4 SUCCESS (7,24 Sekunden/6,55 Sekunden)

Mein dashboard.component.spec.ts sieht wie folgt aus:

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

import { DashboardComponent } from './dashboard.component'; 
import { ExchangeService } from './exchange.service'; 

describe('DashboardComponent (templateUrl)',() => { 

    let comp: DashboardComponent; 
    let fixture: ComponentFixture<DashboardComponent>; 

    let spy: jasmine.Spy; 
    let de: DebugElement; 
    let el: HTMLElement; // how does this work...? 
    let exchangeService: ExchangeService; // the actual injected service 

    const testExchange = 'New York Stock Exchange'; 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ DashboardComponent ], 
      providers: [ ExchangeService ], 
     }) 
     .compileComponents(); 
    })) 


    beforeEach(() => { 

     fixture = TestBed.createComponent(DashboardComponent); 
     comp = fixture.componentInstance; // DashboardComponent test componentInstance 

     // ClockService actually injected into the component 
     exchangeService = fixture.debugElement.injector.get(ExchangeService); 

     // Setup spy on the `getExchanges` method 
     spy = spyOn(exchangeService, 'getExchanges') 
      .and.returnValue(Promise.resolve(testExchange)); 
     // query for the title <h1> by CSS element selector 

     de = fixture.debugElement.query(By.css('.exchange')); 
     el = de.nativeElement; 
    }); 

    it('should not show exchange before OnInit',() => { 
     expect(el.textContent).toBe('', 'nothing displayed'); 
     expect(spy.calls.any()).toBe(false, 'getExchanges not yet called'); 
    }); 

    it('true is true',() => expect(false).toBe(true)); 
}); 

ich habe alle gesucht herum für diese Fehlermeldung, aber ich Ich kann es nirgends finden. Außerdem sollte der letzte Test fehlschlagen, aber ich denke nicht, dass er aufgrund dieses Fehlers kompiliert wird. Irgendwelche Hinweise darauf, was falsch ist? Ich dachte zuerst, es wäre ein Import, den ich vermisse, aber ich kann niemanden sehen, der HTMLElements importiert. Vielen Dank!

Edit: Meine tsconfig.json wie folgt aussieht:

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es5", 
    "lib": [ 
     "es6", 
     "dom", 
     "es2015.iterable" 
    ] 
    } 
} 

Edit 2: Ich hatte eigentlich auf Strg + C, und starten Sie den Test für ihn richtig zu kompilieren (ich dachte, es würde es beim Wechsel der Dateien tun, aber es hat nicht). Vielen Dank!

Answer 1

In Ihrem tsconfig.json von Ihrem Testprojekt sollten Sie die dom Bibliothek in das lib Array hinzufügen:

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

Answer 2

Ich hatte das gleiche Problem, wenn eine kontinuierliche Prüfung, aber nicht mit einem einzigen Durchlauf. Der Test würde auf Erstlauf kompilieren, aber wenn ich einen Code geändert dann würde die Zusammenstellung halt mit der

Cannot find name 'HTMLElement'

Fehlermeldung und ich hatte ein Ctr+C und neu starten zu tun.
Ändern tsconfig.spec.json zu

"lib": ["es6", "dom"],

wie PierreDuc vorgeschlagen gehärtet, um das Problem und meine Testsuiten im Dauerbetrieb laufen.

Answer 3

Ich tippte auch HTMLElement falsch, ex. Ich tat HtmlElement. hoffe das hilft.