Fix user pill click (#10359)
This commit is contained in:
Michael Weimann
GitHub
parent
1e46efe89c
commit
41d88ad6ae
3 changed files with 210 additions and 177 deletions
|
|
@ -167,6 +167,7 @@ export const usePermalink: (args: Args) => HookResult = ({ room, type: argType,
|
||||||
text = member.name || resourceId;
|
text = member.name || resourceId;
|
||||||
onClick = (e: ButtonEvent): void => {
|
onClick = (e: ButtonEvent): void => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
dis.dispatch({
|
dis.dispatch({
|
||||||
action: Action.ViewUser,
|
action: Action.ViewUser,
|
||||||
member: member,
|
member: member,
|
||||||
|
|
|
||||||
|
|
@ -31,6 +31,7 @@ import {
|
||||||
} from "../../../test-utils";
|
} from "../../../test-utils";
|
||||||
import DMRoomMap from "../../../../src/utils/DMRoomMap";
|
import DMRoomMap from "../../../../src/utils/DMRoomMap";
|
||||||
import { Action } from "../../../../src/dispatcher/actions";
|
import { Action } from "../../../../src/dispatcher/actions";
|
||||||
|
import { ButtonEvent } from "../../../../src/components/views/elements/AccessibleButton";
|
||||||
|
|
||||||
describe("<Pill>", () => {
|
describe("<Pill>", () => {
|
||||||
let client: Mocked<MatrixClient>;
|
let client: Mocked<MatrixClient>;
|
||||||
|
|
@ -43,6 +44,7 @@ describe("<Pill>", () => {
|
||||||
const user1Id = "@user1:example.com";
|
const user1Id = "@user1:example.com";
|
||||||
const user2Id = "@user2:example.com";
|
const user2Id = "@user2:example.com";
|
||||||
let renderResult: RenderResult;
|
let renderResult: RenderResult;
|
||||||
|
let pillParentClickHandler: (e: ButtonEvent) => void;
|
||||||
|
|
||||||
const renderPill = (props: PillProps): void => {
|
const renderPill = (props: PillProps): void => {
|
||||||
const withDefault = {
|
const withDefault = {
|
||||||
|
|
@ -50,7 +52,12 @@ describe("<Pill>", () => {
|
||||||
shouldShowPillAvatar: true,
|
shouldShowPillAvatar: true,
|
||||||
...props,
|
...props,
|
||||||
} as PillProps;
|
} 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(
|
filterConsole(
|
||||||
|
|
@ -88,6 +95,7 @@ describe("<Pill>", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
jest.spyOn(dis, "dispatch");
|
jest.spyOn(dis, "dispatch");
|
||||||
|
pillParentClickHandler = jest.fn();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe("when rendering a pill for a room", () => {
|
describe("when rendering a pill for a room", () => {
|
||||||
|
|
@ -168,11 +176,13 @@ describe("<Pill>", () => {
|
||||||
await userEvent.click(screen.getByText("User 1"));
|
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({
|
expect(dis.dispatch).toHaveBeenCalledWith({
|
||||||
action: Action.ViewUser,
|
action: Action.ViewUser,
|
||||||
member: room1.getMember(user1Id),
|
member: room1.getMember(user1Id),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
expect(pillParentClickHandler).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -195,7 +205,11 @@ describe("<Pill>", () => {
|
||||||
renderPill({
|
renderPill({
|
||||||
url: permalinkPrefix,
|
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", () => {
|
it("should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false", () => {
|
||||||
|
|
|
||||||
|
|
@ -1,246 +1,264 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// 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`] = `
|
exports[`<Pill> should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<span
|
<bdi>
|
||||||
class="mx_Pill mx_RoomPill"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
class="mx_Pill_linkText"
|
class="mx_Pill mx_RoomPill"
|
||||||
>
|
>
|
||||||
Room 1
|
<span
|
||||||
|
class="mx_Pill_linkText"
|
||||||
|
>
|
||||||
|
Room 1
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</bdi>
|
||||||
</bdi>
|
</div>
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Pill> should render the expected pill for @room 1`] = `
|
exports[`<Pill> should render the expected pill for @room 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<span
|
<bdi>
|
||||||
class="mx_Pill mx_AtRoomPill"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
class="mx_Pill mx_AtRoomPill"
|
||||||
class="mx_BaseAvatar"
|
|
||||||
role="presentation"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mx_BaseAvatar_initial"
|
class="mx_BaseAvatar"
|
||||||
style="font-size: 10.4px; width: 16px; line-height: 16px;"
|
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>
|
</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>
|
||||||
<span
|
</bdi>
|
||||||
class="mx_Pill_linkText"
|
</div>
|
||||||
>
|
|
||||||
@room
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</bdi>
|
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Pill> should render the expected pill for a room alias 1`] = `
|
exports[`<Pill> should render the expected pill for a room alias 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<a
|
<bdi>
|
||||||
class="mx_Pill mx_RoomPill"
|
<a
|
||||||
href="https://matrix.to/#/#room1:example.com"
|
class="mx_Pill mx_RoomPill"
|
||||||
>
|
href="https://matrix.to/#/#room1:example.com"
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mx_BaseAvatar"
|
|
||||||
role="presentation"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mx_BaseAvatar_initial"
|
class="mx_BaseAvatar"
|
||||||
style="font-size: 10.4px; width: 16px; line-height: 16px;"
|
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>
|
||||||
<img
|
<span
|
||||||
alt=""
|
class="mx_Pill_linkText"
|
||||||
aria-hidden="true"
|
>
|
||||||
class="mx_BaseAvatar_image"
|
Room 1
|
||||||
data-testid="avatar-img"
|
</span>
|
||||||
src="data:image/png;base64,00"
|
</a>
|
||||||
style="width: 16px; height: 16px;"
|
</bdi>
|
||||||
/>
|
</div>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="mx_Pill_linkText"
|
|
||||||
>
|
|
||||||
Room 1
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</bdi>
|
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Pill> should render the expected pill for a space 1`] = `
|
exports[`<Pill> should render the expected pill for a space 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<a
|
<bdi>
|
||||||
class="mx_Pill mx_RoomPill"
|
<a
|
||||||
href="https://matrix.to/#/!space1:example.com"
|
class="mx_Pill mx_RoomPill"
|
||||||
>
|
href="https://matrix.to/#/!space1:example.com"
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mx_BaseAvatar"
|
|
||||||
role="presentation"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mx_BaseAvatar_initial"
|
class="mx_BaseAvatar"
|
||||||
style="font-size: 10.4px; width: 16px; line-height: 16px;"
|
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>
|
</span>
|
||||||
<img
|
<span
|
||||||
alt=""
|
class="mx_Pill_linkText"
|
||||||
aria-hidden="true"
|
>
|
||||||
class="mx_BaseAvatar_image"
|
Space 1
|
||||||
data-testid="avatar-img"
|
</span>
|
||||||
src="data:image/png;base64,00"
|
</a>
|
||||||
style="width: 16px; height: 16px;"
|
</bdi>
|
||||||
/>
|
</div>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="mx_Pill_linkText"
|
|
||||||
>
|
|
||||||
Space 1
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</bdi>
|
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
|
exports[`<Pill> should render the expected pill for a user not in the room 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<a
|
<bdi>
|
||||||
class="mx_Pill mx_UserPill"
|
<a
|
||||||
href="https://matrix.to/#/@user2:example.com"
|
class="mx_Pill mx_UserPill"
|
||||||
>
|
href="https://matrix.to/#/@user2:example.com"
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mx_BaseAvatar"
|
|
||||||
role="presentation"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mx_BaseAvatar_initial"
|
class="mx_BaseAvatar"
|
||||||
style="font-size: 10.4px; width: 16px; line-height: 16px;"
|
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>
|
</span>
|
||||||
<img
|
<span
|
||||||
alt=""
|
class="mx_Pill_linkText"
|
||||||
aria-hidden="true"
|
>
|
||||||
class="mx_BaseAvatar_image"
|
User 2
|
||||||
data-testid="avatar-img"
|
</span>
|
||||||
src="data:image/png;base64,00"
|
</a>
|
||||||
style="width: 16px; height: 16px;"
|
</bdi>
|
||||||
/>
|
</div>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="mx_Pill_linkText"
|
|
||||||
>
|
|
||||||
User 2
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</bdi>
|
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Pill> when rendering a pill for a room should render the expected pill 1`] = `
|
exports[`<Pill> when rendering a pill for a room should render the expected pill 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<a
|
<bdi>
|
||||||
class="mx_Pill mx_RoomPill"
|
<a
|
||||||
href="https://matrix.to/#/!room1:example.com"
|
class="mx_Pill mx_RoomPill"
|
||||||
>
|
href="https://matrix.to/#/!room1:example.com"
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mx_BaseAvatar"
|
|
||||||
role="presentation"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mx_BaseAvatar_initial"
|
class="mx_BaseAvatar"
|
||||||
style="font-size: 10.4px; width: 16px; line-height: 16px;"
|
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>
|
||||||
<img
|
<span
|
||||||
alt=""
|
class="mx_Pill_linkText"
|
||||||
aria-hidden="true"
|
>
|
||||||
class="mx_BaseAvatar_image"
|
Room 1
|
||||||
data-testid="avatar-img"
|
</span>
|
||||||
src="data:image/png;base64,00"
|
</a>
|
||||||
style="width: 16px; height: 16px;"
|
</bdi>
|
||||||
/>
|
</div>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="mx_Pill_linkText"
|
|
||||||
>
|
|
||||||
Room 1
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</bdi>
|
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`<Pill> when rendering a pill for a user in the room should render as expected 1`] = `
|
exports[`<Pill> when rendering a pill for a user in the room should render as expected 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<bdi>
|
<div>
|
||||||
<a
|
<bdi>
|
||||||
class="mx_Pill mx_UserPill"
|
<a
|
||||||
href="https://matrix.to/#/@user1:example.com"
|
class="mx_Pill mx_UserPill"
|
||||||
>
|
href="https://matrix.to/#/@user1:example.com"
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="mx_BaseAvatar"
|
|
||||||
role="presentation"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="mx_BaseAvatar_initial"
|
class="mx_BaseAvatar"
|
||||||
style="font-size: 10.4px; width: 16px; line-height: 16px;"
|
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>
|
</span>
|
||||||
<img
|
<span
|
||||||
alt=""
|
class="mx_Pill_linkText"
|
||||||
aria-hidden="true"
|
>
|
||||||
class="mx_BaseAvatar_image"
|
User 1
|
||||||
data-testid="avatar-img"
|
</span>
|
||||||
src="data:image/png;base64,00"
|
</a>
|
||||||
style="width: 16px; height: 16px;"
|
</bdi>
|
||||||
/>
|
</div>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="mx_Pill_linkText"
|
|
||||||
>
|
|
||||||
User 1
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</bdi>
|
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue