From 41d88ad6aea7fe4fdb74452b357c1891cb6bffbc Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Mon, 13 Mar 2023 15:43:13 +0100 Subject: [PATCH] Fix user pill click (#10359) --- src/hooks/usePermalink.ts | 1 + test/components/views/elements/Pill-test.tsx | 20 +- .../elements/__snapshots__/Pill-test.tsx.snap | 366 +++++++++--------- 3 files changed, 210 insertions(+), 177 deletions(-) diff --git a/src/hooks/usePermalink.ts b/src/hooks/usePermalink.ts index a6b19d7de7..87a9c19244 100644 --- a/src/hooks/usePermalink.ts +++ b/src/hooks/usePermalink.ts @@ -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, diff --git a/test/components/views/elements/Pill-test.tsx b/test/components/views/elements/Pill-test.tsx index 72c68e117c..2937352468 100644 --- a/test/components/views/elements/Pill-test.tsx +++ b/test/components/views/elements/Pill-test.tsx @@ -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("", () => { let client: Mocked; @@ -43,6 +44,7 @@ describe("", () => { 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("", () => { shouldShowPillAvatar: true, ...props, } as PillProps; - renderResult = render(); + // wrap Pill with a div to allow testing of event bubbling + renderResult = render( +
+ +
, + ); }; filterConsole( @@ -88,6 +95,7 @@ describe("", () => { }); jest.spyOn(dis, "dispatch"); + pillParentClickHandler = jest.fn(); }); describe("when rendering a pill for a room", () => { @@ -168,11 +176,13 @@ describe("", () => { 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("", () => { renderPill({ url: permalinkPrefix, }); - expect(renderResult.asFragment()).toMatchInlineSnapshot(``); + expect(renderResult.asFragment()).toMatchInlineSnapshot(` + +
+ + `); }); it("should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false", () => { diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap index ea973e3686..d9e5810864 100644 --- a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap @@ -1,246 +1,264 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should not render a non-permalink 1`] = ``; +exports[` should not render a non-permalink 1`] = ` + +
+ +`; exports[` should not render an avatar or link when called with inMessage = false and shouldShowPillAvatar = false 1`] = ` - - +
+ - Room 1 + + Room 1 + - - + +
`; exports[` should render the expected pill for @room 1`] = ` - - +
+ - - @room - - - + +
`; exports[` should render the expected pill for a room alias 1`] = ` - - - - - - - Room 1 - - - + + Room 1 + + + +
`; exports[` should render the expected pill for a space 1`] = ` - - - - - - - Space 1 - - - + + Space 1 + + + +
`; exports[` should render the expected pill for a user not in the room 1`] = ` - - - - - - - User 2 - - - + + User 2 + + + + `; exports[` when rendering a pill for a room should render the expected pill 1`] = ` - - - - - - - Room 1 - - - + + Room 1 + + + + `; exports[` when rendering a pill for a user in the room should render as expected 1`] = ` - - - - - - - User 1 - - - + + User 1 + + + + `;