Unit test tsc fixes part 15 (#8104)

* fix ts issues in MPollBody test

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix ts issues in PollCreateDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix settings components

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix DateSeparator

Signed-off-by: Kerry Archibald <kerrya@element.io>

* fix loosies

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update tsconfig

Signed-off-by: Kerry Archibald <kerrya@element.io>

test/components/views/elements/AppTile-test.tsx

@@ -114,6 +114,10 @@ describe("AppTile", () => {
         await RightPanelStore.instance.onReady();
     });
 
+    beforeEach(() => {
+        jest.spyOn(SettingsStore, "getValue").mockRestore();
+    });
+
     it("tracks live tiles correctly", () => {
         expect(AppTile.isLive("1", "r1")).toEqual(false);
 
@@ -196,7 +200,7 @@ describe("AppTile", () => {
     it("distinguishes widgets with the same ID in different rooms", async () => {
         // Set up right panel state
         const realGetValue = SettingsStore.getValue;
-        SettingsStore.getValue = (name, roomId) => {
+        jest.spyOn(SettingsStore, 'getValue').mockImplementation((name, roomId) => {
             if (name === "RightPanel.phases") {
                 if (roomId === "r1") {
                     return {
@@ -212,7 +216,7 @@ describe("AppTile", () => {
                 return null;
             }
             return realGetValue(name, roomId);
-        };
+        });
 
         // Run initial render with room 1, and also running lifecycle methods
         const renderer = TestRenderer.create(<MatrixClientContext.Provider value={cli}>
@@ -232,7 +236,7 @@ describe("AppTile", () => {
         expect(AppTile.isLive("1", "r1")).toBe(true);
         expect(AppTile.isLive("1", "r2")).toBe(false);
 
-        SettingsStore.getValue = (name, roomId) => {
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((name, roomId) => {
             if (name === "RightPanel.phases") {
                 if (roomId === "r2") {
                     return {
@@ -248,7 +252,7 @@ describe("AppTile", () => {
                 return null;
             }
             return realGetValue(name, roomId);
-        };
+        });
         // Wait for RPS room 2 updates to fire
         const rpsUpdated2 = waitForRps("r2");
         // Switch to room 2
@@ -266,8 +270,6 @@ describe("AppTile", () => {
 
         expect(AppTile.isLive("1", "r1")).toBe(false);
         expect(AppTile.isLive("1", "r2")).toBe(true);
-
-        SettingsStore.getValue = realGetValue;
     });
 
     it("preserves non-persisted widget on container move", async () => {

test/components/views/elements/PollCreateDialog-test.tsx

@@ -26,16 +26,15 @@ import {
     M_TEXT,
     PollStartEvent,
 } from 'matrix-events-sdk';
-import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 
 import {
-    wrapInMatrixClientContext,
     findById,
-    stubClient,
+    getMockClientWithEventEmitter,
 } from '../../../test-utils';
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import _PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
+import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
-const PollCreateDialog = wrapInMatrixClientContext(_PollCreateDialog);
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
 
 // Fake date to give a predictable snapshot
 const realDateNow = Date.now;
@@ -51,9 +50,21 @@ afterAll(() => {
 });
 
 describe("PollCreateDialog", () => {
+    const mockClient = getMockClientWithEventEmitter({
+        sendEvent: jest.fn().mockResolvedValue({ event_id: '1' }),
+    });
+
+    beforeEach(() => {
+        mockClient.sendEvent.mockClear();
+    });
+
     it("renders a blank poll", () => {
         const dialog = mount(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
+            {
+                wrappingComponent: MatrixClientContext.Provider,
+                wrappingComponentProps: { value: mockClient },
+            },
         );
         expect(dialog.html()).toMatchSnapshot();
     });
@@ -207,9 +218,6 @@ describe("PollCreateDialog", () => {
     });
 
     it("displays a spinner after submitting", () => {
-        stubClient();
-        MatrixClientPeg.get().sendEvent = jest.fn(() => Promise.resolve());
-
         const dialog = mount(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
         );
@@ -223,21 +231,6 @@ describe("PollCreateDialog", () => {
     });
 
     it("sends a poll create event when submitted", () => {
-        stubClient();
-        let sentEventContent: IContent = null;
-        MatrixClientPeg.get().sendEvent = jest.fn(
-            (
-                _roomId: string,
-                _threadId: string,
-                eventType: string,
-                content: IContent,
-            ) => {
-                expect(M_POLL_START.matches(eventType)).toBeTruthy();
-                sentEventContent = content;
-                return Promise.resolve();
-            },
-        );
-
         const dialog = mount(
             <PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
         );
@@ -246,6 +239,8 @@ describe("PollCreateDialog", () => {
         changeValue(dialog, "Option 2", "A2");
 
         dialog.find("button").simulate("click");
+        const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
+        expect(M_POLL_START.matches(eventType)).toBeTruthy();
         expect(sentEventContent).toEqual(
             {
                 [M_TEXT.name]: "Q\n1. A1\n2. A2",
@@ -275,21 +270,6 @@ describe("PollCreateDialog", () => {
     });
 
     it("sends a poll edit event when editing", () => {
-        stubClient();
-        let sentEventContent: IContent = null;
-        MatrixClientPeg.get().sendEvent = jest.fn(
-            (
-                _roomId: string,
-                _threadId: string,
-                eventType: string,
-                content: IContent,
-            ) => {
-                expect(M_POLL_START.matches(eventType)).toBeTruthy();
-                sentEventContent = content;
-                return Promise.resolve();
-            },
-        );
-
         const previousEvent: MatrixEvent = new MatrixEvent(
             PollStartEvent.from(
                 "Poll Q",
@@ -312,6 +292,8 @@ describe("PollCreateDialog", () => {
         changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
         dialog.find("button").simulate("click");
 
+        const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
+        expect(M_POLL_START.matches(eventType)).toBeTruthy();
         expect(sentEventContent).toEqual(
             {
                 "m.new_content": {

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

@@ -16,17 +16,18 @@ limitations under the License.
 
 import React from "react";
 import { mount } from "enzyme";
+import { mocked } from "jest-mock";
 
 import sdk from "../../../skinned-sdk";
-import * as TestUtils from "../../../test-utils";
 import { formatFullDateNoTime } from "../../../../src/DateUtils";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { UIFeature } from "../../../../src/settings/UIFeature";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { getMockClientWithEventEmitter } from "../../../test-utils";
 
 jest.mock("../../../../src/settings/SettingsStore");
 
-const _DateSeparator = sdk.getComponent("views.messages.DateSeparator");
+const DateSeparator = sdk.getComponent("views.messages.DateSeparator");
-const DateSeparator = TestUtils.wrapInMatrixClientContext(_DateSeparator);
 
 describe("DateSeparator", () => {
     const HOUR_MS = 3600000;
@@ -45,8 +46,12 @@ describe("DateSeparator", () => {
         }
     }
 
+    const mockClient = getMockClientWithEventEmitter({});
     const getComponent = (props = {}) =>
-        mount(<DateSeparator {...defaultProps} {...props} />);
+        mount(<DateSeparator {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
 
     type TestCase = [string, number, string];
     const testCases: TestCase[] = [
@@ -106,7 +111,7 @@ describe("DateSeparator", () => {
 
     describe('when feature_jump_to_date is enabled', () => {
         beforeEach(() => {
-            (SettingsStore.getValue as jest.Mock) = jest.fn((arg) => {
+            mocked(SettingsStore).getValue.mockImplementation((arg) => {
                 if (arg === "feature_jump_to_date") {
                     return true;
                 }

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

@@ -222,7 +222,7 @@ describe("MLocationBody", () => {
 
     describe("isSelfLocation", () => {
         it("Returns true for a full m.asset event", () => {
-            const content = makeLocationContent("", 0);
+            const content = makeLocationContent("", '0');
             expect(isSelfLocation(content)).toBe(true);
         });
 

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

@@ -16,8 +16,7 @@ limitations under the License.
 
 import React from "react";
 import { mount, ReactWrapper } from "enzyme";
-import { Callback, IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 import { RelatedRelations } from "matrix-js-sdk/src/models/related-relations";
 import {
@@ -30,8 +29,8 @@ import {
     M_TEXT,
     POLL_ANSWER,
 } from "matrix-events-sdk";
+import { MockedObject } from "jest-mock";
 
-import * as TestUtils from "../../../test-utils";
 import sdk from "../../../skinned-sdk";
 import {
     UserVote,
@@ -42,19 +41,26 @@ import {
 } from "../../../../src/components/views/messages/MPollBody";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { IBodyProps } from "../../../../src/components/views/messages/IBodyProps";
+import { getMockClientWithEventEmitter } from "../../../test-utils";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 
 const CHECKED = "mx_MPollBody_option_checked";
 
-const _MPollBody = sdk.getComponent("views.messages.MPollBody");
+const MPollBody = sdk.getComponent("views.messages.MPollBody");
-const MPollBody = TestUtils.wrapInMatrixClientContext(_MPollBody);
 
-MatrixClientPeg.matrixClient = {
+const mockClient = getMockClientWithEventEmitter({
-    getUserId: () => "@me:example.com",
+    getUserId: jest.fn().mockReturnValue("@me:example.com"),
-    sendEvent: () => Promise.resolve({ "event_id": "fake_send_id" }),
+    sendEvent: jest.fn().mockReturnValue(Promise.resolve({ "event_id": "fake_send_id" })),
-};
+    getRoom: jest.fn(),
-setRedactionAllowedForMeOnly(MatrixClientPeg.matrixClient);
+});
+
+setRedactionAllowedForMeOnly(mockClient);
 
 describe("MPollBody", () => {
+    beforeEach(() => {
+        mockClient.sendEvent.mockClear();
+    });
+
     it("finds no votes if there are none", () => {
         expect(
             allVotes(
@@ -110,13 +116,12 @@ describe("MPollBody", () => {
             ]),
         ]);
 
-        const matrixClient = TestUtils.createTestClient();
+        setRedactionAllowedForMeOnly(mockClient);
-        setRedactionAllowedForMeOnly(matrixClient);
 
         expect(
             pollEndTs(
                 { getRoomId: () => "$room" } as MatrixEvent,
-                matrixClient,
+                mockClient,
                 endRelations,
             ),
         ).toBe(12);
@@ -132,13 +137,12 @@ describe("MPollBody", () => {
             ]),
         ]);
 
-        const matrixClient = TestUtils.createTestClient();
+        setRedactionAllowedForMeOnly(mockClient);
-        setRedactionAllowedForMeOnly(matrixClient);
 
         expect(
             pollEndTs(
                 { getRoomId: () => "$room" } as MatrixEvent,
-                matrixClient,
+                mockClient,
                 endRelations,
             ),
         ).toBe(13);
@@ -460,7 +464,7 @@ describe("MPollBody", () => {
         const votes = [];
         const ends = [];
         const body = newMPollBody(votes, ends, answers);
-        expect(body.html()).toBe("");
+        expect(body.html()).toBeNull();
     });
 
     it("renders the first 20 answers if 21 were given", () => {
@@ -530,110 +534,47 @@ describe("MPollBody", () => {
     });
 
     it("sends a vote event when I choose an option", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
         const votes = [];
         const body = newMPollBody(votes);
         clickRadio(body, "wings");
-        expect(receivedEvents).toEqual([
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("wings"));
-            expectedResponseEvent("wings"),
-        ]);
     });
 
     it("sends only one vote event when I click several times", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
         const votes = [];
         const body = newMPollBody(votes);
         clickRadio(body, "wings");
         clickRadio(body, "wings");
         clickRadio(body, "wings");
         clickRadio(body, "wings");
-        expect(receivedEvents).toEqual([
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(
-            expectedResponseEvent("wings"),
+            ...expectedResponseEventCall("wings"),
-        ]);
+        );
     });
 
     it("sends no vote event when I click what I already chose", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
         const votes = [responseEvent("@me:example.com", "wings")];
         const body = newMPollBody(votes);
         clickRadio(body, "wings");
         clickRadio(body, "wings");
         clickRadio(body, "wings");
         clickRadio(body, "wings");
-        expect(receivedEvents).toEqual([]);
+        expect(mockClient.sendEvent).not.toHaveBeenCalled();
     });
 
     it("sends several events when I click different options", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
         const votes = [];
         const body = newMPollBody(votes);
         clickRadio(body, "wings");
         clickRadio(body, "italian");
         clickRadio(body, "poutine");
-        expect(receivedEvents).toEqual([
+        expect(mockClient.sendEvent).toHaveBeenCalledTimes(3);
-            expectedResponseEvent("wings"),
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("wings"));
-            expectedResponseEvent("italian"),
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("italian"));
-            expectedResponseEvent("poutine"),
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("poutine"));
-        ]);
     });
 
     it("sends no events when I click in an ended poll", () => {
-        const receivedEvents = [];
-        MatrixClientPeg.matrixClient.sendEvent = (
-            roomId: string,
-            eventType: string,
-            content: IContent,
-            txnId?: string,
-            callback?: Callback,
-        ): Promise<ISendEventResponse> => {
-            receivedEvents.push({ roomId, eventType, content, txnId, callback });
-            return Promise.resolve({ "event_id": "fake_tracked_send_id" });
-        };
-
         const ends = [
             endEvent("@me:example.com", 25),
         ];
@@ -645,7 +586,7 @@ describe("MPollBody", () => {
         clickEndedOption(body, "wings");
         clickEndedOption(body, "italian");
         clickEndedOption(body, "poutine");
-        expect(receivedEvents).toEqual([]);
+        expect(mockClient.sendEvent).not.toHaveBeenCalled();
     });
 
     it("finds the top answer among several votes", () => {
@@ -888,9 +829,8 @@ describe("MPollBody", () => {
 
     it("says poll is not ended if endRelations is undefined", () => {
         const pollEvent = new MatrixEvent();
-        const matrixClient = TestUtils.createTestClient();
+        setRedactionAllowedForMeOnly(mockClient);
-        setRedactionAllowedForMeOnly(matrixClient);
+        expect(isPollEnded(pollEvent, mockClient, undefined)).toBe(false);
-        expect(isPollEnded(pollEvent, matrixClient, undefined)).toBe(false);
     });
 
     it("says poll is not ended if asking for relations returns undefined", () => {
@@ -899,15 +839,15 @@ describe("MPollBody", () => {
             "room_id": "#myroom:example.com",
             "content": newPollStart([]),
         });
-        MatrixClientPeg.matrixClient.getRoom = () => {
+        mockClient.getRoom.mockImplementation((_roomId) => {
             return {
                 currentState: {
                     maySendRedactionForEvent: (_evt: MatrixEvent, userId: string) => {
                         return userId === "@me:example.com";
                     },
                 },
-            };
+            } as unknown as Room;
-        };
+        });
         const getRelationsForEvent =
             (eventId: string, relationType: string, eventType: string) => {
                 expect(eventId).toBe("$mypoll");
@@ -1134,7 +1074,12 @@ function newMPollBodyFromEvent(
                 }
             }
         }
-    />);
+    />, {
+        wrappingComponent: MatrixClientContext.Provider,
+        wrappingComponentProps: {
+            value: mockClient,
+        },
+    });
 }
 
 function clickRadio(wrapper: ReactWrapper, value: string) {
@@ -1271,12 +1216,20 @@ function expectedResponseEvent(answer: string) {
                 "rel_type": "m.reference",
             },
         },
-        "eventType": M_POLL_RESPONSE.name,
         "roomId": "#myroom:example.com",
+        "eventType": M_POLL_RESPONSE.name,
         "txnId": undefined,
         "callback": undefined,
     };
 }
+function expectedResponseEventCall(answer: string) {
+    const {
+        content, roomId, eventType,
+    } = expectedResponseEvent(answer);
+    return [
+        roomId, eventType, content,
+    ];
+}
 
 function endEvent(
     sender = "@me:example.com",
@@ -1309,8 +1262,7 @@ function runIsPollEnded(ends: MatrixEvent[]) {
         "content": newPollStart(),
     });
 
-    const matrixClient = TestUtils.createTestClient();
+    setRedactionAllowedForMeOnly(mockClient);
-    setRedactionAllowedForMeOnly(matrixClient);
 
     const getRelationsForEvent =
         (eventId: string, relationType: string, eventType: string) => {
@@ -1320,7 +1272,7 @@ function runIsPollEnded(ends: MatrixEvent[]) {
             return newEndRelations(ends);
         };
 
-    return isPollEnded(pollEvent, matrixClient, getRelationsForEvent);
+    return isPollEnded(pollEvent, mockClient, getRelationsForEvent);
 }
 
 function runFindTopAnswer(votes: MatrixEvent[], ends: MatrixEvent[]) {
@@ -1347,8 +1299,8 @@ function runFindTopAnswer(votes: MatrixEvent[], ends: MatrixEvent[]) {
     return findTopAnswer(pollEvent, MatrixClientPeg.get(), getRelationsForEvent);
 }
 
-function setRedactionAllowedForMeOnly(matrixClient: MatrixClient) {
+function setRedactionAllowedForMeOnly(matrixClient: MockedObject<MatrixClient>) {
-    matrixClient.getRoom = (_roomId: string) => {
+    matrixClient.getRoom.mockImplementation((_roomId: string) => {
         return {
             currentState: {
                 maySendRedactionForEvent: (_evt: MatrixEvent, userId: string) => {
@@ -1356,7 +1308,7 @@ function setRedactionAllowedForMeOnly(matrixClient: MatrixClient) {
                 },
             },
         } as Room;
-    };
+    });
 }
 
 let EVENT_ID = 0;

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

@@ -1,14 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DateSeparator renders the date separator correctly 1`] = `
-<Wrapper
+<DateSeparator
   now="2021-12-17T08:09:00.000Z"
   ts={1639728540000}
 >
-  <DateSeparator
-    now="2021-12-17T08:09:00.000Z"
-    ts={1639728540000}
-  >
   <h2
     aria-label="Today"
     className="mx_DateSeparator"
@@ -27,19 +23,14 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
       role="none"
     />
   </h2>
-  </DateSeparator>
+</DateSeparator>
-</Wrapper>
 `;
 
 exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
-<Wrapper
+<DateSeparator
   now="2021-12-17T08:09:00.000Z"
   ts={1639728540000}
 >
-  <DateSeparator
-    now="2021-12-17T08:09:00.000Z"
-    ts={1639728540000}
-  >
   <h2
     aria-label="Fri, Dec 17 2021"
     className="mx_DateSeparator"
@@ -111,6 +102,5 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
       role="none"
     />
   </h2>
-  </DateSeparator>
+</DateSeparator>
-</Wrapper>
 `;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MPollBody renders a finished poll 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -42,47 +42,6 @@ exports[`MPollBody renders a finished poll 1`] = `
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -347,12 +306,11 @@ exports[`MPollBody renders a finished poll 1`] = `
       Final result based on 3 votes
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders a finished poll with multiple winners 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -393,47 +351,6 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -698,12 +615,11 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
       Final result based on 4 votes
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders a finished poll with no votes 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -744,47 +660,6 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -1049,12 +924,11 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
       Final result based on 0 votes
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders a poll that I have not voted in 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -1095,47 +969,6 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -1500,12 +1333,11 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
       3 votes cast. Vote to see the results
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -1546,47 +1378,6 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -1959,12 +1750,11 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
       Based on 5 votes
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders a poll with no votes 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -2005,47 +1795,6 @@ exports[`MPollBody renders a poll with no votes 1`] = `
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -2410,12 +2159,11 @@ exports[`MPollBody renders a poll with no votes 1`] = `
       No votes cast
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders a poll with only non-local votes 1`] = `
-<Wrapper
+<MPollBody
   getRelationsForEvent={[Function]}
   mxEvent={
     Object {
@@ -2456,47 +2204,6 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
     }
   }
 >
-  <MPollBody
-    getRelationsForEvent={[Function]}
-    mxEvent={
-      Object {
-        "content": Object {
-          "org.matrix.msc1767.text": "What should we order for the party?
-1. Pizza
-2. Poutine
-3. Italian
-4. Wings",
-          "org.matrix.msc3381.poll.start": Object {
-            "answers": Array [
-              Object {
-                "id": "pizza",
-                "org.matrix.msc1767.text": "Pizza",
-              },
-              Object {
-                "id": "poutine",
-                "org.matrix.msc1767.text": "Poutine",
-              },
-              Object {
-                "id": "italian",
-                "org.matrix.msc1767.text": "Italian",
-              },
-              Object {
-                "id": "wings",
-                "org.matrix.msc1767.text": "Wings",
-              },
-            ],
-            "kind": "org.matrix.msc3381.poll.disclosed",
-            "question": Object {
-              "org.matrix.msc1767.text": "What should we order for the party?",
-            },
-          },
-        },
-        "event_id": "$mypoll",
-        "room_id": "#myroom:example.com",
-        "type": "org.matrix.msc3381.poll.start",
-      }
-    }
-  >
   <div
     className="mx_MPollBody"
   >
@@ -2869,8 +2576,7 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
       Based on 3 votes
     </div>
   </div>
-  </MPollBody>
+</MPollBody>
-</Wrapper>
 `;
 
 exports[`MPollBody renders an undisclosed, finished poll 1`] = `"<div class=\\"mx_MPollBody\\"><h2>What should we order for the party?</h2><div class=\\"mx_MPollBody_allOptions\\"><div class=\\"mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended\\"><div class=\\"mx_MPollBody_endedOption mx_MPollBody_endedOptionWinner\\" data-value=\\"pizza\\"><div class=\\"mx_MPollBody_optionDescription\\"><div class=\\"mx_MPollBody_optionText\\">Pizza</div><div class=\\"mx_MPollBody_optionVoteCount\\">2 votes</div></div></div><div class=\\"mx_MPollBody_popularityBackground\\"><div class=\\"mx_MPollBody_popularityAmount\\" style=\\"width: 50%;\\"></div></div></div><div class=\\"mx_MPollBody_option mx_MPollBody_option_ended\\"><div class=\\"mx_MPollBody_endedOption\\" data-value=\\"poutine\\"><div class=\\"mx_MPollBody_optionDescription\\"><div class=\\"mx_MPollBody_optionText\\">Poutine</div><div class=\\"mx_MPollBody_optionVoteCount\\">0 votes</div></div></div><div class=\\"mx_MPollBody_popularityBackground\\"><div class=\\"mx_MPollBody_popularityAmount\\" style=\\"width: 0%;\\"></div></div></div><div class=\\"mx_MPollBody_option mx_MPollBody_option_ended\\"><div class=\\"mx_MPollBody_endedOption\\" data-value=\\"italian\\"><div class=\\"mx_MPollBody_optionDescription\\"><div class=\\"mx_MPollBody_optionText\\">Italian</div><div class=\\"mx_MPollBody_optionVoteCount\\">0 votes</div></div></div><div class=\\"mx_MPollBody_popularityBackground\\"><div class=\\"mx_MPollBody_popularityAmount\\" style=\\"width: 0%;\\"></div></div></div><div class=\\"mx_MPollBody_option mx_MPollBody_option_checked mx_MPollBody_option_ended\\"><div class=\\"mx_MPollBody_endedOption mx_MPollBody_endedOptionWinner\\" data-value=\\"wings\\"><div class=\\"mx_MPollBody_optionDescription\\"><div class=\\"mx_MPollBody_optionText\\">Wings</div><div class=\\"mx_MPollBody_optionVoteCount\\">2 votes</div></div></div><div class=\\"mx_MPollBody_popularityBackground\\"><div class=\\"mx_MPollBody_popularityAmount\\" style=\\"width: 50%;\\"></div></div></div></div><div class=\\"mx_MPollBody_totalVotes\\">Final result based on 4 votes</div></div>"`;

test/components/views/settings/FontScalingPanel-test.tsx

@@ -19,9 +19,7 @@ import { mount } from "enzyme";
 
 import '../../../skinned-sdk';
 import * as TestUtils from "../../../test-utils";
-import _FontScalingPanel from '../../../../src/components/views/settings/FontScalingPanel';
+import FontScalingPanel from '../../../../src/components/views/settings/FontScalingPanel';
-
-const FontScalingPanel = TestUtils.wrapInMatrixClientContext(_FontScalingPanel);
 
 // Fake random strings to give a predictable snapshot
 jest.mock(

test/components/views/settings/KeyboardShortcut-test.tsx

@@ -19,7 +19,7 @@ import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 
 import { Key } from "../../../../src/Keyboard";
-import PlatformPeg from "../../../../src/PlatformPeg";
+import { mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils/platform";
 
 const PATH_TO_COMPONENT = "../../../../src/components/views/settings/KeyboardShortcut.tsx";
 
@@ -31,6 +31,7 @@ const renderKeyboardShortcut = async (component, props?): Promise<ReactWrapper>
 describe("KeyboardShortcut", () => {
     beforeEach(() => {
         jest.resetModules();
+        unmockPlatformPeg();
     });
 
     it("renders key icon", async () => {
@@ -49,7 +50,7 @@ describe("KeyboardShortcut", () => {
     });
 
     it("doesn't render same modifier twice", async () => {
-        PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
+        mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
         const body1 = await renderKeyboardShortcut("KeyboardShortcut", {
             value: {
                 key: Key.A,

test/components/views/settings/Notifications-test.tsx

@@ -15,14 +15,14 @@ limitations under the License.
 import React from 'react';
 import { mount } from 'enzyme';
 import '../../../skinned-sdk';
-import { IPushRule, IPushRules, RuleId } from 'matrix-js-sdk/src/matrix';
+import { IPushRule, IPushRules, RuleId, IPusher } from 'matrix-js-sdk/src/matrix';
-import { ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
+import { IThreepid, ThreepidMedium } from 'matrix-js-sdk/src/@types/threepids';
 import { act } from 'react-dom/test-utils';
 
 import Notifications from '../../../../src/components/views/settings/Notifications';
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import { StandardActions } from '../../../../src/notifications/StandardActions';
+import { getMockClientWithEventEmitter } from '../../../test-utils';
 
 jest.mock('../../../../src/settings/SettingsStore', () => ({
     monitorSetting: jest.fn(),
@@ -64,7 +64,7 @@ describe('<Notifications />', () => {
         return component;
     };
 
-    const mockClient = {
+    const mockClient = getMockClientWithEventEmitter({
         getPushRules: jest.fn(),
         getPushers: jest.fn(),
         getThreePids: jest.fn(),
@@ -72,15 +72,11 @@ describe('<Notifications />', () => {
         setPushRuleEnabled: jest.fn(),
         setPushRuleActions: jest.fn(),
         getRooms: jest.fn().mockReturnValue([]),
-    };
+    });
     mockClient.getPushRules.mockResolvedValue(pushRules);
 
     const findByTestId = (component, id) => component.find(`[data-test-id="${id}"]`);
 
-    beforeAll(() => {
-        MatrixClientPeg.get = () => mockClient;
-    });
-
     beforeEach(() => {
         mockClient.getPushRules.mockClear().mockResolvedValue(pushRules);
         mockClient.getPushers.mockClear().mockResolvedValue({ pushers: [] });
@@ -124,7 +120,7 @@ describe('<Notifications />', () => {
                     ...pushRules.global,
                     override: [{ ...masterRule, enabled: true }],
                 },
-            };
+            } as unknown as IPushRules;
             mockClient.getPushRules.mockClear().mockResolvedValue(disableNotificationsPushRules);
             const component = await getComponentAndWait();
 
@@ -148,7 +144,7 @@ describe('<Notifications />', () => {
                         {
                             medium: ThreepidMedium.Email,
                             address: testEmail,
-                        },
+                        } as unknown as IThreepid,
                     ],
                 });
             });
@@ -160,7 +156,11 @@ describe('<Notifications />', () => {
             });
 
             it('renders email switches correctly when notifications are on for email', async () => {
-                mockClient.getPushers.mockResolvedValue({ pushers: [{ kind: 'email', pushkey: testEmail }] });
+                mockClient.getPushers.mockResolvedValue({
+                    pushers: [
+                        { kind: 'email', pushkey: testEmail } as unknown as IPusher,
+                    ],
+                });
                 const component = await getComponentAndWait();
 
                 expect(findByTestId(component, 'notif-email-switch').props().value).toEqual(true);
@@ -205,7 +205,7 @@ describe('<Notifications />', () => {
             });
 
             it('enables email notification when toggling off', async () => {
-                const testPusher = { kind: 'email', pushkey: 'tester@test.com' };
+                const testPusher = { kind: 'email', pushkey: 'tester@test.com' } as unknown as IPusher;
                 mockClient.getPushers.mockResolvedValue({ pushers: [testPusher] });
                 const component = await getComponentAndWait();
 

test/components/views/settings/ThemeChoicePanel-test.tsx

@@ -19,9 +19,7 @@ import { mount } from "enzyme";
 
 import '../../../skinned-sdk';
 import * as TestUtils from "../../../test-utils";
-import _ThemeChoicePanel from '../../../../src/components/views/settings/ThemeChoicePanel';
+import ThemeChoicePanel from '../../../../src/components/views/settings/ThemeChoicePanel';
-
-const ThemeChoicePanel = TestUtils.wrapInMatrixClientContext(_ThemeChoicePanel);
 
 // Fake random strings to give a predictable snapshot
 jest.mock(

test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FontScalingPanel renders the font scaling UI 1`] = `
-<Wrapper>
+<FontScalingPanel>
-  <FontScalingPanel>
   <div
     className="mx_SettingsTab_section mx_FontScalingPanel"
   >
@@ -308,6 +307,5 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
       </div>
     </Field>
   </div>
-  </FontScalingPanel>
+</FontScalingPanel>
-</Wrapper>
 `;

test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
-<Wrapper>
+<ThemeChoicePanel>
-  <ThemeChoicePanel>
   <div
     className="mx_SettingsTab_section mx_ThemeChoicePanel"
   >
@@ -110,6 +109,5 @@ exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
       </StyledRadioGroup>
     </div>
   </div>
-  </ThemeChoicePanel>
+</ThemeChoicePanel>
-</Wrapper>
 `;

test/components/views/spaces/QuickThemeSwitcher-test.tsx

@@ -28,7 +28,7 @@ import { findById } from '../../../test-utils';
 import { SettingLevel } from '../../../../src/settings/SettingLevel';
 import dis from '../../../../src/dispatcher/dispatcher';
 import { Action } from '../../../../src/dispatcher/actions';
-import PlatformPeg from "../../../../src/PlatformPeg";
+import { mockPlatformPeg } from '../../../test-utils/platform';
 
 jest.mock('../../../../src/theme');
 jest.mock('../../../../src/components/views/settings/ThemeChoicePanel', () => ({
@@ -45,7 +45,7 @@ jest.mock('../../../../src/dispatcher/dispatcher', () => ({
     register: jest.fn(),
 }));
 
-PlatformPeg.get = () => ({ overrideBrowserShortcuts: () => false });
+mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
 
 describe('<QuickThemeSwitcher />', () => {
     const defaultProps = {

test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -1,6 +1,7 @@
 // skinned-sdk should be the first import in most tests
 import '../../../skinned-sdk';
 import React from "react";
+import { mocked } from 'jest-mock';
 import {
     renderIntoDocument,
     Simulate,
@@ -53,11 +54,10 @@ describe('<SpaceSettingsVisibilityTab />', () => {
         ];
         const space = mkSpace(client, mockSpaceId);
         const getStateEvents = mockStateEventImplementation(events);
-        space.currentState.getStateEvents.mockImplementation(getStateEvents);
+        mocked(space.currentState).getStateEvents.mockImplementation(getStateEvents);
-        space.currentState.mayClientSendStateEvent.mockReturnValue(false);
+        mocked(space.currentState).mayClientSendStateEvent.mockReturnValue(false);
-        const mockGetJoinRule = jest.fn().mockReturnValue(joinRule);
+        space.getJoinRule.mockReturnValue(joinRule);
-        space.getJoinRule = mockGetJoinRule;
+        mocked(space.currentState).getJoinRule.mockReturnValue(joinRule);
-        space.currentState.getJoinRule = mockGetJoinRule;
         return space as unknown as Room;
     };
     const defaultProps = {
@@ -70,6 +70,7 @@ describe('<SpaceSettingsVisibilityTab />', () => {
         const wrapper = renderIntoDocument<HTMLSpanElement>(
             // wrap in element so renderIntoDocument can render functional component
             <span>
+                { /* @ts-ignore */ }
                 <SpaceSettingsVisibilityTab {...defaultProps} {...props} />
             </span>,
         ) as HTMLSpanElement;

tsconfig.json

@@ -28,14 +28,8 @@
     "./test/utils/**/*.tsx",
     "./test/stores/**/*.ts",
     "./test/stores/**/*.tsx",
-    "./test/components/structures/**/*.ts",
+    "./test/components/**/*.tsx",
-    "./test/components/structures/**/*.tsx",
+    "./test/components/**/*.ts",
-    "./test/components/views/context_menus/**/*.ts",
-    "./test/components/views/context_menus/**/*.tsx",
-    "./test/components/views/rooms/**/*.tsx",
-    "./test/components/views/rooms/**/*.ts",
-    "./test/components/views/right_panel/**/*.tsx",
-    "./test/components/views/right_panel/**/*.ts",
   ],
   "exclude": [
     "./test/end-to-end-tests/"