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 2023-12-21 15:21:41 +00:00 committed by GitHub
parent 42ac2272b2
commit 07747e24d4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 105 additions and 129 deletions

View file

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

View file

@ -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"