Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@florianduros
florianduros committed Sep 3, 2024
1 parent 101e542 commit 7da06ce
Show file tree
Hide file tree
Showing 3 changed files with 273 additions and 3 deletions.
9 changes: 7 additions & 2 deletions src/components/views/rooms/PinnedMessageBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,15 @@ function EventPreview({ pinnedEvent }: EventPreviewProps): JSX.Element | null {
if (!preview) return null;

const prefix = getPreviewPrefix(pinnedEvent.getType(), pinnedEvent.getContent().msgtype as MsgType);
if (!prefix) return <span className="mx_PinnedMessageBanner_message">{preview}</span>;
if (!prefix)
return (
<span className="mx_PinnedMessageBanner_message" data-testid="banner-message">
{preview}
</span>
);

return (
<span className="mx_PinnedMessageBanner_message">
<span className="mx_PinnedMessageBanner_message" data-testid="banner-message">
{_t(
"room|pinned_message_banner|preview",
{
Expand Down
28 changes: 27 additions & 1 deletion test/components/views/rooms/PinnedMessageBanner-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import userEvent from "@testing-library/user-event";
import * as pinnedEventHooks from "../../../../src/hooks/usePinnedEvents";
import { PinnedMessageBanner } from "../../../../src/components/views/rooms/PinnedMessageBanner";
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
import { stubClient } from "../../../test-utils";
import { makePollStartEvent, stubClient } from "../../../test-utils";
import dis from "../../../../src/dispatcher/dispatcher";
import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
Expand Down Expand Up @@ -185,6 +185,32 @@ describe("<PinnedMessageBanner />", () => {
});
});

it.each([
["m.file", "File"],
["m.audio", "Audio"],
["m.video", "Video"],
["m.image", "Image"],
])("should display the %s event type", (msgType, label) => {
const body = `Message with ${msgType} type`;
const event = makePinEvent({ content: { body, msgtype: msgType } });
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event]);

const { asFragment } = renderBanner();
expect(screen.getByTestId("banner-message")).toHaveTextContent(`${label}: ${body}`);
expect(asFragment()).toMatchSnapshot();
});

it("should display display a poll event", async () => {
const event = makePollStartEvent("Alice?", userId);
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event.getId()!]);
jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event]);

const { asFragment } = renderBanner();
expect(screen.getByTestId("banner-message")).toHaveTextContent("Poll: Alice?");
expect(asFragment()).toMatchSnapshot();
});

describe("Right button", () => {
beforeEach(() => {
jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
Expand Down
239 changes: 239 additions & 0 deletions test/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,52 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
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 mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
<span>
<span
class="mx_PinnedMessageBanner_prefix"
>
Poll:
</span>
Alice?
</span>
</span>
</div>
</button>
</div>
</DocumentFragment>
`;

exports[`<PinnedMessageBanner /> should display the last message when the pinned event array changed 1`] = `
<DocumentFragment>
<div
Expand Down Expand Up @@ -51,6 +98,7 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
</div>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
Third pinned message
</span>
Expand All @@ -69,6 +117,194 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
</DocumentFragment>
`;

exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
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 mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
<span>
<span
class="mx_PinnedMessageBanner_prefix"
>
Audio:
</span>
Message with m.audio type
</span>
</span>
</div>
</button>
</div>
</DocumentFragment>
`;

exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
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 mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
<span>
<span
class="mx_PinnedMessageBanner_prefix"
>
File:
</span>
Message with m.file type
</span>
</span>
</div>
</button>
</div>
</DocumentFragment>
`;

exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
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 mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
<span>
<span
class="mx_PinnedMessageBanner_prefix"
>
Image:
</span>
Message with m.image type
</span>
</span>
</div>
</button>
</div>
</DocumentFragment>
`;

exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
<DocumentFragment>
<div
aria-label="This room has pinned messages. Click to view them."
class="mx_PinnedMessageBanner"
data-single-message="true"
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 mx_PinnedMessageBanner_Indicator--active"
data-testid="banner-indicator"
/>
</div>
<div
class="mx_PinnedMessageBanner_PinIcon"
width="20"
/>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
<span>
<span
class="mx_PinnedMessageBanner_prefix"
>
Video:
</span>
Message with m.video type
</span>
</span>
</div>
</button>
</div>
</DocumentFragment>
`;

exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
<DocumentFragment>
<div
Expand Down Expand Up @@ -116,6 +352,7 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
</div>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
Second pinned message
</span>
Expand Down Expand Up @@ -185,6 +422,7 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
</div>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
Fourth pinned message
</span>
Expand Down Expand Up @@ -233,6 +471,7 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
/>
<span
class="mx_PinnedMessageBanner_message"
data-testid="banner-message"
>
First pinned message
</span>
Expand Down

0 comments on commit 7da06ce

Please sign in to comment.