mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-21 06:02:16 +03:00
a0c029c3c1
* Fix alignment of RTL messages Inspired by https://github.com/matrix-org/matrix-react-sdk/pull/5453 but hopefully with the edited marker in the right place. This is a PoC: types aren't correct and the style needs pulling out to a class. Plus it would probably need more visual tests added. If this looks acceptable, I can make these changes. * Fix spacing between text and edited annotation * Update snapshot * Update more snapshots * More snapshots * More more snapshots * Split out style * Fix emotes This will cause them always be right-justified if the display name is rtl. * Add playwright test for ltr/rtl message rendering * Better snapshots * Await on message sending * Better waiting, hopefully * Old snapshot files * Really hopefully fixed screenshots this time * Don't include the message action bar in the screenshots
423 lines
10 KiB
Text
423 lines
10 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly italics, bold, underline and strikethrough render as expected 1`] = `
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
foo
|
||
<em>
|
||
baz
|
||
</em>
|
||
|
||
<strong>
|
||
bar
|
||
</strong>
|
||
|
||
<del>
|
||
del
|
||
</del>
|
||
|
||
<u>
|
||
u
|
||
</u>
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly linkification is not applied to code blocks 1`] = `
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
<p>
|
||
Visit
|
||
<code>
|
||
https://matrix.org/
|
||
</code>
|
||
</p>
|
||
|
||
|
||
<div
|
||
class="mx_EventTile_pre_container"
|
||
>
|
||
<pre
|
||
class="mx_EventTile_collapsedCodeBlock"
|
||
>
|
||
<span
|
||
class="mx_EventTile_lineNumbers"
|
||
>
|
||
<span>
|
||
1
|
||
</span>
|
||
</span>
|
||
<code>
|
||
https://matrix.org/
|
||
|
||
</code>
|
||
<span />
|
||
</pre>
|
||
<span
|
||
class="mx_EventTile_button mx_EventTile_copyButton "
|
||
/>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly pills appear for an MXID permalink 1`] = `
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
Chat with
|
||
<span>
|
||
<bdi>
|
||
<a
|
||
class="mx_Pill mx_UserPill"
|
||
href="https://matrix.to/#/@user:example.com"
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
aria-label="Profile picture"
|
||
class="_avatar_mcap2_17 mx_BaseAvatar"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
style="--cpd-avatar-size: 16px;"
|
||
>
|
||
<img
|
||
alt=""
|
||
class="_image_mcap2_50"
|
||
data-type="round"
|
||
height="16px"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer"
|
||
src="mxc://avatar.url/image.png"
|
||
width="16px"
|
||
/>
|
||
</span>
|
||
<span
|
||
class="mx_Pill_text"
|
||
>
|
||
Member
|
||
</span>
|
||
</a>
|
||
</bdi>
|
||
</span>
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly pills appear for event permalinks without a custom label 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_MTextBody mx_EventTile_content"
|
||
>
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
See this message
|
||
<span>
|
||
<bdi>
|
||
<a
|
||
class="mx_Pill mx_EventPill"
|
||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
aria-label="Avatar"
|
||
class="_avatar_mcap2_17 mx_BaseAvatar"
|
||
data-color="1"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
style="--cpd-avatar-size: 16px;"
|
||
>
|
||
<img
|
||
alt=""
|
||
class="_image_mcap2_50"
|
||
data-type="round"
|
||
height="16px"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer"
|
||
src="mxc://avatar.url/room.png"
|
||
width="16px"
|
||
/>
|
||
</span>
|
||
<span
|
||
class="mx_Pill_text"
|
||
>
|
||
Message in room name
|
||
</span>
|
||
</a>
|
||
</bdi>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly pills appear for room links with vias 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_MTextBody mx_EventTile_content"
|
||
>
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
A
|
||
<span>
|
||
<bdi>
|
||
<a
|
||
class="mx_Pill mx_RoomPill"
|
||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
aria-label="Avatar"
|
||
class="_avatar_mcap2_17 mx_BaseAvatar"
|
||
data-color="1"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
style="--cpd-avatar-size: 16px;"
|
||
>
|
||
<img
|
||
alt=""
|
||
class="_image_mcap2_50"
|
||
data-type="round"
|
||
height="16px"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer"
|
||
src="mxc://avatar.url/room.png"
|
||
width="16px"
|
||
/>
|
||
</span>
|
||
<span
|
||
class="mx_Pill_text"
|
||
>
|
||
room name
|
||
</span>
|
||
</a>
|
||
</bdi>
|
||
</span>
|
||
with vias
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly pills do not appear for event permalinks with a custom label 1`] = `
|
||
<DocumentFragment>
|
||
<div
|
||
class="mx_MTextBody mx_EventTile_content"
|
||
>
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
An
|
||
<a
|
||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
|
||
rel="noreferrer noopener"
|
||
>
|
||
event link
|
||
</a>
|
||
with text
|
||
</div>
|
||
</div>
|
||
</DocumentFragment>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly pills do not appear in code blocks 1`] = `
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
<p>
|
||
<code>
|
||
@room
|
||
</code>
|
||
</p>
|
||
|
||
|
||
<div
|
||
class="mx_EventTile_pre_container"
|
||
>
|
||
<pre
|
||
class="mx_EventTile_collapsedCodeBlock"
|
||
>
|
||
<span
|
||
class="mx_EventTile_lineNumbers"
|
||
>
|
||
<span>
|
||
1
|
||
</span>
|
||
</span>
|
||
<code>
|
||
@room
|
||
|
||
</code>
|
||
<span />
|
||
</pre>
|
||
<span
|
||
class="mx_EventTile_button mx_EventTile_copyButton "
|
||
/>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
Hey
|
||
<span>
|
||
<bdi>
|
||
<a
|
||
class="mx_Pill mx_UserPill"
|
||
href="https://matrix.to/#/@user:server"
|
||
>
|
||
<span
|
||
aria-hidden="true"
|
||
aria-label="Profile picture"
|
||
class="_avatar_mcap2_17 mx_BaseAvatar"
|
||
data-color="2"
|
||
data-testid="avatar-img"
|
||
data-type="round"
|
||
style="--cpd-avatar-size: 16px;"
|
||
>
|
||
<img
|
||
alt=""
|
||
class="_image_mcap2_50"
|
||
data-type="round"
|
||
height="16px"
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer"
|
||
src="mxc://avatar.url/image.png"
|
||
width="16px"
|
||
/>
|
||
</span>
|
||
<span
|
||
class="mx_Pill_text"
|
||
>
|
||
Member
|
||
</span>
|
||
</a>
|
||
</bdi>
|
||
</span>
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly renders formatted body without html correctly 1`] = `
|
||
<div
|
||
class="mx_EventTile_body translate"
|
||
dir="auto"
|
||
>
|
||
escaped *markdown*
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders formatted m.text correctly spoilers get injected properly into the DOM 1`] = `
|
||
<div
|
||
class="mx_EventTile_body markdown-body translate"
|
||
dir="auto"
|
||
>
|
||
Hey
|
||
<span>
|
||
<button
|
||
class="mx_EventTile_spoiler"
|
||
>
|
||
<span
|
||
class="mx_EventTile_spoiler_reason"
|
||
>
|
||
(movie)
|
||
</span>
|
||
|
||
<span
|
||
class="mx_EventTile_spoiler_content"
|
||
>
|
||
<span>
|
||
the movie was awesome
|
||
</span>
|
||
</span>
|
||
</button>
|
||
</span>
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders m.emote correctly 1`] = `
|
||
<span
|
||
class="mx_EventTile_body translate"
|
||
>
|
||
winks
|
||
</span>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders m.notice correctly 1`] = `
|
||
<div
|
||
class="mx_EventTile_body translate"
|
||
dir="auto"
|
||
>
|
||
this is a notice, probably from a bot
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders plain-text m.text correctly linkification get applied correctly into the DOM 1`] = `
|
||
<div
|
||
class="mx_EventTile_body translate"
|
||
dir="auto"
|
||
>
|
||
Visit
|
||
<a
|
||
class="linkified"
|
||
href="https://matrix.org/"
|
||
rel="noreferrer noopener"
|
||
target="_blank"
|
||
>
|
||
https://matrix.org/
|
||
</a>
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
|
||
|
||
exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
|
||
|
||
exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
|
||
<div
|
||
class="mx_EventTile_body translate"
|
||
dir="auto"
|
||
>
|
||
Visit
|
||
<span>
|
||
<bdi>
|
||
<a
|
||
class="mx_Pill mx_EventPill"
|
||
href="https://matrix.to/#/!room1:example.com/!abc123"
|
||
>
|
||
<div
|
||
class="mx_Pill_LinkIcon mx_BaseAvatar"
|
||
/>
|
||
<span
|
||
class="mx_Pill_text"
|
||
>
|
||
Message
|
||
</span>
|
||
</a>
|
||
</bdi>
|
||
</span>
|
||
</div>
|
||
`;
|
||
|
||
exports[`<TextualBody /> renders plain-text m.text correctly simple message renders as expected 1`] = `
|
||
<div
|
||
class="mx_EventTile_body translate"
|
||
dir="auto"
|
||
>
|
||
this is a plaintext message
|
||
</div>
|
||
`;
|