mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-28 19:38:48 +08:00
60fe70b3cc
* 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
483 lines
12 KiB
Plaintext
483 lines
12 KiB
Plaintext
// 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
|
|
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"
|
|
data-testid="banner-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 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
|
|
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 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"
|
|
>
|
|
2 of 2
|
|
</span>
|
|
Pinned messages
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_PinnedMessageBanner_message"
|
|
data-testid="banner-message"
|
|
>
|
|
Second 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 4 pinned event 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 mx_PinnedMessageBanner_Indicator--active"
|
|
data-testid="banner-indicator"
|
|
/>
|
|
<div
|
|
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--hidden"
|
|
data-testid="banner-indicator"
|
|
/>
|
|
<div
|
|
class="mx_PinnedMessageBanner_Indicator mx_PinnedMessageBanner_Indicator--hidden"
|
|
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"
|
|
>
|
|
4 of 4
|
|
</span>
|
|
Pinned messages
|
|
</span>
|
|
</div>
|
|
<span
|
|
class="mx_PinnedMessageBanner_message"
|
|
data-testid="banner-message"
|
|
>
|
|
Fourth 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 a single pinned 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"
|
|
>
|
|
First pinned message
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</DocumentFragment>
|
|
`;
|