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/messages/MBeaconBody-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 { BeaconEvent, getBeaconInfoIdentifier, RelationType, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { M_BEACON } from "matrix-js-sdk/src/@types/beacon";
@@ -48,7 +48,8 @@ describe("<MBeaconBody />", () => {
     const roomId = "!room:server";
     const aliceId = "@alice:server";
 
-    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 mockClient = getMockClientWithEventEmitter({
@@ -81,10 +82,6 @@ describe("<MBeaconBody />", () => {
 
     const modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue(undefined);
 
-    beforeAll(() => {
-        maplibregl.AttributionControl = jest.fn();
-    });
-
     beforeEach(() => {
         jest.clearAllMocks();
     });

test/components/views/messages/MLocationBody-test.tsx

@@ -19,7 +19,7 @@ import React from "react";
 import { mount } from "enzyme";
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
 import { ClientEvent, RoomMember } from "matrix-js-sdk/src/matrix";
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { logger } from "matrix-js-sdk/src/logger";
 import { act } from "react-dom/test-utils";
 import { SyncState } from "matrix-js-sdk/src/sync";
@@ -35,6 +35,7 @@ import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from "../../../test-utils";
 
 describe("MLocationBody", () => {
+    const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     describe("<MLocationBody>", () => {
         const roomId = "!room:server";
         const userId = "@user:server";
@@ -60,7 +61,7 @@ describe("MLocationBody", () => {
                 wrappingComponentProps: { value: mockClient },
             });
         const getMapErrorComponent = () => {
-            const mockMap = new maplibregl.Map();
+            const mockMap = new maplibregl.Map(mapOptions);
             mockClient.getClientWellKnown.mockReturnValue({
                 [TILE_SERVER_WK_KEY.name]: { map_style_url: "bad-tile-server.com" },
             });
@@ -73,10 +74,6 @@ describe("MLocationBody", () => {
             return component;
         };
 
-        beforeAll(() => {
-            maplibregl.AttributionControl = jest.fn();
-        });
-
         beforeEach(() => {
             jest.clearAllMocks();
         });
@@ -131,7 +128,7 @@ describe("MLocationBody", () => {
             });
 
             it("renders map correctly", () => {
-                const mockMap = new maplibregl.Map();
+                const mockMap = new maplibregl.Map(mapOptions);
                 const component = getComponent();
 
                 expect(component).toMatchSnapshot();
@@ -154,7 +151,7 @@ describe("MLocationBody", () => {
             });
 
             it("renders marker correctly for a non-self share", () => {
-                const mockMap = new maplibregl.Map();
+                const mockMap = new maplibregl.Map(mapOptions);
                 const component = getComponent();
 
                 expect(component.find("SmartMarker").at(0).props()).toEqual(

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -131,11 +131,11 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
                     "addControl": [MockFunction] {
                       "calls": [
                         [
-                          mockConstructor {},
+                          MockAttributionControl {},
                           "top-right",
                         ],
                         [
-                          mockConstructor {},
+                          MockAttributionControl {},
                           "top-right",
                         ],
                       ],