Add tests for album-info

resources/assets/js/components/main-wrapper/extra/album-info.vue

@@ -10,10 +10,10 @@
       <img v-if="album.info.image" :src="album.info.image" class="cover">
 
       <div class="wiki" v-if="album.info.wiki && album.info.wiki.summary">
-        <div class="summary" v-show="showSummary" v-html="album.info.wiki.summary"/>
-        <div class="full" v-show="showFull" v-html="album.info.wiki.full"/>
+        <div class="summary" v-if="showSummary" v-html="album.info.wiki.summary"/>
+        <div class="full" v-if="showFull" v-html="album.info.wiki.full"/>
 
-        <button class="more" v-show="showSummary" @click.prevent="showingFullWiki = true">
+        <button class="more" v-if="showSummary" @click.prevent="showingFullWiki = true">
           Full Wiki
         </button>
       </div>

resources/assets/js/tests/blobs/album.js

@@ -0,0 +1,16 @@
+export default {
+  id: 1,
+  name: 'Koel Vol. 1',
+  info: {
+    image: 'http://foo/bar.jpg',
+    wiki: {
+      summary: 'This is the summarized wiki of the album',
+      full: 'This is the full wiki of the album'
+    },
+    tracks: [
+      { title: 'First song', fmtLength: '3:42' },
+      { title: 'Second song', fmtLength: '2:37' },
+    ],
+    url: 'http://foo/bar'
+  }
+}

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

@@ -0,0 +1,57 @@
+import AlbumInfo from '@/components/main-wrapper/extra/album-info.vue'
+import TrackListItem from '@/components/shared/track-list-item.vue'
+import album from '@/tests/blobs/album'
+import _ from 'lodash'
+
+describe('components/main-wrapper/extra/album-info', () => {
+  it('displays the info as a sidebar by default', () => {
+    const wrapper = shallow(AlbumInfo, {
+      propsData: {
+        album
+      }
+    })
+    expect(wrapper.findAll('#albumInfo.sidebar')).toHaveLength(1)
+    expect(wrapper.findAll('#albumInfo.full')).toHaveLength(0)
+  })
+
+  it('can display the info in full mode', () => {
+    const wrapper = shallow(AlbumInfo, {
+      propsData: {
+        album,
+        mode: 'full'
+      }
+    })
+    expect(wrapper.findAll('#albumInfo.sidebar')).toHaveLength(0)
+    expect(wrapper.findAll('#albumInfo.full')).toHaveLength(1)
+  })
+
+  it('triggers showing full wiki', () => {
+    const wrapper = shallow(AlbumInfo, {
+      propsData: {
+        album
+      }
+    })
+    wrapper.find('.wiki button.more').trigger('click')
+    expect(wrapper.html()).toContain(album.info.wiki.full)
+  })
+
+  it('lists the correct number of tracks', () => {
+    const wrapper = mount(AlbumInfo, {
+      propsData: {
+        album
+      }
+    })
+    expect(wrapper.findAll(TrackListItem)).toHaveLength(2)
+  })
+
+  it('displays a message if the album has no info', () => {
+    const albumWithNoInfo = _.clone(album)
+    albumWithNoInfo.info = null
+    const wrapper = mount(AlbumInfo, {
+      propsData: {
+        album: albumWithNoInfo
+      }
+    })
+    expect(wrapper.html()).toContain('No album information found.')
+  })
+})