Always display last pinned message on the banner (#12945)

* Fix when an event is pinned and the banner displays the correct event.

Fix when an event is pinned and the banner displays the good event.

* Update e2e tests
This commit is contained in:
Florian Duros 2024-09-02 17:50:39 +02:00 committed by GitHub
parent 1ac533e730
commit 41686bba58
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 95 additions and 11 deletions

View file

@ -136,6 +136,25 @@ describe("<PinnedMessageBanner />", () => {
expect(asFragment()).toMatchSnapshot();
});
it("should display the last message when the pinned event array changed", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
const { asFragment, rerender } = renderBanner();
await userEvent.click(screen.getByRole("button", { name: "View the pinned message in the timeline." }));
expect(screen.getByText("First pinned message")).toBeVisible();
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([
event1.getId()!,
event2.getId()!,
event3.getId()!,
]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3]);
rerender(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
expect(screen.getByText("Third pinned message")).toBeVisible();
expect(asFragment()).toMatchSnapshot();
});
it("should rotate the pinned events when the banner is clicked", async () => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);

View file

@ -1,5 +1,74 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<PinnedMessageBanner /> should display the last message when the pinned event array changed 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="false"
data-testid="pinned-message-banner"
>
<button
aria-label="View the pinned message in the timeline."
class="mx_PinnedMessageBanner_main"
type="button"
>
<div
class="mx_PinnedMessageBanner_content"
>
<div
class="mx_PinnedMessageBanner_Indicators"
>
<div
class="mx_PinnedMessageBanner_Indicator"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator"
data-testid="banner-indicator"
/>
<div
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<div
class="mx_PinnedMessageBanner_title"
data-testid="banner-counter"
>
<span>
<span
class="mx_PinnedMessageBanner_title_counter"
>
3 of 3
</span>
Pinned messages
</span>
</div>
<span
class="mx_PinnedMessageBanner_message"
>
Third pinned message
</span>
</div>
</button>
<button
class="_button_zt6rp_17 mx_PinnedMessageBanner_actions"
data-kind="tertiary"
data-size="lg"
role="button"
tabindex="0"
>
View all
</button>
</div>
</DocumentFragment>
`;
exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
<DocumentFragment>
<div