PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix user pill click (#10359)

Browse source
This commit is contained in:
Michael Weimann 2023-03-13 15:43:13 +01:00 committed by GitHub
parent 1e46efe89c
commit 41d88ad6ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 210 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/hooks/usePermalink.ts
View file

@ -167,6 +167,7 @@ export const usePermalink: (args: Args) => HookResult = ({ room, type: argType,
text = member.name || resourceId;
onClick = (e: ButtonEvent): void => {
e.preventDefault();
e.stopPropagation();
dis.dispatch({
action: Action.ViewUser,
member: member,

20
test/components/views/elements/Pill-test.tsx
View file

@ -31,6 +31,7 @@ import {
} from "../../../test-utils";
import DMRoomMap from "../../../../src/utils/DMRoomMap";
import { Action } from "../../../../src/dispatcher/actions";
import { ButtonEvent } from "../../../../src/components/views/elements/AccessibleButton";
describe("<Pill>", () => {
let client: Mocked<MatrixClient>;
@ -43,6 +44,7 @@ describe("<Pill>", () => {
const user1Id = "@user1:example.com";
const user2Id = "@user2:example.com";
let renderResult: RenderResult;
let pillParentClickHandler: (e: ButtonEvent) => void;
const renderPill = (props: PillProps): void => {
const withDefault = {
@ -50,7 +52,12 @@ describe("<Pill>", () => {
shouldShowPillAvatar: true,
...props,
} as PillProps;
renderResult = render(<Pill {...withDefault} />);
// wrap Pill with a div to allow testing of event bubbling
renderResult = render(
<div onClick={pillParentClickHandler}>
<Pill {...withDefault} />
</div>,
);
};
filterConsole(
@ -88,6 +95,7 @@ describe("<Pill>", () => {
});
jest.spyOn(dis, "dispatch");
pillParentClickHandler = jest.fn();
});
describe("when rendering a pill for a room", () => {
@ -168,11 +176,13 @@ describe("<Pill>", () => {
await userEvent.click(screen.getByText("User 1"));
});
it("should dipsatch a view user action", () => {
it("should dipsatch a view user action and prevent event bubbling", () => {
expect(dis.dispatch).toHaveBeenCalledWith({
action: Action.ViewUser,
member: room1.getMember(user1Id),
});
expect(pillParentClickHandler).not.toHaveBeenCalled();
});
});
});
@ -195,7 +205,11 @@ describe("<Pill>", () => {
renderPill({
url: permalinkPrefix,
});
expect(renderResult.asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
expect(renderResult.asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<div />
</DocumentFragment>
`);
});
it("should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false", () => {

366
test/components/views/elements/__snapshots__/Pill-test.tsx.snap
View file

@ -1,246 +1,264 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Pill> should not render a non-permalink 1`] = `<DocumentFragment />`;
exports[`<Pill> should not render a non-permalink 1`] = `
<DocumentFragment>
<div />
</DocumentFragment>
`;
exports[`<Pill> should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false 1`] = `
<DocumentFragment>
<bdi>
<span
class="mx_Pill mx_RoomPill"
>
<div>
<bdi>
<span
class="mx_Pill_linkText"
class="mx_Pill mx_RoomPill"
>
Room 1
<span
class="mx_Pill_linkText"
>
Room 1
</span>
</span>
</span>
</bdi>
</bdi>
</div>
</DocumentFragment>
`;
exports[`<Pill> should render the expected pill for @room 1`] = `
<DocumentFragment>
<bdi>
<span
class="mx_Pill mx_AtRoomPill"
>
<div>
<bdi>
<span
aria-hidden="true"
class="mx_BaseAvatar"
role="presentation"
class="mx_Pill mx_AtRoomPill"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
class="mx_BaseAvatar"
role="presentation"
>
R
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
@room
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
@room
</span>
</span>
</bdi>
</bdi>
</div>
</DocumentFragment>
`;
exports[`<Pill> should render the expected pill for a room alias 1`] = `
<DocumentFragment>
<bdi>
<a
class="mx_Pill mx_RoomPill"
href="https://matrix.to/#/#room1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
role="presentation"
<div>
<bdi>
<a
class="mx_Pill mx_RoomPill"
href="https://matrix.to/#/#room1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
class="mx_BaseAvatar"
role="presentation"
>
R
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
Room 1
</span>
</a>
</bdi>
<span
class="mx_Pill_linkText"
>
Room 1
</span>
</a>
</bdi>
</div>
</DocumentFragment>
`;
exports[`<Pill> should render the expected pill for a space 1`] = `
<DocumentFragment>
<bdi>
<a
class="mx_Pill mx_RoomPill"
href="https://matrix.to/#/!space1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
role="presentation"
<div>
<bdi>
<a
class="mx_Pill mx_RoomPill"
href="https://matrix.to/#/!space1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
class="mx_BaseAvatar"
role="presentation"
>
S
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
S
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
Space 1
</span>
</a>
</bdi>
<span
class="mx_Pill_linkText"
>
Space 1
</span>
</a>
</bdi>
</div>
</DocumentFragment>
`;
exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
<DocumentFragment>
<bdi>
<a
class="mx_Pill mx_UserPill"
href="https://matrix.to/#/@user2:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
role="presentation"
<div>
<bdi>
<a
class="mx_Pill mx_UserPill"
href="https://matrix.to/#/@user2:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
class="mx_BaseAvatar"
role="presentation"
>
U
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
User 2
</span>
</a>
</bdi>
<span
class="mx_Pill_linkText"
>
User 2
</span>
</a>
</bdi>
</div>
</DocumentFragment>
`;
exports[`<Pill> when rendering a pill for a room should render the expected pill 1`] = `
<DocumentFragment>
<bdi>
<a
class="mx_Pill mx_RoomPill"
href="https://matrix.to/#/!room1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
role="presentation"
<div>
<bdi>
<a
class="mx_Pill mx_RoomPill"
href="https://matrix.to/#/!room1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
class="mx_BaseAvatar"
role="presentation"
>
R
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
R
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
Room 1
</span>
</a>
</bdi>
<span
class="mx_Pill_linkText"
>
Room 1
</span>
</a>
</bdi>
</div>
</DocumentFragment>
`;
exports[`<Pill> when rendering a pill for a user in the room should render as expected 1`] = `
<DocumentFragment>
<bdi>
<a
class="mx_Pill mx_UserPill"
href="https://matrix.to/#/@user1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar"
role="presentation"
<div>
<bdi>
<a
class="mx_Pill mx_UserPill"
href="https://matrix.to/#/@user1:example.com"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
class="mx_BaseAvatar"
role="presentation"
>
U
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 10.4px; width: 16px; line-height: 16px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 16px; height: 16px;"
/>
</span>
<span
class="mx_Pill_linkText"
>
User 1
</span>
</a>
</bdi>
<span
class="mx_Pill_linkText"
>
User 1
</span>
</a>
</bdi>
</div>
</DocumentFragment>
`;