Add tests for volume.vue

resources/assets/js/components/site-footer/equalizer.vue

@@ -63,9 +63,7 @@ export default {
      * @param {Number} val
      */
     selectedPresetIndex (val) {
-      /**
-       * Save the selected preset (index) into local storage every time the value's changed.
-       */
+      // Save the selected preset (index) every time the value's changed.
       preferences.selectedPreset = val
 
       if (~~val !== -1) {

resources/assets/js/components/site-footer/volume.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="volume control" id="volume">
-    <i class="fa fa-volume-up" @click.prevent="mute" v-show="!muted"/>
-    <i class="fa fa-volume-off" @click.prevent="unmute" v-show="muted"/>
+    <i class="fa fa-volume-off unmute" @click.prevent="unmute" v-if="muted"/>
+    <i class="fa fa-volume-up mute" @click.prevent="mute" v-else/>
     <input type="range" id="volumeRange" max="10" step="0.1" 
       @change="broadcastVolume" class="plyr__volume"
       @input="setVolume"
@@ -25,7 +25,7 @@ export default {
      */
     mute () {
       this.muted = true
-      return playback.mute()
+      playback.mute()
     },
 
     /**
@@ -33,7 +33,7 @@ export default {
      */
     unmute () {
       this.muted = false
-      return playback.unmute()
+      playback.unmute()
     },
 
     /**
@@ -42,8 +42,9 @@ export default {
      * @param {Event} e
      */
     setVolume (e) {
-      playback.setVolume(e.target.value)
-      this.muted = e.target.value === 0
+      const volume = parseFloat(e.target.value)
+      playback.setVolume(volume)
+      this.muted = volume === 0
     },
 
     /**
@@ -52,7 +53,7 @@ export default {
      * @param  {Event} e
      */
     broadcastVolume (e) {
-      socket.broadcast('volume:changed', e.target.value)
+      socket.broadcast('volume:changed', parseFloat(e.target.value))
     }
   }
 }

resources/assets/js/tests/components/site-footer/volume.spec.js

@@ -0,0 +1,45 @@
+import Component from '@/components/site-footer/volume.vue'
+import { playback, socket } from '@/services'
+
+describe('components/site-footer/volume', () => {
+  it('renders properly', () => {
+    const wrapper = shallow(Component)
+    wrapper.contains('i.mute').should.be.true
+    wrapper.contains('#volumeRange').should.be.true
+  })
+  
+  it('mutes', () => {
+    const muteStub = sinon.stub(playback, 'mute')
+    shallow(Component).find('i.mute').trigger('click')
+    muteStub.called.should.be.true 
+    muteStub.restore()
+  })
+
+  it('unmutes', () => {
+    const unmuteStub = sinon.stub(playback, 'unmute')
+    shallow(Component, { data: {
+      muted: true
+    }}).find('i.unmute').trigger('click')
+    unmuteStub.called.should.be.true 
+    unmuteStub.restore()
+  })
+
+  it('sets the volume', () => {
+    const setVolumeStub = sinon.stub(playback, 'setVolume')
+    const input = shallow(Component).find('#volumeRange')
+    input.element.value = 4.2
+    input.trigger('input')
+    setVolumeStub.calledWith(4.2).should.be.true
+    setVolumeStub.restore()
+  })
+
+  it('broadcasts the volume value', () => {
+    const broadcastStub = sinon.stub(socket, 'broadcast')
+    const input = shallow(Component).find('#volumeRange')
+    input.element.value = 4.2
+    input.trigger('change')
+    broadcastStub.calledWith('volume:changed', 4.2).should.be.true
+    broadcastStub.restore()
+  })
+})
+