feat (test): add Volume component tests

This commit is contained in:
Phan An 2022-05-12 19:03:06 +02:00
parent 937a56c173
commit 621c869a82
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
9 changed files with 44 additions and 80 deletions

View file

@ -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

View file

@ -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)
})
})

View file

@ -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)
})
})

View file

@ -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>
`;

View file

@ -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>

View file

@ -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)

View file

@ -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)
})
}
}

View file

@ -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"

View file

@ -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 = {