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:
parent
1ac533e730
commit
41686bba58
4 changed files with 95 additions and 11 deletions
|
@ -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]);
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue