test: add FooterMiddlePane unit tests

resources/assets/js/components/layout/app-footer/FooterMiddlePane.spec.ts

@@ -0,0 +1,34 @@
+import { beforeEach, expect, it } from 'vitest'
+import { render } from '@/__tests__/__helpers__'
+import FooterMiddlePane from './FooterMiddlePane.vue'
+import factory from '@/__tests__/factory'
+import { cleanup } from '@testing-library/vue'
+
+beforeEach(() => cleanup())
+
+it('renders without a song', () => {
+  expect(render(FooterMiddlePane).html()).toMatchSnapshot()
+})
+
+it('renders with a song', () => {
+  const album = factory<Album>('album', {
+    id: 42,
+    name: 'IV',
+    artist: factory<Artist>('artist', {
+      id: 104,
+      name: 'Led Zeppelin'
+    })
+  })
+
+  const song = factory<Song>('song', {
+    album,
+    title: 'Fahrstühl to Heaven',
+    artist: album.artist
+  })
+
+  expect(render(FooterMiddlePane, {
+    props: {
+      song
+    }
+  }).html()).toMatchSnapshot()
+})

resources/assets/js/components/layout/app-footer/FooterMiddlePane.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="middle-pane" data-testid="footer-middle-pane">
-    <div class="progress" id="progressPane">
+    <div id="progressPane" class="progress">
       <template v-if="song">
         <h3 class="title">{{ song.title }}</h3>
         <p class="meta">
-          <a class="artist" :href="`/#!/artist/${song.artist.id}`">{{ song.artist.name }}</a> –
-          <a class="album" :href="`/#!/album/${song.album.id}`">{{ song.album.name }}</a>
+          <a :href="`/#!/artist/${song.artist.id}`" class="artist">{{ song.artist.name }}</a> –
+          <a :href="`/#!/album/${song.album.id}`" class="album">{{ song.album.name }}</a>
         </p>
       </template>
 
       <div class="plyr">
-        <audio crossorigin="anonymous" controls></audio>
+        <audio controls crossorigin="anonymous"></audio>
       </div>
     </div>
   </div>
@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { toRefs } from 'vue'
 
-const props = defineProps<{ song: Song }>()
+const props = defineProps<{ song?: Song }>()
 const { song } = toRefs(props)
 </script>
 

resources/assets/js/components/layout/app-footer/FooterPlayerControls.vue

@@ -1,47 +1,47 @@
 <template>
   <div class="side player-controls">
     <i
-      @click.prevent="playPrev"
       class="prev fa fa-step-backward control"
+      data-testid="play-prev-btn"
       role="button"
       tabindex="0"
       title="Play previous song"
-      data-testid="play-prev-btn"
+      @click.prevent="playPrev"
     />
 
     <span class="album-thumb-wrapper">
       <span :style="{ backgroundImage: `url('${cover}')` }" class="album-thumb"></span>
       <span
-        @click.prevent="toggle"
+        v-if="shouldShowPlayButton"
         class="play"
+        data-testid="play-btn"
         role="button"
         tabindex="0"
         title="Play or resume"
-        data-testid="play-btn"
-        v-if="shouldShowPlayButton"
+        @click.prevent="toggle"
       >
         <i class="fa fa-play"></i>
       </span>
       <span
-        @click.prevent="toggle"
+        v-else
         class="pause"
+        data-testid="pause-btn"
         role="button"
         tabindex="0"
         title="Pause"
-        data-testid="pause-btn"
-        v-else
+        @click.prevent="toggle"
       >
         <i class="fa fa-pause"></i>
       </span>
     </span>
 
     <i
-      @click.prevent="playNext"
       class="next fa fa-step-forward control"
+      data-testid="play-next-btn"
       role="button"
       tabindex="0"
       title="Play next song"
-      data-testid="play-next-btn"
+      @click.prevent="playNext"
     />
   </div>
 </template>

resources/assets/js/components/layout/app-footer/__snapshots__/FooterMiddlePane.spec.ts.snap

@@ -0,0 +1,20 @@
+// Vitest Snapshot v1
+
+exports[`renders with a song 1`] = `
+"<div class=\\"middle-pane\\" data-testid=\\"footer-middle-pane\\">
+  <div id=\\"progressPane\\" class=\\"progress\\">
+    <h3 class=\\"title\\">Fahrstühl to Heaven</h3>
+    <p class=\\"meta\\"><a href=\\"/#!/artist/104\\" class=\\"artist\\">Led Zeppelin</a> – <a href=\\"/#!/album/42\\" class=\\"album\\">IV</a></p>
+    <div class=\\"plyr\\"><audio controls=\\"\\" crossorigin=\\"anonymous\\"></audio></div>
+  </div>
+</div>"
+`;
+
+exports[`renders without a song 1`] = `
+"<div class=\\"middle-pane\\" data-testid=\\"footer-middle-pane\\">
+  <div id=\\"progressPane\\" class=\\"progress\\">
+    <!--v-if-->
+    <div class=\\"plyr\\"><audio controls=\\"\\" crossorigin=\\"anonymous\\"></audio></div>
+  </div>
+</div>"
+`;