* Strict typechecking fixes for Base/Member/Avatar Update the core avatar files to pass `--strict --noImplicitAny` typechecks. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Add tests for Base/Member/Avatar More thoroughly test the core avatar files. Not necessarily the most thorough, but an improvement. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Extract TextAvatar from BaseAvatar Extracted the fallback/textual avatar into its own component. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Use standard HTML for non-image avatars Firefox users with `resistFingerprinting` enabled were seeing random noise for rooms and users without avatars. There's no real reason to use data URLs to present flat colors. This converts non-image avatars to inline blocks with background colors. See https://github.com/vector-im/element-web/issues/23936 Signed-off-by: Clark Fischer <clark.fischer@gmail.com> * Have pills use solid backgrounds rather than colored images Similar to room and member avatars, pills now use colored pseudo-elements rather than background images. Signed-off-by: Clark Fischer <clark.fischer@gmail.com> --------- Signed-off-by: Clark Fischer <clark.fischer@gmail.com> Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
72 lines
1.7 KiB
Text
72 lines
1.7 KiB
Text
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`<BaseAvatar /> matches snapshot (avatar + click) 1`] = `
|
|
<div>
|
|
<img
|
|
alt="Avatar"
|
|
class="mx_AccessibleButton mx_BaseAvatar mx_BaseAvatar_image mx_SomethingArbitrary"
|
|
data-testid="avatar-img"
|
|
role="button"
|
|
src="https://example.com/images/avatar.gif"
|
|
style="width: 40px; height: 40px;"
|
|
tabindex="0"
|
|
title="Hover title"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<BaseAvatar /> matches snapshot (avatar) 1`] = `
|
|
<div>
|
|
<img
|
|
alt=""
|
|
class="mx_BaseAvatar mx_BaseAvatar_image mx_SomethingArbitrary"
|
|
data-testid="avatar-img"
|
|
src="https://example.com/images/avatar.gif"
|
|
style="width: 40px; height: 40px;"
|
|
title="Hover title"
|
|
/>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<BaseAvatar /> matches snapshot (no avatar + click) 1`] = `
|
|
<div>
|
|
<span
|
|
aria-label="Avatar"
|
|
aria-live="off"
|
|
class="mx_AccessibleButton mx_BaseAvatar big-and-bold"
|
|
role="button"
|
|
style="width: 40px; height: 40px;"
|
|
tabindex="0"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
|
data-testid="avatar-img"
|
|
style="background-color: rgb(13, 189, 139); width: 40px; height: 40px; font-size: 26px; line-height: 40px;"
|
|
title=":kiss:"
|
|
>
|
|
X
|
|
</span>
|
|
</span>
|
|
</div>
|
|
`;
|
|
|
|
exports[`<BaseAvatar /> matches snapshot (no avatar) 1`] = `
|
|
<div>
|
|
<span
|
|
class="mx_BaseAvatar big-and-bold"
|
|
role="presentation"
|
|
style="width: 40px; height: 40px;"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
class="mx_BaseAvatar_image mx_BaseAvatar_initial"
|
|
data-testid="avatar-img"
|
|
style="background-color: rgb(13, 189, 139); width: 40px; height: 40px; font-size: 26px; line-height: 40px;"
|
|
title=":kiss:"
|
|
>
|
|
X
|
|
</span>
|
|
</span>
|
|
</div>
|
|
`;
|