Switch Pill & E2EIcon to using Compound Tooltips (#12080)
* Switch Pill to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch E2EIcon to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests & snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
42ac2272b2
commit
07747e24d4
10 changed files with 105 additions and 129 deletions
|
|
@ -522,10 +522,14 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-label="This room is end-to-end encrypted"
|
||||
class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
|
||||
/>
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -142,8 +142,8 @@ describe("<Pill>", () => {
|
|||
await userEvent.hover(screen.getByText("Room 1"));
|
||||
});
|
||||
|
||||
it("should show a tooltip with the room Id", () => {
|
||||
expect(screen.getByRole("tooltip", { name: room1Id })).toBeInTheDocument();
|
||||
it("should show a tooltip with the room Id", async () => {
|
||||
expect(await screen.findByRole("tooltip", { name: room1Id })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe("when not hovering the pill any more", () => {
|
||||
|
|
|
|||
|
|
@ -11,13 +11,17 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
|
|||
<div>
|
||||
<bdi>
|
||||
<span
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
>
|
||||
Room 1
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
>
|
||||
Room 1
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</bdi>
|
||||
|
|
@ -30,24 +34,28 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
|
|||
<div>
|
||||
<bdi>
|
||||
<span
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_AtRoomPill"
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
class="mx_Pill mx_AtRoomPill"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
>
|
||||
@room
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
>
|
||||
@room
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</bdi>
|
||||
|
|
@ -60,8 +68,8 @@ exports[`<Pill> should render the expected pill for a known user not in the room
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user2:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -91,8 +99,8 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com/$123-456"
|
||||
>
|
||||
<span
|
||||
|
|
@ -122,8 +130,8 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com/$123-456"
|
||||
>
|
||||
<span
|
||||
|
|
@ -153,8 +161,8 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/#room1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -184,8 +192,8 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!space1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -215,8 +223,8 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user3:example.com"
|
||||
>
|
||||
<div
|
||||
|
|
@ -238,8 +246,8 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -269,8 +277,8 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
|
|||
const { container } = getComponent({ mxEvent: ev });
|
||||
const content = container.querySelector(".mx_EventTile_body");
|
||||
expect(content.innerHTML).toMatchInlineSnapshot(
|
||||
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
|
||||
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ describe("<TextualBody />", () => {
|
|||
const { container } = getComponent({ mxEvent: ev });
|
||||
const content = container.querySelector(".mx_EventTile_body");
|
||||
expect(content.innerHTML).toMatchInlineSnapshot(
|
||||
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" aria-describedby="mx_Pill_0.123456"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
|
||||
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" data-state="closed"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -99,8 +99,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -150,8 +150,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -260,8 +260,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user:server"
|
||||
>
|
||||
<span
|
||||
|
|
@ -303,7 +303,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
><a
|
||||
class="mx_Pill mx_EventPill"
|
||||
href="https://matrix.to/#/!room1:example.com/%event_id%"
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
data-state="closed"
|
||||
><span
|
||||
aria-label="Profile picture"
|
||||
aria-hidden="true"
|
||||
|
|
@ -336,7 +336,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
><a
|
||||
class="mx_Pill mx_EventPill"
|
||||
href="https://matrix.to/#/!room2:example.com/%event_id%"
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
data-state="closed"
|
||||
><span
|
||||
aria-label="Avatar"
|
||||
aria-hidden="true"
|
||||
|
|
@ -371,8 +371,8 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com/!abc123"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { render, screen, waitFor } from "@testing-library/react";
|
|||
import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
|
||||
import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
|
||||
import { mocked } from "jest-mock";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import * as TestUtils from "../../../test-utils";
|
||||
import MemberTile from "../../../../src/components/views/rooms/MemberTile";
|
||||
|
|
@ -48,10 +49,13 @@ describe("MemberTile", () => {
|
|||
|
||||
const { container } = render(<MemberTile member={member} />);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.getByLabelText("This user has not verified all of their sessions.")).toBeInTheDocument(),
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
await waitFor(async () => {
|
||||
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
|
||||
expect(
|
||||
screen.getByRole("tooltip", { name: "This user has not verified all of their sessions." }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should display an verified E2EIcon when the e2E status = Verified", async () => {
|
||||
|
|
@ -69,11 +73,14 @@ describe("MemberTile", () => {
|
|||
|
||||
const { container } = render(<MemberTile member={member} />);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByLabelText("You have verified this user. This user has verified all of their sessions."),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
await waitFor(async () => {
|
||||
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
|
||||
expect(
|
||||
screen.getByRole("tooltip", {
|
||||
name: "You have verified this user. This user has verified all of their sessions.",
|
||||
}),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
|
|||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
aria-label="You have verified this user. This user has verified all of their sessions."
|
||||
class="mx_E2EIcon mx_E2EIcon_bordered mx_E2EIcon_verified"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EntityTile_details"
|
||||
|
|
@ -81,10 +77,6 @@ exports[`MemberTile should display an warning E2EIcon when the e2E status = Warn
|
|||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
aria-label="This user has not verified all of their sessions."
|
||||
class="mx_E2EIcon mx_E2EIcon_bordered mx_E2EIcon_warning"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EntityTile_details"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue