Video tag with controls attribute causing unit tests to fail

Refresh

6 days ago

Views

4 time

0

I am building a webapp with Angular 7.2.4. I am using the default unit testing library that the angular CLI (7.3.1) comes with.

I keep running into this error as a failure when the unit tests run: An error was thrown in afterAll\nResizeObserver loop limit exceeded thrown

It seems that the controls attribute on one of the video inputs is causing this. If I remove the controls attribute all tests pass. I have no idea how to get around this as I need to use the video controls.

Can someone please point me in the right direction on how to resolve this without building a custom video player?

For reference here is the component (which is literally just a wrapper around the video player)

video.component.html

<video preload="auto"
       controls
       #videoPlayer
       controlsList="nodownload"
       (ended)="videoEnded($event)">
  <source [src]="getVideoSource()" type="video/mp4"/>
</video>

video.component.ts

import {Component, ElementRef, Input, OnChanges, OnInit, ViewChild} from '@angular/core';

import {ConfigService} from '../config.service';

@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit, OnChanges {

  @ViewChild('videoPlayer') videoPlayer: ElementRef;
  @Input() src: string;
  @Input() ended: (event: Event) => void;

  constructor(private cs: ConfigService) {
  }

  ngOnInit() {
    this.videoPlayer.nativeElement.src = this.getVideoSource();
  }

  ngOnChanges() {
    this.videoPlayer.nativeElement.src = this.getVideoSource();
  }

  getVideoSource(): string {
    return this.cs.getConfig('videosUrl') + this.src;
  }

  videoEnded($event) {
    if (this.ended) {
      this.ended($event);
    }
  }

}

video.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { VideoComponent } from './video.component';

describe('VideoComponent', () => {
  let component: VideoComponent;
  let fixture: ComponentFixture<VideoComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ VideoComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(VideoComponent);
    component = fixture.componentInstance;
    component.src = '';
    component.ended = () => {};
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  afterEach(() => {
    fixture.destroy();
  });

});

0 answers