koel/resources/assets/js/components/screens/GenreListScreen.spec.ts
2024-10-14 00:37:01 +07:00

40 lines
1.3 KiB
TypeScript

import { expect, it } from 'vitest'
import factory from '@/__tests__/factory'
import UnitTestCase from '@/__tests__/UnitTestCase'
import { commonStore, genreStore } from '@/stores'
import { screen, waitFor } from '@testing-library/vue'
import GenreListScreen from './GenreListScreen.vue'
new class extends UnitTestCase {
protected test () {
it('renders the list of genres and their song counts', async () => {
// ensure there's no duplicated names
const genres = [
factory('genre', { name: 'Rock', song_count: 10 }),
factory('genre', { name: 'Pop', song_count: 20 }),
factory('genre', { name: 'Jazz', song_count: 30 }),
]
const fetchMock = this.mock(genreStore, 'fetchAll').mockResolvedValue(genres)
this.render(GenreListScreen)
await waitFor(() => {
expect(fetchMock).toHaveBeenCalled()
genres.forEach(genre => screen.getByTitle(`${genre.name}: ${genre.song_count} songs`))
})
})
it('shows a message when the library is empty', async () => {
commonStore.state.song_length = 0
const fetchMock = this.mock(genreStore, 'fetchAll')
this.render(GenreListScreen)
await waitFor(() => {
expect(fetchMock).not.toHaveBeenCalled()
screen.getByTestId('screen-empty-state')
})
})
}
}