From f4d29895f93f25c014b63b24514ee920b14f5c25 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 24 Apr 2026 08:42:36 +0100 Subject: [PATCH 1/4] Stabilize MImage/MVideoBodyView snapshots --- .../MImageBodyView/ImageBodyView.stories.tsx | 7 +++---- .../__snapshots__/ImageBodyView.test.tsx.snap | 16 ++++++++-------- .../MVideoBodyView/VideoBodyView.stories.tsx | 3 +-- .../__snapshots__/VideoBodyView.test.tsx.snap | 2 +- 4 files changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx index 3b6c66cf38a..f3b717ecf0e 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx @@ -18,10 +18,9 @@ import { type ImageBodyViewActions, type ImageBodyViewSnapshot, } from "./ImageBodyView"; - -const imageSrc = new URL("../../../../../../static/image-body/install-spinner.png", import.meta.url).href; -const thumbnailSrc = new URL("../../../../../../static/image-body/install-spinner.png", import.meta.url).href; -const animatedGifSrc = new URL("../../../../../../static/image-body/install-spinner.gif", import.meta.url).href; +import imageSrc from "../../../../../../static/image-body/install-spinner.png"; +import thumbnailSrc from "../../../../../../static/image-body/install-spinner.png"; +import animatedGifSrc from "../../../../../../static/image-body/install-spinner.gif"; const demoBlurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj"; const imageBodyViewStateOptions = [ImageBodyViewState.ERROR, ImageBodyViewState.HIDDEN, ImageBodyViewState.READY]; const imageBodyViewPlaceholderOptions = [ diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap index 4b5f47340c8..1c047b6a3aa 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap +++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/__snapshots__/ImageBodyView.test.tsx.snap @@ -7,7 +7,7 @@ exports[`ImageBodyView > matches snapshot for animated-preview story 1`] = ` >
matches snapshot for animated-preview story 1`] = ` Element logo

matches snapshot for default story 1`] = ` >

matches snapshot for default story 1`] = ` Element logo
@@ -147,7 +147,7 @@ exports[`ImageBodyView > matches snapshot for loading-with-blurhash story 1`] = >
matches snapshot for loading-with-blurhash story 1`] = Element logo
@@ -192,7 +192,7 @@ exports[`ImageBodyView > matches snapshot for loading-with-spinner story 1`] = ` >
matches snapshot for loading-with-spinner story 1`] = ` Element logo
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx index 115d93e5cae..81366f174e6 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx @@ -17,8 +17,7 @@ import { } from "./VideoBodyView"; import { useMockedViewModel } from "../../../../../core/viewmodel/useMockedViewModel"; import { withViewDocs } from "../../../../../../.storybook/withViewDocs"; - -const demoVideo = new URL("../../../../../../static/videoBodyDemo.webm", import.meta.url).href; +import demoVideo from "../../../../../../static/videoBodyDemo.webm"; type VideoBodyViewProps = VideoBodyViewSnapshot & VideoBodyViewActions & { diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap index 57c2fa47d12..f8111582776 100644 --- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap +++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap @@ -79,7 +79,7 @@ exports[`VideoBodyView > matches snapshot for ready story 1`] = ` crossorigin="anonymous" poster="/static/element.png" preload="none" - src="http://localhost:63315/static/videoBodyDemo.webm" + src="/static/videoBodyDemo.webm" />
From 75fcb32bf3e4a22ade8d3eede2ac7a60bce17ab1 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 24 Apr 2026 08:43:42 +0100 Subject: [PATCH 2/4] add to global --- packages/shared-components/src/@types/global.d.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/shared-components/src/@types/global.d.ts b/packages/shared-components/src/@types/global.d.ts index 5a5e216cd8f..2e456faea64 100644 --- a/packages/shared-components/src/@types/global.d.ts +++ b/packages/shared-components/src/@types/global.d.ts @@ -19,3 +19,15 @@ declare module "*.png" { const content: string; export default content; } + +// For importing animated GIFs for use in testing +declare module "*.gif" { + const content: string; + export default content; +} + +// For importing videos for use in testing +declare module "*.webm" { + const content: string; + export default content; +} From 7d3bc1d392bfd63b6aadd963e453fb3d677a11a8 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 24 Apr 2026 09:06:28 +0100 Subject: [PATCH 3/4] Use vite/client for imports --- .../shared-components/src/@types/global.d.ts | 18 ------------------ packages/shared-components/tsconfig.json | 8 ++++---- 2 files changed, 4 insertions(+), 22 deletions(-) diff --git a/packages/shared-components/src/@types/global.d.ts b/packages/shared-components/src/@types/global.d.ts index 2e456faea64..5ba765299b8 100644 --- a/packages/shared-components/src/@types/global.d.ts +++ b/packages/shared-components/src/@types/global.d.ts @@ -13,21 +13,3 @@ declare module "*.md?raw" { const content: string; export default content; } - -// For importing PNGs for use in testing -declare module "*.png" { - const content: string; - export default content; -} - -// For importing animated GIFs for use in testing -declare module "*.gif" { - const content: string; - export default content; -} - -// For importing videos for use in testing -declare module "*.webm" { - const content: string; - export default content; -} diff --git a/packages/shared-components/tsconfig.json b/packages/shared-components/tsconfig.json index e959a552c5c..a2750260f7f 100644 --- a/packages/shared-components/tsconfig.json +++ b/packages/shared-components/tsconfig.json @@ -14,12 +14,12 @@ "declaration": true, "jsx": "react", "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"], - "types": ["storybook-addon-vis/matcher"], + "types": ["vite/client", "storybook-addon-vis/matcher"], "strict": true, "paths": { - "@test-utils": ["./src/test/utils/index"] - } + "@test-utils": ["./src/test/utils/index"], + }, }, "include": ["./src/**/*.ts", "./src/**/*.tsx", ".storybook/*.ts", ".storybook/*.tsx"], - "references": [{ "path": "./tsconfig.node.json" }] + "references": [{ "path": "./tsconfig.node.json" }], } From 466196966472820c2c6f3df453bf95c32e880e09 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 24 Apr 2026 09:29:50 +0100 Subject: [PATCH 4/4] fixup --- packages/shared-components/tsconfig.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/shared-components/tsconfig.json b/packages/shared-components/tsconfig.json index a2750260f7f..2691b1f20cc 100644 --- a/packages/shared-components/tsconfig.json +++ b/packages/shared-components/tsconfig.json @@ -17,9 +17,9 @@ "types": ["vite/client", "storybook-addon-vis/matcher"], "strict": true, "paths": { - "@test-utils": ["./src/test/utils/index"], - }, + "@test-utils": ["./src/test/utils/index"] + } }, "include": ["./src/**/*.ts", "./src/**/*.tsx", ".storybook/*.ts", ".storybook/*.tsx"], - "references": [{ "path": "./tsconfig.node.json" }], + "references": [{ "path": "./tsconfig.node.json" }] }