Add tests for artists

resources/assets/js/components/main-wrapper/main-content/album.vue

@@ -132,6 +132,7 @@ export default {
     async showInfo () {
       this.info.showing = true
       if (!this.album.info) {
+        this.info.loading = true
         try {
           await albumInfoService.fetch(this.album)
         } catch (e) {

resources/assets/js/components/main-wrapper/main-content/artist.vue

@@ -127,8 +127,12 @@ export default {
       this.info.showing = true
       if (!this.artist.info) {
         this.info.loading = true
-        await artistInfoService.fetch(this.artist)
-        this.info.loading = false
+        try {
+          await artistInfoService.fetch(this.artist)
+        } catch (e) {
+        } finally {
+          this.info.loading = false
+        }
       } else {
         this.info.loading = false
       }

resources/assets/js/components/main-wrapper/main-content/artists.vue

@@ -23,9 +23,15 @@ import infiniteScroll from '@/mixins/infinite-scroll'
 
 export default {
   mixins: [infiniteScroll],
-
   components: { artistItem, viewModeSwitch },
 
+  props: {
+    artists: {
+      type: Array,
+      required: true
+    }
+  },
+
   data () {
     return {
       perPage: 9,
@@ -38,7 +44,7 @@ export default {
   computed: {
     displayedItems () {
       return limitBy(
-        filterBy(artistStore.all, this.q, 'name'),
+        filterBy(this.artists, this.q, 'name'),
         this.numOfItems
       )
     }
@@ -52,11 +58,6 @@ export default {
 
   created () {
     event.on({
-      /**
-       * When the application is ready, load the first batch of items.
-       */
-      'koel:ready': () => this.displayMore(),
-
       'filter:changed': q => {
         this.q = q
       }

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

@@ -6,7 +6,7 @@
     <songs v-show="view === 'songs'"/>
     <albums :albums="albums" v-show="view === 'albums'"/>
     <album v-show="view === 'album'"/>
-    <artists v-show="view === 'artists'"/>
+    <artists :artists="artists" v-show="view === 'artists'"/>
     <artist v-show="view === 'artist'"/>
     <users v-show="view === 'users'"/>
     <settings v-show="view === 'settings'"/>
@@ -19,7 +19,7 @@
 
 <script>
 import { event } from '@/utils'
-import { albumStore, sharedStore } from '@/stores'
+import { albumStore, sharedStore, artistStore } from '@/stores'
 
 import albums from './albums.vue'
 import album from './album.vue'
@@ -44,7 +44,8 @@ export default {
       view: 'home', // The default view
       albumCover: null,
       sharedState: sharedStore.state,
-      albums: []
+      albums: [],
+      artists: []
     }
   },
 
@@ -67,6 +68,7 @@ export default {
 
       'koel:ready': () => {
         this.albums = albumStore.all
+        this.artists = artistStore.all
       }
     })
   }

resources/assets/js/tests/components/main-wrapper/main-content/artist.spec.js

@@ -0,0 +1,61 @@
+import Component from '@/components/main-wrapper/main-content/artist.vue'
+import SongList from '@/components/shared/song-list.vue'
+import SongListControls from '@/components/shared/song-list-controls.vue'
+import { event } from '@/utils'
+import factory from '@/tests/factory'
+import Vue from 'vue'
+
+describe('components/main-wrapper/main-content/artist', () => {
+  let artist
+  beforeEach(() => {
+    artist = factory('artist')
+    const album = factory('album', {
+      artist,
+      artist_id: artist.id,
+    })
+    artist.albums = [album]
+    artist.songs = factory('song', 5, {
+      artist,
+      album,
+      artist_id: artist.id,
+      album_id: album.id
+    })
+  })
+
+  it('renders upon receiving event', () => {
+    const wrapper = shallow(Component)
+    event.emit('main-content-view:load', 'artist', artist)
+    Vue.nextTick(() => {
+      const html = wrapper.html()
+      html.should.contain(artist.name)
+      html.should.contain('1 album')
+      wrapper.contains(SongList).should.be.true
+      wrapper.contains(SongListControls).should.be.true
+    })
+  })
+
+  it('loads info from Last.fm', () => {
+    const wrapper = shallow(Component)
+    wrapper.setData({
+      artist,
+      sharedState: { useLastfm: true }
+    })
+    const spy = sinon.spy()
+    wrapper.showInfo = spy
+    wrapper.find('a.info').trigger('click')
+    spy.should.have.been.called
+  })
+
+  it('allows downloading', () => {
+    const wrapper = shallow(Component)
+    wrapper.setData({
+      artist,
+      sharedState: { allowDownload: true }
+    })
+    const spy = sinon.spy()
+    wrapper.download = spy
+    wrapper.find('a.download').trigger('click')
+    spy.should.have.been.called
+  })
+})
+

resources/assets/js/tests/components/main-wrapper/main-content/artists.spec.js

@@ -0,0 +1,14 @@
+import Artists from '@/components/main-wrapper/main-content/artists.vue'
+import ArtistItem from '@/components/shared/artist-item.vue'
+import factory from '@/tests/factory'
+
+describe('components/main-wrapper/main-content/artists', () => {
+  it('displays a list of artists', () => {
+    const wrapper = shallow(Artists, {
+      propsData: {
+        artists: factory('artist', 5)
+      }
+    })
+    wrapper.findAll(ArtistItem).should.have.lengthOf(5)
+  })
+})