feat (test): add Volume component tests

.github/workflows/client-unit.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [ 14, 16, 17 ]
+        node-version: [ 14, 16, 17 ] # 15 conflicts with @typescript-eslint/eslint-plugin@5
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2

resources/assets/js/__tests__/components/ui/view-mode-switch.spec.ts

@@ -1,13 +0,0 @@
-import Component from '@/components/ui/ViewModeSwitch.vue'
-import { shallow } from '@/__tests__/adapter'
-
-describe('components/ui/ViewModeSwitch', () => {
-  it.each([['thumbnails'], ['list']])('emits the "%s" mode value', mode => {
-    const wrapper = shallow(Component, {
-      propsData: {
-        value: 'list'
-      }
-    })
-    expect(wrapper.input(`input[value=${mode}]`).hasEmitted('input', mode)).toBe(true)
-  })
-})

resources/assets/js/__tests__/components/ui/volume.spec.ts

@@ -1,43 +0,0 @@
-import Component from '@/components/ui/volume.vue'
-import { playbackService, socketService } from '@/services'
-import { mock } from '@/__tests__/__helpers__'
-import { shallow } from '@/__tests__/adapter'
-
-describe('components/ui/volume', () => {
-  afterEach(() => {
-    jest.resetModules()
-    jest.clearAllMocks()
-  })
-
-  it('renders properly', () => {
-    expect(shallow(Component)).toMatchSnapshot()
-  })
-
-  it('mutes', () => {
-    const m = mock(playbackService, 'mute')
-    shallow(Component).click('i.mute')
-    expect(m).toHaveBeenCalled()
-  })
-
-  it('unmutes', () => {
-    const m = mock(playbackService, 'unmute')
-    shallow(Component, {
-      data: () => ({
-        muted: true
-      })
-    }).click('i.unmute')
-    expect(m).toHaveBeenCalled()
-  })
-
-  it('sets the volume', () => {
-    const m = mock(playbackService, 'setVolume')
-    shallow(Component).find('#volumeRange').setValue('4.2').input()
-    expect(m).toHaveBeenCalledWith(4.2)
-  })
-
-  it('broadcasts the volume value', () => {
-    const m = mock(socketService, 'broadcast')
-    shallow(Component).find('#volumeRange').setValue('4.2').change()
-    expect(m).toHaveBeenCalledWith('SOCKET_VOLUME_CHANGED', 4.2)
-  })
-})

resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`renders 1`] = `
   <div class="wrapper" data-v-add48cbe="">
     <!--v-if--><button data-testid="toggle-visualizer-btn" title="Click for a marvelous visualizer!" type="button" data-v-add48cbe="">
       <div class="bars" data-testid="soundbars" data-v-d983e410="" data-v-add48cbe=""><img alt="Sound bars" height="13" src="/resources/assets/img/bars.gif" data-v-d983e410="" /></div>
-    </button><button title="Unlike Fahrstuhl to Heaven by Led Zeppelin" class="text-secondary like" data-testid="like-btn" data-v-5d366bb1="" data-v-add48cbe=""><i class="fa fa-heart text-maroon" data-testid="btn-like-liked" data-v-5d366bb1=""></i></button><button class="active control text-uppercase" data-testid="toggle-extra-panel-btn" title="View song information" type="button" data-v-add48cbe=""> Info </button><a class="queue control" href="#!/queue" data-v-add48cbe=""><i class="fa fa-list-ol" data-v-add48cbe=""></i></a><button class="NO_REPEAT control" title="Change repeat mode (current mode: No Repeat)" data-testid="repeat-mode-switch" type="button" data-v-651f1926="" data-v-add48cbe=""><i class="fa fa-repeat" data-v-651f1926=""></i></button><span id="volume" class="volume control" data-v-add48cbe=""><i class="fa fa-volume-up mute" role="button" tabindex="0" title="Mute"></i><input id="volumeRange" class="plyr__volume" max="10" step="0.1" title="Volume" type="range"/></span>
+    </button><button title="Unlike Fahrstuhl to Heaven by Led Zeppelin" class="text-secondary like" data-testid="like-btn" data-v-5d366bb1="" data-v-add48cbe=""><i class="fa fa-heart text-maroon" data-testid="btn-like-liked" data-v-5d366bb1=""></i></button><button class="active control text-uppercase" data-testid="toggle-extra-panel-btn" title="View song information" type="button" data-v-add48cbe=""> Info </button><a class="queue control" href="#!/queue" data-v-add48cbe=""><i class="fa fa-list-ol" data-v-add48cbe=""></i></a><button class="NO_REPEAT control" title="Change repeat mode (current mode: No Repeat)" data-testid="repeat-mode-switch" type="button" data-v-651f1926="" data-v-add48cbe=""><i class="fa fa-repeat" data-v-651f1926=""></i></button><span id="volume" class="volume control" data-v-add48cbe=""><i class="fa fa-volume-up mute" role="button" tabindex="0" title="Mute"></i><input id="volumeInput" class="plyr__volume" max="10" step="0.1" title="Volume" type="range"/></span>
   </div>
 </div>
 `;

