Angular e2e tests fail when passing page with integrated map from mapbox-gl-js with Timeout - Error

Question

Our Angular app contains different pages, with one of them showing a map integrated with mapbox-gl-js.

Since we integrated mapbox, our protractor e2e-test fail. As soon as the test reaches the page, where the map is shown, the next click on any other HTML element on the same page causes the following error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

Before the tests worked just fine.

It seems, that protractor can't find any HTML element on the page for a validation. The only thing possible, is to click one other element on the page but then the page just freezes until the timeout error occurs.

Eg:

1. e2e-test reaches map
2. I can click on a button on the page with the map
3. Timeout error

Any help on this would be appreciated.

// the map.component.html
<div class="container">
    <div #map id="map" class="dt-map"></div>
</div>

// the dt-map.component.js
@Component({
  selector: 'dt-map',
  templateUrl: './dt-map.component.html',
  styleUrls: ['./dt-map.component.scss'],
})
export class DtMapComponent implements AfterViewInit, OnDestroy {
  public map: mapboxgl.Map;

  @ViewChild('map')
  public mapElement: ElementRef;

  constructor(private dtMapService: DtMapService) {
  }

  public ngAfterViewInit(): void {
   this.map = this.dtMapService.getDtMap();
  }
}

// the working e2e test
expect(await page.isMapVisible()).toBe(true, `MapBox is not visible`);

public async isMapVisible(): Promise<boolean> {
  const el = await element(by.css('.mapboxgl-map'));
  await Expection.visibilityOf(el);
  return await el.isDisplayed();
}