Add a prefix to file, poll, image, video and audio in the pinned message banner (#12950)
* Move event preview to its own component * Remove unused parameter * Add prefix to file, audio, video and image in the pinned message banner * Add prefix to poll in the pinned message banner * Add tests
This commit is contained in:
Florian Duros
GitHub
parent
9d8c5b6a1c
commit
60fe70b3cc
5 changed files with 359 additions and 10 deletions
|
|
@ -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";
|
||||
|
|
@ -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()!]);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue