mirror of
https://github.com/koel/koel
synced 2024-11-10 06:34:14 +00:00
feat (test): add Volume component tests
This commit is contained in:
parent
937a56c173
commit
621c869a82
9 changed files with 44 additions and 80 deletions
2
.github/workflows/client-unit.yml
vendored
2
.github/workflows/client-unit.yml
vendored
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
})
|
|
@ -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)
|
||||
})
|
||||
})
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
33
resources/assets/js/components/ui/Volume.spec.ts
Normal file
33
resources/assets/js/components/ui/Volume.spec.ts
Normal 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)
|
||||
})
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in a new issue