typescript - Testa ResizeObserver-händelser i Angular 12 med Karma och Jasmine

Jag försöker testa kod som anropas av en ResizeObserver i en Angular 12-app med karma och jasmine. Koden fungerar mycket bra när jag gör ett manuellt test genom att öppna appen i en webbläsare, men i mina enhetstester verkar karma helt enkelt ignorera ResizeObserver. Vet någon om det finns något problem med att använda ResizeObserver i karma/jasmine-tester som förhindrar att det fungerar korrekt?

Beskrivning av appen

Jag har byggt en enkel app för att isolera problemet. Kärndelen av koden är en komponent som bara ritar en div som observeras av en ResizeObserver. Observatören sparar den nya div-storleken när den ändras och mallen visar denna information inuti den egna div:en.

Kärnkoden för komponenten:

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

Mallen:

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

Jasmine/karma-testet som inte fungerar:

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

Frågan:

Gör jag något fel? Ska det här testet fungera men det fungerar inte på grund av något karma-problem? Eller... Missar jag något uppenbart och min testkod är helt enkelt fel?

Om du vill leka med hela koden:

Koden är tillgänglig och fungerar i denna stackblitz (utom enhetstestet som också är tillgängligt men inte fungerar)

Jag har också försökt detta (utan framgång):

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

});

Och detta:

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

});

Relaterade artiklar