Update dependency maplibre-gl to v2 (#9699)

* Update dependency maplibre-gl to v2

* update types and mocks for maplibre 2.0

* prettier + strict fix

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Kerry Archibald <kerrya@element.io>

test/components/views/location/LocationPicker-test.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
@@ -62,8 +62,9 @@ describe("LocationPicker", () => {
                 wrappingComponentProps: { value: mockClient },
             });
 
-        const mockMap = new maplibregl.Map();
-        const mockGeolocate = new maplibregl.GeolocateControl();
+        const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+        const mockMap = new maplibregl.Map(mapOptions);
+        const mockGeolocate = new maplibregl.GeolocateControl({});
         const mockMarker = new maplibregl.Marker();
 
         const mockGeolocationPosition = {

test/components/views/location/LocationViewDialog-test.tsx

@@ -19,7 +19,6 @@ import React from "react";
 import { mount } from "enzyme";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
-import maplibregl from "maplibre-gl";
 
 import LocationViewDialog from "../../../../src/components/views/location/LocationViewDialog";
 import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
@@ -42,10 +41,6 @@ describe("<LocationViewDialog />", () => {
     };
     const getComponent = (props = {}) => mount(<LocationViewDialog {...defaultProps} {...props} />);
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     it("renders map correctly", () => {
         const component = getComponent();
         expect(component.find("Map")).toMatchSnapshot();

test/components/views/location/Map-test.tsx

@@ -18,7 +18,7 @@ import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -45,10 +45,6 @@ describe("<Map />", () => {
             wrappingComponentProps: { value: matrixClient },
         });
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     beforeEach(() => {
         jest.clearAllMocks();
         matrixClient.getClientWellKnown.mockReturnValue({
@@ -58,7 +54,8 @@ describe("<Map />", () => {
         jest.spyOn(logger, "error").mockRestore();
     });
 
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
 
     it("renders", () => {
         const component = getComponent();

test/components/views/location/SmartMarker-test.tsx

@@ -18,7 +18,7 @@ import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
 import { mocked } from "jest-mock";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 
 import SmartMarker from "../../../../src/components/views/location/SmartMarker";
 
@@ -27,7 +27,8 @@ jest.mock("../../../../src/utils/location/findMapStyleUrl", () => ({
 }));
 
 describe("<SmartMarker />", () => {
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
     const mockMarker = new maplibregl.Marker();
 
     const defaultProps = {

test/components/views/location/ZoomButtons-test.tsx

@@ -17,14 +17,15 @@ limitations under the License.
 import React from "react";
 // eslint-disable-next-line deprecate/import
 import { mount } from "enzyme";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { act } from "react-dom/test-utils";
 
 import ZoomButtons from "../../../../src/components/views/location/ZoomButtons";
 import { findByTestId } from "../../../test-utils";
 
 describe("<ZoomButtons />", () => {
-    const mockMap = new maplibregl.Map();
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
+    const mockMap = new maplibregl.Map(mapOptions);
     const defaultProps = {
         map: mockMap,
     };

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -26,7 +26,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
           "addControl": [MockFunction] {
             "calls": [
               [
-                mockConstructor {},
+                MockAttributionControl {},
                 "top-right",
               ],
             ],
@@ -94,7 +94,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
           "addControl": [MockFunction] {
             "calls": [
               [
-                mockConstructor {},
+                MockAttributionControl {},
                 "top-right",
               ],
             ],