如何从 Jasmine 测试中触发 ResizeObserver？

Question

我有以下组件使用ResizeObserver（通过https://www.npmjs.com/package/@juggle/resize-observer）

export class ResizeTestComponent implements OnInit {
  constructor(public hostRef: ElementRef) {}

  ngOnInit() {
    const resizeObserver = new ResizeObserver(() => this.resized());
    resizeObserver.observe(this.hostRef.nativeElement);
  }

  resized() {
    console.log('resized');
  }
}

如果我手动更改窗口宽度，组件宽度会发生变化，resized 通过resized 函数输出到控制台，正如预期的那样。

我想编写一个 Jasmine 测试来检查在调整元素大小时是否调用了 resized 函数。

如何触发resizeObserver？

我已尝试发送 resize 事件，但未调用 resized 函数：

 it('resized function is called when element is resized', async(() => {
    const fixture = TestBed.createComponent(ResizeTestComponent);
    fixture.detectChanges();

    const resizedSpy = spyOn(fixture.componentInstance, 'resized');
    window.dispatchEvent(new Event('resize'));
    
    expect(resizedSpy).toHaveBeenCalled();
  }));

Stackblitz：https://stackblitz.com/edit/angular-testing-with-jasmine-f3vgbg?file=app%2Fresize-test.component.spec.ts

Answer 1

我认为问题在于您需要实际调整元素的大小，而不是简单地触发 resize 事件。

也就是说，您实际上必须更改宽度、高度或两者。

所以试试下面的。

 it('resized function is called when element is resized', async(() => {
    const fixture = TestBed.createComponent(ResizeTestComponent);
    fixture.detectChanges();

    const resizedSpy = spyOn(fixture.componentInstance, 'resized');

    // this or some fixed values e.g. 800, 600.
    window.resizeTo(
      window.screen.availWidth / 2,
      window.screen.availHeight / 2
    );

    expect(resizedSpy).toHaveBeenCalled();
  }));

Answer 2

测试你需要的这个有点棘手，所以模拟组件的实际调整大小。此外，ResizeObserver 在 Angular 的控制之外运行，因此它在测试中的行为很奇怪。当您直接测试组件时，您的组件将 ResizeObserver 注册到 HTML 中根本不存在的组件元素。因此，您需要使用包装器组件来执行此测试。

这是我对如何测试的建议。

describe('HostTestComponent', () => {
  @Component({
    selector: 'test-host',
    template: `<resize-test></resize-test>`,
    styles: [':host { width: 300px }'],
  })
  class HostComponent {}

  let fixture: ComponentFixture<HostComponent>;

  beforeAll(() => {
    TestBed.initTestEnvironment(
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting()
    );
  });
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [ResizeTestComponent, HostComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(HostComponent);
  }));
  it('resized function is called when element is resized', async(() => {
    const resizeTestComponentDebugElement = fixture.debugElement.query(
      By.directive(ResizeTestComponent)
    );
    const resizedSpy = spyOn(
      resizeTestComponentDebugElement.componentInstance,
      'resized'
    );
    resizedSpy.and.callThrough();
    fixture.detectChanges();
    setTimeout(() => { // process first resize when component is first drawn
      fixture.whenStable().then(() => {
        fixture.debugElement.nativeElement.style.width = '200px';
        fixture.detectChanges();
        setTimeout(() => { // process resize due to width change.
          fixture.whenStable().then(() => {
            expect(resizedSpy).toHaveBeenCalledTimes(2);
          });
        }, 0);
      });
    }, 0);
  }));
});

如您所见，我创建了包装组件，然后更改了触发组件调整大小的包装组件的宽度。同样在这种情况下，实际上两个调整大小事件第一次发生在组件的初始绘制时，第二次发生在实际调整大小时。这是因为在绘制组件之前调用了ngOnInit。

这里还有一个link to a fork of you StackBlitz，您可以看到它在工作。