[v8] Fix tests

modules/main/test/components/controls.spec.jsx

@@ -17,7 +17,7 @@ test('Controls', async t => {
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <AttributionControl />
     </Map>
   );
@@ -26,7 +26,7 @@ test('Controls', async t => {
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-attrib'), 'Rendered <AttributionControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <FullscreenControl />
     </Map>
   );
@@ -35,7 +35,7 @@ test('Controls', async t => {
 
   const geolocateControlRef = {current: null};
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <GeolocateControl ref={geolocateControlRef} />
     </Map>
   );
@@ -44,15 +44,15 @@ test('Controls', async t => {
   t.ok(geolocateControlRef.current, 'GeolocateControl created');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <NavigationControl />
     </Map>
   );
   await sleep(1);
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-zoom-in'), 'Rendered <NavigationControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <ScaleControl />
     </Map>
   );

modules/main/test/components/layer.spec.jsx

@@ -33,7 +33,7 @@ test('Source/Layer', async t => {
   };
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer} />
       </Source>
@@ -45,7 +45,7 @@ test('Source/Layer', async t => {
   t.ok(layer, 'Layer is added');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer2} />
       </Source>
@@ -55,7 +55,7 @@ test('Source/Layer', async t => {
   t.is(layer.visibility, 'none', 'Layer is updated');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer2} />
       </Source>
@@ -64,7 +64,7 @@ test('Source/Layer', async t => {
   await sleep(50);
   t.ok(mapRef.current.getLayer('my-layer'), 'Layer is added after style change');
 
-  root.render(<Map ref={mapRef} mapStyle={mapStyle} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle} />);
   await sleep(1);
   t.notOk(mapRef.current.getSource('my-data'), 'Source is removed');
   t.notOk(mapRef.current.getLayer('my-layer'), 'Layer is removed');

modules/main/test/components/map.spec.jsx

@@ -16,7 +16,12 @@ test('Map', async t => {
   const onLoad = () => onloadCalled++;
 
   root.render(
-    <Map ref={mapRef} initialViewState={{longitude: -100, latitude: 40, zoom: 4}} onLoad={onLoad} />
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
+      initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
+      onLoad={onLoad}
+    />
   );
 
   await waitForMapLoad(mapRef);
@@ -26,7 +31,16 @@ test('Map', async t => {
   t.is(mapRef.current.getCenter().lat, 40, 'latitude is set');
   t.is(mapRef.current.getZoom(), 4, 'zoom is set');
 
-  root.render(<Map ref={mapRef} longitude={-122} latitude={38} zoom={14} onLoad={onLoad} />);
+  root.render(
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
+      longitude={-122}
+      latitude={38}
+      zoom={14}
+      onLoad={onLoad}
+    />
+  );
   await sleep(1);
 
   t.is(mapRef.current.getCenter().lng, -122, 'longitude is updated');
@@ -63,6 +77,7 @@ test('Map#uncontrolled', t => {
   root.render(
     <Map
       ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
       initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
       onLoad={onLoad}
       onRender={onRender}
@@ -90,6 +105,7 @@ test('Map#controlled#no-update', t => {
   root.render(
     <Map
       ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
       longitude={-100}
       latitude={40}
       zoom={4}
@@ -129,6 +145,7 @@ test('Map#controlled#mirror-back', t => {
     return (
       <Map
         ref={mapRef}
+        mapLib={import('mapbox-gl-v1')}
         {...viewState}
         onLoad={onLoad}
         onMove={e => setViewState(e.viewState)}
@@ -170,6 +187,7 @@ test('Map#controlled#delayed-update', t => {
     return (
       <Map
         ref={mapRef}
+        mapLib={import('mapbox-gl-v1')}
         {...viewState}
         onLoad={onLoad}
         onMove={e => setTimeout(() => setViewState(e.viewState))}

modules/main/test/components/marker.spec.jsx

@@ -12,7 +12,7 @@ test('Marker', async t => {
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker ref={markerRef} longitude={-122} latitude={38} />
     </Map>
   );
@@ -31,7 +31,7 @@ test('Marker', async t => {
   const rotationAlignment = marker.getRotationAlignment();
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker ref={markerRef} longitude={-122} latitude={38} offset={[0, 0]} />
     </Map>
   );
@@ -40,16 +40,16 @@ test('Marker', async t => {
 
   let callbackType = '';
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker
         ref={markerRef}
         longitude={-122}
         latitude={38}
         offset={[0, 1]}
         rotation={30}
         draggable
-        pitchAlignment="viewport"
-        rotationAlignment="viewport"
+        pitchAlignment="map"
+        rotationAlignment="map"
         onDragStart={() => (callbackType = 'dragstart')}
         onDrag={() => (callbackType = 'drag')}
         onDragEnd={() => (callbackType = 'dragend')}
@@ -71,13 +71,13 @@ test('Marker', async t => {
   marker.fire('dragend');
   t.is(callbackType, 'dragend', 'onDragEnd called');
 
-  root.render(<Map ref={mapRef} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v1')} />);
   await sleep(1);
 
   t.notOk(markerRef.current, 'marker is removed');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker ref={markerRef} longitude={-100} latitude={40}>
         <div id="marker-content" />
       </Marker>

modules/main/test/components/popup.spec.jsx

@@ -11,7 +11,7 @@ test('Popup', async t => {
   const popupRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup ref={popupRef} longitude={-122} latitude={38} offset={[0, 10]}>
         You are here
       </Popup>
@@ -27,7 +27,7 @@ test('Popup', async t => {
   const {anchor, offset, maxWidth} = popup.options;
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup ref={popupRef} longitude={-122} latitude={38} offset={[0, 10]}>
         <div id="popup-content">You are here</div>
       </Popup>
@@ -39,7 +39,7 @@ test('Popup', async t => {
   t.ok(rootContainer.querySelector('#popup-content'), 'content is rendered');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup
         ref={popupRef}
         longitude={-122}
@@ -59,7 +59,7 @@ test('Popup', async t => {
   t.not(maxWidth, popup.options.maxWidth, 'maxWidth is updated');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup ref={popupRef} longitude={-122} latitude={38} className="classA">
         <div id="popup-content">You are here</div>
       </Popup>

modules/main/test/components/source.spec.jsx

@@ -19,7 +19,7 @@ test('Source/Layer', async t => {
   };
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Source id="my-data" type="geojson" data={geoJSON} />
     </Map>
   );
@@ -28,23 +28,23 @@ test('Source/Layer', async t => {
   t.ok(mapRef.current.getSource('my-data'), 'Source is added');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle}>
       <Source id="my-data" type="geojson" data={geoJSON} />
     </Map>
   );
   await sleep(50);
   t.ok(mapRef.current.getSource('my-data'), 'Source is added after style change');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle}>
       <Source id="my-data" type="geojson" data={geoJSON2} />
     </Map>
   );
   await sleep(1);
   const sourceData = await mapRef.current.getSource('my-data')?._data;
   t.deepEqual(sourceData, geoJSON2, 'Source is updated');
 
-  root.render(<Map ref={mapRef} mapStyle={mapStyle} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle} />);
   await sleep(1);
   t.notOk(mapRef.current.getSource('my-data'), 'Source is removed');
 

modules/main/test/components/use-map.spec.jsx

@@ -16,8 +16,8 @@ test('useMap', async t => {
 
   root.render(
     <MapProvider>
-      <Map id="mapA" />
-      <Map id="mapB" ref={mapRef} />
+      <Map id="mapA" mapLib={import('mapbox-gl-v1')} />
+      <Map id="mapB" ref={mapRef} mapLib={import('mapbox-gl-v1')} />
       <TestControl />
     </MapProvider>
   );
@@ -29,7 +29,7 @@ test('useMap', async t => {
 
   root.render(
     <MapProvider>
-      <Map id="mapA" />
+      <Map id="mapA" mapLib={import('mapbox-gl-v1')} />
       <TestControl />
     </MapProvider>
   );

modules/react-mapbox/test/components/controls.spec.jsx

@@ -10,14 +10,15 @@ import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Controls', async t => {
   const rootContainer = document.createElement('div');
   const root = createRoot(rootContainer);
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <AttributionControl />
     </Map>
   );
@@ -26,7 +27,7 @@ test('Controls', async t => {
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-attrib'), 'Rendered <AttributionControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <FullscreenControl />
     </Map>
   );
@@ -35,7 +36,7 @@ test('Controls', async t => {
 
   const geolocateControlRef = {current: null};
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <GeolocateControl ref={geolocateControlRef} />
     </Map>
   );
@@ -44,15 +45,15 @@ test('Controls', async t => {
   t.ok(geolocateControlRef.current, 'GeolocateControl created');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <NavigationControl />
     </Map>
   );
   await sleep(1);
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-zoom-in'), 'Rendered <NavigationControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <ScaleControl />
     </Map>
   );