Merge branch 'develop' of https://github.com/vector-im/element-web into dbkr/stateafter

# Conflicts: # test/unit-tests/components/structures/RoomView-test.tsx # test/unit-tests/components/structures/TimelinePanel-test.tsx
2024-11-27 10:47:35 +00:00
parent f3d0fc4d68 2b883a8aa0
commit 3dbcb5efa3
438 changed files with 7829 additions and 4692 deletions
--- a/test/unit-tests/components/views/elements/AppTile-test.tsx
+++ b/test/unit-tests/components/views/elements/AppTile-test.tsx
@@ -7,13 +7,11 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { jest } from "@jest/globals";
 import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, IWidget, MatrixWidgetType } from "matrix-widget-api";
 import { Optional } from "matrix-events-sdk";
-import { act, render, RenderResult } from "jest-matrix-react";
+import { act, render, RenderResult, waitForElementToBeRemoved, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
-import { SpiedFunction } from "jest-mock";
 import {
    ApprovalOpts,
    WidgetInfo,
@@ -31,7 +29,6 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
 import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
-import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore";
 import WidgetStore, { IApp } from "../../../../../src/stores/WidgetStore";
 import ActiveWidgetStore from "../../../../../src/stores/ActiveWidgetStore";
 import AppTile from "../../../../../src/components/views/elements/AppTile";
@@ -61,16 +58,6 @@ describe("AppTile", () => {
    let app1: IApp;
    let app2: IApp;

-    const waitForRps = (roomId: string) =>
-        new Promise<void>((resolve) => {
-            const update = () => {
-                if (RightPanelStore.instance.currentCardForRoom(roomId).phase !== RightPanelPhases.Widget) return;
-                RightPanelStore.instance.off(UPDATE_EVENT, update);
-                resolve();
-            };
-            RightPanelStore.instance.on(UPDATE_EVENT, update);
-        });
-
    beforeAll(async () => {
        stubClient();
        cli = MatrixClientPeg.safeGet();
@@ -162,29 +149,28 @@ describe("AppTile", () => {
                />
            </MatrixClientContext.Provider>,
        );
-        // Wait for RPS room 1 updates to fire
-        const rpsUpdated = waitForRps("r1");
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r1",
-        });
-        await rpsUpdated;
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r1",
+            }),
+        );

-        expect(renderResult.getByText("Example 1")).toBeInTheDocument();
+        await expect(renderResult.findByText("Example 1")).resolves.toBeInTheDocument();
        expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);

-        const { container, asFragment } = renderResult;
-        expect(container.getElementsByClassName("mx_Spinner").length).toBeTruthy();
+        const { asFragment } = renderResult;
        expect(asFragment()).toMatchSnapshot();
-
        // We want to verify that as we change to room 2, we should close the
        // right panel and destroy the widget.

        // Switch to room 2
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r2",
-        });
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r2",
+            }),
+        );

        renderResult.rerender(
            <MatrixClientContext.Provider value={cli}>
@@ -235,16 +221,17 @@ describe("AppTile", () => {
                />
            </MatrixClientContext.Provider>,
        );
-        // Wait for RPS room 1 updates to fire
-        const rpsUpdated1 = waitForRps("r1");
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r1",
-        });
-        await rpsUpdated1;
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r1",
+            }),
+        );

