2022-08-04 06:19:52 +00:00
// Jest Snapshot v1, https://goo.gl/fbAQLP
2022-12-08 21:37:25 +00:00
exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2024-07-23 10:56:25 +00:00
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
2022-12-08 21:37:25 +00:00
>
2024-09-26 10:14:53 +00:00
<button
aria-label="Open room settings"
aria-live="off"
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 10:56:25 +00:00
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
2022-12-08 21:37:25 +00:00
<div
2024-07-23 10:56:25 +00:00
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
class="_stacked-avatars_mcap2_111"
2022-12-08 21:37:25 +00:00
>
2024-07-23 10:56:25 +00:00
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-08 21:37:25 +00:00
<span
2024-03-07 14:40:03 +00:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 03:48:35 +00:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 21:37:25 +00:00
role="presentation"
2024-07-23 10:56:25 +00:00
style="--cpd-avatar-size: 20px;"
2022-12-08 21:37:25 +00:00
>
2023-08-24 03:48:35 +00:00
u
2022-12-08 21:37:25 +00:00
</span>
</div>
2024-07-23 10:56:25 +00:00
2
2022-12-08 21:37:25 +00:00
</div>
</div>
</header>
<div
class="mx_RoomView_body"
>
<div
class="mx_LargeLoader"
>
<div
class="mx_Spinner"
>
<div
2023-02-14 09:05:01 +00:00
aria-label="Loading…"
2022-12-08 21:37:25 +00:00
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 45px; height: 45px;"
/>
</div>
<div
class="mx_LargeLoader_text"
>
We're creating a room with @user:example.com
</div>
</div>
</div>
</div>
</div>
`;
2022-08-04 06:19:52 +00:00
2022-12-08 21:37:25 +00:00
exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2024-07-23 10:56:25 +00:00
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
2022-12-08 21:37:25 +00:00
>
2024-09-26 10:14:53 +00:00
<button
aria-label="Open room settings"
aria-live="off"
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 10:56:25 +00:00
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
2022-12-08 21:37:25 +00:00
<div
2024-07-23 10:56:25 +00:00
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
class="_stacked-avatars_mcap2_111"
2022-12-08 21:37:25 +00:00
>
2024-07-23 10:56:25 +00:00
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-08 21:37:25 +00:00
<span
2024-03-07 14:40:03 +00:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 03:48:35 +00:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 21:37:25 +00:00
role="presentation"
2024-07-23 10:56:25 +00:00
style="--cpd-avatar-size: 20px;"
2022-12-08 21:37:25 +00:00
>
2023-08-24 03:48:35 +00:00
u
2022-12-08 21:37:25 +00:00
</span>
</div>
2024-07-23 10:56:25 +00:00
2
2022-12-08 21:37:25 +00:00
</div>
</div>
</header>
<main
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<li
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
>
<div
class="mx_EventTileBubble_title"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<span>
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
</span>
</div>
</div>
2023-08-24 03:48:35 +00:00
<button
2022-12-08 21:37:25 +00:00
aria-label="Avatar"
aria-live="off"
2024-03-07 14:40:03 +00:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 03:48:35 +00:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 21:37:25 +00:00
role="button"
2023-08-24 03:48:35 +00:00
style="--cpd-avatar-size: 52px;"
2022-12-08 21:37:25 +00:00
>
2023-08-24 03:48:35 +00:00
u
</button>
2022-12-08 21:37:25 +00:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
2024-09-13 11:34:15 +00:00
<strong>
2022-12-08 21:37:25 +00:00
@user:example.com
2024-09-13 11:34:15 +00:00
</strong>
2022-12-08 21:37:25 +00:00
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
>
<div
role="alert"
>
<div
class="mx_RoomStatusBar_unsentBadge"
>
<div
2024-03-22 00:27:13 +00:00
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
2022-12-08 21:37:25 +00:00
>
<span
class="mx_NotificationBadge_count"
>
!
</span>
</div>
</div>
<div>
<div
class="mx_RoomStatusBar_unsentTitle"
>
Some of your messages have not been sent
</div>
</div>
<div
class="mx_RoomStatusBar_unsentButtonBar"
>
<div
class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
role="button"
tabindex="0"
>
Retry
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2022-08-04 06:19:52 +00:00
2022-12-08 21:37:25 +00:00
exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2024-07-23 10:56:25 +00:00
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
2022-12-08 21:37:25 +00:00
>
2024-09-26 10:14:53 +00:00
<button
aria-label="Open room settings"
aria-live="off"
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 10:56:25 +00:00
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
2022-12-08 21:37:25 +00:00
<div
2024-07-23 10:56:25 +00:00
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
class="_stacked-avatars_mcap2_111"
2022-12-08 21:37:25 +00:00
>
2024-07-23 10:56:25 +00:00
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-08 21:37:25 +00:00
<span
2024-03-07 14:40:03 +00:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 03:48:35 +00:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 21:37:25 +00:00
role="presentation"
2024-07-23 10:56:25 +00:00
style="--cpd-avatar-size: 20px;"
2022-12-08 21:37:25 +00:00
>
2023-08-24 03:48:35 +00:00
u
2022-12-08 21:37:25 +00:00
</span>
</div>
2024-07-23 10:56:25 +00:00
2
2022-12-08 21:37:25 +00:00
</div>
</div>
</header>
<main
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<li
class="mx_NewRoomIntro"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
>
<div
class="mx_EventTileBubble_title"
>
End-to-end encryption isn't enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
<span>
Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
</span>
</div>
</div>
2023-08-24 03:48:35 +00:00
<button
2022-12-08 21:37:25 +00:00
aria-label="Avatar"
aria-live="off"
2024-03-07 14:40:03 +00:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 03:48:35 +00:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 21:37:25 +00:00
role="button"
2023-08-24 03:48:35 +00:00
style="--cpd-avatar-size: 52px;"
2022-12-08 21:37:25 +00:00
>
2023-08-24 03:48:35 +00:00
u
</button>
2022-12-08 21:37:25 +00:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
2024-09-13 11:34:15 +00:00
<strong>
2022-12-08 21:37:25 +00:00
@user:example.com
2024-09-13 11:34:15 +00:00
</strong>
2022-12-08 21:37:25 +00:00
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
2023-12-20 15:32:24 +00:00
aria-label="Message composer"
2022-12-08 21:37:25 +00:00
class="mx_MessageComposer"
2023-12-20 15:32:24 +00:00
role="region"
2022-12-08 21:37:25 +00:00
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
2023-04-12 13:58:38 +00:00
aria-label="Formatting"
2022-12-08 21:37:25 +00:00
class="mx_MessageComposerFormatBar"
2023-04-12 13:58:38 +00:00
role="toolbar"
2022-12-08 21:37:25 +00:00
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
aria-label="Send a message…"
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2023-09-19 05:58:53 +00:00
style="--placeholder: 'Send\\ a\\ message…';"
2022-12-08 21:37:25 +00:00
tabindex="0"
2023-06-27 08:48:32 +00:00
translate="no"
2022-12-08 21:37:25 +00:00
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2022-08-04 06:19:52 +00:00
2022-12-08 21:37:25 +00:00
exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
2024-07-23 10:56:25 +00:00
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
2022-12-08 21:37:25 +00:00
>
2024-09-26 10:14:53 +00:00
<button
aria-label="Open room settings"
aria-live="off"
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="button"
style="--cpd-avatar-size: 40px;"
tabindex="-1"
>
u
</button>
2024-07-23 10:56:25 +00:00
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
2022-12-08 21:37:25 +00:00
>
<span
2024-07-23 10:56:25 +00:00
class="mx_RoomHeader_truncated mx_lineClamp"
2022-12-08 21:37:25 +00:00
>
2024-07-23 10:56:25 +00:00
@user:example.com
2022-12-08 21:37:25 +00:00
</span>
</div>
</div>
2024-07-23 10:56:25 +00:00
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
2023-12-21 15:21:41 +00:00
tabindex="0"
>
<div
2024-07-23 10:56:25 +00:00
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
2022-12-08 21:37:25 +00:00
<div
2024-07-23 10:56:25 +00:00
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
2022-12-08 21:37:25 +00:00
>
<div
2024-07-23 10:56:25 +00:00
class="_stacked-avatars_mcap2_111"
2022-12-08 21:37:25 +00:00
>
2024-07-23 10:56:25 +00:00
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
2022-12-08 21:37:25 +00:00
</div>
2024-07-23 10:56:25 +00:00
2
2022-12-08 21:37:25 +00:00
</div>
</div>
</header>
<main
class="mx_RoomView_body"
>
<div
class="mx_RoomView_timeline"
>
<div
class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
tabindex="-1"
>
<div
class="mx_RoomView_messageListWrapper"
>
<ol
aria-live="polite"
class="mx_RoomView_MessageList"
style="height: 400px;"
>
<div
class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
>
<div
class="mx_EventTileBubble_title"
>
Encryption enabled
</div>
<div
class="mx_EventTileBubble_subtitle"
>
Messages in this chat will be end-to-end encrypted.
</div>
</div>
<li
class="mx_NewRoomIntro"
>
2023-08-24 03:48:35 +00:00
<button
2022-12-08 21:37:25 +00:00
aria-label="Avatar"
aria-live="off"
2024-03-07 14:40:03 +00:00
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
2023-08-24 03:48:35 +00:00
data-color="3"
data-testid="avatar-img"
data-type="round"
2022-12-08 21:37:25 +00:00
role="button"
2023-08-24 03:48:35 +00:00
style="--cpd-avatar-size: 52px;"
2022-12-08 21:37:25 +00:00
>
2023-08-24 03:48:35 +00:00
u
</button>
2022-12-08 21:37:25 +00:00
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
2024-09-13 11:34:15 +00:00
<strong>
2022-12-08 21:37:25 +00:00
@user:example.com
2024-09-13 11:34:15 +00:00
</strong>
2022-12-08 21:37:25 +00:00
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
2023-12-20 15:32:24 +00:00
aria-label="Message composer"
2022-12-08 21:37:25 +00:00
class="mx_MessageComposer"
2023-12-20 15:32:24 +00:00
role="region"
2022-12-08 21:37:25 +00:00
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
2023-04-12 13:58:38 +00:00
aria-label="Formatting"
2022-12-08 21:37:25 +00:00
class="mx_MessageComposerFormatBar"
2023-04-12 13:58:38 +00:00
role="toolbar"
2022-12-08 21:37:25 +00:00
>
<button
aria-label="Bold"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
role="button"
tabindex="0"
type="button"
/>
<button
aria-label="Italics"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
2023-04-12 13:58:38 +00:00
tabindex="-1"
2022-12-08 21:37:25 +00:00
type="button"
/>
</div>
<div
aria-autocomplete="list"
aria-disabled="false"
aria-haspopup="listbox"
aria-label="Send a message…"
aria-multiline="true"
class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
contenteditable="true"
data-testid="basicmessagecomposer"
dir="auto"
role="textbox"
2023-09-19 05:58:53 +00:00
style="--placeholder: 'Send\\ a\\ message…';"
2022-12-08 21:37:25 +00:00
tabindex="0"
2023-06-27 08:48:32 +00:00
translate="no"
2022-12-08 21:37:25 +00:00
>
<div>
<br />
</div>
</div>
</div>
</div>
<div
class="mx_MessageComposer_actions"
>
<div
aria-label="Emoji"
class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
role="button"
tabindex="0"
/>
<div
aria-label="Attachment"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
role="button"
tabindex="0"
/>
<div
aria-label="More options"
class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
role="button"
tabindex="0"
/>
<input
multiple=""
style="display: none;"
type="file"
/>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
`;
2023-06-19 16:08:16 +00:00
exports[`RoomView should show error view if failed to look up room alias 1`] = `
<DocumentFragment>
<div
class="mx_RoomView"
2024-07-23 10:56:25 +00:00
data-room-header="new"
2023-06-19 16:08:16 +00:00
>
<div
2023-10-20 13:30:37 +00:00
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
2023-12-20 15:32:24 +00:00
role="complementary"
2023-06-19 16:08:16 +00:00
>
<div
class="mx_RoomPreviewBar_message"
>
<h3>
#addy:server does not exist.
</h3>
<p>
Are you sure you're at the right place?
</p>
</div>
<div
class="mx_RoomPreviewBar_actions"
/>
<div
class="mx_RoomPreviewBar_footer"
/>
</div>
</div>
</DocumentFragment>
`;
