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>
2025-08-09 08:42:50 +03:00 · 2022-03-22 11:32:35 +01:00
parent 2bf1d2b287
commit abc225d3c6
16 changed files with 2663 additions and 3038 deletions
--- a/test/components/views/messages/DateSeparator-test.tsx
+++ b/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 = TestUtils.wrapInMatrixClientContext(_DateSeparator);
+const DateSeparator = sdk.getComponent("views.messages.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;
                }
--- a/test/components/views/messages/MLocationBody-test.tsx
+++ b/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);
        });

--- a/test/components/views/messages/MPollBody-test.tsx
+++ b/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 { ISendEventResponse } from "matrix-js-sdk/src/@types/requests";
+import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 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 = TestUtils.wrapInMatrixClientContext(_MPollBody);
+const MPollBody = sdk.getComponent("views.messages.MPollBody");

-MatrixClientPeg.matrixClient = {
-    getUserId: () => "@me:example.com",
-    sendEvent: () => Promise.resolve({ "event_id": "fake_send_id" }),
-};
-setRedactionAllowedForMeOnly(MatrixClientPeg.matrixClient);
+const mockClient = getMockClientWithEventEmitter({
+    getUserId: jest.fn().mockReturnValue("@me:example.com"),
+    sendEvent: jest.fn().mockReturnValue(Promise.resolve({ "event_id": "fake_send_id" })),
+    getRoom: jest.fn(),
+});
+
+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(matrixClient);
+        setRedactionAllowedForMeOnly(mockClient);

        expect(
            pollEndTs(
                { getRoomId: () => "$room" } as MatrixEvent,
-                matrixClient,
+                mockClient,
                endRelations,
            ),
        ).toBe(12);
@@ -132,13 +137,12 @@ describe("MPollBody", () => {
            ]),
        ]);

-        const matrixClient = TestUtils.createTestClient();
-        setRedactionAllowedForMeOnly(matrixClient);
+        setRedactionAllowedForMeOnly(mockClient);

        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([
-            expectedResponseEvent("wings"),
-        ]);
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("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([
-            expectedResponseEvent("wings"),
-        ]);
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(
+            ...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([
-            expectedResponseEvent("wings"),
-            expectedResponseEvent("italian"),
-            expectedResponseEvent("poutine"),
-        ]);
+        expect(mockClient.sendEvent).toHaveBeenCalledTimes(3);
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("wings"));
+        expect(mockClient.sendEvent).toHaveBeenCalledWith(...expectedResponseEventCall("italian"));
+        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(matrixClient);
-        expect(isPollEnded(pollEvent, matrixClient, undefined)).toBe(false);
+        setRedactionAllowedForMeOnly(mockClient);
+        expect(isPollEnded(pollEvent, mockClient, 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(matrixClient);
+    setRedactionAllowedForMeOnly(mockClient);

    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) {
-    matrixClient.getRoom = (_roomId: string) => {
+function setRedactionAllowedForMeOnly(matrixClient: MockedObject<MatrixClient>) {
+    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;
--- a/test/components/views/messages/snapshots/DateSeparator-test.tsx.snap
+++ b/test/components/views/messages/snapshots/DateSeparator-test.tsx.snap
@@ -1,116 +1,106 @@
 // 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"
+    role="separator"
+    tabIndex={-1}
  >
-    <h2
-      aria-label="Today"
-      className="mx_DateSeparator"
-      role="separator"
-      tabIndex={-1}
+    <hr
+      role="none"
+    />
+    <div
+      aria-hidden="true"
    >
-      <hr
-        role="none"
-      />
-      <div
-        aria-hidden="true"
-      >
-        Today
-      </div>
-      <hr
-        role="none"
-      />
-    </h2>
-  </DateSeparator>
-</Wrapper>
+      Today
+    </div>
+    <hr
+      role="none"
+    />
+  </h2>
+</DateSeparator>
 `;

 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"
+    role="separator"
+    tabIndex={-1}
  >
-    <h2
-      aria-label="Fri, Dec 17 2021"
-      className="mx_DateSeparator"
-      role="separator"
-      tabIndex={-1}
+    <hr
+      role="none"
+    />
+    <ContextMenuTooltipButton
+      className="mx_DateSeparator_jumpToDateMenu"
+      isExpanded={false}
+      onClick={[Function]}
+      title="Jump to date"
    >
-      <hr
-        role="none"
-      />
-      <ContextMenuTooltipButton
+      <AccessibleTooltipButton
+        aria-expanded={false}
+        aria-haspopup={true}
        className="mx_DateSeparator_jumpToDateMenu"
-        isExpanded={false}
+        forceHide={false}
        onClick={[Function]}
+        onContextMenu={[Function]}
        title="Jump to date"
      >
-        <AccessibleTooltipButton
+        <AccessibleButton
          aria-expanded={false}
          aria-haspopup={true}
+          aria-label="Jump to date"
          className="mx_DateSeparator_jumpToDateMenu"
-          forceHide={false}
+          element="div"
+          onBlur={[Function]}
          onClick={[Function]}
          onContextMenu={[Function]}
-          title="Jump to date"
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseOver={[Function]}
+          role="button"
+          tabIndex={0}
        >
-          <AccessibleButton
+          <div
            aria-expanded={false}
            aria-haspopup={true}
            aria-label="Jump to date"
-            className="mx_DateSeparator_jumpToDateMenu"
-            element="div"
+            className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
            onBlur={[Function]}
            onClick={[Function]}
            onContextMenu={[Function]}
            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
            onMouseLeave={[Function]}
            onMouseOver={[Function]}
            role="button"
            tabIndex={0}
          >
            <div
-              aria-expanded={false}
-              aria-haspopup={true}
-              aria-label="Jump to date"
-              className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onContextMenu={[Function]}
-              onFocus={[Function]}
-              onKeyDown={[Function]}
-              onKeyUp={[Function]}
-              onMouseLeave={[Function]}
-              onMouseOver={[Function]}
-              role="button"
-              tabIndex={0}
+              aria-hidden="true"
            >
-              <div
-                aria-hidden="true"
-              >
-                Fri, Dec 17 2021
-              </div>
-              <div
-                className="mx_DateSeparator_chevron"
-              />
+              Fri, Dec 17 2021
            </div>
-          </AccessibleButton>
-        </AccessibleTooltipButton>
-      </ContextMenuTooltipButton>
-      <hr
-        role="none"
-      />
-    </h2>
-  </DateSeparator>
-</Wrapper>
+            <div
+              className="mx_DateSeparator_chevron"
+            />
+          </div>
+        </AccessibleButton>
+      </AccessibleTooltipButton>
+    </ContextMenuTooltipButton>
+    <hr
+      role="none"
+    />
+  </h2>
+</DateSeparator>
 `;
--- a/test/components/views/messages/snapshots/MPollBody-test.tsx.snap
+++ b/test/components/views/messages/snapshots/MPollBody-test.tsx.snap