element-web/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
David Baker a0c029c3c1
Fix alignment of RTL messages (#12837)
* 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
2024-07-31 22:23:46 +00:00

423 lines
10 KiB
Text
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 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>
`;