imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor some logic into common AvatarSetting component (#12544)

Browse source 
* 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>
This commit is contained in:
David Baker 2024-05-21 11:37:02 +01:00 • committed by GitHub
parent f6e919021a
commit 3342aa5ff8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 296 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

53
test/components/views/settings/AvatarSetting-test.tsx
View file

@ -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);
});
});