test: unit tests for audio panel

packages/web-app-files/src/components/SideBar/Audio/AudioMetaPanel.vue

@@ -2,21 +2,21 @@
   <div id="files-sidebar-panel-audio">
     <dl class="audio-data-list">
       <dt v-text="$gettext('Title')" />
-      <dd v-text="title" />
+      <dd data-testid="audio-panel-title" v-text="title" />
       <dt v-text="$gettext('Duration')" />
-      <dd v-text="duration" />
+      <dd data-testid="audio-panel-duration" v-text="duration" />
       <dt v-text="$gettext('Authors')" />
-      <dd v-text="artist" />
+      <dd data-testid="audio-panel-artist" v-text="artist" />
       <dt v-text="$gettext('Album')" />
-      <dd v-text="album" />
+      <dd data-testid="audio-panel-album" v-text="album" />
       <dt v-text="$gettext('Genre')" />
-      <dd v-text="genre" />
+      <dd data-testid="audio-panel-genre" v-text="genre" />
       <dt v-text="$gettext('Year recorded')" />
-      <dd v-text="year" />
+      <dd data-testid="audio-panel-year" v-text="year" />
       <dt v-text="$gettext('Track')" />
-      <dd v-text="track" />
+      <dd data-testid="audio-panel-track" v-text="track" />
       <dt v-text="$gettext('Disc')" />
-      <dd v-text="disc" />
+      <dd data-testid="audio-panel-disc" v-text="disc" />
     </dl>
   </div>
 </template>

packages/web-app-files/tests/unit/components/SideBar/Audio/AudioMetaPanel.spec.ts

@@ -0,0 +1,81 @@
+import { Resource } from '@ownclouders/web-client'
+import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import AudioMetaPanel from '../../../../../src/components/SideBar/Audio/AudioMetaPanel.vue'
+import { mock } from 'vitest-mock-extended'
+import { Audio } from '@ownclouders/web-client/graph/generated'
+
+describe('AudioMeta SideBar Panel', () => {
+  const keys = ['title', 'duration', 'artist', 'album', 'genre', 'year', 'track', 'disc']
+  it.each(keys)('shows value in panel for key "%s"', (key) => {
+    const resource = mock<Resource>({
+      audio: mock<Audio>({
+        title: 'Jingle Bells',
+        duration: 510000,
+        artist: 'Horst Horstsen',
+        album: 'Christmas Gedöns',
+        genre: 'Christmas',
+        year: 1956,
+        track: 23,
+        trackCount: 42,
+        disc: 4,
+        discCount: 12
+      })
+    })
+    const expectedValues = {
+      title: resource.audio.title,
+      duration: '08:30',
+      artist: resource.audio.artist,
+      album: resource.audio.album,
+      genre: resource.audio.genre,
+      year: resource.audio.year.toString(),
+      track: `${resource.audio.track} / ${resource.audio.trackCount}`,
+      disc: `${resource.audio.disc} / ${resource.audio.discCount}`
+    }
+    const { wrapper } = createWrapper({ resource })
+    expect(wrapper.find(`[data-testid="audio-panel-${key}"]`).text()).toBe(expectedValues[key])
+  })
+  it.each(keys)('shows "-" in panel if key "%s" has no value in provided data', (key) => {
+    const emptyPhotoResourceMock = mock<Resource>({})
+    const { wrapper } = createWrapper({ resource: emptyPhotoResourceMock })
+    expect(wrapper.find(`[data-testid="audio-panel-${key}"]`).text()).toEqual('-')
+  })
+  it('shows "track" without "trackCount" if absent', () => {
+    const resource = mock<Resource>({
+      audio: mock<Audio>({
+        duration: undefined,
+        track: 23,
+        trackCount: undefined
+      })
+    })
+    const { wrapper } = createWrapper({ resource })
+    expect(wrapper.find('[data-testid="audio-panel-track"]').text()).toBe(
+      resource.audio.track.toString()
+    )
+  })
+  it('shows "disc" without "discCount" if absent', () => {
+    const resource = mock<Resource>({
+      audio: mock<Audio>({
+        duration: undefined,
+        disc: 500,
+        discCount: undefined
+      })
+    })
+    const { wrapper } = createWrapper({ resource })
+    expect(wrapper.find('[data-testid="audio-panel-disc"]').text()).toBe(
+      resource.audio.disc.toString()
+    )
+  })
+})
+
+function createWrapper({ resource }: { resource: Resource }) {
+  return {
+    wrapper: shallowMount(AudioMetaPanel, {
+      global: {
+        plugins: [...defaultPlugins({})],
+        provide: {
+          resource
+        }
+      }
+    })
+  }
+}