mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-03-10 16:01:52 +01:00
Code Issues Projects Releases Wiki Activity

Cleanup tests

Browse Source
This commit is contained in:
Half-Shot 2026-02-23 13:36:12 +00:00
parent b15f2f86c7
commit 17726b9fed
11 changed files with 681 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.module.css
View File

@ -39,6 +39,11 @@
flex: 0 0 100px;
text-align: center;
cursor: pointer;
/* Clear default <button> styles */
padding: 0;
border: none;
background: none;
}
.mx_LinkPreviewWidget_caption {

14
packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.stories.tsx
View File

@ -7,7 +7,9 @@
import React from "react";
import { fn } from "storybook/test";
import type { Meta, StoryFn } from "@storybook/react-vite";
import imageFile from "../../../static/element.png";
import { LinkPreview } from "./LinkPreview";
@ -30,8 +32,8 @@ Default.args = {
link: "https://matrix.org",
siteName: "Site name",
image: {
imageThumb: "https://images.dog.ceo/breeds/kuvasz/n02104029_1369.jpg",
imageFull: "https://images.dog.ceo/breeds/kuvasz/n02104029_1369.jpg",
imageThumb: imageFile,
imageFull: imageFile,
},
};
@ -44,14 +46,14 @@ Title.args = {
export const TitleAndDescription = Template.bind({});
TitleAndDescription.args = {
title: "A simple title",
description: "With a good ol description",
description: "A simple description",
link: "https://matrix.org",
};
export const WithTooltip = Template.bind({});
WithTooltip.args = {
title: "A simple title",
description: "With a good ol description",
description: "A simple description",
showTooltipOnLink: true,
link: "https://matrix.org",
};
@ -64,7 +66,7 @@ WithCompactLayout.args = {
link: "https://matrix.org",
siteName: "Site name",
image: {
imageThumb: "https://images.dog.ceo/breeds/kuvasz/n02104029_1369.jpg",
imageFull: "https://images.dog.ceo/breeds/kuvasz/n02104029_1369.jpg",
imageThumb: imageFile,
imageFull: imageFile,
},
};

20
packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.test.tsx
View File

@ -12,11 +12,27 @@ import React from "react";
import * as stories from "./LinkPreview.stories.tsx";
const { Default } = composeStories(stories);
const { Default, WithCompactLayout, WithTooltip, Title, TitleAndDescription } = composeStories(stories);
describe("LinkPreview", () => {
it("renders an empty view", () => {
it("renders a preview", () => {
const { container } = render(<Default />);
expect(container).toMatchSnapshot();
});
it("renders a preview with just a title", () => {
const { container } = render(<Title />);
expect(container).toMatchSnapshot();
});
it("renders a preview with just a title and description", () => {
const { container } = render(<TitleAndDescription />);
expect(container).toMatchSnapshot();
});
it("renders a preview with a tooltip", () => {
const { container } = render(<WithTooltip />);
expect(container).toMatchSnapshot();
});
it("renders a preview with a compact layout", () => {
const { container } = render(<WithCompactLayout />);
expect(container).toMatchSnapshot();
});
});

12
packages/shared-components/src/event-tiles/UrlPreviewView/LinkPreview.tsx
View File

@ -55,15 +55,9 @@ export function LinkPreview({ onHideClick, onImageClick, compactLayout, ...previ
// Don't render a button to show the image, just hide it outright
if (preview.image?.imageThumb) {
img = (
<div className={styles.mx_LinkPreviewWidget_image}>
<img
className={styles.thumbnail}
src={preview.image.imageThumb}
onClick={onImageClickHandler}
role="button"
alt=""
/>
</div>
<button className={styles.mx_LinkPreviewWidget_image} onClick={onImageClickHandler}>
<img className={styles.thumbnail} src={preview.image.imageThumb} alt="" />
</button>
);
}

24
packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css
View File

@ -1,24 +0,0 @@
/*
* Copyright 2026 Element Creations Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
.container {
.mx_LinkPreviewGroup_hide {
cursor: pointer;
width: 18px;
height: 18px;
svg {
flex: 0 0 40px;
visibility: hidden;
}
}
&:hover .mx_LinkPreviewGroup_hide svg,
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}
}

41
packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.stories.tsx
View File

@ -8,6 +8,7 @@
import React, { type JSX } from "react";
import { fn } from "storybook/test";
import type { Meta, StoryFn } from "@storybook/react-vite";
import imageFile from "../../../static/element.png";
import {
UrlPreviewGroupView,
@ -53,8 +54,8 @@ Default.args = {
description: "A simple description",
link: "https://matrix.org",
image: {
imageThumb: "https://images.dog.ceo/breeds/kuvasz/n02104029_1369.jpg",
imageFull: "https://images.dog.ceo/breeds/kuvasz/n02104029_1369.jpg",
imageThumb: imageFile,
imageFull: imageFile,
},
},
],
@ -65,30 +66,48 @@ MultiplePreviews.args = {
previews: [
{
title: "One",
description: "Good dog",
description: "Great description",
link: "https://matrix.org",
image: {
imageThumb: "https://images.dog.ceo/breeds/otterhound/n02091635_979.jpg",
imageFull: "https://images.dog.ceo/breeds/otterhound/n02091635_979.jpg",
imageThumb: imageFile,
imageFull: imageFile,
},
},
{
title: "Two",
description: "Good dog",
description: "Another description",
link: "https://matrix.org",
image: {
imageThumb: "https://images.dog.ceo/breeds/eskimo/n02109961_930.jpg",
imageFull: "https://images.dog.ceo/breeds/eskimo/n02109961_930.jpg",
imageThumb: imageFile,
imageFull: imageFile,
},
},
{
title: "Three",
description: "Good dog",
description: "One more description",
link: "https://matrix.org",
image: {
imageThumb: "https://images.dog.ceo/breeds/pekinese/n02086079_22136.jpg",
imageFull: "https://images.dog.ceo/breeds/pekinese/n02086079_22136.jpg",
imageThumb: imageFile,
imageFull: imageFile,
},
},
],
};
export const MultiplePreviewsHidden = Template.bind({});
MultiplePreviewsHidden.args = {
previews: [
{
title: "A simple title",
description: "A simple description",
link: "https://matrix.org",
image: {
imageThumb: imageFile,
imageFull: imageFile,
},
},
],
overPreviewLimit: true,
previewsLimited: true,
totalPreviewCount: 10,
};

12
packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.test.tsx
View File

@ -12,11 +12,19 @@ import React from "react";
import * as stories from "./UrlPreviewGroupView.stories.tsx";
const { Default } = composeStories(stories);
const { Default, MultiplePreviews, MultiplePreviewsHidden } = composeStories(stories);
describe("UrlPreviewGroupView", () => {
it("renders an empty view", () => {
it("renders a single preview", () => {
const { container } = render(<Default />);
expect(container).toMatchSnapshot();
});
it("renders multiple previews", () => {
const { container } = render(<MultiplePreviews />);
expect(container).toMatchSnapshot();
});
it("renders multiple previews which are hidden", () => {
const { container } = render(<MultiplePreviewsHidden />);
expect(container).toMatchSnapshot();
});
});

3
packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.tsx
View File

@ -10,7 +10,6 @@ import { Button } from "@vector-im/compound-web";
import { useViewModel, type ViewModel } from "../../viewmodel";
import { useI18n } from "../../utils/i18nContext";
import styles from "./UrlPreviewGroupView.module.css";
import type { UrlPreviewViewSnapshotPreview } from "./types";
import { LinkPreview } from "./LinkPreview";
@ -59,7 +58,7 @@ export function UrlPreviewGroupView({ vm }: UrlPreviewGroupViewProps): JSX.Eleme
}
return (
<div className={styles.container}>
<div>
{previews.map((preview, i) => (
<LinkPreview
key={preview.link}

315
packages/shared-components/src/event-tiles/UrlPreviewView/__snapshots__/LinkPreview.test.tsx.snap Normal file
View File

@ -0,0 +1,315 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`LinkPreview > renders a preview 1`] = `
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
<span
class="mx_LinkPreviewWidget_siteName"
>
- Site name
</span>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
A simple description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
</div>
`;
exports[`LinkPreview > renders a preview with a compact layout 1`] = `
<div>
<div
class="container compactLayout"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
<span
class="mx_LinkPreviewWidget_siteName"
>
- Site name
</span>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
A simple description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
</div>
`;
exports[`LinkPreview > renders a preview with a tooltip 1`] = `
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
aria-labelledby="_r_0_"
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
A simple description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
</div>
`;
exports[`LinkPreview > renders a preview with just a title 1`] = `
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
</div>
`;
exports[`LinkPreview > renders a preview with just a title and description 1`] = `
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
A simple description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
</div>
`;

291
packages/shared-components/src/event-tiles/UrlPreviewView/__snapshots__/UrlPreviewGroupView.test.tsx.snap Normal file
View File

@ -0,0 +1,291 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`UrlPreviewGroupView > renders a single preview 1`] = `
<div>
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
A simple description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
`;
exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
<div>
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
One
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
Great description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
Two
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
Another description
</div>
</div>
</div>
</div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
Three
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
One more description
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] = `
<div>
<div>
<div
class="container"
>
<div
class="mx_LinkPreviewWidget_wrapImageCaption"
>
<button
class="mx_LinkPreviewWidget_image"
>
<img
alt=""
class="thumbnail"
src="/static/element.png"
/>
</button>
<div
class="mx_LinkPreviewWidget_caption"
>
<div
class="mx_LinkPreviewWidget_title"
>
<a
href="https://matrix.org"
rel="noreferrer noopener"
target="_blank"
>
A simple title
</a>
</div>
<div
class="mx_LinkPreviewWidget_description"
>
A simple description
</div>
</div>
</div>
<button
aria-label="Close preview"
class="_icon-button_1215g_8 mx_LinkPreviewGroup_hide"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
>
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
/>
</svg>
</div>
</button>
</div>
<button
class="_button_13vu4_8"
data-kind="tertiary"
data-size="sm"
role="button"
tabindex="0"
>
Show 9 other previews
</button>
</div>
</div>
`;

BIN
packages/shared-components/static/element.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB