Update title when track is playing.

Author: VD39

components/Molecules/PreloadImage.spec.ts

@@ -64,8 +64,8 @@ describe('Default', () => {
     );
   });
 
-  describe('when the lazyLoad prop is not set', () => {
-    describe('when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon', () => {
+  describe('when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon', () => {
+    describe('when the lazyLoad prop is not set', () => {
       beforeEach(() => {
         wrapper = factory({
           image: 'image',
@@ -176,31 +176,31 @@ describe('Default', () => {
         });
       });
     });
-  });
 
-  describe('when the lazyLoad prop is set to false', () => {
-    beforeEach(() => {
-      wrapper = factory({
-        image: 'image',
-        lazyLoad: false,
+    describe('when the lazyLoad prop is set to false', () => {
+      beforeEach(() => {
+        wrapper = factory({
+          image: 'image',
+          lazyLoad: false,
+        });
       });
-    });
-
-    it('matches the snapshot', () => {
-      expect(wrapper.html()).toMatchSnapshot();
-    });
 
-    it('does not add the IntersectionObserver function', () => {
-      expect(iOMock.observeMock).not.toHaveBeenCalled();
-    });
+      it('matches the snapshot', () => {
+        expect(wrapper.html()).toMatchSnapshot();
+      });
 
-    describe('when the component unmounts', () => {
-      beforeEach(() => {
-        wrapper.unmount();
+      it('does not add the IntersectionObserver function', () => {
+        expect(iOMock.observeMock).not.toHaveBeenCalled();
       });
 
-      it('does not call the IntersectionObserver disconnect function', () => {
-        expect(iOMock.disconnectMock).not.toHaveBeenCalled();
+      describe('when the component unmounts', () => {
+        beforeEach(() => {
+          wrapper.unmount();
+        });
+
+        it('does not call the IntersectionObserver disconnect function', () => {
+          expect(iOMock.disconnectMock).not.toHaveBeenCalled();
+        });
       });
     });
   });

components/Molecules/PreloadImage.vue

@@ -30,10 +30,6 @@ const imageSrc = computed(() => {
     return null;
   }
 
-  if (isUrl(props.image)) {
-    return props.image;
-  }
-
   return getImageUrl(props.image);
 });
 

components/Molecules/__snapshots__/PreloadImage.spec.ts.snap

@@ -1,5 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Default > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > when the lazyLoad prop is not set > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader"><span class="visuallyHidden">Loading image</span></span><img alt="Image" class="image" draggable="false" loading="lazy" src="image" style="display: none;"></div>"`;
+
+exports[`Default > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > when the lazyLoad prop is not set > when intersectionObserver is intersecting > when image has finished loading > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader" style="display: none;"><span class="visuallyHidden">Loading image</span></span><img alt="Image" class="image" draggable="false" loading="lazy" src="image"></div>"`;
+
+exports[`Default > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > when the lazyLoad prop is not set > when intersectionObserver is intersecting > when the alt prop is set > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader"><span class="visuallyHidden">Loading image</span></span><img alt="Alt text for image" class="image" draggable="false" loading="lazy" src="https://test.com"></div>"`;
+
+exports[`Default > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > when the lazyLoad prop is set to false > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader"><span class="visuallyHidden">Loading image</span></span><img alt="Image" class="image" draggable="false" loading="lazy" src="image" style="display: none;"></div>"`;
+
 exports[`Default > when the image prop is set to an IMAGE_DEFAULT_BY_TYPE icon > when the image prop is set to PhApplePodcastsLogo > matches the snapshot 1`] = `
 "<div class="centerAll preloadImage">
   <div class="iconImage">
@@ -95,11 +103,3 @@ exports[`Default > when the image prop is set to an IMAGE_DEFAULT_BY_TYPE icon >
   </div>
 </div>"
 `;
-
-exports[`Default > when the lazyLoad prop is not set > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader"><span class="visuallyHidden">Loading image</span></span><img alt="Image" class="image" draggable="false" loading="lazy" src="image" style="display: none;"></div>"`;
-
-exports[`Default > when the lazyLoad prop is not set > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > when intersectionObserver is intersecting > when image has finished loading > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader" style="display: none;"><span class="visuallyHidden">Loading image</span></span><img alt="Image" class="image" draggable="false" loading="lazy" src="image"></div>"`;
-
-exports[`Default > when the lazyLoad prop is not set > when the image prop is set to a none IMAGE_DEFAULT_BY_TYPE icon > when intersectionObserver is intersecting > when the alt prop is set > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader"><span class="visuallyHidden">Loading image</span></span><img alt="Alt text for image" class="image" draggable="false" loading="lazy" src="https://test.com"></div>"`;
-
-exports[`Default > when the lazyLoad prop is set to false > matches the snapshot 1`] = `"<div class="centerAll preloadImage"><span class="skeletonLoader"><span class="visuallyHidden">Loading image</span></span><img alt="Image" class="image" draggable="false" loading="lazy" src="image" style="display: none;"></div>"`;

components/Organisms/FileListItem.spec.ts

@@ -1,19 +1,15 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
 import TrackPlayPause from '@/components/Organisms/TrackPlayPause.vue';
 import { getFormattedTracksMock } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import FileListItem from './FileListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const track = getFormattedTracksMock()[0];
 

components/Organisms/TrackLists/AlbumTracksListItem.spec.ts

@@ -1,19 +1,15 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
 import TrackPlayPause from '@/components/Organisms/TrackPlayPause.vue';
 import { getFormattedTracksMock } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import AlbumTracksListItem from './AlbumTracksListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const track = getFormattedTracksMock()[0];
 

components/Organisms/TrackLists/BookmarksTracksListItem.spec.ts

@@ -1,19 +1,15 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
 import TrackPlayPause from '@/components/Organisms/TrackPlayPause.vue';
 import { getFormattedBookmarksMock } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import BookmarksTracksListItem from './BookmarksTracksListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const bookmark = getFormattedBookmarksMock()[0];
 

components/Organisms/TrackLists/MixedTracksListItem.spec.ts

@@ -1,6 +1,5 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
@@ -11,14 +10,11 @@ import {
   getFormattedRadioStationMock,
   getFormattedTracksMock,
 } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import MixedTracksListItem from './MixedTracksListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const track = getFormattedTracksMock()[0];
 

components/Organisms/TrackLists/PodcastEpisodesListItem.spec.ts

@@ -1,20 +1,16 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
 import DownloadPodcastEpisode from '@/components/Organisms/DownloadPodcastEpisode.vue';
 import TrackPlayPause from '@/components/Organisms/TrackPlayPause.vue';
 import { getFormattedPodcastEpisodesMock } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import PodcastEpisodesListItem from './PodcastEpisodesListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const downloadedEpisode = getFormattedPodcastEpisodesMock()[0];
 const noneDownloadedEpisode = getFormattedPodcastEpisodesMock(1, {

components/Organisms/TrackLists/RadioStationsListItem.spec.ts

@@ -1,19 +1,15 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
 import TrackPlayPause from '@/components/Organisms/TrackPlayPause.vue';
 import { getFormattedRadioStationMock } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import RadioStationsListItem from './RadioStationsListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const radioStation = getFormattedRadioStationMock()[0];
 

components/Organisms/TrackLists/TracksListItem.spec.ts

@@ -1,19 +1,15 @@
 import type { VueWrapper } from '@vue/test-utils';
 
-import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import InteractionWrapper from '@/components/Atoms/InteractionWrapper.vue';
 import TrackPlayPause from '@/components/Organisms/TrackPlayPause.vue';
 import { getFormattedTracksMock } from '@/test/helpers';
+import { useAudioPlayerMock } from '@/test/useAudioPlayerMock';
 
 import TracksListItem from './TracksListItem.vue';
 
-const isCurrentTrackMock = vi.fn().mockReturnValue(false);
-
-mockNuxtImport('useAudioPlayer', () => () => ({
-  isCurrentTrack: isCurrentTrackMock,
-}));
+const { isCurrentTrackMock } = useAudioPlayerMock();
 
 const track = getFormattedTracksMock()[0];