Тег видео с атрибутом управления приводит к сбою модульных тестов

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

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

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

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

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

видео.component.html

<video preload = "auto"
       controls
       #videoPlayer
       controlsList = "nodownload"
       (ended) = "videoEnded($event)">
  <source [src] = "getVideoSource()" type = "video/mp4"/>
</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 или сафари

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
533
2

Ответы 2

У меня была точно такая же проблема. Я также создал компонент-оболочку над видеотегом, и мои тесты завершались с ошибкой с той же ошибкой, и проблема также заключалась в атрибуте «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».

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

У нас была эта проблема сегодня с версией Chrome нашего CI, хотя она отлично работала на компьютерах разработчиков. Наше решение: обновить Chrome на нашем CI (в данном случае с 75 на 91).

Другие вопросы по теме