Check if Iframe contents are completely loaded in Angular 8 with Jasmine

Question

In my application I have included Iframe. I wanted to test if all the Iframe contents are loaded completely in Angular Jasmine. how do I handle it. Please help me with this.

https://stackblitz.com/edit/angular-xxwf8u?file=src%2Fapp%2Fapp.component.ts

Answer 1

You should implement AfterViewInit in the component where the iframe is located. Get this iframe's native element and implement the onload function.

@Component({
    selector: 'app-component-iframe',
    template: `<iframe #iFrameId [src]="url"`
})
export class ComponentIframe implements AfterViewInit {
    @ViewChild('iFrameId') iframe: ElementRef;

    ngAfterViewInit(): void {
       const iFrameElement = this.iframe.nativeElement as HTMLIFrameElement;
       iFrameElement.onload = () => {
          console.log('content is loaded');
       };
    }
}

If you get that the iframe is not available on afterviewinit you can add a timeout and do the same.

Answer 2

Try to ad an id tag to you iframe Component like "id=iframe" and check if its loaded.

found this for js: https://stackoverflow.com/a/10444444/12189042

Hope it will help you