Я реализую компонент навигационной панели в Angular из App1 в другом приложении, называемом mainApp, используя . Я хотел выполнить модульные тесты для HomeComponent основного приложения, которые интегрируют модуль навигации, как показано в следующем коде.
<iframe class = "ext-navigation" src = "http://localhost:4200/" title = "navigation" loading = "eager"></iframe>
В браузере все работает нормально, и навигация появляется без проблем, но во время тестирования я не смог получить содержимое навигации в журналах тестирования, и он показывает пустой контент для iframe.
Это мой тестовый код:
it('should contain the navigation links', async() => {
fixture.detectChanges();
await fixture.whenStable();
fixture.whenStable().then(()=>{
fixture.detectChanges();
console.info(fixture.debugElement.nativeElement.querySelector('.ext-navigation '));
})
const compiled = fixture.debugElement.nativeElement;
console.info(compiled.querySelector('.ext-navigation body'));
expect(compiled.querySelector('app-navigation').textContent).toContain('home');
});
Кто-нибудь знает, как дождаться загрузки содержимого iframe, чтобы проверить его в spec.ts?
Наконец, мне удалось решить это с помощью
<iframe class = "ext-navigation" [src] = "url" title = "navigation" loading = "eager" (load) = "iframeSrc && iframeLoaded()"></iframe>
и добавил эту тему в файл ts компонента, чтобы дождаться загрузки контента
public iframesLoaded: Subject<void> = new Subject();
public iframeLoaded(index: number) {
this.iframesLoaded.next();
}
и для моего тестового примера я установил значение iframeSrc как правдивое, а подписал тему, чтобы получить окончательное значение:
it('should display the navigation menu ["Home", "Contact", "About"]', (done) => {
let fixture = TestBed.createComponent(NavbarComponent);
let component = fixture.componentInstance;
component.iframeSrc = '/iframe';
fixture.detectChanges();
component.iframesLoaded.pipe(take(1)).subscribe(val => {
fixture.detectChanges();
let navLinks = Array.from(fixture.nativeElement.querySelector('.ext-navigation').contentDocument.querySelectorAll('body ul a')).map((item: Node) => item.textContent)
expect(navLinks).toContain("Home")
expect(navLinks).toContain("Contact")
expect(navLinks).toContain("About")
done();
});
});