Я создаю веб-приложение с 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 или сафари



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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