Javascript 带有控件属性的视频标签导致单元测试失败

我正在用Angular 7.2.4构建一个webapp。我使用angular CLI（7.3.1）附带的默认单元测试库

当单元测试运行时，我不断遇到此错误作为失败：

在超出抛出的ResizeObserver循环限制后抛出了一个错误\n

似乎是其中一个视频输入上的

controls

属性导致了这种情况。如果我删除controls属性，所有测试都会通过。我不知道如何解决这个问题，因为我需要使用视频控制

有人能告诉我如何解决这个问题而不需要定制视频播放器吗

此处的组件仅供参考（它实际上只是视频播放器的包装）

video.component.html

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

video.component.spec.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);
    }
  }

}

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

});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“/video.component”导入{VideoComponent}；
描述（'VideoComponent'，（）=>{
let组件：视频组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[视频组件]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（VideoComponent）；
组件=fixture.componentInstance；
component.src=''；
component.end=（）=>{}；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
之后（（）=>{
fixture.destroy（）；
});
});

---

更新：这似乎是Chrome的问题。这在firefox或safari中不会发生，我遇到了完全相同的问题。我还在视频标签上创建了一个包装器组件，我的测试失败了，出现了相同的错误，问题还在于“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();
  });

});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“/video.component”导入{VideoComponent}；
描述（'VideoComponent'，（）=>{
let组件：视频组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[视频组件]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=试验台。覆盖组件（VideoComponent{
设置：{
模板：`
`
}
}).createComponent（VideoComponent）；
组件=fixture.componentInstance；
component.src=''；
component.end=（）=>{}；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
之后（（）=>{
fixture.destroy（）；
});
});

请注意，覆盖的模板中没有“控件”属性

---

对组件的逻辑进行单元测试就足够了。

我也有同样的问题。我还在视频标签上创建了一个包装器组件，我的测试失败了，出现了相同的错误，问题还在于“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();
  });

});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“/video.component”导入{VideoComponent}；
描述（'VideoComponent'，（）=>{
let组件：视频组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[视频组件]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=试验台。覆盖组件（VideoComponent{
设置：{
模板：`
`
}
}).createComponent（VideoComponent）；
组件=fixture.componentInstance；
component.src=''；
component.end=（）=>{}；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
之后（（）=>{
fixture.destroy（）；
});
});

请注意，覆盖的模板中没有“控件”属性

对组件的逻辑进行单元测试就足够了