Use factory for test

package.json

@@ -72,6 +72,7 @@
     "eslint-config-vue": "^2.0.1",
     "eslint-plugin-vue": "^1.0.0",
     "expect": "^21.2.1",
+    "faker": "^4.1.0",
     "font-awesome": "^4.7.0",
     "jsdom": "^11.5.1",
     "jsdom-global": "^3.0.2",

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

@@ -24,6 +24,13 @@ export default {
   mixins: [infiniteScroll],
   components: { albumItem, viewModeSwitch },
 
+  props: {
+    albums: {
+      type: Array,
+      required: true
+    }
+  },
+
   data () {
     return {
       perPage: 9,
@@ -36,7 +43,7 @@ export default {
   computed: {
     displayedItems () {
       return limitBy(
-        filterBy(albumStore.all, this.q, 'name', 'artist.name'),
+        filterBy(this.albums, this.q, 'name', 'artist.name'),
         this.numOfItems
       )
     }
@@ -49,15 +56,8 @@ export default {
   },
 
   created () {
-    event.on({
-      /**
-       * When the application is ready, load the first batch of items.
-       */
-      'koel:ready': () => this.displayMore(),
-
-      'filter:changed': q => {
+    event.on('filter:changed', q => {
         this.q = q
-      }
     })
   }
 }

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

@@ -4,7 +4,7 @@
     <home v-show="view === 'home'"/>
     <queue v-show="view === 'queue'"/>
     <songs v-show="view === 'songs'"/>
-    <albums v-show="view === 'albums'"/>
+    <albums :albums="albums" v-show="view === 'albums'"/>
     <album v-show="view === 'album'"/>
     <artists v-show="view === 'artists'"/>
     <artist v-show="view === 'artist'"/>
@@ -43,7 +43,8 @@ export default {
     return {
       view: 'home', // The default view
       albumCover: null,
-      sharedState: sharedStore.state
+      sharedState: sharedStore.state,
+      albums: []
     }
   },
 
@@ -62,6 +63,10 @@ export default {
        */
       'song:played': song => {
         this.albumCover = song.album.cover === albumStore.stub.cover ? null : song.album.cover
+      },
+
+      'koel:ready': () => {
+        this.albums = albumStore.all
       }
     })
   }

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

@@ -1,33 +0,0 @@
-export default {
-  id: 1,
-  name: 'Koel Vol. 1',
-  cover: 'http://foo/cover.jpg',
-  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'
-  },
-  artist: {
-    id: 1,
-    name: 'Koel Artist'
-  },
-  songs: [
-    {
-      id: 'd501d98756733e2f6d875c5de8be40eb',
-      title: 'Song #1',
-      length: 10,
-    },
-    {
-      id: '6d644013c2414ab07d21776ed5876ba4',
-      title: 'Song #2',
-      length: 20
-    }
-  ]
-}

resources/assets/js/tests/blobs/artist.js

@@ -1,12 +0,0 @@
-export default {
-  id: 1,
-  name: 'Awesome Koel Artist',
-  info: {
-    image: 'http://foo/bar.jpg',
-    bio: {
-      summary: 'This is the summarized biography of Koel Artist',
-      full: 'This is the full biography of Koel Artist'
-    },
-    url: 'http://foo/bar'
-  }
-}

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

@@ -1,12 +0,0 @@
-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/blobs/youtube-videos.js

@@ -1,26 +0,0 @@
-export default [
-  {
-    id: { videoId: 'foo' },
-    snippet: {
-      title: 'Koel YouTube video #1',
-      description: 'Description for Koel YouTube video #1',
-      thumbnails: {
-        default: {
-          url: 'http://youtube/thumb-1.png'
-        }
-      }
-    }
-  },
-  {
-    id: { videoId: 'bar' },
-    snippet: {
-      title: 'Koel YouTube video #2',
-      description: 'Description for Koel YouTube video #2',
-      thumbnails: {
-        default: {
-          url: 'http://youtube/thumb-2.png'
-        }
-      }
-    }
-  }
-]

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

@@ -1,11 +1,13 @@
 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 factory from '@/tests/factory'
 
 describe('components/main-wrapper/extra/album-info', () => {
   it('displays the info as a sidebar by default', () => {
     const wrapper = shallow(AlbumInfo, {
-      propsData: { album }
+      propsData: {
+        album: factory('album')
+      }
     })
     wrapper.findAll('#albumInfo.sidebar').should.have.lengthOf(1)
     wrapper.findAll('#albumInfo.full').should.have.lengthOf(0)
@@ -14,7 +16,7 @@ describe('components/main-wrapper/extra/album-info', () => {
   it('can display the info in full mode', () => {
     const wrapper = shallow(AlbumInfo, {
       propsData: {
-        album,
+        album: factory('album'),
         mode: 'full'
       }
     })
@@ -23,6 +25,7 @@ describe('components/main-wrapper/extra/album-info', () => {
   })
 
   it('triggers showing full wiki', () => {
+    const album = factory('album')
     const wrapper = shallow(AlbumInfo, {
       propsData: { album }
     })
@@ -32,17 +35,17 @@ describe('components/main-wrapper/extra/album-info', () => {
 
   it('lists the correct number of tracks', () => {
     const wrapper = mount(AlbumInfo, {
-      propsData: { album }
+      propsData: {
+        album: factory('album')
+      }
     })
     wrapper.findAll(TrackListItem).should.have.lengthOf(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
+        album: factory('album', { info: null })
       }
     })
     wrapper.html().should.contain('No album information found.')

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

@@ -1,10 +1,12 @@
 import ArtistInfo from '@/components/main-wrapper/extra/artist-info.vue'
-import artist from '@/tests/blobs/artist'
+import factory from '@/tests/factory'
 
 describe('components/main-wrapper/extra/artist-info', () => {
     it('displays the info as a sidebar by default', () => {
     const wrapper = shallow(ArtistInfo, {
-      propsData: { artist }
+      propsData: {
+        artist: factory('artist')
+      }
     })
     wrapper.findAll('#artistInfo.sidebar').should.have.lengthOf(1)
     wrapper.findAll('#artistInfo.full').should.have.lengthOf(0)
@@ -13,7 +15,7 @@ describe('components/main-wrapper/extra/artist-info', () => {
   it('can display the info in full mode', () => {
     const wrapper = shallow(ArtistInfo, {
       propsData: {
-        artist,
+        artist: factory('artist'),
         mode: 'full'
       }
     })
@@ -22,6 +24,7 @@ describe('components/main-wrapper/extra/artist-info', () => {
   })
 
   it('triggers showing full bio', () => {
+    const artist = factory('artist')
     const wrapper = shallow(ArtistInfo, {
       propsData: { artist }
     })
@@ -30,11 +33,9 @@ describe('components/main-wrapper/extra/artist-info', () => {
   })
 
   it('displays a message if the artist has no info', () => {
-    const artistWithNoInfo = _.clone(artist)
-    artistWithNoInfo.info = null
     const wrapper = mount(ArtistInfo, {
       propsData: {
-        artist: artistWithNoInfo
+        artist: factory('artist', { info: null })
       }
     })
     wrapper.html().should.contain('Nothing can be found. This artist is a mystery.')

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

@@ -3,7 +3,7 @@ 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 factory from '@/tests/factory'
 import { event } from '@/utils'
 
 describe('components/main-wrapper/extra/index', () => {
@@ -34,7 +34,7 @@ describe('components/main-wrapper/extra/index', () => {
   it('has proper child components', () => {
     const wrapper = shallow(ExtraSidebar)
     wrapper.setData({
-      song,
+      song: factory('song'),
       sharedState: { useYouTube: true }
     })
     ;[ArtistInfo, AlbumInfo, Lyrics, YouTube].forEach(component => {
@@ -45,6 +45,7 @@ describe('components/main-wrapper/extra/index', () => {
   it('fetch song info when a new song is played', () => {
     const spy = sinon.spy()
     const wrapper = shallow(ExtraSidebar)
+    const song = factory('song')
     wrapper.vm.fetchSongInfo = spy
     event.emit('song:played', song)
     spy.calledWith(song).should.be.true

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

@@ -1,8 +1,9 @@
 import Lyrics from '@/components/main-wrapper/extra/lyrics.vue'
-import song from '@/tests/blobs/song'
+import factory from '@/tests/factory'
 
 describe('components/main-wrapper/extra/lyrics', () => {
   it('displays lyrics if the song has lyrics', () => {
+    const song = factory('song')
     const wrapper = shallow(Lyrics, {
       propsData: { song }
     })
@@ -10,11 +11,9 @@ describe('components/main-wrapper/extra/lyrics', () => {
   })
 
   it('displays a fallback message if the song has no lyrics', () => {
-    const songWithNoLyrics = _.clone(song)
-    songWithNoLyrics.lyrics = null
     const wrapper = shallow(Lyrics, {
       propsData: {
-        song: songWithNoLyrics
+        song: factory('song', { lyrics: '' })
       }
     })
     wrapper.html().should.contain('No lyrics found. Are you not listening to Bach?')

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

@@ -1,18 +1,21 @@
 import YouTube from '@/components/main-wrapper/extra/youtube.vue'
-import song from '@/tests/blobs/song'
-import videos from '@/tests/blobs/youtube-videos'
+import factory from '@/tests/factory'
 
 describe('components/main-wrapper/extra/youtube', () => {
   let wrapper
   beforeEach(() => {
     wrapper = shallow(YouTube, {
-      propsData: { song }
+      propsData: {
+        song: factory('song')
+      }
+    })
+    wrapper.setData({
+      videos: factory('video', 5)
     })
-    wrapper.setData({ videos })
   })
 
   it('displays a list of videos', () => {
-    wrapper.findAll('a.video').should.have.lengthOf(2)
+    wrapper.findAll('a.video').should.have.lengthOf(5)
   })
 
   it('loads more videos on demand', () => {

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

@@ -1,13 +1,14 @@
-import Album from '@/components/main-wrapper/main-content/album.vue'
+import Component from '@/components/main-wrapper/main-content/album.vue'
 import SongList from '@/components/shared/song-list.vue'
 import SongListControls from '@/components/shared/song-list-controls.vue'
 import { event } from '@/utils'
-import album from '@/tests/blobs/album'
+import factory from '@/tests/factory'
 import Vue from 'vue'
 
 describe('components/main-wrapper/main-content/album', () => {
   it('renders upon receiving event', () => {
-    const wrapper = shallow(Album)
+    const wrapper = shallow(Component)
+    const album = factory('album')
     event.emit('main-content-view:load', 'album', album)
     Vue.nextTick(() => {
       const html = wrapper.html()
@@ -19,9 +20,9 @@ describe('components/main-wrapper/main-content/album', () => {
   })
 
   it('loads info from Last.fm', () => {
-    const wrapper = shallow(Album)
+    const wrapper = shallow(Component)
     wrapper.setData({
-      album,
+      album: factory('album'),
       sharedState: { useLastfm: true }
     })
     const spy = sinon.spy()
@@ -31,9 +32,9 @@ describe('components/main-wrapper/main-content/album', () => {
   })
 
   it('allows downloading', () => {
-    const wrapper = shallow(Album)
+    const wrapper = shallow(Component)
     wrapper.setData({
-      album,
+      album: factory('album'),
       sharedState: { allowDownload: true }
     })
     const spy = sinon.spy()

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

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

resources/assets/js/tests/factory/album.js

@@ -0,0 +1,26 @@
+import factory from '.'
+
+export default () => {
+  const artist = factory('artist')
+
+  return {
+    artist,
+    id: faker.random.number(),
+    artist_id: artist.id,
+    name: faker.lorem.sentence(),
+    cover: faker.image.imageUrl(),
+    info: {
+      image: faker.image.imageUrl(),
+      wiki: {
+        summary: faker.lorem.sentence(),
+        full: faker.lorem.paragraph()
+      },
+      tracks: [
+        { title: faker.lorem.sentence(), fmtLength: '3:42' },
+        { title: faker.lorem.sentence(), fmtLength: '2:37' },
+      ],
+      url: faker.internet.url()
+    },
+    songs: []
+  }
+}

resources/assets/js/tests/factory/artist.js

@@ -0,0 +1,12 @@
+export default () => ({
+  id: faker.random.number(),
+  name: faker.name.findName(),
+  info: {
+    image: faker.image.imageUrl(),
+    bio: {
+      summary: faker.lorem.sentence(),
+      full: faker.lorem.paragraph()
+    },
+    url: faker.internet.url()
+  }
+})

resources/assets/js/tests/factory/index.js

@@ -0,0 +1,26 @@
+import artist from './artist'
+import album from './album'
+import song from './song'
+import video from './video'
+
+const models = { artist, album, song, video }
+
+const factory = (model, count = 1, overrides = {}) => {
+  if (typeof count === 'object') {
+    return factory(model, 1, count)
+  }
+
+  if (count === 1) {
+    return _.assign(models[model](), overrides)
+  } else {
+    return [...(function* () {
+      let i = 0
+      while (i < count) {
+        yield _.assign(models[model](), overrides)
+        ++i
+      }
+    })()]
+  }
+}
+
+export default factory

resources/assets/js/tests/factory/song.js

@@ -0,0 +1,21 @@
+import md5 from 'blueimp-md5'
+import factory from '.'
+import crypto from 'crypto'
+
+export default () => {
+  const artist = factory('artist')
+  const album = factory('album')
+
+  return {
+    artist,
+    album,
+    artist_id: artist.id,
+    album_id: album.id,
+    id: crypto.createHash('md5'),
+    title: faker.lorem.sentence(),
+    length: faker.random.number(),
+    track: faker.random.number(),
+    disc: faker.random.number({ min: 1, max: 2 }),
+    lyrics: faker.lorem.paragraph()
+  }
+}

resources/assets/js/tests/factory/video.js

@@ -0,0 +1,14 @@
+export default () => ({
+  id: {
+    videoId: faker.random.alphaNumeric()
+  },
+  snippet: {
+    title: faker.lorem.sentence(),
+    description: faker.lorem.paragraph(),
+    thumbnails: {
+      default: {
+        url: faker.image.imageUrl()
+      }
+    }
+  }
+})

resources/assets/js/tests/setup.js

@@ -20,6 +20,7 @@ Object.keys(window).forEach((key) => {
 })
 
 // make common utils available globally as well
+global.faker = require('faker')
 global.expect = require('expect')
 global.sinon = require('sinon')
 global._ = require('lodash')

yarn.lock

@@ -2730,6 +2730,10 @@ extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
 
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+
 fast-deep-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"