resources/assets/js/components/ui/TextMagnifier.vue

@@ -15,7 +15,7 @@ import { toRefs } from 'vue'
 const props = defineProps<{ target: HTMLElement | null }>()
 const { target } = toRefs(props)
 
-const zoom = (level: number) => {
+const zoom = (delta: number) => {
   if (!target.value) {
     return
   }
@@ -27,8 +27,8 @@ const zoom = (level: number) => {
     style.lineHeight = '1.6'
   }
 
-  style.fontSize = parseFloat(style.fontSize) + level * 0.2 + 'em'
-  style.lineHeight = String(parseFloat(style.lineHeight) + level * 0.15)
+  style.fontSize = parseFloat(style.fontSize) + delta * 0.2 + 'em'
+  style.lineHeight = String(parseFloat(style.lineHeight) + delta * 0.15)
 }
 </script>
 

resources/assets/js/components/ui/VirtualScroller.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref, toRefs } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, toRefs } from 'vue'
 
 const props = defineProps<{ items: any[], itemHeight: number }>()
 const { items, itemHeight } = toRefs(props)

resources/assets/js/components/ui/Volume.spec.ts

@@ -0,0 +1,33 @@
+import { expect, it } from 'vitest'
+import ComponentTestCase from '@/__tests__/ComponentTestCase'
+import { fireEvent } from '@testing-library/vue'
+import { playbackService, socketService } from '@/services'
+import Volume from './Volume.vue'
+
+new class extends ComponentTestCase {
+  protected test () {
+    it('mutes and unmutes', async () => {
+      const muteMock = this.mock(playbackService, 'mute')
+      const unmuteMock = this.mock(playbackService, 'unmute')
+      const { getByRole } = this.render(Volume)
+
+      await fireEvent.click(getByRole('button'))
+      expect(muteMock).toHaveBeenCalledOnce()
+
+      await fireEvent.click(getByRole('button'))
+      expect(unmuteMock).toHaveBeenCalledOnce()
+    })
+
+    it('sets and broadcasts volume', async () => {
+      const setVolumeMock = this.mock(playbackService, 'setVolume')
+      const broadCastMock = this.mock(socketService, 'broadcast')
+      const { getByRole } = this.render(Volume)
+
+      await fireEvent.update(getByRole('slider'), '4.2')
+      await fireEvent.change(getByRole('slider'))
+
+      expect(setVolumeMock).toHaveBeenCalledWith(4.2)
+      expect(broadCastMock).toHaveBeenCalledWith('SOCKET_VOLUME_CHANGED', 4.2)
+    })
+  }
+}

resources/assets/js/components/ui/Volume.vue

@@ -1,25 +1,12 @@
 <template>
   <span id="volume" class="volume control">
-    <i
-      v-if="muted"
-      class="fa fa-volume-off unmute"
-      role="button"
-      tabindex="0"
-      title="Unmute"
-      @click="unmute"
-    ></i>
-    <i
-      v-else
-      class="fa fa-volume-up mute"
-      role="button"
-      tabindex="0"
-      title="Mute"
-      @click="mute"
-    ></i>
+    <i v-if="muted" class="fa fa-volume-off" role="button" tabindex="0" title="Unmute" @click="unmute"/>
+    <i v-else class="fa fa-volume-up" role="button" tabindex="0" title="Mute" @click="mute"/>
     <input
-      id="volumeRange"
+      id="volumeInput"
       class="plyr__volume"
       max="10"
+      role="slider"
       step="0.1"
       title="Volume"
       type="range"

resources/assets/js/services/playbackService.ts

@@ -22,7 +22,7 @@ import router from '@/router'
  */
 const PRELOAD_BUFFER = 30
 const DEFAULT_VOLUME_VALUE = 7
-const VOLUME_INPUT_SELECTOR = '#volumeRange'
+const VOLUME_INPUT_SELECTOR = '#volumeInput'
 const REPEAT_MODES: RepeatMode[] = ['NO_REPEAT', 'REPEAT_ALL', 'REPEAT_ONE']
 
 export const playbackService = {