mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-22 18:55:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
playwright/e2e/pinned-messages/pinned-messages.spec.ts
View file

@ -103,16 +103,16 @@ test.describe("Pinned messages", () => {
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg2");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg2.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg2");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg2.png");
});
test("should display 4 messages in the banner", async ({ page, app, room1, util }) => {
@ -120,7 +120,7 @@ test.describe("Pinned messages", () => {
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
await util.pinMessages(["Msg1", "Msg2", "Msg3", "Msg4"]);
for (const msg of ["Msg1", "Msg4", "Msg3", "Msg2"]) {
for (const msg of ["Msg4", "Msg3", "Msg2", "Msg1"]) {
await util.assertMessageInBanner(msg);
await expect(util.getBanner()).toMatchScreenshot(`pinned-message-banner-4-${msg}.png`);
await util.getBanner().click();

8
src/components/views/rooms/PinnedMessageBanner.tsx
View file

@ -57,13 +57,9 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
const isSinglePinnedEvent = eventCount === 1;
const [currentEventIndex, setCurrentEventIndex] = useState(eventCount - 1);
// If the list of pinned events changes, we need to make sure the current index isn't out of bound
// When the number of pinned messages changes, we want to display the last message
useEffect(() => {
setCurrentEventIndex((currentEventIndex) => {
// If the current index is out of bound, we set it to the last index
if (currentEventIndex < 0 || currentEventIndex >= eventCount) return eventCount - 1;
return currentEventIndex;
});
setCurrentEventIndex((currentEventIndex) => eventCount - 1);
}, [eventCount]);
const pinnedEvent = pinnedEvents[currentEventIndex];

19
test/components/views/rooms/PinnedMessageBanner-test.tsx
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]);

69
test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
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