Use resizeObserver instead of window resize events, fix and clean tests

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ### ✨ Features and improvements
 - Improve performance by sending style layers to worker thread before processing it on main thread to allow parallel processing ([#2131](https://github.com/maplibre/maplibre-gl-js/pull/2131))
+- Resize map when container element is resized. ([#2157](https://github.com/maplibre/maplibre-gl-js/pull/2157))
 - *...Add new stuff here...*
 
 ### 🐞 Bug fixes

src/source/vector_tile_worker_source.test.ts

@@ -13,26 +13,17 @@ import {setPerformance} from '../util/test/util';
 describe('vector tile worker source', () => {
     const actor = {send: () => {}} as any as Actor;
     let server: FakeServer;
-    let originalGetEntriesByName;
-    let originalMeasure;
-    let originalMark;
 
     beforeEach(() => {
         global.fetch = null;
         server = fakeServer.create();
         setPerformance();
-        originalGetEntriesByName = window.performance.getEntriesByName;
-        originalMeasure = window.performance.measure;
-        originalMark = window.performance.mark;
 
     });
 
     afterEach(() => {
         server.restore();
         jest.clearAllMocks();
-        window.performance.getEntriesByName = originalGetEntriesByName;
-        window.performance.measure = originalMeasure;
-        window.performance.mark = originalMark;
     });
     test('VectorTileWorkerSource#abortTile aborts pending request', () => {
         const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);

src/ui/control/attribution_control.test.ts

@@ -1,5 +1,5 @@
 import AttributionControl from './attribution_control';
-import {createMap as globalCreateMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {fakeServer} from 'nise';
 
@@ -21,9 +21,7 @@ function createMap() {
 let map;
 
 beforeEach(() => {
-    setWebGlContext();
-    setPerformance();
-    setMatchMedia();
+    beforeMapTest();
     map = createMap();
 });
 

src/ui/control/fullscreen_control.test.ts

@@ -1,9 +1,8 @@
-import {createMap, setWebGlContext} from '../../util/test/util';
+import {createMap, beforeMapTest} from '../../util/test/util';
 import FullscreenControl from './fullscreen_control';
 
 beforeEach(() => {
-    setWebGlContext();
-    window.performance.mark = jest.fn();
+    beforeMapTest();
 });
 
 describe('FullscreenControl', () => {

src/ui/control/geolocate_control.test.ts

@@ -1,5 +1,5 @@
 import geolocation from 'mock-geolocation';
-import {createMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
+import {createMap, beforeMapTest} from '../../util/test/util';
 import GeolocateControl from './geolocate_control';
 
 geolocation.use();
@@ -14,9 +14,7 @@ function lngLatAsFixed(lngLat, digits) {
 }
 
 beforeEach(() => {
-    setWebGlContext();
-    setPerformance();
-    setMatchMedia();
+    beforeMapTest();
     map = createMap(undefined, undefined);
 });
 

src/ui/control/logo_control.test.ts

@@ -1,4 +1,4 @@
-import {createMap as globalCreateMap, setWebGlContext, setPerformance} from '../../util/test/util';
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
 
 function createMap(logoPosition, maplibreLogo) {
 
@@ -16,8 +16,7 @@ function createMap(logoPosition, maplibreLogo) {
 }
 
 beforeEach(() => {
-    setWebGlContext();
-    setPerformance();
+    beforeMapTest();
 });
 
 describe('LogoControl', () => {

src/ui/control/navigation_control.test.ts

@@ -1,5 +1,5 @@
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {createMap as globalCreateMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
 import NavigationControl from './navigation_control';
 
 function createMap() {
@@ -9,9 +9,7 @@ function createMap() {
 let map;
 
 beforeEach(() => {
-    setWebGlContext();
-    setPerformance();
-    setMatchMedia();
+    beforeMapTest();
     map = createMap();
 });
 

src/ui/control/scale_control.test.ts

@@ -1,9 +1,8 @@
-import {createMap, setWebGlContext} from '../../util/test/util';
+import {createMap, beforeMapTest} from '../../util/test/util';
 import ScaleControl from './scale_control';
 
 beforeEach(() => {
-    setWebGlContext();
-    window.performance.mark = jest.fn();
+    beforeMapTest();
 });
 
 describe('ScaleControl', () => {

src/ui/control/terrain_control.test.ts

@@ -1,5 +1,5 @@
 import TerrainControl from './terrain_control';
-import {createMap as globalCreateMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
 
 function createMap() {
 
@@ -27,9 +27,7 @@ function createMap() {
 let map;
 
 beforeEach(() => {
-    setWebGlContext();
-    setPerformance();
-    setMatchMedia();
+    beforeMapTest();
     map = createMap();
 });
 

src/ui/handler/box_zoom.test.ts

@@ -1,16 +1,14 @@
 import Map from '../map';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap(clickTolerance) {
     return new Map({style: '', container: DOM.create('div', '', window.document.body), clickTolerance});
 }
 
 beforeEach(() => {
-    setWebGlContext();
-    setPerformance();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('BoxZoomHandler', () => {

src/ui/handler/cooperative_gestures.test.ts

@@ -2,7 +2,7 @@ import browser from '../../util/browser';
 import Map from '../map';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap() {
     return new Map({
@@ -17,9 +17,7 @@ function createMap() {
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('CoopGesturesHandler', () => {

src/ui/handler/dblclick_zoom.test.ts

@@ -1,5 +1,5 @@
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 import Map, {MapOptions} from '../map';
 
 function createMap() {
@@ -21,9 +21,7 @@ function simulateDoubleTap(map, delay = 100) {
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('dbclick_zoom', () => {

src/ui/handler/drag_pan.test.ts

@@ -1,6 +1,6 @@
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 import Map, {MapOptions} from '../map';
 import type {MapGeoJSONFeature} from '../../util/vectortile_to_geojson';
 
@@ -13,9 +13,7 @@ function createMap(clickTolerance?, dragPan?) {
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 // MouseEvent.buttons = 1 // left button

src/ui/handler/drag_rotate.test.ts

@@ -4,16 +4,14 @@ import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import browser from '../../util/browser';
 
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap(options?) {
     return new Map(extend({container: DOM.create('div', '', window.document.body)}, options));
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('drag rotate', () => {

src/ui/handler/keyboard.test.ts

@@ -2,7 +2,7 @@ import Map from '../../ui/map';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {extend} from '../../util/util';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap(options?) {
     return new Map(extend({
@@ -11,9 +11,7 @@ function createMap(options?) {
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('keyboard', () => {

src/ui/handler/map_event.test.ts

@@ -1,16 +1,14 @@
 import Map, {MapOptions} from '../map';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap() {
     return new Map({interactive: true, container: DOM.create('div', '', window.document.body)} as any as MapOptions);
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('map events', () => {

src/ui/handler/mouse_handler_interface.test.ts

@@ -1,14 +1,7 @@
 import Point from '@mapbox/point-geometry';
 
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
 import {generateMousePanHandler, generateMousePitchHandler, generateMouseRotationHandler} from './mouse';
 
-beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
-});
-
 describe('mouse handler tests', () => {
     test('MouseRotateHandler', () => {
         const mouseRotate = generateMouseRotationHandler({clickTolerance: 2});

src/ui/handler/mouse_rotate.test.ts

@@ -3,21 +3,19 @@ import Map from '../../ui/map';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import browser from '../../util/browser';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap(options?) {
     return new Map(extend({container: DOM.create('div', '', window.document.body)}, options));
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('mouse rotate', () => {
     test('MouseRotateHandler#isActive', () => {
-        const map = createMap();
+        const map = createMap({interactive: true});
         const mouseRotate = map.handlers._handlersById.mouseRotate;
 
         // Prevent inertial rotation.
@@ -40,7 +38,7 @@ describe('mouse rotate', () => {
     });
 
     test('MouseRotateHandler#isActive #4622 regression test', () => {
-        const map = createMap();
+        const map = createMap({interactive: true});
         const mouseRotate = map.handlers._handlersById.mouseRotate;
 
         // Prevent inertial rotation.

src/ui/handler/one_finger_touch_drag_handler_interface.test.ts

@@ -1,14 +1,7 @@
 import Point from '@mapbox/point-geometry';
 
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
 import {generateOneFingerTouchPitchHandler, generateOneFingerTouchRotationHandler} from './one_finger_touch_drag';
 
-beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
-});
-
 const testTouch = {identifier: 0} as Touch;
 
 describe('one touch drag handler tests', () => {

src/ui/handler/scroll_zoom.test.ts

@@ -2,7 +2,7 @@ import browser from '../../util/browser';
 import Map from '../../ui/map';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {setPerformance, beforeMapTest} from '../../util/test/util';
 
 function createMap() {
     return new Map({
@@ -16,9 +16,7 @@ function createMap() {
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('ScrollZoomHandler', () => {

src/ui/handler/two_fingers_touch.test.ts

@@ -2,16 +2,14 @@ import Map, {MapOptions} from '../map';
 import Marker from '../marker';
 import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
-import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+import {beforeMapTest} from '../../util/test/util';
 
 function createMap() {
     return new Map({container: DOM.create('div', '', window.document.body)} as any as MapOptions);
 }
 
 beforeEach(() => {
-    setPerformance();
-    setWebGlContext();
-    setMatchMedia();
+    beforeMapTest();
 });
 
 describe('touch zoom rotate', () => {