Mastering TypeScript 3 - Third Edition

Angular rendering tests

We can now turn our attention to the generated HTML that our app produces, and test whether our component has rendered elements to the DOM correctly, as follows:

it("should render 0 - none selected to the DOM", () => { 
    fixture.detectChanges(); 
    fixture.whenStable().then(() => { 
        const domElement = fixture.debugElement.nativeElement; 
 
        let selectedItemDiv =  
            domElement.querySelector("#selectedItemText"); 
        expect(selectedItemDiv).toBeTruthy(); 
        expect(selectedItemDiv.innerHTML).toContain('0 - None selected'); 
    }); 
}); 

Here, we have defined a test that will check that the text, 0 - none selected, has been rendered to the DOM. Our test starts with a call to the fixture.detectChanges function. This function is provided by the ...