Member avatars without canvas (#9990)
* Strict typechecking fixes for Base/Member/Avatar Update the core avatar files to pass `--strict --noImplicitAny` typechecks. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Add tests for Base/Member/Avatar More thoroughly test the core avatar files. Not necessarily the most thorough, but an improvement. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Extract TextAvatar from BaseAvatar Extracted the fallback/textual avatar into its own component. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Use standard HTML for non-image avatars Firefox users with `resistFingerprinting` enabled were seeing random noise for rooms and users without avatars. There's no real reason to use data URLs to present flat colors. This converts non-image avatars to inline blocks with background colors. See https://github.com/vector-im/element-web/issues/23936 Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Have pills use solid backgrounds rather than colored images Similar to room and member avatars, pills now use colored pseudo-elements rather than background images. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> --------- Signed-off-by: Clark Fischer <clark.fischer@gmail.com> Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
This commit is contained in:
Clark Fischer
GitHub
parent
64cec31981
commit
a8aa4de4b4
22 changed files with 806 additions and 311 deletions
|
|
@ -20,22 +20,16 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 24px; height: 24px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 24px; height: 24px; font-size: 15.600000000000001px; line-height: 24px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 24px; height: 24px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -119,22 +113,16 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 24px; height: 24px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 24px; height: 24px; font-size: 15.600000000000001px; line-height: 24px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 24px; height: 24px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -215,23 +203,17 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
|
|||
aria-live="off"
|
||||
class="mx_AccessibleButton mx_BaseAvatar"
|
||||
role="button"
|
||||
style="width: 52px; height: 52px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 52px; height: 52px; font-size: 33.800000000000004px; line-height: 52px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 52px; height: 52px;"
|
||||
/>
|
||||
</span>
|
||||
<h2>
|
||||
@user:example.com
|
||||
|
|
@ -314,22 +296,16 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 24px; height: 24px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 24px; height: 24px; font-size: 15.600000000000001px; line-height: 24px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 24px; height: 24px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -410,23 +386,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
|||
aria-live="off"
|
||||
class="mx_AccessibleButton mx_BaseAvatar"
|
||||
role="button"
|
||||
style="width: 52px; height: 52px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 52px; height: 52px; font-size: 33.800000000000004px; line-height: 52px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 52px; height: 52px;"
|
||||
/>
|
||||
</span>
|
||||
<h2>
|
||||
@user:example.com
|
||||
|
|
@ -581,22 +551,16 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 24px; height: 24px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 24px; height: 24px; font-size: 15.600000000000001px; line-height: 24px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 24px; height: 24px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -672,23 +636,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
aria-live="off"
|
||||
class="mx_AccessibleButton mx_BaseAvatar"
|
||||
role="button"
|
||||
style="width: 52px; height: 52px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 52px; height: 52px; font-size: 33.800000000000004px; line-height: 52px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 52px; height: 52px;"
|
||||
/>
|
||||
</span>
|
||||
<h2>
|
||||
@user:example.com
|
||||
|
|
|
|||
|
|
@ -20,22 +20,16 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
|
|||
<span
|
||||
class="mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 32px; height: 32px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 20.8px; width: 32px; line-height: 32px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(54, 139, 214); width: 32px; height: 32px; font-size: 20.8px; line-height: 32px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 32px; height: 32px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
201
test/components/views/avatars/BaseAvatar-test.tsx
Normal file
201
test/components/views/avatars/BaseAvatar-test.tsx
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
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 { fireEvent, render } from "@testing-library/react";
|
||||
import { ClientEvent, PendingEventOrdering } from "matrix-js-sdk/src/client";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
import React from "react";
|
||||
import { act } from "react-dom/test-utils";
|
||||
import { SyncState } from "matrix-js-sdk/src/sync";
|
||||
|
||||
import type { MatrixClient } from "matrix-js-sdk/src/client";
|
||||
import RoomContext from "../../../../src/contexts/RoomContext";
|
||||
import { getRoomContext } from "../../../test-utils/room";
|
||||
import { stubClient } from "../../../test-utils/test-utils";
|
||||
import BaseAvatar from "../../../../src/components/views/avatars/BaseAvatar";
|
||||
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
|
||||
type Props = React.ComponentPropsWithoutRef<typeof BaseAvatar>;
|
||||
|
||||
describe("<BaseAvatar />", () => {
|
||||
let client: MatrixClient;
|
||||
let room: Room;
|
||||
let member: RoomMember;
|
||||
|
||||
function getComponent(props: Partial<Props>) {
|
||||
return (
|
||||
<MatrixClientContext.Provider value={client}>
|
||||
<RoomContext.Provider value={getRoomContext(room, {})}>
|
||||
<BaseAvatar name="" {...props} />
|
||||
</RoomContext.Provider>
|
||||
</MatrixClientContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function failLoadingImg(container: HTMLElement): void {
|
||||
const img = container.querySelector<HTMLImageElement>("img")!;
|
||||
expect(img).not.toBeNull();
|
||||
act(() => {
|
||||
fireEvent.error(img);
|
||||
});
|
||||
}
|
||||
|
||||
function emitReconnect(): void {
|
||||
act(() => {
|
||||
client.emit(ClientEvent.Sync, SyncState.Prepared, SyncState.Reconnecting);
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
client = stubClient();
|
||||
|
||||
room = new Room("!room:example.com", client, client.getUserId() ?? "", {
|
||||
pendingEventOrdering: PendingEventOrdering.Detached,
|
||||
});
|
||||
|
||||
member = new RoomMember(room.roomId, "@bob:example.org");
|
||||
jest.spyOn(room, "getMember").mockReturnValue(member);
|
||||
});
|
||||
|
||||
it("renders with minimal properties", () => {
|
||||
const { container } = render(getComponent({}));
|
||||
|
||||
expect(container.querySelector(".mx_BaseAvatar")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("matches snapshot (avatar)", () => {
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
name: "CoolUser22",
|
||||
title: "Hover title",
|
||||
url: "https://example.com/images/avatar.gif",
|
||||
className: "mx_SomethingArbitrary",
|
||||
}),
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("matches snapshot (avatar + click)", () => {
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
name: "CoolUser22",
|
||||
title: "Hover title",
|
||||
url: "https://example.com/images/avatar.gif",
|
||||
className: "mx_SomethingArbitrary",
|
||||
onClick: () => {},
|
||||
}),
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("matches snapshot (no avatar)", () => {
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
name: "xX_Element_User_Xx",
|
||||
title: ":kiss:",
|
||||
defaultToInitialLetter: true,
|
||||
className: "big-and-bold",
|
||||
}),
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("matches snapshot (no avatar + click)", () => {
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
name: "xX_Element_User_Xx",
|
||||
title: ":kiss:",
|
||||
defaultToInitialLetter: true,
|
||||
className: "big-and-bold",
|
||||
onClick: () => {},
|
||||
}),
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("uses fallback images", () => {
|
||||
const images = [...Array(10)].map((_, i) => `https://example.com/images/${i}.webp`);
|
||||
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
url: images[0],
|
||||
urls: images.slice(1),
|
||||
}),
|
||||
);
|
||||
|
||||
for (const image of images) {
|
||||
expect(container.querySelector("img")!.src).toBe(image);
|
||||
failLoadingImg(container);
|
||||
}
|
||||
});
|
||||
|
||||
it("re-renders on reconnect", () => {
|
||||
const primary = "https://example.com/image.jpeg";
|
||||
const fallback = "https://example.com/fallback.png";
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
url: primary,
|
||||
urls: [fallback],
|
||||
}),
|
||||
);
|
||||
|
||||
failLoadingImg(container);
|
||||
expect(container.querySelector("img")!.src).toBe(fallback);
|
||||
|
||||
emitReconnect();
|
||||
expect(container.querySelector("img")!.src).toBe(primary);
|
||||
});
|
||||
|
||||
it("renders with an image", () => {
|
||||
const url = "https://example.com/images/small/avatar.gif?size=realBig";
|
||||
const { container } = render(getComponent({ url }));
|
||||
|
||||
const img = container.querySelector("img");
|
||||
expect(img!.src).toBe(url);
|
||||
});
|
||||
|
||||
it("renders the initial letter", () => {
|
||||
const { container } = render(getComponent({ name: "Yellow", defaultToInitialLetter: true }));
|
||||
|
||||
const avatar = container.querySelector<HTMLSpanElement>(".mx_BaseAvatar_initial")!;
|
||||
expect(avatar.innerHTML).toBe("Y");
|
||||
});
|
||||
|
||||
it.each([{}, { name: "CoolUser22" }, { name: "XxElement_FanxX", defaultToInitialLetter: true }])(
|
||||
"includes a click handler",
|
||||
(props: Partial<Props>) => {
|
||||
const onClick = jest.fn();
|
||||
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
...props,
|
||||
onClick,
|
||||
}),
|
||||
);
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(container.querySelector(".mx_BaseAvatar")!);
|
||||
});
|
||||
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
},
|
||||
);
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2022 - 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -14,19 +14,25 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { getByTestId, render, waitFor } from "@testing-library/react";
|
||||
import { mocked } from "jest-mock";
|
||||
import { fireEvent, getByTestId, render } from "@testing-library/react";
|
||||
import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
|
||||
import React from "react";
|
||||
import { act } from "react-dom/test-utils";
|
||||
|
||||
import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
|
||||
import RoomContext from "../../../../src/contexts/RoomContext";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
import { mediaFromMxc } from "../../../../src/customisations/Media";
|
||||
import { ViewUserPayload } from "../../../../src/dispatcher/payloads/ViewUserPayload";
|
||||
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
|
||||
import { SettingLevel } from "../../../../src/settings/SettingLevel";
|
||||
import SettingsStore from "../../../../src/settings/SettingsStore";
|
||||
import { getRoomContext } from "../../../test-utils/room";
|
||||
import { stubClient } from "../../../test-utils/test-utils";
|
||||
import { Action } from "../../../../src/dispatcher/actions";
|
||||
|
||||
type Props = React.ComponentPropsWithoutRef<typeof MemberAvatar>;
|
||||
|
||||
describe("MemberAvatar", () => {
|
||||
const ROOM_ID = "roomId";
|
||||
|
|
@ -35,7 +41,7 @@ describe("MemberAvatar", () => {
|
|||
let room: Room;
|
||||
let member: RoomMember;
|
||||
|
||||
function getComponent(props) {
|
||||
function getComponent(props: Partial<Props>) {
|
||||
return (
|
||||
<RoomContext.Provider value={getRoomContext(room, {})}>
|
||||
<MemberAvatar member={null} width={35} height={35} {...props} />
|
||||
|
|
@ -44,10 +50,7 @@ describe("MemberAvatar", () => {
|
|||
}
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
stubClient();
|
||||
mockClient = mocked(MatrixClientPeg.get());
|
||||
mockClient = stubClient();
|
||||
|
||||
room = new Room(ROOM_ID, mockClient, mockClient.getUserId() ?? "", {
|
||||
pendingEventOrdering: PendingEventOrdering.Detached,
|
||||
|
|
@ -55,22 +58,77 @@ describe("MemberAvatar", () => {
|
|||
|
||||
member = new RoomMember(ROOM_ID, "@bob:example.org");
|
||||
jest.spyOn(room, "getMember").mockReturnValue(member);
|
||||
jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue("http://placekitten.com/400/400");
|
||||
});
|
||||
|
||||
it("shows an avatar for useOnlyCurrentProfiles", async () => {
|
||||
jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
|
||||
return settingName === "useOnlyCurrentProfiles";
|
||||
});
|
||||
it("supports 'null' members", () => {
|
||||
const { container } = render(getComponent({ member: null }));
|
||||
|
||||
expect(container.querySelector("img")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("matches the snapshot", () => {
|
||||
jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue("http://placekitten.com/400/400");
|
||||
const { container } = render(
|
||||
getComponent({
|
||||
member,
|
||||
fallbackUserId: "Fallback User ID",
|
||||
title: "Hover title",
|
||||
style: {
|
||||
color: "pink",
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows an avatar for useOnlyCurrentProfiles", () => {
|
||||
jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue("http://placekitten.com/400/400");
|
||||
|
||||
SettingsStore.setValue("useOnlyCurrentProfiles", null, SettingLevel.DEVICE, true);
|
||||
|
||||
const { container } = render(getComponent({}));
|
||||
|
||||
let avatar: HTMLElement;
|
||||
await waitFor(() => {
|
||||
avatar = getByTestId(container, "avatar-img");
|
||||
expect(avatar).toBeInTheDocument();
|
||||
const avatar = getByTestId<HTMLImageElement>(container, "avatar-img");
|
||||
expect(avatar).toBeInTheDocument();
|
||||
expect(avatar.getAttribute("src")).not.toBe("");
|
||||
});
|
||||
|
||||
it("uses the member's configured avatar", () => {
|
||||
const mxcUrl = "mxc://example.com/avatars/user.tiff";
|
||||
jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue(mxcUrl);
|
||||
|
||||
const { container } = render(getComponent({ member }));
|
||||
|
||||
const img = container.querySelector("img");
|
||||
expect(img).not.toBeNull();
|
||||
expect(img!.src).toBe(mediaFromMxc(mxcUrl).srcHttp);
|
||||
});
|
||||
|
||||
it("uses a fallback when the member has no avatar", () => {
|
||||
jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue(undefined);
|
||||
|
||||
const { container } = render(getComponent({ member }));
|
||||
|
||||
const img = container.querySelector(".mx_BaseAvatar_image");
|
||||
expect(img).not.toBeNull();
|
||||
});
|
||||
|
||||
it("dispatches on click", () => {
|
||||
const { container } = render(getComponent({ member, viewUserOnClick: true }));
|
||||
|
||||
const spy = jest.spyOn(defaultDispatcher, "dispatch");
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(container.querySelector(".mx_BaseAvatar")!);
|
||||
});
|
||||
|
||||
expect(avatar!.getAttribute("src")).not.toBe("");
|
||||
expect(spy).toHaveBeenCalled();
|
||||
const [payload] = spy.mock.lastCall!;
|
||||
expect(payload).toStrictEqual<ViewUserPayload>({
|
||||
action: Action.ViewUser,
|
||||
member,
|
||||
push: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ describe("RoomAvatar", () => {
|
|||
const dmRoomMap = new DMRoomMap(client);
|
||||
jest.spyOn(dmRoomMap, "getUserIdForRoomId");
|
||||
jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
|
||||
jest.spyOn(AvatarModule, "defaultAvatarUrlForString");
|
||||
jest.spyOn(AvatarModule, "getColorForString");
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
|
|
@ -48,14 +48,14 @@ describe("RoomAvatar", () => {
|
|||
|
||||
afterEach(() => {
|
||||
mocked(DMRoomMap.shared().getUserIdForRoomId).mockReset();
|
||||
mocked(AvatarModule.defaultAvatarUrlForString).mockClear();
|
||||
mocked(AvatarModule.getColorForString).mockClear();
|
||||
});
|
||||
|
||||
it("should render as expected for a Room", () => {
|
||||
const room = new Room("!room:example.com", client, client.getSafeUserId());
|
||||
room.name = "test room";
|
||||
expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
|
||||
expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(room.roomId);
|
||||
expect(AvatarModule.getColorForString).toHaveBeenCalledWith(room.roomId);
|
||||
});
|
||||
|
||||
it("should render as expected for a DM room", () => {
|
||||
|
|
@ -64,7 +64,7 @@ describe("RoomAvatar", () => {
|
|||
room.name = "DM room";
|
||||
mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue(userId);
|
||||
expect(render(<RoomAvatar room={room} />).container).toMatchSnapshot();
|
||||
expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId);
|
||||
expect(AvatarModule.getColorForString).toHaveBeenCalledWith(userId);
|
||||
});
|
||||
|
||||
it("should render as expected for a LocalRoom", () => {
|
||||
|
|
@ -73,6 +73,6 @@ describe("RoomAvatar", () => {
|
|||
localRoom.name = "local test room";
|
||||
localRoom.targets.push(new DirectoryMember({ user_id: userId }));
|
||||
expect(render(<RoomAvatar room={localRoom} />).container).toMatchSnapshot();
|
||||
expect(AvatarModule.defaultAvatarUrlForString).toHaveBeenCalledWith(userId);
|
||||
expect(AvatarModule.getColorForString).toHaveBeenCalledWith(userId);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<BaseAvatar /> matches snapshot (avatar + click) 1`] = `
|
||||
<div>
|
||||
<img
|
||||
alt="Avatar"
|
||||
class="mx_AccessibleButton mx_BaseAvatar mx_BaseAvatar_image mx_SomethingArbitrary"
|
||||
data-testid="avatar-img"
|
||||
role="button"
|
||||
src="https://example.com/images/avatar.gif"
|
||||
style="width: 40px; height: 40px;"
|
||||
tabindex="0"
|
||||
title="Hover title"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<BaseAvatar /> matches snapshot (avatar) 1`] = `
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BaseAvatar mx_BaseAvatar_image mx_SomethingArbitrary"
|
||||
data-testid="avatar-img"
|
||||
src="https://example.com/images/avatar.gif"
|
||||
style="width: 40px; height: 40px;"
|
||||
title="Hover title"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<BaseAvatar /> matches snapshot (no avatar + click) 1`] = `
|
||||
<div>
|
||||
<span
|
||||
aria-label="Avatar"
|
||||
aria-live="off"
|
||||
class="mx_AccessibleButton mx_BaseAvatar big-and-bold"
|
||||
role="button"
|
||||
style="width: 40px; height: 40px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(13, 189, 139); width: 40px; height: 40px; font-size: 26px; line-height: 40px;"
|
||||
title=":kiss:"
|
||||
>
|
||||
X
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<BaseAvatar /> matches snapshot (no avatar) 1`] = `
|
||||
<div>
|
||||
<span
|
||||
class="mx_BaseAvatar big-and-bold"
|
||||
role="presentation"
|
||||
style="width: 40px; height: 40px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(13, 189, 139); width: 40px; height: 40px; font-size: 26px; line-height: 40px;"
|
||||
title=":kiss:"
|
||||
>
|
||||
X
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MemberAvatar matches the snapshot 1`] = `
|
||||
<div>
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BaseAvatar mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="http://this.is.a.url//placekitten.com/400/400"
|
||||
style="color: pink;"
|
||||
title="Hover title"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -5,22 +5,16 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 36px; height: 36px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(13, 189, 139); width: 36px; height: 36px; font-size: 23.400000000000002px; line-height: 36px;"
|
||||
>
|
||||
D
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -30,22 +24,16 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 36px; height: 36px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 36px; height: 36px; font-size: 23.400000000000002px; line-height: 36px;"
|
||||
>
|
||||
L
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -55,22 +43,16 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 36px; height: 36px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 36px; height: 36px; font-size: 23.400000000000002px; line-height: 36px;"
|
||||
>
|
||||
T
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -13,23 +13,17 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 36px; height: 36px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 36px; height: 36px; font-size: 23.400000000000002px; line-height: 36px;"
|
||||
title="@alice:server"
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
title="@alice:server"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ describe("RoomHeader (Enzyme)", () => {
|
|||
|
||||
// And there is no image avatar (because it's not set on this room)
|
||||
const image = findImg(rendered, ".mx_BaseAvatar_image");
|
||||
expect(image.prop("src")).toEqual("data:image/png;base64,00");
|
||||
expect(image).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows the room avatar in a room with 2 people", () => {
|
||||
|
|
@ -86,7 +86,7 @@ describe("RoomHeader (Enzyme)", () => {
|
|||
|
||||
// And there is no image avatar (because it's not set on this room)
|
||||
const image = findImg(rendered, ".mx_BaseAvatar_image");
|
||||
expect(image.prop("src")).toEqual("data:image/png;base64,00");
|
||||
expect(image).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows the room avatar in a room with >2 people", () => {
|
||||
|
|
@ -100,7 +100,7 @@ describe("RoomHeader (Enzyme)", () => {
|
|||
|
||||
// And there is no image avatar (because it's not set on this room)
|
||||
const image = findImg(rendered, ".mx_BaseAvatar_image");
|
||||
expect(image.prop("src")).toEqual("data:image/png;base64,00");
|
||||
expect(image).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows the room avatar in a DM with only ourselves", () => {
|
||||
|
|
@ -114,7 +114,7 @@ describe("RoomHeader (Enzyme)", () => {
|
|||
|
||||
// And there is no image avatar (because it's not set on this room)
|
||||
const image = findImg(rendered, ".mx_BaseAvatar_image");
|
||||
expect(image.prop("src")).toEqual("data:image/png;base64,00");
|
||||
expect(image).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows the user avatar in a DM with 2 people", () => {
|
||||
|
|
@ -148,7 +148,7 @@ describe("RoomHeader (Enzyme)", () => {
|
|||
|
||||
// And there is no image avatar (because it's not set on this room)
|
||||
const image = findImg(rendered, ".mx_BaseAvatar_image");
|
||||
expect(image.prop("src")).toEqual("data:image/png;base64,00");
|
||||
expect(image).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders call buttons normally", () => {
|
||||
|
|
|
|||
|
|
@ -161,22 +161,16 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 36px; height: 36px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 36px; height: 36px; font-size: 23.400000000000002px; line-height: 36px;"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
|
|
@ -236,22 +230,16 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 36px; height: 36px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 36px; height: 36px; font-size: 23.400000000000002px; line-height: 36px;"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -15,22 +15,16 @@ exports[`RoomTile should render the room 1`] = `
|
|||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
style="width: 32px; height: 32px;"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 20.8px; width: 32px; line-height: 32px;"
|
||||
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
||||
data-testid="avatar-img"
|
||||
style="background-color: rgb(172, 59, 168); width: 32px; height: 32px; font-size: 20.8px; line-height: 32px;"
|
||||
>
|
||||
!
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 32px; height: 32px;"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue