Refactor some logic into common AvatarSetting component (#12544)

* Refactor some logic into common AvatarSetting component

We duplicated some of the logic of setting avatars between profiles &
rooms. This pulls some of that logic into the AvatarSetting component
and hopefully make things a little simpler.

* Unsed import

* Convert JS based hover to CSS

* Remove unnecessary container

* Test avatar-as-file path

* Test file upload

* Unused imports

* Add test for RoomProfileSettings

* Test removing room avatar

* Move upload control CSS too

* Remove commented code

Co-authored-by: Florian Duros <florianduros@element.io>

* Prettier

* Coments & move style to inline as per PR suggestion

* Better test names

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Fix test

Upload input doesn't have that class anymore

---------

Co-authored-by: Florian Duros <florianduros@element.io>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

test/components/views/room_settings/RoomProfileSettings-test.tsx

@@ -0,0 +1,105 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+import { EventType, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import { mkStubRoom, stubClient } from "../../../test-utils";
+import RoomProfileSettings from "../../../../src/components/views/room_settings/RoomProfileSettings";
+
+const BASE64_GIF = "R0lGODlhAQABAAAAACw=";
+const AVATAR_FILE = new File([Uint8Array.from(atob(BASE64_GIF), (c) => c.charCodeAt(0))], "avatar.gif", {
+    type: "image/gif",
+});
+
+const ROOM_ID = "!floob:itty";
+
+describe("RoomProfileSetting", () => {
+    let client: MatrixClient;
+    let room: Room;
+
+    beforeEach(() => {
+        client = stubClient();
+        room = mkStubRoom(ROOM_ID, "Test room", client);
+    });
+
+    it("handles uploading a room avatar", async () => {
+        const user = userEvent.setup();
+        mocked(client.uploadContent).mockResolvedValue({ content_uri: "mxc://matrix.org/1234" });
+
+        render(<RoomProfileSettings roomId={ROOM_ID} />);
+
+        await user.upload(screen.getByAltText("Upload"), AVATAR_FILE);
+
+        await user.click(screen.getByRole("button", { name: "Save" }));
+
+        await waitFor(() => expect(client.uploadContent).toHaveBeenCalledWith(AVATAR_FILE));
+        await waitFor(() =>
+            expect(client.sendStateEvent).toHaveBeenCalledWith(
+                ROOM_ID,
+                EventType.RoomAvatar,
+                {
+                    url: "mxc://matrix.org/1234",
+                },
+                "",
+            ),
+        );
+    });
+
+    it("removes a room avatar", async () => {
+        const user = userEvent.setup();
+
+        mocked(client).getRoom.mockReturnValue(room);
+        mocked(room).currentState.getStateEvents.mockImplementation(
+            // @ts-ignore
+            (type: string): MatrixEvent[] | MatrixEvent | null => {
+                if (type === EventType.RoomAvatar) {
+                    // @ts-ignore
+                    return { getContent: () => ({ url: "mxc://matrix.org/1234" }) };
+                }
+                return null;
+            },
+        );
+
+        render(<RoomProfileSettings roomId="!floob:itty" />);
+
+        await user.click(screen.getByRole("button", { name: "Remove" }));
+        await user.click(screen.getByRole("button", { name: "Save" }));
+
+        await waitFor(() =>
+            expect(client.sendStateEvent).toHaveBeenCalledWith("!floob:itty", EventType.RoomAvatar, {}, ""),
+        );
+    });
+
+    it("cancels changes", async () => {
+        const user = userEvent.setup();
+
+        render(<RoomProfileSettings roomId="!floob:itty" />);
+
+        const roomNameInput = screen.getByLabelText("Room Name");
+        expect(roomNameInput).toHaveValue("");
+
+        await user.type(roomNameInput, "My Room");
+        expect(roomNameInput).toHaveValue("My Room");
+
+        await user.click(screen.getByRole("button", { name: "Cancel" }));
+
+        expect(roomNameInput).toHaveValue("");
+    });
+});

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

@@ -14,18 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import AvatarSetting from "../../../../src/components/views/settings/AvatarSetting";
+import { stubClient } 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("<AvatarSetting />", () => {
+    beforeEach(() => {
+        stubClient();
+    });
+
     it("renders avatar with specified alt text", async () => {
         const { queryByAltText } = render(
-            <AvatarSetting
-                avatarName="Peter Fox"
-                avatarAltText="Avatar of Peter Fox"
-                avatarUrl="https://avatar.fictional/my-avatar"
-            />,
+            <AvatarSetting avatarAltText="Avatar of Peter Fox" avatar="mxc://example.org/my-avatar" />,
         );
 
         const imgElement = queryByAltText("Avatar of Peter Fox");
@@ -35,9 +42,8 @@ describe("<AvatarSetting />", () => {
     it("renders avatar with remove button", async () => {
         const { queryByText } = render(
             <AvatarSetting
-                avatarName="Peter Fox"
                 avatarAltText="Avatar of Peter Fox"
-                avatarUrl="https://avatar.fictional/my-avatar"
+                avatar="mxc://example.org/my-avatar"
                 removeAvatar={jest.fn()}
             />,
         );
@@ -47,9 +53,38 @@ describe("<AvatarSetting />", () => {
     });
 
     it("renders avatar without remove button", async () => {
-        const { queryByText } = render(<AvatarSetting avatarName="Peter Fox" avatarAltText="Avatar of Peter Fox" />);
+        const { queryByText } = render(<AvatarSetting disabled={true} avatarAltText="Avatar of Peter Fox" />);
 
         const removeButton = queryByText("Remove");
         expect(removeButton).toBeNull();
     });
+
+    it("renders a file as the avatar when supplied", async () => {
+        render(<AvatarSetting avatarAltText="Avatar of Peter Fox" avatar={AVATAR_FILE} />);
+
+        const imgElement = await screen.findByRole("button", { name: "Avatar of Peter Fox" });
+        expect(imgElement).toBeInTheDocument();
+        expect(imgElement).toHaveAttribute("src", "data:image/gif;base64," + BASE64_GIF);
+    });
+
+    it("calls onChange when a file is uploaded", async () => {
+        const onChange = jest.fn();
+        const user = userEvent.setup();
+
+        render(
+            <AvatarSetting
+                avatar="mxc://example.org/my-avatar"
+                avatarAltText="Avatar of Peter Fox"
+                onChange={onChange}
+            />,
+        );
+
+        // not really necessary, but to follow the expected user flow as much as possible
+        await user.click(screen.getByRole("button", { name: "Avatar of Peter Fox" }));
+
+        const fileInput = screen.getByAltText("Upload");
+        await user.upload(fileInput, AVATAR_FILE);
+
+        expect(onChange).toHaveBeenCalledWith(AVATAR_FILE);
+    });
 });