/* Copyright 2024 New Vector Ltd. Copyright 2024 The Matrix.org Foundation C.I.C. 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, { ChangeEvent } from "react"; import { act, render, screen } from "jest-matrix-react"; import { MatrixClient, UploadResponse } from "matrix-js-sdk/src/matrix"; import { mocked } from "jest-mock"; import userEvent from "@testing-library/user-event"; import { TooltipProvider } from "@vector-im/compound-web"; import UserProfileSettings from "../../../../src/components/views/settings/UserProfileSettings"; import { mkStubRoom, stubClient } from "../../../test-utils"; import { ToastContext, ToastRack } from "../../../../src/contexts/ToastContext"; import { OwnProfileStore } from "../../../../src/stores/OwnProfileStore"; import MatrixClientContext from "../../../../src/contexts/MatrixClientContext"; import dis from "../../../../src/dispatcher/dispatcher"; import Modal from "../../../../src/Modal"; interface MockedAvatarSettingProps { removeAvatar: () => void; onChange: (file: File) => void; } let removeAvatarFn: () => void; let changeAvatarFn: (file: File) => void; jest.mock( "../../../../src/components/views/settings/AvatarSetting", () => (({ removeAvatar, onChange }) => { removeAvatarFn = removeAvatar; changeAvatarFn = onChange; return
Mocked AvatarSetting
; }) as React.FC, ); jest.mock("../../../../src/dispatcher/dispatcher", () => ({ dispatch: jest.fn(), register: jest.fn(), })); let editInPlaceOnChange: (e: ChangeEvent) => void; let editInPlaceOnSave: () => void; let editInPlaceOnCancel: () => void; interface MockedEditInPlaceProps { onChange: (e: ChangeEvent) => void; onSave: () => void; onCancel: () => void; value: string; } jest.mock("@vector-im/compound-web", () => { const compound = jest.requireActual("@vector-im/compound-web"); return { __esModule: true, ...compound, EditInPlace: (({ onChange, onSave, onCancel, value }) => { editInPlaceOnChange = onChange; editInPlaceOnSave = onSave; editInPlaceOnCancel = onCancel; return
Mocked EditInPlace: {value}
; }) as React.FC, }; }); const renderProfileSettings = (toastRack: Partial, client: MatrixClient) => { return render( , ); }; describe("ProfileSettings", () => { let client: MatrixClient; let toastRack: Partial; beforeEach(() => { client = stubClient(); toastRack = { displayToast: jest.fn().mockReturnValue(jest.fn()), }; }); it("removes avatar", async () => { jest.spyOn(OwnProfileStore.instance, "avatarMxc", "get").mockReturnValue("mxc://example.org/my-avatar"); renderProfileSettings(toastRack, client); expect(await screen.findByText("Mocked AvatarSetting")).toBeInTheDocument(); expect(removeAvatarFn).toBeDefined(); act(() => { removeAvatarFn(); }); expect(client.setAvatarUrl).toHaveBeenCalledWith(""); }); it("changes avatar", async () => { renderProfileSettings(toastRack, client); expect(await screen.findByText("Mocked AvatarSetting")).toBeInTheDocument(); expect(changeAvatarFn).toBeDefined(); const returnedMxcUri = "mxc://example.org/my-avatar"; mocked(client).uploadContent.mockResolvedValue({ content_uri: returnedMxcUri }); const fileSentinel = {}; await act(async () => { await changeAvatarFn(fileSentinel as File); }); expect(client.uploadContent).toHaveBeenCalledWith(fileSentinel); expect(client.setAvatarUrl).toHaveBeenCalledWith(returnedMxcUri); }); it("displays toast while uploading avatar", async () => { renderProfileSettings(toastRack, client); const clearToastFn = jest.fn(); mocked(toastRack.displayToast!).mockReturnValue(clearToastFn); expect(await screen.findByText("Mocked AvatarSetting")).toBeInTheDocument(); expect(changeAvatarFn).toBeDefined(); let resolveUploadPromise = (r: UploadResponse) => {}; const uploadPromise = new Promise((r) => { resolveUploadPromise = r; }); mocked(client).uploadContent.mockReturnValue(uploadPromise); const fileSentinel = {}; const changeAvatarActPromise = act(async () => { await changeAvatarFn(fileSentinel as File); }); expect(toastRack.displayToast).toHaveBeenCalled(); act(() => { resolveUploadPromise({ content_uri: "bloop" }); }); await changeAvatarActPromise; expect(clearToastFn).toHaveBeenCalled(); }); it("changes display name", async () => { jest.spyOn(OwnProfileStore.instance, "displayName", "get").mockReturnValue("Alice"); renderProfileSettings(toastRack, client); expect(await screen.findByText("Mocked EditInPlace: Alice")).toBeInTheDocument(); expect(editInPlaceOnSave).toBeDefined(); act(() => { editInPlaceOnChange({ target: { value: "The Value" } as HTMLInputElement, } as ChangeEvent); }); await act(async () => { await editInPlaceOnSave(); }); expect(client.setDisplayName).toHaveBeenCalledWith("The Value"); }); it("displays error if changing display name fails", async () => { jest.spyOn(OwnProfileStore.instance, "displayName", "get").mockReturnValue("Alice"); mocked(client).setDisplayName.mockRejectedValue(new Error("Failed to set display name")); renderProfileSettings(toastRack, client); expect(editInPlaceOnSave).toBeDefined(); act(() => { editInPlaceOnChange({ target: { value: "Not Alice any more" } as HTMLInputElement, } as ChangeEvent); }); await act(async () => { await expect(editInPlaceOnSave()).rejects.toEqual(expect.any(Error)); }); }); it("resets on cancel", async () => { jest.spyOn(OwnProfileStore.instance, "displayName", "get").mockReturnValue("Alice"); renderProfileSettings(toastRack, client); expect(await screen.findByText("Mocked EditInPlace: Alice")).toBeInTheDocument(); expect(editInPlaceOnChange).toBeDefined(); expect(editInPlaceOnCancel).toBeDefined(); act(() => { editInPlaceOnChange({ target: { value: "Alicia Zattic" } as HTMLInputElement, } as ChangeEvent); }); expect(await screen.findByText("Mocked EditInPlace: Alicia Zattic")).toBeInTheDocument(); act(() => { editInPlaceOnCancel(); }); expect(await screen.findByText("Mocked EditInPlace: Alice")).toBeInTheDocument(); }); it("signs out directly if no rooms are encrypted", async () => { renderProfileSettings(toastRack, client); const signOutButton = await screen.findByText("Sign out"); await userEvent.click(signOutButton); expect(dis.dispatch).toHaveBeenCalledWith({ action: "logout" }); }); it("displays confirmation dialog if rooms are encrypted", async () => { jest.spyOn(Modal, "createDialog"); const mockRoom = mkStubRoom("!test:room", "Test Room", client); client.getRooms = jest.fn().mockReturnValue([mockRoom]); client.getCrypto = jest.fn().mockReturnValue({ isEncryptionEnabledInRoom: jest.fn().mockReturnValue(true), }); renderProfileSettings(toastRack, client); const signOutButton = await screen.findByText("Sign out"); await userEvent.click(signOutButton); expect(Modal.createDialog).toHaveBeenCalled(); }); });