Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 13:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity
e5b1b7b632
element-web-Github/test/components/structures/__snapshots__/RoomView-test.tsx.snap
Michael Telatynski e5b1b7b632
Make composer format bar an aria toolbar (#10583) 
* Make composer format bar an aria toolbar

* Iterate

* Iterate

* Update snapshot
2023-04-12 13:58:38 +00:00

812 lines
24 KiB
Plaintext
Raw Blame History

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_RoomHeader light-panel"
>
<div
class="mx_RoomHeader_wrapper"
>
<div
class="mx_RoomHeader_avatar"
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
role="presentation"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 24px; height: 24px;"
/>
</span>
</div>
</div>
<div
class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_RoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
</div>
</div>
</header>
<div
class="mx_RoomView_body"
>
<div
class="mx_LargeLoader"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
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>
`;
exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_RoomHeader light-panel"
>
<div
class="mx_RoomHeader_wrapper"
>
<div
class="mx_RoomHeader_avatar"
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
role="presentation"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 24px; height: 24px;"
/>
</span>
</div>
</div>
<div
class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_RoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
</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>
<span
aria-label="Avatar"
aria-live="off"
class="mx_AccessibleButton mx_BaseAvatar"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 52px; height: 52px;"
/>
</span>
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
<b>
@user:example.com
</b>
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
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_highlighted mx_NotificationBadge_2char"
>
<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>
`;
exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
<div>
<div
class="mx_RoomView mx_RoomView--local"
>
<header
class="mx_RoomHeader light-panel"
>
<div
class="mx_RoomHeader_wrapper"
>
<div
class="mx_RoomHeader_avatar"
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
role="presentation"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 24px; height: 24px;"
/>
</span>
</div>
</div>
<div
class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_RoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
</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>
<span
aria-label="Avatar"
aria-live="off"
class="mx_AccessibleButton mx_BaseAvatar"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 52px; height: 52px;"
/>
</span>
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
<b>
@user:example.com
</b>
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
class="mx_MessageComposer"
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
aria-label="Formatting"
class="mx_MessageComposerFormatBar"
role="toolbar"
>
<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"
tabindex="-1"
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
tabindex="-1"
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"
style="--placeholder: 'Send a message…';"
tabindex="0"
>
<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>
`;
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
class="mx_RoomHeader light-panel"
>
<div
class="mx_RoomHeader_wrapper"
>
<div
class="mx_RoomHeader_avatar"
>
<div
class="mx_DecoratedRoomAvatar"
>
<span
class="mx_BaseAvatar"
role="presentation"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 15.600000000000001px; width: 24px; line-height: 24px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 24px; height: 24px;"
/>
</span>
</div>
</div>
<div
class="mx_E2EIcon mx_E2EIcon_normal mx_RoomHeader_icon"
/>
<div
class="mx_RoomHeader_name mx_RoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_RoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
</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"
>
<span
aria-label="Avatar"
aria-live="off"
class="mx_AccessibleButton mx_BaseAvatar"
role="button"
tabindex="0"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 33.800000000000004px; width: 52px; line-height: 52px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 52px; height: 52px;"
/>
</span>
<h2>
@user:example.com
</h2>
<p>
<span>
Send your first message to invite
<b>
@user:example.com
</b>
to chat
</span>
</p>
</li>
</ol>
</div>
</div>
</div>
<div
class="mx_MessageComposer"
>
<div
class="mx_MessageComposer_wrapper"
>
<div
class="mx_MessageComposer_row"
>
<div
class="mx_SendMessageComposer"
>
<div
class="mx_BasicMessageComposer"
>
<div
aria-label="Formatting"
class="mx_MessageComposerFormatBar"
role="toolbar"
>
<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"
tabindex="-1"
type="button"
/>
<button
aria-label="Strikethrough"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Code block"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Quote"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
role="button"
tabindex="-1"
type="button"
/>
<button
aria-label="Insert link"
class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
role="button"
tabindex="-1"
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"
style="--placeholder: 'Send a message…';"
tabindex="0"
>
<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>
`;
Reference in New Issue View Git Blame Copy Permalink