Angular 17 testing mapbox

Question

In my component I display a message after the map style was loaded:

import * as mapboxgl from 'mapbox-gl';
...
this.map.on('style.load', () => {
   this.map.loadImage(path, (err, img) => {
       this.message = 'Loaded';
   });
});

In my test I want to check it with the following code:

await fixture.whenStable();
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('.message')).nativeElement.textContent).toBe('Loaded);

It is always empty so I guess my test is not waiting long enough to let the change detection work. I tried to work with some spy object like spyOn(mapboxgl.Map.prototype, 'on') but I don't know exactly how to utilise it. Anybody an idea?

Answer 1

I had to update to Angular 18 to use the experimental ExperimentalPendingTasks class.