Merge branch 'preview' into track-data-cleanup

13 files changed, 199 insertions, 119 deletions

diff --git a/src/content/dependencies/linkTemplate.js b/src/content/dependencies/linkTemplate.js
index 1cf64c59..ba7c7cda 100644
--- a/src/content/dependencies/linkTemplate.js
+++ b/src/content/dependencies/linkTemplate.js
@@ -29,14 +29,16 @@ export default {
     language,
     to,
   }) {
-    let href = slots.href;
+    let href;
     let style;
     let title;
 
-    if (href) {
-      href = encodeURI(href);
+    if (slots.href) {
+      href = encodeURI(slots.href);
     } else if (!empty(slots.path)) {
       href = to(...slots.path);
+    } else {
+      href = '';
     }
 
     if (appendIndexHTML) {
diff --git a/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
index d787df68..017ab0e4 100644
--- a/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumCoverArtwork.js.test.cjs
@@ -7,26 +7,29 @@
 'use strict'
 exports[`test/snapshot/generateAlbumCoverArtwork.js TAP generateAlbumCoverArtwork (snapshot) > display: primary 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/cover.png">
-        <div class="square">
-            <div class="square-content">
-                <div class="reveal">
-                    <div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/cover.medium.jpg"></div></div>
-                    <span class="reveal-text-container">
-                        <span class="reveal-text">
-                            cw: creepy crawlies
-                            <br>
-                            <span class="reveal-interaction">click to show</span>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </a>
+    [mocked: image
+     args: [
+       [
+         { name: 'Damara', directory: 'damara', isContentWarning: false },
+         { name: 'Cronus', directory: 'cronus', isContentWarning: false },
+         { name: 'Bees', directory: 'bees', isContentWarning: false },
+         { name: 'creepy crawlies', isContentWarning: true }
+       ]
+     ]
+     slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'medium', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/damara/">Damara</a>, <a href="tag/cronus/">Cronus</a>, <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
 exports[`test/snapshot/generateAlbumCoverArtwork.js TAP generateAlbumCoverArtwork (snapshot) > display: thumbnail 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/cover.small.jpg"></div></div></div></div>
+[mocked: image
+ args: [
+   [
+     { name: 'Damara', directory: 'damara', isContentWarning: false },
+     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
+     { name: 'Bees', directory: 'bees', isContentWarning: false },
+     { name: 'creepy crawlies', isContentWarning: true }
+   ]
+ ]
+ slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'small', reveal: false, link: false, square: true }]
 `
diff --git a/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
index f84827ae..032fdc05 100644
--- a/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumSecondaryNav.js.test.cjs
@@ -7,27 +7,27 @@
 'use strict'
 exports[`test/snapshot/generateAlbumSecondaryNav.js TAP generateAlbumSecondaryNav (snapshot) > basic behavior, mode: album 1`] = `
 <nav id="secondary-nav" class="nav-links-groups">
-    <span>
+    <span style="--primary-color: #abcdef; --dark-color: #21272e; --dim-color: #818181; --dim-ghost-color: #818181cc; --bg-color: #161616cc; --bg-black-color: #06090bcc; --shadow-color: #0d0d0dcc">
         <a href="group/vcg/">VCG</a>
-        (<a href="album/first/">Previous</a>, <a href="album/last/">Next</a>)
+        (<a href="album/first/" title="First">Previous</a>, <a href="album/last/" title="Last">Next</a>)
     </span>
-    <span>
+    <span style="--primary-color: #123456; --dark-color: #0e2842; --dim-color: #000000; --dim-ghost-color: #000000cc; --bg-color: #161616cc; --bg-black-color: #000913cc; --shadow-color: #0d0d0dcc">
         <a href="group/bepis/">Bepis</a>
-        (<a href="album/second/">Next</a>)
+        (<a href="album/second/" title="Second">Next</a>)
     </span>
 </nav>
 `
 
 exports[`test/snapshot/generateAlbumSecondaryNav.js TAP generateAlbumSecondaryNav (snapshot) > basic behavior, mode: track 1`] = `
 <nav id="secondary-nav" class="nav-links-groups">
-    <a href="group/vcg/">VCG</a>
-    <a href="group/bepis/">Bepis</a>
+    <a href="group/vcg/" style="--primary-color: #abcdef; --dim-color: #818181">VCG</a>
+    <a href="group/bepis/" style="--primary-color: #123456; --dim-color: #000000">Bepis</a>
 </nav>
 `
 
 exports[`test/snapshot/generateAlbumSecondaryNav.js TAP generateAlbumSecondaryNav (snapshot) > dateless album in mixed group 1`] = `
 <nav id="secondary-nav" class="nav-links-groups">
-    <a href="group/vcg/">VCG</a>
-    <a href="group/bepis/">Bepis</a>
+    <a href="group/vcg/" style="--primary-color: #abcdef; --dim-color: #818181">VCG</a>
+    <a href="group/bepis/" style="--primary-color: #123456; --dim-color: #000000">Bepis</a>
 </nav>
 `
diff --git a/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
index 88be76ea..c1c880bc 100644
--- a/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateCoverArtwork.js.test.cjs
@@ -7,26 +7,29 @@
 'use strict'
 exports[`test/snapshot/generateCoverArtwork.js TAP generateCoverArtwork (snapshot) > display: primary 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/cover.png">
-        <div class="square">
-            <div class="square-content">
-                <div class="reveal">
-                    <div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/cover.medium.jpg"></div></div>
-                    <span class="reveal-text-container">
-                        <span class="reveal-text">
-                            cw: creepy crawlies
-                            <br>
-                            <span class="reveal-interaction">click to show</span>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </a>
+    [mocked: image
+     args: [
+       [
+         { name: 'Damara', directory: 'damara', isContentWarning: false },
+         { name: 'Cronus', directory: 'cronus', isContentWarning: false },
+         { name: 'Bees', directory: 'bees', isContentWarning: false },
+         { name: 'creepy crawlies', isContentWarning: true }
+       ]
+     ]
+     slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'medium', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/damara/">Damara</a>, <a href="tag/cronus/">Cronus</a>, <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
 exports[`test/snapshot/generateCoverArtwork.js TAP generateCoverArtwork (snapshot) > display: thumbnail 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/cover.small.jpg"></div></div></div></div>
+[mocked: image
+ args: [
+   [
+     { name: 'Damara', directory: 'damara', isContentWarning: false },
+     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
+     { name: 'Bees', directory: 'bees', isContentWarning: false },
+     { name: 'creepy crawlies', isContentWarning: true }
+   ]
+ ]
+ slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'small', reveal: false, link: false, square: true }]
 `
diff --git a/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs b/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
index 07268581..fa641830 100644
--- a/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generatePreviousNextLinks.js.test.cjs
@@ -6,13 +6,13 @@
  */
 'use strict'
 exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > basic behavior 1`] = `
-previous: {"tooltip":true,"color":false,"attributes":{"id":"previous-button"},"content":"Previous"}
-next: {"tooltip":true,"color":false,"attributes":{"id":"next-button"},"content":"Next"}
+previous: { tooltip: true, color: false, attributes: { id: 'previous-button' }, content: 'Previous' }
+next: { tooltip: true, color: false, attributes: { id: 'next-button' }, content: 'Next' }
 `
 
 exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > disable id 1`] = `
-previous: {"tooltip":true,"color":false,"attributes":{"id":false},"content":"Previous"}
-next: {"tooltip":true,"color":false,"attributes":{"id":false},"content":"Next"}
+previous: { tooltip: true, color: false, attributes: { id: false }, content: 'Previous' }
+next: { tooltip: true, color: false, attributes: { id: false }, content: 'Next' }
 `
 
 exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > neither link present 1`] = `
@@ -20,9 +20,9 @@ exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLink
 `
 
 exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > next missing 1`] = `
-previous: {"tooltip":true,"color":false,"attributes":{"id":"previous-button"},"content":"Previous"}
+previous: { tooltip: true, color: false, attributes: { id: 'previous-button' }, content: 'Previous' }
 `
 
 exports[`test/snapshot/generatePreviousNextLinks.js TAP generatePreviousNextLinks (snapshot) > previous missing 1`] = `
-next: {"tooltip":true,"color":false,"attributes":{"id":"next-button"},"content":"Next"}
+next: { tooltip: true, color: false, attributes: { id: 'next-button' }, content: 'Next' }
 `
diff --git a/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs b/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
index 92216a89..33b5d155 100644
--- a/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateTrackCoverArtwork.js.test.cjs
@@ -7,37 +7,44 @@
 'use strict'
 exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: primary - no unique art 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/cover.png">
-        <div class="square">
-            <div class="square-content">
-                <div class="reveal">
-                    <div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/cover.medium.jpg"></div></div>
-                    <span class="reveal-text-container">
-                        <span class="reveal-text">
-                            cw: creepy crawlies
-                            <br>
-                            <span class="reveal-interaction">click to show</span>
-                        </span>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </a>
+    [mocked: image
+     args: [
+       [
+         { name: 'Damara', directory: 'damara', isContentWarning: false },
+         { name: 'Cronus', directory: 'cronus', isContentWarning: false },
+         { name: 'Bees', directory: 'bees', isContentWarning: false },
+         { name: 'creepy crawlies', isContentWarning: true }
+       ]
+     ]
+     slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'medium', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/damara/">Damara</a>, <a href="tag/cronus/">Cronus</a>, <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
 exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: primary - unique art 1`] = `
 <div id="cover-art-container">
-    <a id="cover-art" class="box image-link" href="media/album-art/bee-forus-seatbelt-safebee/beesmp3.jpg"><div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img data-original-size="0" src="media/album-art/bee-forus-seatbelt-safebee/beesmp3.medium.jpg"></div></div></div></div></a>
+    [mocked: image
+     args: [ [ { name: 'Bees', directory: 'bees', isContentWarning: false } ] ]
+     slots: { path: [ 'media.trackCover', 'bee-forus-seatbelt-safebee', 'beesmp3', 'jpg' ], thumb: 'medium', id: 'cover-art', reveal: true, link: true, square: true }]
     <p>Tags: <a href="tag/bees/">Bees</a></p>
 </div>
 `
 
 exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: thumbnail - no unique art 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/cover.small.jpg"></div></div></div></div>
+[mocked: image
+ args: [
+   [
+     { name: 'Damara', directory: 'damara', isContentWarning: false },
+     { name: 'Cronus', directory: 'cronus', isContentWarning: false },
+     { name: 'Bees', directory: 'bees', isContentWarning: false },
+     { name: 'creepy crawlies', isContentWarning: true }
+   ]
+ ]
+ slots: { path: [ 'media.albumCover', 'bee-forus-seatbelt-safebee', 'png' ], thumb: 'small', reveal: false, link: false, square: true }]
 `
 
 exports[`test/snapshot/generateTrackCoverArtwork.js TAP generateTrackCoverArtwork (snapshot) > display: thumbnail - unique art 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img src="media/album-art/bee-forus-seatbelt-safebee/beesmp3.small.jpg"></div></div></div></div>
+[mocked: image
+ args: [ [ { name: 'Bees', directory: 'bees', isContentWarning: false } ] ]
+ slots: { path: [ 'media.trackCover', 'bee-forus-seatbelt-safebee', 'beesmp3', 'jpg' ], thumb: 'small', reveal: false, link: false, square: true }]
 `
diff --git a/tap-snapshots/test/snapshot/transformContent.js.test.cjs b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
index d144cf12..4af6b147 100644
--- a/tap-snapshots/test/snapshot/transformContent.js.test.cjs
+++ b/tap-snapshots/test/snapshot/transformContent.js.test.cjs
@@ -53,16 +53,16 @@ How it goes</p>
 `
 
 exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #1 1`] = `
-<div class="content-image"><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.large.jpg"></div></div></a></div>
+<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
 `
 
 exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #2 1`] = `
 <p>Rad.</p>
-<div class="content-image"><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.large.jpg"></div></div></a></div>
+<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
 `
 
 exports[`test/snapshot/transformContent.js TAP transformContent (snapshot) > non-inline image #3 1`] = `
-<div class="content-image"><a class="box image-link" href="spark.png"><div class="image-container"><div class="image-inner-area"><img src="spark.large.jpg"></div></div></a></div>
+<div class="content-image">[mocked: image - slots: { src: 'spark.png', link: true, thumb: 'large' }]</div>
 <p>Baller.</p>
 `
 
diff --git a/test/lib/content-function.js b/test/lib/content-function.js
index bb12be82..5cb499b1 100644
--- a/test/lib/content-function.js
+++ b/test/lib/content-function.js
@@ -1,5 +1,6 @@
 import * as path from 'node:path';
 import {fileURLToPath} from 'node:url';
+import {inspect} from 'node:util';
 
 import chroma from 'chroma-js';
 
@@ -90,27 +91,92 @@ export function testContentFunctions(t, message, fn) {
       t.matchSnapshot(result, description);
     };
 
-    evaluate.stubTemplate = name => {
+    evaluate.stubTemplate = name =>
       // Creates a particularly permissable template, allowing any slot values
       // to be stored and just outputting the contents of those slots as-are.
+      _stubTemplate(name, false);
 
-      return new (class extends html.Template {
-        #slotValues = {};
+    evaluate.stubContentFunction = name =>
+      // Like stubTemplate, but instead of a template directly, returns
+      // an object describing a content function - suitable for passing
+      // into evaluate.mock.
+      _stubTemplate(name, true);
 
-        constructor() {
-          super({
-            content: () => `${name}: ${JSON.stringify(this.#slotValues)}`,
-          });
-        }
+    const _stubTemplate = (name, mockContentFunction) => {
+      const inspectNicely = (value, opts = {}) =>
+        inspect(value, {
+          ...opts,
+          colors: false,
+          sort: true,
+        });
 
-        setSlots(slotNamesToValues) {
-          Object.assign(this.#slotValues, slotNamesToValues);
-        }
+      const makeTemplate = formatContentFn =>
+        new (class extends html.Template {
+          #slotValues = {};
 
-        setSlot(slotName, slotValue) {
-          this.#slotValues[slotName] = slotValue;
-        }
-      });
+          constructor() {
+            super({
+              content: () => this.#getContent(formatContentFn),
+            });
+          }
+
+          setSlots(slotNamesToValues) {
+            Object.assign(this.#slotValues, slotNamesToValues);
+          }
+
+          setSlot(slotName, slotValue) {
+            this.#slotValues[slotName] = slotValue;
+          }
+
+          #getContent(formatContentFn) {
+            const toInspect =
+              Object.fromEntries(
+                Object.entries(this.#slotValues)
+                  .filter(([key, value]) => value !== null));
+
+            const inspected =
+              inspectNicely(toInspect, {
+                breakLength: Infinity,
+                compact: true,
+                depth: Infinity,
+              });
+
+            return formatContentFn(inspected); `${name}: ${inspected}`;
+          }
+        });
+
+      if (mockContentFunction) {
+        return {
+          data: (...args) => ({args}),
+          generate: (data) =>
+            makeTemplate(slots => {
+              const argsLines =
+                (empty(data.args)
+                  ? []
+                  : inspectNicely(data.args, {depth: Infinity})
+                      .split('\n'));
+
+              return (`[mocked: ${name}` +
+
+                (empty(data.args)
+                  ? ``
+               : argsLines.length === 1
+                  ? `\n args: ${argsLines[0]}`
+                  : `\n args: ${argsLines[0]}\n` +
+                    argsLines.slice(1).join('\n').replace(/^/gm, ' ')) +
+
+                (!empty(data.args)
+                  ? `\n `
+                  : ` - `) +
+
+                (slots
+                  ? `slots: ${slots}]`
+                  : `slots: none]`));
+            }),
+        };
+      } else {
+        return makeTemplate(slots => `${name}: ${slots}`);
+      }
     };
 
     evaluate.mock = (...opts) => {
diff --git a/test/snapshot/generateAlbumCoverArtwork.js b/test/snapshot/generateAlbumCoverArtwork.js
index 98632d39..b1c7885f 100644
--- a/test/snapshot/generateAlbumCoverArtwork.js
+++ b/test/snapshot/generateAlbumCoverArtwork.js
@@ -1,12 +1,14 @@
 import t from 'tap';
+
+import contentFunction from '#content-function';
 import {testContentFunctions} from '#test-lib';
 
 testContentFunctions(t, 'generateAlbumCoverArtwork (snapshot)', async (t, evaluate) => {
-  await evaluate.load();
-
-  const extraDependencies = {
-    getSizeOfImageFile: () => 0,
-  };
+  await evaluate.load({
+    mock: {
+      image: evaluate.stubContentFunction('image'),
+    },
+  });
 
   const album = {
     directory: 'bee-forus-seatbelt-safebee',
@@ -23,13 +25,11 @@ testContentFunctions(t, 'generateAlbumCoverArtwork (snapshot)', async (t, evalua
     name: 'generateAlbumCoverArtwork',
     args: [album],
     slots: {mode: 'primary'},
-    extraDependencies,
   });
 
   evaluate.snapshot('display: thumbnail', {
     name: 'generateAlbumCoverArtwork',
     args: [album],
     slots: {mode: 'thumbnail'},
-    extraDependencies,
   });
 });
diff --git a/test/snapshot/generateAlbumSecondaryNav.js b/test/snapshot/generateAlbumSecondaryNav.js
index a5cb2e91..709b062e 100644
--- a/test/snapshot/generateAlbumSecondaryNav.js
+++ b/test/snapshot/generateAlbumSecondaryNav.js
@@ -6,8 +6,8 @@ testContentFunctions(t, 'generateAlbumSecondaryNav (snapshot)', async (t, evalua
 
   let album, group1, group2;
 
-  group1 = {name: 'VCG', directory: 'vcg'};
-  group2 = {name: 'Bepis', directory: 'bepis'};
+  group1 = {name: 'VCG', directory: 'vcg', color: '#abcdef'};
+  group2 = {name: 'Bepis', directory: 'bepis', color: '#123456'};
 
   album = {
     date: new Date('2010-04-13'),
diff --git a/test/snapshot/generateCoverArtwork.js b/test/snapshot/generateCoverArtwork.js
index 21c91454..e35dd8d0 100644
--- a/test/snapshot/generateCoverArtwork.js
+++ b/test/snapshot/generateCoverArtwork.js
@@ -2,11 +2,11 @@ import t from 'tap';
 import {testContentFunctions} from '#test-lib';
 
 testContentFunctions(t, 'generateCoverArtwork (snapshot)', async (t, evaluate) => {
-  await evaluate.load();
-
-  const extraDependencies = {
-    getSizeOfImageFile: () => 0,
-  };
+  await evaluate.load({
+    mock: {
+      image: evaluate.stubContentFunction('image', {mock: true}),
+    },
+  });
 
   const artTags = [
     {name: 'Damara', directory: 'damara', isContentWarning: false},
@@ -21,13 +21,11 @@ testContentFunctions(t, 'generateCoverArtwork (snapshot)', async (t, evaluate) =
     name: 'generateCoverArtwork',
     args: [artTags],
     slots: {path, mode: 'primary'},
-    extraDependencies,
   });
 
   evaluate.snapshot('display: thumbnail', {
     name: 'generateCoverArtwork',
     args: [artTags],
     slots: {path, mode: 'thumbnail'},
-    extraDependencies,
   });
 });
diff --git a/test/snapshot/generateTrackCoverArtwork.js b/test/snapshot/generateTrackCoverArtwork.js
index 9e154703..03a181e7 100644
--- a/test/snapshot/generateTrackCoverArtwork.js
+++ b/test/snapshot/generateTrackCoverArtwork.js
@@ -2,11 +2,11 @@ import t from 'tap';
 import {testContentFunctions} from '#test-lib';
 
 testContentFunctions(t, 'generateTrackCoverArtwork (snapshot)', async (t, evaluate) => {
-  await evaluate.load();
-
-  const extraDependencies = {
-    getSizeOfImageFile: () => 0,
-  };
+  await evaluate.load({
+    mock: {
+      image: evaluate.stubContentFunction('image'),
+    },
+  });
 
   const album = {
     directory: 'bee-forus-seatbelt-safebee',
@@ -37,27 +37,23 @@ testContentFunctions(t, 'generateTrackCoverArtwork (snapshot)', async (t, evalua
     name: 'generateTrackCoverArtwork',
     args: [track1],
     slots: {mode: 'primary'},
-    extraDependencies,
   });
 
   evaluate.snapshot('display: thumbnail - unique art', {
     name: 'generateTrackCoverArtwork',
     args: [track1],
     slots: {mode: 'thumbnail'},
-    extraDependencies,
   });
 
   evaluate.snapshot('display: primary - no unique art', {
     name: 'generateTrackCoverArtwork',
     args: [track2],
     slots: {mode: 'primary'},
-    extraDependencies,
   });
 
   evaluate.snapshot('display: thumbnail - no unique art', {
     name: 'generateTrackCoverArtwork',
     args: [track2],
     slots: {mode: 'thumbnail'},
-    extraDependencies,
   });
 });
diff --git a/test/snapshot/transformContent.js b/test/snapshot/transformContent.js
index 25952856..b05beac1 100644
--- a/test/snapshot/transformContent.js
+++ b/test/snapshot/transformContent.js
@@ -2,7 +2,11 @@ import t from 'tap';
 import {testContentFunctions} from '#test-lib';
 
 testContentFunctions(t, 'transformContent (snapshot)', async (t, evaluate) => {
-  await evaluate.load();
+  await evaluate.load({
+    mock: {
+      image: evaluate.stubContentFunction('image'),
+    },
+  });
 
   const extraDependencies = {
     wikiData: {
@@ -11,8 +15,6 @@ testContentFunctions(t, 'transformContent (snapshot)', async (t, evaluate) => {
       ],
     },
 
-    getSizeOfImageFile: () => 0,
-
     to: (key, ...args) => `to-${key}/${args.join('/')}`,
   };
 
@@ -50,15 +52,18 @@ testContentFunctions(t, 'transformContent (snapshot)', async (t, evaluate) => {
 
   quickSnapshot(
     'non-inline image #2',
-      `Rad.\n<img src="spark.png">`);
+      `Rad.\n` +
+      `<img src="spark.png">`);
 
   quickSnapshot(
     'non-inline image #3',
-      `<img src="spark.png">\nBaller.`);
+      `<img src="spark.png">\n` +
+      `Baller.`);
 
   quickSnapshot(
     'dates',
-      `[[date:2023-04-13]] Yep!\nVery nice: [[date:25 October 2413]]`);
+      `[[date:2023-04-13]] Yep!\n` +
+      `Very nice: [[date:25 October 2413]]`);
 
   quickSnapshot(
     'super basic string',