在 Angular/Karma 中测试时未加载 iframe 内容

Question

我在另一个名为 mainApp 的应用程序中使用 App1 在 Angular 中实现了一个导航栏组件。我想对 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.log(fixture.debugElement.nativeElement.querySelector('.ext-navigation '));
    })
    const compiled = fixture.debugElement.nativeElement;
    console.log(compiled.querySelector('.ext-navigation body'));
 
   expect(compiled.querySelector('app-navigation').textContent).toContain('home');
 });

有谁知道如何等待 iframe 内容加载以便能够在 spec.ts 中对其进行测试？

Answer 1

最后，我通过

成功解决了这个问题

 <iframe class="ext-navigation" [src]="url" title="navigation" loading="eager" (load)="iframeSrc && iframeLoaded()"></iframe>

并在组件ts文件中添加了这个Subject等待加载内容

public iframesLoaded: Subject<void> = new Subject();

public iframeLoaded(index: number) {
    this.iframesLoaded.next();
  }

对于我的测试用例，我将 iframeSrc 值设置为 truthy 并订阅了 Subject 以获得最终值：

  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();
    });
  });

在 Angular/Karma 中测试时未加载 iframe 内容

iframe content not loaded while testing in Angular / Karma

iframe

unit-testing

jasmine

karma-jasmine

angular