Видео тег с атрибутом элементов управления, вызывающий сбой юнит-тестов

Question

Я создаю веб-приложение на Angular 7.2.4. Я использую библиотеку модульного тестирования по умолчанию, с которой поставляется угловой CLI (7.3.1).

Я продолжаю сталкиваться с этой ошибкой как сбой при запуске модульных тестов: An error was thrown in afterAll\nResizeObserver loop limit exceeded thrown

Похоже, что атрибут controls на одном из видеовходов вызывает это. Если я удалю атрибут управления, все тесты пройдут. Я понятия не имею, как обойти это, поскольку мне нужно использовать элементы управления видео.

Может кто-нибудь указать мне правильное направление, как решить эту проблему, не создавая собственный видеоплеер?

Для справки вот компонент (который буквально просто обертка вокруг видеоплеера)

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

});

ОБНОВЛЕНИЕ: Может показаться, что это проблема Chrome. Этого не происходит в Firefox или Safari

Answer 1

У меня была точно такая же проблема. Я также создал компонент-обертку над тегом video, и мои тесты не выполнялись с той же ошибкой, и проблема заключалась также в атрибуте 'controls'.

Я не смог найти причину этого.

Я реализовал обходной путь для своих тестов, где я переписал шаблон контроллера с помощью TestBed.overrideComponent ()

В вашем случае это будет выглядеть так:

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.overrideComponent(VideoComponent, {
      set: {
        template: `
          <video 
            preload="auto"
            #videoPlayer
            (ended)="videoEnded($event)">
            <source [src]="getVideoSource()" type="video/mp4"/>
          </video>`
      }
    }).createComponent(VideoComponent);
    component = fixture.componentInstance;
    component.src = '';
    component.ended = () => {};
    fixture.detectChanges();
  });

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

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

});

Обратите внимание, что в перезаписанном шаблоне отсутствует атрибут 'controls'.

Этого должно быть достаточно для модульных тестов логики вашего компонента.