Angular2 asynchronous testing problem with ng-inline-svg

Question

I wrote a test for my angular2 component that uses the ng-inline-svg module to load my svg file. And after writing the actual component, it turned out that the component works beautifully, but the test fails. I suspect the test is not waiting for the completion of the SVG insert. Is there any way to fix this? Verification failed:

it('Should create new svg element', async(()=>{
    fixture.detectChanges();
    expect(de.query(By.css('svg'))).toBeTruthy();
}));

If I replace the 'svg' selector with the word 'div', it will find the shell without any problems.

Answer 1

Edit:

This is a known bug: https://github.com/angular/angular/issues/15164

By.css() cannot select instances of SVGElement.

SVG DOMElement.querySelector.

it('Should create new svg element', async(()=>{
    fixture.whenStable().then(() => {
        const nativeElement = de.nativeElement;
        fixture.detectChanges();        
        expect(nativeElement.querySelector('svg')).toBeTruthy();
    });
}));

plunker: https://embed.plnkr.co/bgH31O/

---

:

ng-inline-svg, , , <svg> DOM ?

, whenStable():

it('Should create new svg element', async(()=>{
    fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(de.query(By.css('svg'))).toBeTruthy();
    });
}));

whenStable , - "stable".