-        expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
-        expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(false);
+        await waitFor(() => {
+            expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
+            expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(false);
+        });

        jest.spyOn(SettingsStore, "getValue").mockImplementation((name, roomId) => {
            if (name === "RightPanel.phases") {
@@ -265,13 +252,13 @@ describe("AppTile", () => {
            }
            return realGetValue(name, roomId);
        });
-        // Wait for RPS room 2 updates to fire
-        const rpsUpdated2 = waitForRps("r2");
        // Switch to room 2
-        dis.dispatch({
-            action: Action.ViewRoom,
-            room_id: "r2",
-        });
+        act(() =>
+            dis.dispatch({
+                action: Action.ViewRoom,
+                room_id: "r2",
+            }),
+        );
        renderResult.rerender(
            <MatrixClientContext.Provider value={cli}>
                <RightPanel
@@ -281,10 +268,11 @@ describe("AppTile", () => {
                />
            </MatrixClientContext.Provider>,
        );
-        await rpsUpdated2;

-        expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(false);
-        expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(true);
+        await waitFor(() => {
+            expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(false);
+            expect(ActiveWidgetStore.instance.isLive("1", "r2")).toBe(true);
+        });
    });

    it("preserves non-persisted widget on container move", async () => {
@@ -345,9 +333,9 @@ describe("AppTile", () => {

    describe("for a pinned widget", () => {
        let renderResult: RenderResult;
-        let moveToContainerSpy: SpiedFunction<typeof WidgetLayoutStore.instance.moveToContainer>;
+        let moveToContainerSpy: jest.SpyInstance<void, [room: Room, widget: IWidget, toContainer: Container]>;

-        beforeEach(() => {
+        beforeEach(async () => {
            renderResult = render(
                <MatrixClientContext.Provider value={cli}>
                    <AppTile key={app1.id} app={app1} room={r1} />
@@ -355,12 +343,12 @@ describe("AppTile", () => {
            );

            moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
+            await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
        });

        it("should render", () => {
-            const { container, asFragment } = renderResult;
+            const { asFragment } = renderResult;

-            expect(container.querySelector(".mx_Spinner")).toBeFalsy(); // Assert that the spinner is gone
            expect(asFragment()).toMatchSnapshot(); // Take a snapshot of the pinned widget
        });

@@ -461,18 +449,19 @@ describe("AppTile", () => {
    describe("for a persistent app", () => {
        let renderResult: RenderResult;

-        beforeEach(() => {
+        beforeEach(async () => {
            renderResult = render(
                <MatrixClientContext.Provider value={cli}>
                    <AppTile key={app1.id} app={app1} fullWidth={true} room={r1} miniMode={true} showMenubar={false} />
                </MatrixClientContext.Provider>,
            );
+
+            await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
        });

-        it("should render", () => {
-            const { container, asFragment } = renderResult;
+        it("should render", async () => {
+            const { asFragment } = renderResult;

-            expect(container.querySelector(".mx_Spinner")).toBeFalsy();
            expect(asFragment()).toMatchSnapshot();
        });
    });
--- a/test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx
+++ b/test/unit-tests/components/views/elements/MiniAvatarUploader-test.tsx
@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+
+import MiniAvatarUploader from "../../../../../src/components/views/elements/MiniAvatarUploader.tsx";
+import { stubClient, withClientContextRenderOptions } from "../../../../test-utils";
+
+const BASE64_GIF = "R0lGODlhAQABAAAAACw=";
+const AVATAR_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "avatar.gif", {
+    type: "image/gif",
+});
+
+describe("<MiniAvatarUploader />", () => {
+    it("calls setAvatarUrl when a file is uploaded", async () => {
+        const cli = stubClient();
+        mocked(cli.uploadContent).mockResolvedValue({ content_uri: "mxc://example.com/1234" });
+
+        const setAvatarUrl = jest.fn();
+        const user = userEvent.setup();
+
+        const { container, findByText } = render(
+            <MiniAvatarUploader hasAvatar={false} noAvatarLabel="Upload" setAvatarUrl={setAvatarUrl} isUserAvatar />,
+            withClientContextRenderOptions(cli),
+        );
+
+        await findByText("Upload");
+        await user.upload(container.querySelector("input")!, AVATAR_FILE);
+
+        expect(cli.uploadContent).toHaveBeenCalledWith(AVATAR_FILE);
+        expect(setAvatarUrl).toHaveBeenCalledWith("mxc://example.com/1234");
+    });
+});
--- a/test/unit-tests/components/views/elements/Pill-test.tsx
+++ b/test/unit-tests/components/views/elements/Pill-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */

 import React from "react";
-import { act, render, RenderResult, screen } from "jest-matrix-react";
+import { render, RenderResult, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { mocked, Mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
@@ -214,9 +214,7 @@ describe("<Pill>", () => {
        });

        // wait for profile query via API
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();

        expect(renderResult.asFragment()).toMatchSnapshot();
    });
@@ -228,9 +226,7 @@ describe("<Pill>", () => {
        });

        // wait for profile query via API
-        await act(async () => {
-            await flushPromises();
-        });
+        await flushPromises();

        expect(renderResult.asFragment()).toMatchSnapshot();
    });
--- a/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/AppTile-test.tsx.snap
@@ -60,29 +60,9 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
        id="1"
      >
        <div
-          class="mx_AppTileBody mx_AppTileBody--large"
+          class="mx_AppTile_persistedWrapper"
        >
-          <div
-            class="mx_AppTileBody_fadeInSpinner"
-          >
-            <div
-              class="mx_Spinner"
-            >
-              <div
-                class="mx_Spinner_Msg"
-              >
-                Loading…
-              </div>
-               
-              <div
-                aria-label="Loading…"
-                class="mx_Spinner_icon"
-                data-testid="spinner"
-                role="progressbar"
-                style="width: 32px; height: 32px;"
-              />
-            </div>
-          </div>
+          <div />
        </div>
      </div>
    </div>
@@ -356,8 +336,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
            <span>
              Using this widget may share data 
              <div
-                aria-describedby=":r2n:"
-                aria-labelledby=":r2m:"
+                aria-describedby=":r2j:"
+                aria-labelledby=":r2i:"
                class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
              >
                <svg
--- a/test/unit-tests/components/views/elements/snapshots/ImageView-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/snapshots/ImageView-test.tsx.snap
@@ -21,7 +21,6 @@ exports[`<ImageView /> renders correctly 1`] = `
        class="mx_ImageView_toolbar"
      >
        <div
-          aria-describedby=":r2:"
          aria-label="Zoom out"
          class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
          role="button"