feat(test): add ThumbnailStack tests

resources/assets/js/components/ui/ThumbnailStack.spec.ts

@@ -0,0 +1,36 @@
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import ThumbnailStack from './ThumbnailStack.vue'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('displays 4 thumbnails at most', () => {
+      const { getAllByTestId } = this.render(ThumbnailStack, {
+        props: {
+          thumbnails: [
+            'https://via.placeholder.com/150',
+            'https://via.placeholder.com/150?foo',
+            'https://via.placeholder.com/150?bar',
+            'https://via.placeholder.com/150?baz',
+            'https://via.placeholder.com/150?qux'
+          ]
+        }
+      })
+
+      expect(getAllByTestId('thumbnail')).toHaveLength(4)
+    })
+
+    it('displays the first thumbnail if less than 4 are provided', () => {
+      const { getAllByTestId } = this.render(ThumbnailStack, {
+        props: {
+          thumbnails: [
+            'https://via.placeholder.com/150',
+            'https://via.placeholder.com/150?foo'
+          ]
+        }
+      })
+
+      expect(getAllByTestId('thumbnail')).toHaveLength(1)
+    })
+  }
+}

resources/assets/js/components/ui/ThumbnailStack.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="thumbnail-stack" :class="layout" :style="{ backgroundImage: `url(${defaultCover})` }">
-    <span v-for="thumbnail in displayedThumbnails" :style="{ backgroundImage: `url(${thumbnail}`}"/>
+    <span
+      v-for="thumbnail in displayedThumbnails"
+      :style="{ backgroundImage: `url(${thumbnail}`}"
+      data-testid="thumbnail"
+    />
   </div>
 </template>
 
@@ -18,7 +22,7 @@ const displayedThumbnails = computed(() => {
     : (thumbnails.value.length < 4 ? [thumbnails.value[0]] : take(thumbnails.value, 4)).map(url => url || defaultCover)
 })
 
-const layout = computed<'mono' | 'tiles'>(() => displayedThumbnails.value.length < 4 ? 'mono' : 'tiles')
+const layout = computed<'single' | 'tiles'>(() => displayedThumbnails.value.length < 4 ? 'single' : 'tiles')
 </script>
 
 <style lang="scss" scoped>