3

我正在尝试ResizeObserver使用业力和茉莉花测试 Angular 12 应用程序中由 a 调用的代码。当我通过在浏览器上打开应用程序进行手动测试时，代码执行得非常好，但在我的单元测试中，业力似乎只是忽略了ResizeObserver. 有人知道在 karma/jasmine 测试中使用是否有一些问题ResizeObserver会阻止它正常工作吗？

应用程序描述

我已经构建了一个简单的应用程序来隔离问题。核心代码是一个组件，它只绘制一个 div 正在被ResizeObserver. 观察者在调整大小时存储新的 div 大小，并且模板在自己的 div 中显示此信息。

组件核心代码：

@ViewChild('aDiv')
aDiv!: ElementRef;

resizeObserver!: ResizeObserver;

dimensions?: Dimensions;

constructor(private zone: NgZone) { }

ngOnInit(): void {
  const that = this;
  this.resizeObserver = new ResizeObserver(entries => {
    for (const entry of entries) {
      if(entry.target.tagName.toLowerCase() === 'div') {
        const div = entry.target as HTMLDivElement;
        that.onResize(div);
      }
    }
  });
}

ngAfterViewInit(): void {
  this.resizeObserver.observe(this.aDiv.nativeElement);
}

ngOnDestroy(): void {
  if(this.resizeObserver) {
    this.resizeObserver.disconnect();
  }
}

onResize(div: HTMLDivElement): void {
  const [width, height] = ResizableComponent.getDimensions(div);
  this.zone.run(() => {
    this.dimensions = {
      width: width,
      height: height
    }
  });
}

模板：

<div #aDiv>
  <p>My dimensions are: ({{dimensions? dimensions.width + 'px' : 'unknown'}}, {{dimensions? dimensions.height + 'px' : 'unknown'}})</p>
</div>

茉莉花/业力测试不起作用：

@Component({
  template: `
    <div id="resizeMe">
      <app-resizable></app-resizable>
    </div>
  `
})
class TestResizable {
  @ViewChild(ResizableComponent)
  resizable!: ResizableComponent;
}

describe('ResizableComponent as a nested component', () => {
  let component: TestResizable;
  let fixture: ComponentFixture<TestResizable>;

  let divResizeMe: HTMLDivElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ TestResizable, ResizableComponent ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TestResizable);
    component = fixture.componentInstance;
    fixture.detectChanges();

    divResizeMe = fixture.nativeElement.querySelector('#resizeMe');
  });

  it('should resize when external is resized', () => {
    divResizeMe.style.width = '200px';

    expect(component.resizable.dimensions).toBeTruthy();
    expect(component.resizable.dimensions?.width).toBe(200);
  });
});

问题：

难道我做错了什么？该测试是否应该有效，但由于某些业力问题而无法正常工作？或者......我是否遗漏了一些明显的东西并且我的测试代码完全错误？

如果你想玩完整的代码：

代码在这个 stackblitz 中可用并工作（除了单元测试也可用但不工作）

我也试过这个（没有成功）：

it('should resize when external is resized', (done) => {
  divResizeMe.style.width = '200px';

  setTimeout(()=> {
    expect(component.resizable.dimensions).toBeTruthy();
    expect(component.resizable.dimensions?.width).toBe(200);
    done();
  }, 500);

});

和这个：

it('should resize when external is resized', (done) => {
  divResizeMe.style.width = '200px';
  fixture.detectChanges();

  setTimeout(()=> {
    expect(component.resizable.dimensions).toBeTruthy();
    expect(component.resizable.dimensions?.width).toBe(200);
    done();
  }, 500);

});
4

0 回答 0