Add tests for edit songs form

resources/assets/js/components/modals/edit-songs-form.vue

@@ -19,8 +19,11 @@
         <div class="tabs tabs-white">
           <div class="header clear">
             <a @click.prevent="currentView = 'details'"
+              class="tab-details"
               :class="{ active: currentView === 'details' }">Details</a>
-            <a @click.prevent="currentView = 'lyrics'" v-show="editSingle"
+            <a @click.prevent="currentView = 'lyrics'"
+              v-if="editSingle"
+              class="tab-lyrics"
               :class="{ active: currentView === 'lyrics' }">Lyrics</a>
           </div>
 
@@ -56,9 +59,9 @@
                 title="Empty or a number">
               </div>
             </div>
-            <div v-show="currentView === 'lyrics' && editSingle">
+            <div v-if="editSingle" v-show="currentView === 'lyrics'">
               <div class="form-row">
-                <textarea v-model="formData.lyrics"/>
+                <textarea name="lyrics" v-model="formData.lyrics"/>
               </div>
             </div>
           </div>
@@ -103,13 +106,15 @@ export default {
       artistState: artistStore.state,
       artistTypeaheadOptions: {
         displayKey: 'name',
-        filterKey: 'name'
+        filterKey: 'name',
+        name: 'artist'
       },
 
       albumState: albumStore.state,
       albumTypeaheadOptions: {
         displayKey: 'name',
-        filterKey: 'name'
+        filterKey: 'name',
+        name: 'album'
       },
 
       /**
@@ -228,7 +233,7 @@ export default {
   methods: {
     async open (songs) {
       this.shown = true
-      this.songs = songs
+      this.songs = [].concat(songs)
       this.currentView = 'details'
 
       if (this.editSingle) {

resources/assets/js/components/shared/typeahead.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="text"
+    <input type="text" :name="options.name"
       :placeholder="options.placeholder || 'No change'"
       v-model="mutatedValue"
       @keydown.down.prevent="down"

resources/assets/js/tests/components/modals/add-user-form.spec.js

@@ -3,27 +3,31 @@ import factory from '@/tests/factory'
 import { userStore } from '@/stores'
 
 describe('components/modals/add-user-form', () => {
-  it('renders properly', () => {
-    shallow(Component, { data: {
-      newUser: factory('user')
-    }}).contains('form.user-add').should.be.true
+  it('opens', async done => {
+    const wrapper = shallow(Component)
+    await wrapper.vm.open()
+    wrapper.contains('form.user-add').should.be.true
+    done()
   })
 
-  it('adds a new user', () => {
+  it('adds a new user', async done => {
     const newUser = factory('user')
-    const wrapper = shallow(Component, { data: { newUser }})
     const storeStub = sinon.stub(userStore, 'store')
+    const wrapper = shallow(Component)
+    await wrapper.vm.open()
+    wrapper.setData({ newUser })
     wrapper.find('form.user-add').trigger('submit')
     storeStub.calledWith(newUser.name, newUser.email, newUser.password).should.be.true
     storeStub.restore()
+    done()
   })
 
-  it('cancels', () => {
-    const newUser = factory('user')
-    const wrapper = shallow(Component, { data: { newUser }})
-    const storeStub = sinon.stub(userStore, 'store')
-    wrapper.findAll('.overlay').should.have.lengthOf(1)
-    wrapper.find('form.user-add .btn-cancel').trigger('click')
-    wrapper.findAll('.overlay').should.have.lengthOf(0)
+  it('cancels', async done => {
+    const wrapper = shallow(Component)
+    await wrapper.vm.open()
+    wrapper.contains('form.user-add').should.be.true
+    await wrapper.vm.cancel()
+    wrapper.contains('form.user-add').should.be.false
+    done()
   })
 })

resources/assets/js/tests/components/modals/edit-songs-form.spec.js

@@ -1,11 +1,126 @@
 import Component from '@/components/modals/edit-songs-form.vue'
 import factory from '@/tests/factory'
+import { songInfo } from '@/services/info'
+import { songStore } from '@/stores'
 
 describe('components/modals/edit-songs-form', () => {
+  // we stub songInfo.fetch() so that server calls aren't made
+  let fetchInfoStub
+
+  beforeEach(() => {
+    fetchInfoStub = sinon.stub(songInfo, 'fetch')
+  })
+
+  afterEach(() => {
+    fetchInfoStub.restore()
+  })
+
   it('opens', async done => {
     const wrapper = shallow(Component)
     await wrapper.vm.open(factory('song', 3))
     wrapper.contains('form').should.be.true
     done()
   })
+
+  it('supports editing a single song', async done => {
+    const song = factory('song')
+    const wrapper = mount(Component)
+    await wrapper.vm.open(song)
+
+    const metaHtml = wrapper.find('.meta').html()
+    metaHtml.should.contain(song.title)
+    metaHtml.should.contain(song.album.name)
+    metaHtml.should.contain(song.artist.name)
+
+    wrapper.find('input[name=title]').element.value.should.equal(song.title)
+    wrapper.find('input[name=album]').element.value.should.equal(song.album.name)
+    wrapper.find('input[name=artist]').element.value.should.equal(song.artist.name)
+    wrapper.find('input[name=track]').element.value.should.equal(song.track.toString())
+
+    wrapper.find('.tabs .tab-lyrics').trigger('click')
+    wrapper.find('textarea[name=lyrics]').element.value.should.equal(song.lyrics)
+
+    done()
+  })
+
+  it('supports editing multiple songs of multiple artists', async done => {
+    const wrapper = mount(Component)
+    await wrapper.vm.open(factory('song', 3))
+
+    const metaHtml = wrapper.find('.meta').html()
+    metaHtml.should.contain('3 songs selected')
+    metaHtml.should.contain('Mixed Artists')
+    metaHtml.should.contain('Mixed Albums')
+
+    wrapper.find('input[name=artist]').element.value.should.be.empty
+    wrapper.find('input[name=album]').element.value.should.be.empty
+    wrapper.contains('.tabs .tab-lyrics').should.be.false
+
+    done()
+  })
+
+  it('supports editing multiple songs of same artist and different albums', async done => {
+    const wrapper = mount(Component)
+    const artist = factory('artist')
+    const songs = factory('song', 5, {
+      artist,
+      artist_id: artist.id
+    })
+    await wrapper.vm.open(songs)
+
+    const metaHtml = wrapper.find('.meta').html()
+    metaHtml.should.contain('5 songs selected')
+    metaHtml.should.contain(artist.name)
+    metaHtml.should.contain('Mixed Albums')
+
+    wrapper.find('input[name=artist]').element.value.should.equal(artist.name)
+    wrapper.find('input[name=album]').element.value.should.be.empty
+    wrapper.contains('.tabs .tab-lyrics').should.be.false
+
+    done()
+  })
+
+  it('supports editing multiple songs in same album', async done => {
+    const wrapper = mount(Component)
+    const album = factory('album')
+    const songs = factory('song', 4, {
+      album,
+      album_id: album.id,
+      artist: album.artist,
+      artist_id: album.artist.id
+    })
+    await wrapper.vm.open(songs)
+
+    const metaHtml = wrapper.find('.meta').html()
+    metaHtml.should.contain('4 songs selected')
+    metaHtml.should.contain(album.name)
+    metaHtml.should.contain(album.artist.name)
+
+    wrapper.find('input[name=artist]').element.value.should.equal(album.artist.name)
+    wrapper.find('input[name=album]').element.value.should.equal(album.name)
+    wrapper.contains('.tabs .tab-lyrics').should.be.false
+
+    done()
+  })
+
+  it('saves', async done => {
+    const updateStub = sinon.stub(songStore, 'update')
+    const wrapper = mount(Component)
+    const songs = factory('song', 3)
+    const formData = { foo: 'bar' }
+    await wrapper.vm.open(songs)
+    wrapper.setData({ formData })
+    wrapper.find('form').trigger('submit')
+    updateStub.calledWith(songs, formData).should.be.true
+
+    done()
+  })
+
+  it('closes', async done => {
+    const wrapper = shallow(Component)
+    await wrapper.vm.open(factory('song', 3))
+    await wrapper.vm.close()
+    wrapper.contains('form').should.be.false
+    done()
+  })
 })

resources/assets/js/utils/formatters.js

@@ -45,5 +45,5 @@ export function parseValidationError (error) {
  * @return {string}
  */
 export function br2nl (str) {
-  return str.replace(/<br\s*[\/]?>/gi, '\n')
+  return str ? str.replace(/<br\s*[\/]?>/gi, '\n') : ''
 }