Stabilize MImage/MVideoBodyView snapshots (#33289)

* Stabilize MImage/MVideoBodyView snapshots

* add to global

* Use vite/client for imports

* fixup

Author: Half-Shot

packages/shared-components/src/@types/global.d.ts

@@ -13,9 +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;
-}

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 = [

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`] = `
   >
     <a
       class="ImageBodyView-module_link"
-      href="http://localhost:63315/static/image-body/install-spinner.gif"
+      href="/static/image-body/install-spinner.gif"
     >
       <div
         class="ImageBodyView-module_thumbnailContainer"
@@ -19,7 +19,7 @@ exports[`ImageBodyView > matches snapshot for animated-preview story 1`] = `
           <img
             alt="Element logo"
             class="ImageBodyView-module_image"
-            src="http://localhost:63315/static/image-body/install-spinner.png"
+            src="/static/image-body/install-spinner.png"
           />
           <p
             class="ImageBodyView-module_gifLabel"
@@ -43,7 +43,7 @@ exports[`ImageBodyView > matches snapshot for default story 1`] = `
   >
     <a
       class="ImageBodyView-module_link"
-      href="http://localhost:63315/static/image-body/install-spinner.png"
+      href="/static/image-body/install-spinner.png"
     >
       <div
         class="ImageBodyView-module_thumbnailContainer"
@@ -55,7 +55,7 @@ exports[`ImageBodyView > matches snapshot for default story 1`] = `
           <img
             alt="Element logo"
             class="ImageBodyView-module_image"
-            src="http://localhost:63315/static/image-body/install-spinner.png"
+            src="/static/image-body/install-spinner.png"
           />
         </div>
       </div>
@@ -147,7 +147,7 @@ exports[`ImageBodyView > matches snapshot for loading-with-blurhash story 1`] =
   >
     <a
       class="ImageBodyView-module_link"
-      href="http://localhost:63315/static/image-body/install-spinner.png"
+      href="/static/image-body/install-spinner.png"
     >
       <div
         class="ImageBodyView-module_thumbnailContainer"
@@ -173,7 +173,7 @@ exports[`ImageBodyView > matches snapshot for loading-with-blurhash story 1`] =
           <img
             alt="Element logo"
             class="ImageBodyView-module_image"
-            src="http://localhost:63315/static/image-body/install-spinner.png"
+            src="/static/image-body/install-spinner.png"
           />
         </div>
       </div>
@@ -192,7 +192,7 @@ exports[`ImageBodyView > matches snapshot for loading-with-spinner story 1`] = `
   >
     <a
       class="ImageBodyView-module_link"
-      href="http://localhost:63315/static/image-body/install-spinner.png"
+      href="/static/image-body/install-spinner.png"
     >
       <div
         class="ImageBodyView-module_thumbnailContainer"
@@ -225,7 +225,7 @@ exports[`ImageBodyView > matches snapshot for loading-with-spinner story 1`] = `
           <img
             alt="Element logo"
             class="ImageBodyView-module_image"
-            src="http://localhost:63315/static/image-body/install-spinner.png"
+            src="/static/image-body/install-spinner.png"
           />
         </div>
       </div>

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 & {

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"
       />
     </div>
     <div>

packages/shared-components/tsconfig.json

@@ -14,7 +14,7 @@
         "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"]