Add tests for extra/index

resources/assets/js/components/main-wrapper/extra/index.vue

@@ -3,13 +3,17 @@
     <div class="tabs">
       <div class="header clear">
         <a @click.prevent="currentView = 'lyrics'"
+          class="lyrics"
           :class="{ active: currentView === 'lyrics' }">Lyrics</a>
         <a @click.prevent="currentView = 'artistInfo'"
+          class="artist"
           :class="{ active: currentView === 'artistInfo' }">Artist</a>
         <a @click.prevent="currentView = 'albumInfo'"
+          class="album"
           :class="{ active: currentView === 'albumInfo' }">Album</a>
         <a @click.prevent="currentView = 'youtube'"
           v-if="sharedState.useYouTube"
+          class="youtube"
           :class="{ active: currentView === 'youtube' }"><i class="fa fa-youtube-play"></i></a>
       </div>
 
@@ -94,6 +98,14 @@ export default {
     resetState () {
       this.currentView = 'lyrics'
       this.song = songStore.stub
+    },
+
+    async fetchSongInfo (song) {
+      try {
+        this.song = await songInfo.fetch(song)
+      } catch (err) {
+        this.song = song
+      }
     }
   },
 
@@ -106,9 +118,7 @@ export default {
         }
       },
 
-      'song:played': async song => {
-        this.song = await songInfo.fetch(song)
-      }
+      'song:played': song => this.fetchSongInfo(song)
     })
   }
 }

resources/assets/js/tests/blobs/song.js

@@ -0,0 +1,12 @@
+import artist from './artist'
+import album from './album'
+
+export default {
+  artist,
+  album,
+  id: 'afe5723ad119cb7d4d4685dcdcdebfb4',
+  title: 'Tribute',
+  lyrics: 'This is not the greatest song in the world, this is just a tribute',
+  artist_id: artist.id,
+  album_id: album.id
+}

resources/assets/js/tests/components/main-wrapper/extra/index.spec.js

@@ -0,0 +1,52 @@
+import ExtraSidebar from '@/components/main-wrapper/extra/index.vue'
+import ArtistInfo from '@/components/main-wrapper/extra/artist-info.vue'
+import AlbumInfo from '@/components/main-wrapper/extra/album-info.vue'
+import Lyrics from '@/components/main-wrapper/extra/lyrics.vue'
+import YouTube from '@/components/main-wrapper/extra/youtube.vue'
+import song from '@/tests/blobs/song'
+import { event } from '@/utils'
+
+describe('components/main-wrapper/extra/index', () => {
+  it('shows by default', () => {
+    const wrapper = shallow(ExtraSidebar)
+    expect(wrapper.findAll('#extra.showing')).toHaveLength(1)
+  })
+
+  it('has a YouTube tab if using YouTube', () => {
+    const wrapper = shallow(ExtraSidebar)
+    expect(wrapper.findAll('.header .youtube')).toHaveLength(0)
+    wrapper.setData({
+      sharedState: { useYouTube: true }
+    })
+    expect(wrapper.findAll('.header .youtube')).toHaveLength(1)
+    expect(wrapper.contains(YouTube)).toBe(true)
+  })
+
+  it('switches pane properly', () => {
+    const wrapper = shallow(ExtraSidebar)
+    expect(wrapper.find('.header .active').is('.lyrics')).toBe(true)
+    ;['.artist', '.album', '.lyrics'].forEach(selector => {
+      wrapper.find(`.header ${selector}`).trigger('click')
+      expect(wrapper.find('.header .active').is(selector)).toBe(true)
+    })
+  })
+
+  it('has proper child components', () => {
+    const wrapper = shallow(ExtraSidebar)
+    wrapper.setData({
+      song,
+      sharedState: { useYouTube: true }
+    })
+    ;[ArtistInfo, AlbumInfo, Lyrics, YouTube].forEach(component => {
+      expect(wrapper.contains(component)).toBe(true)
+    })
+  })
+
+  it('fetch song info when a new song is played', () => {
+    const spy = sinon.spy()
+    const wrapper = shallow(ExtraSidebar)
+    wrapper.vm.fetchSongInfo = spy
+    event.emit('song:played', song)
+    expect(spy.calledWith(song)).toBe(true)
+  })
+})