Merge pull request #33764 from element-hq/dbkr/withpresence_use_new_component
Make presence icons & colours consistent throughout the app
This commit is contained in:
David Baker
@@ -13,34 +13,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
.mx_WithPresenceIndicator_icon {
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.mx_WithPresenceIndicator_icon::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
border: 2px solid var(--cpd-color-bg-canvas-default);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mx_WithPresenceIndicator_icon_offline::before {
|
||||
background-color: $presence-offline;
|
||||
}
|
||||
|
||||
.mx_WithPresenceIndicator_icon_online::before {
|
||||
background-color: $accent;
|
||||
}
|
||||
|
||||
.mx_WithPresenceIndicator_icon_away::before {
|
||||
background-color: $presence-away;
|
||||
}
|
||||
|
||||
.mx_WithPresenceIndicator_icon_busy::before {
|
||||
background-color: $presence-busy;
|
||||
right: 0px;
|
||||
bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,4 +41,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.mx_MemberTileView_presence {
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,11 +6,6 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_PresenceIconView {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@@ -15,43 +15,28 @@ import {
|
||||
type User,
|
||||
UserEvent,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { isPresenceEnabled } from "../../../utils/presence";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import DMRoomMap from "../../../utils/DMRoomMap";
|
||||
import { getJoinedNonFunctionalMembers } from "../../../utils/room/getJoinedNonFunctionalMembers";
|
||||
import { useEventEmitter } from "../../../hooks/useEventEmitter";
|
||||
import { BUSY_PRESENCE_NAME } from "../rooms/PresenceLabel";
|
||||
import AvatarPresenceIconView from "../rooms/MemberList/tiles/common/PresenceIconView";
|
||||
|
||||
interface Props {
|
||||
room: Room;
|
||||
size: string; // CSS size
|
||||
tooltipProps?: {
|
||||
tabIndex?: number;
|
||||
};
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export enum Presence {
|
||||
// Note: the names here are used in CSS class names
|
||||
Online = "ONLINE",
|
||||
Away = "AWAY",
|
||||
Offline = "OFFLINE",
|
||||
Busy = "BUSY",
|
||||
}
|
||||
|
||||
function tooltipText(variant: Presence): string {
|
||||
switch (variant) {
|
||||
case Presence.Online:
|
||||
return _t("presence|online");
|
||||
case Presence.Away:
|
||||
return _t("presence|away");
|
||||
case Presence.Offline:
|
||||
return _t("presence|offline");
|
||||
case Presence.Busy:
|
||||
return _t("presence|busy");
|
||||
}
|
||||
// This class used to have its own presence indicator and has been
|
||||
// updated to use the new one so presence colours / icons match across the app.
|
||||
// These values are the ones from the wire that PresenceIconView expects,
|
||||
// but really some of the logic here could be deduplicated.
|
||||
Online = "online",
|
||||
Away = "unavailable",
|
||||
Offline = "offline",
|
||||
Busy = "busy",
|
||||
}
|
||||
|
||||
function getDmMember(room: Room): RoomMember | null {
|
||||
@@ -117,22 +102,13 @@ export const usePresence = (room: Room, member: RoomMember | null): Presence | n
|
||||
return presence;
|
||||
};
|
||||
|
||||
const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, children }) => {
|
||||
const WithPresenceIndicator: React.FC<Props> = ({ room, children }) => {
|
||||
const dmMember = useDmMember(room);
|
||||
const presence = usePresence(room, dmMember);
|
||||
|
||||
let icon: JSX.Element | undefined;
|
||||
if (presence) {
|
||||
icon = (
|
||||
<div
|
||||
tabIndex={tooltipProps?.tabIndex ?? 0}
|
||||
className={`mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_${presence.toLowerCase()}`}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
icon = <AvatarPresenceIconView presenceState={presence} />;
|
||||
}
|
||||
|
||||
if (!presence) return <>{children}</>;
|
||||
@@ -140,9 +116,7 @@ const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, chil
|
||||
return (
|
||||
<div className="mx_WithPresenceIndicator">
|
||||
{children}
|
||||
<Tooltip label={tooltipText(presence)} placement="bottom">
|
||||
{icon}
|
||||
</Tooltip>
|
||||
<div className="mx_WithPresenceIndicator_icon">{icon}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -51,7 +51,8 @@ export function MemberTileView(props: Props): JSX.Element {
|
||||
>
|
||||
<div aria-hidden className="mx_MemberTileView_left">
|
||||
<div className="mx_MemberTileView_avatar">
|
||||
{props.avatarJsx} {props.presenceJsx}
|
||||
{props.avatarJsx}
|
||||
<div className="mx_MemberTileView_presence">{props.presenceJsx}</div>
|
||||
</div>
|
||||
<div className="mx_MemberTileView_name">{props.nameJsx}</div>
|
||||
</div>
|
||||
|
||||
@@ -6,12 +6,15 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React, { type JSX } from "react";
|
||||
import classNames from "classnames";
|
||||
import OnlineOrUnavailableIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-solid-8x8";
|
||||
import OfflineIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-outline-8x8";
|
||||
import DNDIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-strikethrough-8x8";
|
||||
import classNames from "classnames";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
|
||||
|
||||
import { _t } from "../../../../../../languageHandler";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
presenceState: string;
|
||||
@@ -36,9 +39,30 @@ function getIconForPresenceState(state: string): JSX.Element {
|
||||
}
|
||||
}
|
||||
|
||||
function getTooltipText(state: string): string {
|
||||
switch (state) {
|
||||
case "online":
|
||||
return _t("presence|online");
|
||||
case "offline":
|
||||
return _t("presence|offline");
|
||||
case "unavailable":
|
||||
case "io.element.unreachable":
|
||||
return _t("presence|away");
|
||||
case BUSY_PRESENCE_NAME.name:
|
||||
case BUSY_PRESENCE_NAME.altName:
|
||||
return _t("presence|busy");
|
||||
default:
|
||||
throw new Error(`Presence state "${state}" is unknown.`);
|
||||
}
|
||||
}
|
||||
|
||||
const AvatarPresenceIconView: React.FC<Props> = ({ className, presenceState }) => {
|
||||
const names = classNames("mx_PresenceIconView", className);
|
||||
return <div className={names}>{getIconForPresenceState(presenceState)}</div>;
|
||||
return (
|
||||
<Tooltip label={getTooltipText(presenceState)} placement="bottom" isTriggerInteractive={false}>
|
||||
<div className={names}>{getIconForPresenceState(presenceState)}</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default AvatarPresenceIconView;
|
||||
|
||||
@@ -462,7 +462,7 @@ export default function RoomHeader({
|
||||
<>
|
||||
<CurrentRightPanelPhaseContextProvider roomId={room.roomId}>
|
||||
<Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
|
||||
<WithPresenceIndicator room={room} size="8px">
|
||||
<WithPresenceIndicator room={room}>
|
||||
{/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */}
|
||||
{/* Disable on-click actions until the room is created */}
|
||||
<RoomAvatar
|
||||
|
||||
@@ -6,17 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { render, waitFor } from "jest-matrix-react";
|
||||
import { act, render, renderHook, waitFor } from "jest-matrix-react";
|
||||
import { mocked } from "jest-mock";
|
||||
import { type MatrixClient, PendingEventOrdering, Room, RoomMember, User } from "matrix-js-sdk/src/matrix";
|
||||
import { type MatrixClient, PendingEventOrdering, Room, RoomMember, User, UserEvent } from "matrix-js-sdk/src/matrix";
|
||||
import React from "react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||
import { stubClient } from "../../../../test-utils";
|
||||
import { getMockClientWithEventEmitter, stubClient } from "../../../../test-utils";
|
||||
import DMRoomMap from "../../../../../src/utils/DMRoomMap";
|
||||
import WithPresenceIndicator from "../../../../../src/components/views/avatars/WithPresenceIndicator";
|
||||
import WithPresenceIndicator, {
|
||||
Presence,
|
||||
usePresence,
|
||||
} from "../../../../../src/components/views/avatars/WithPresenceIndicator";
|
||||
import { isPresenceEnabled } from "../../../../../src/utils/presence";
|
||||
import { getJoinedNonFunctionalMembers } from "../../../../../src/utils/room/getJoinedNonFunctionalMembers";
|
||||
|
||||
jest.mock("../../../../../src/utils/presence");
|
||||
|
||||
@@ -32,7 +35,7 @@ describe("WithPresenceIndicator", () => {
|
||||
|
||||
function renderComponent() {
|
||||
return render(
|
||||
<WithPresenceIndicator room={room} size="32px">
|
||||
<WithPresenceIndicator room={room}>
|
||||
<span />
|
||||
</WithPresenceIndicator>,
|
||||
);
|
||||
@@ -83,67 +86,140 @@ describe("WithPresenceIndicator", () => {
|
||||
return member;
|
||||
});
|
||||
|
||||
const { container, asFragment } = renderComponent();
|
||||
|
||||
const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
|
||||
expect(presence).toBeVisible();
|
||||
await userEvent.hover(presence!);
|
||||
|
||||
// wait for the tooltip to open
|
||||
const tooltip = await waitFor(() => {
|
||||
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
|
||||
expect(tooltip).toBeVisible();
|
||||
return tooltip;
|
||||
});
|
||||
expect(tooltip).toHaveTextContent(renderedStr);
|
||||
const { asFragment } = renderComponent();
|
||||
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe("usePresence", () => {
|
||||
const ROOM_ID = "roomId";
|
||||
const DM_USER_ID = "@bob:foo.bar";
|
||||
|
||||
let mockClient: ReturnType<typeof getMockClientWithEventEmitter>;
|
||||
let room: Room;
|
||||
let member: RoomMember;
|
||||
let user: User;
|
||||
|
||||
beforeEach(() => {
|
||||
mockClient = getMockClientWithEventEmitter({
|
||||
getUserId: jest.fn().mockReturnValue("@alice:foo.bar"),
|
||||
getUser: jest.fn().mockReturnValue(null),
|
||||
store: { getPendingEvents: jest.fn().mockResolvedValue([]) },
|
||||
});
|
||||
room = new Room(ROOM_ID, mockClient as unknown as MatrixClient, mockClient.getUserId() ?? "");
|
||||
|
||||
mocked(isPresenceEnabled).mockReturnValue(true);
|
||||
mocked(getJoinedNonFunctionalMembers).mockReturnValue([1, 2] as any);
|
||||
|
||||
user = new User(DM_USER_ID);
|
||||
user.presence = "online";
|
||||
member = new RoomMember(ROOM_ID, DM_USER_ID);
|
||||
member.user = user;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
it("returns null when presence is disabled", () => {
|
||||
mocked(isPresenceEnabled).mockReturnValue(false);
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
|
||||
it("returns null when room does not have exactly 2 members", () => {
|
||||
mocked(getJoinedNonFunctionalMembers).mockReturnValue([1] as any);
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
|
||||
it("returns null when member is null", () => {
|
||||
const { result } = renderHook(() => usePresence(room, null));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
|
||||
it.each([
|
||||
["online", "Online"],
|
||||
["offline", "Offline"],
|
||||
["unavailable", "Away"],
|
||||
])(
|
||||
"renders presence indicator when member.user is not linked but client has user data",
|
||||
async (presenceStr, renderedStr) => {
|
||||
mocked(isPresenceEnabled).mockReturnValue(true);
|
||||
["online", Presence.Online],
|
||||
["offline", Presence.Offline],
|
||||
["unavailable", Presence.Away],
|
||||
["busy", Presence.Busy],
|
||||
])("returns correct presence for user with '%s' presence state", (presenceStr, expectedPresence) => {
|
||||
user.presence = presenceStr;
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe(expectedPresence);
|
||||
});
|
||||
|
||||
const DM_USER_ID = "@bob:foo.bar";
|
||||
const dmRoomMap = {
|
||||
getUserIdForRoomId: () => {
|
||||
return DM_USER_ID;
|
||||
},
|
||||
} as unknown as DMRoomMap;
|
||||
it("returns Online when user.currentlyActive is true regardless of presence string", () => {
|
||||
user.presence = "offline";
|
||||
user.currentlyActive = true;
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe(Presence.Online);
|
||||
});
|
||||
|
||||
jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
|
||||
it("updates when UserEvent.Presence fires on member.user", async () => {
|
||||
user.presence = "online";
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe(Presence.Online);
|
||||
|
||||
// member.user is not set: simulates the race condition on fresh login with no cache
|
||||
// where the room list renders before member.user is linked
|
||||
room.getMember = jest.fn((userId) => {
|
||||
return new RoomMember(room.roomId, userId);
|
||||
});
|
||||
act(() => {
|
||||
user.presence = "offline";
|
||||
user.emit(UserEvent.Presence, null as any, user);
|
||||
});
|
||||
|
||||
// But client.getUser() has the presence data
|
||||
const user = new User(DM_USER_ID);
|
||||
user.presence = presenceStr;
|
||||
mockClient.getUser = jest.fn((userId) => (userId === DM_USER_ID ? user : null));
|
||||
await waitFor(() => expect(result.current).toBe(Presence.Offline));
|
||||
});
|
||||
|
||||
const { container } = renderComponent();
|
||||
it("updates when UserEvent.CurrentlyActive fires on member.user", async () => {
|
||||
user.presence = "offline";
|
||||
user.currentlyActive = false;
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe(Presence.Offline);
|
||||
|
||||
const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
|
||||
expect(presence).toBeVisible();
|
||||
await userEvent.hover(presence!);
|
||||
act(() => {
|
||||
user.currentlyActive = true;
|
||||
user.emit(UserEvent.CurrentlyActive, null as any, user);
|
||||
});
|
||||
|
||||
const tooltip = await waitFor(() => {
|
||||
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
|
||||
expect(tooltip).toBeVisible();
|
||||
return tooltip;
|
||||
});
|
||||
await waitFor(() => expect(result.current).toBe(Presence.Online));
|
||||
});
|
||||
|
||||
// component should fall back to reading client.getUser() which does have the presence data
|
||||
// so it should render correctly
|
||||
expect(tooltip).toHaveTextContent(renderedStr);
|
||||
},
|
||||
);
|
||||
it("returns correct presence when member.user is not linked but client has user data", () => {
|
||||
member.user = undefined;
|
||||
mocked(mockClient.getUser).mockImplementation((userId) => (userId === DM_USER_ID ? user : null));
|
||||
|
||||
user.presence = "online";
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe("online");
|
||||
});
|
||||
|
||||
it("updates via client-level UserEvent.Presence when member.user is not yet linked", async () => {
|
||||
member.user = undefined;
|
||||
mocked(mockClient.getUser).mockImplementation((userId) => (userId === DM_USER_ID ? user : null));
|
||||
user.presence = "online";
|
||||
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe(Presence.Online);
|
||||
|
||||
act(() => {
|
||||
user.presence = "offline";
|
||||
mockClient.emit(UserEvent.Presence, null as any, user);
|
||||
});
|
||||
|
||||
await waitFor(() => expect(result.current).toBe(Presence.Offline));
|
||||
});
|
||||
|
||||
it("does not update when client emits UserEvent.Presence for a different user", async () => {
|
||||
user.presence = "online";
|
||||
const { result } = renderHook(() => usePresence(room, member));
|
||||
expect(result.current).toBe(Presence.Online);
|
||||
|
||||
act(() => {
|
||||
const otherUser = new User("@other:foo.bar");
|
||||
otherUser.presence = "offline";
|
||||
mockClient.emit(UserEvent.Presence, null as any, otherUser);
|
||||
});
|
||||
|
||||
expect(result.current).toBe(Presence.Online);
|
||||
});
|
||||
});
|
||||
|
||||
+60
-60
@@ -156,64 +156,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="_flex_4dswl_9 mx_RoomAvatarView"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span
|
||||
aria-label="Avatar"
|
||||
class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
|
||||
data-color="1"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="_image_va14e_43"
|
||||
data-type="round"
|
||||
height="32px"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="http://this.is.a.url/avatar.url/room.png"
|
||||
width="32px"
|
||||
/>
|
||||
</span>
|
||||
<svg
|
||||
aria-label="Away"
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_RoomAvatarView_PresenceDecoration"
|
||||
color="var(--cpd-color-icon-quaternary)"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
|
||||
exports[`<RoomAvatarView /> should render the busy presence 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="_flex_4dswl_9 mx_RoomAvatarView"
|
||||
@@ -272,7 +215,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
|
||||
exports[`<RoomAvatarView /> should render the offline presence 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="_flex_4dswl_9 mx_RoomAvatarView"
|
||||
@@ -331,7 +274,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
|
||||
exports[`<RoomAvatarView /> should render the online presence 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="_flex_4dswl_9 mx_RoomAvatarView"
|
||||
@@ -387,3 +330,60 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<RoomAvatarView /> should render the unavailable presence 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="_flex_4dswl_9 mx_RoomAvatarView"
|
||||
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
|
||||
>
|
||||
<span
|
||||
aria-label="Avatar"
|
||||
class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
|
||||
data-color="1"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
style="--cpd-avatar-size: 32px;"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="_image_va14e_43"
|
||||
data-type="round"
|
||||
height="32px"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer"
|
||||
src="http://this.is.a.url/avatar.url/room.png"
|
||||
width="32px"
|
||||
/>
|
||||
</span>
|
||||
<svg
|
||||
aria-label="Away"
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_RoomAvatarView_PresenceDecoration"
|
||||
color="var(--cpd-color-icon-quaternary)"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
+113
-15
@@ -7,11 +7,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
|
||||
>
|
||||
<span />
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
|
||||
style="width: 32px; height: 32px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
class="mx_WithPresenceIndicator_icon"
|
||||
>
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_online"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@@ -23,11 +55,45 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
|
||||
>
|
||||
<span />
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
|
||||
style="width: 32px; height: 32px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
class="mx_WithPresenceIndicator_icon"
|
||||
>
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_offline"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceOutline8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@@ -39,11 +105,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
|
||||
>
|
||||
<span />
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
|
||||
style="width: 32px; height: 32px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
class="mx_WithPresenceIndicator_icon"
|
||||
>
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_unavailable"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
+22
-1
@@ -7,7 +7,8 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render } from "jest-matrix-react";
|
||||
import { render, waitFor } from "jest-matrix-react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import AvatarPresenceIconView from "../../../../../../src/components/views/rooms/MemberList/tiles/common/PresenceIconView";
|
||||
|
||||
@@ -39,4 +40,24 @@ describe("<PresenceIconView/>", () => {
|
||||
expect(container.querySelector(".mx_PresenceIconView_dnd")).toBeDefined();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders the tooltip", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const { container, asFragment } = render(<AvatarPresenceIconView presenceState="busy" />);
|
||||
|
||||
const presence = container.querySelector(".mx_PresenceIconView")!;
|
||||
expect(presence).toBeVisible();
|
||||
await user.hover(presence!);
|
||||
|
||||
// wait for the tooltip to open
|
||||
const tooltip = await waitFor(() => {
|
||||
const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
|
||||
expect(tooltip).toBeVisible();
|
||||
return tooltip;
|
||||
});
|
||||
expect(tooltip).toHaveTextContent("Busy");
|
||||
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
+12
-4
@@ -29,7 +29,9 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mx_MemberTileView_presence"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MemberTileView_name"
|
||||
@@ -105,7 +107,9 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mx_MemberTileView_presence"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MemberTileView_name"
|
||||
@@ -181,7 +185,9 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
|
||||
>
|
||||
u
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mx_MemberTileView_presence"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MemberTileView_name"
|
||||
@@ -239,7 +245,9 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
|
||||
>
|
||||
F
|
||||
</span>
|
||||
|
||||
<div
|
||||
class="mx_MemberTileView_presence"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_MemberTileView_name"
|
||||
|
||||
+185
-119
@@ -2,174 +2,240 @@
|
||||
|
||||
exports[`<PresenceIconView/> renders correctly for presence=busy 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_PresenceIconView"
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_dnd"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
|
||||
<svg
|
||||
class="mx_PresenceIconView_dnd"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceStrikethrough8X8Icon_a"
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceStrikethrough8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PresenceIconView/> renders correctly for presence=offline 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_PresenceIconView"
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_offline"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
|
||||
<svg
|
||||
class="mx_PresenceIconView_offline"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceOutline8X8Icon_a"
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
clip-rule="evenodd"
|
||||
d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceOutline8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PresenceIconView/> renders correctly for presence=online 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_PresenceIconView"
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_online"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
<svg
|
||||
class="mx_PresenceIconView_online"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_PresenceIconView"
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_unavailable"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
<svg
|
||||
class="mx_PresenceIconView_unavailable"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 2`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_PresenceIconView"
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_unavailable"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
<svg
|
||||
class="mx_PresenceIconView_unavailable"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceSolid8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<PresenceIconView/> renders the tooltip 1`] = `
|
||||
<DocumentFragment>
|
||||
<span
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
aria-labelledby="react-use-id-1"
|
||||
class="mx_PresenceIconView"
|
||||
>
|
||||
<svg
|
||||
class="mx_PresenceIconView_dnd"
|
||||
fill="currentColor"
|
||||
height="8px"
|
||||
viewBox="0 0 8 8"
|
||||
width="8px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clippath
|
||||
id="cpd_PresenceStrikethrough8X8Icon_a"
|
||||
>
|
||||
<path
|
||||
d="M0 0h8v8H0z"
|
||||
/>
|
||||
</clippath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</span>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user