mirror of
https://github.com/koel/koel
synced 2024-11-10 06:34:14 +00:00
migration: queue integration tests
This commit is contained in:
parent
9cf7a09cde
commit
20693759f6
12 changed files with 49 additions and 63 deletions
|
@ -46,7 +46,7 @@ context('Albums', { scrollBehavior: false }, () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.get('#albumWrapper').within(() => {
|
cy.get('#albumWrapper').within(() => {
|
||||||
cy.$getVisibleSongRows().should('have.length.at.least', 1)
|
cy.$getSongRows().should('have.length.at.least', 1)
|
||||||
|
|
||||||
cy.get('.screen-header').within(() => {
|
cy.get('.screen-header').within(() => {
|
||||||
cy.findByText('Download All').should('be.visible')
|
cy.findByText('Download All').should('be.visible')
|
||||||
|
|
|
@ -47,7 +47,7 @@ context('Artists', { scrollBehavior: false }, () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.get('#artistWrapper').within(() => {
|
cy.get('#artistWrapper').within(() => {
|
||||||
cy.$getVisibleSongRows().should('have.length.at.least', 1)
|
cy.$getSongRows().should('have.length.at.least', 1)
|
||||||
|
|
||||||
cy.get('.screen-header').within(() => {
|
cy.get('.screen-header').within(() => {
|
||||||
cy.findByText('Download All').should('be.visible')
|
cy.findByText('Download All').should('be.visible')
|
||||||
|
|
|
@ -17,7 +17,7 @@ context('Extra Information Panel', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.$clickSidebarItem('All Songs')
|
cy.$clickSidebarItem('All Songs')
|
||||||
cy.$getVisibleSongRows().first().dblclick()
|
cy.$getSongRows().first().dblclick()
|
||||||
|
|
||||||
cy.get('#extraPanelLyrics').should('be.visible').and('contain.text', 'No lyrics found.')
|
cy.get('#extraPanelLyrics').should('be.visible').and('contain.text', 'No lyrics found.')
|
||||||
cy.get('#extraPanelLyrics [data-test=add-lyrics-btn]').click()
|
cy.get('#extraPanelLyrics [data-test=add-lyrics-btn]').click()
|
||||||
|
|
|
@ -9,7 +9,7 @@ context('Favorites', { scrollBehavior: false }, () => {
|
||||||
cy.findByText('Songs You Love').should('be.visible')
|
cy.findByText('Songs You Love').should('be.visible')
|
||||||
cy.findByText('Download All').should('be.visible')
|
cy.findByText('Download All').should('be.visible')
|
||||||
|
|
||||||
cy.$getVisibleSongRows().should('have.length', 3)
|
cy.$getSongRows().should('have.length', 3)
|
||||||
.each(row => cy.wrap(row).get('[data-test=btn-like-liked]').should('be.visible'))
|
.each(row => cy.wrap(row).get('[data-test=btn-like-liked]').should('be.visible'))
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -23,7 +23,7 @@ context('Favorites', { scrollBehavior: false }, () => {
|
||||||
|
|
||||||
cy.get('#songsWrapper')
|
cy.get('#songsWrapper')
|
||||||
.within(() => {
|
.within(() => {
|
||||||
cy.$getVisibleSongRows().first().within(() => {
|
cy.$getSongRows().first().within(() => {
|
||||||
cy.get('[data-test=like-btn]')
|
cy.get('[data-test=like-btn]')
|
||||||
.within(() => cy.get('[data-test=btn-like-unliked]').should('be.visible')).click()
|
.within(() => cy.get('[data-test=btn-like-unliked]').should('be.visible')).click()
|
||||||
.within(() => cy.get('[data-test=btn-like-liked]').should('be.visible'))
|
.within(() => cy.get('[data-test=btn-like-liked]').should('be.visible'))
|
||||||
|
@ -42,7 +42,7 @@ context('Favorites', { scrollBehavior: false }, () => {
|
||||||
|
|
||||||
cy.get('#songsWrapper')
|
cy.get('#songsWrapper')
|
||||||
.within(() => {
|
.within(() => {
|
||||||
cy.$getVisibleSongRows().first().click()
|
cy.$getSongRows().first().click()
|
||||||
cy.get('[data-test=add-to-btn]').click()
|
cy.get('[data-test=add-to-btn]').click()
|
||||||
cy.get('[data-test=add-to-menu]').should('be.visible')
|
cy.get('[data-test=add-to-menu]').should('be.visible')
|
||||||
.within(() => cy.findByText('Favorites').click()).should('not.be.visible')
|
.within(() => cy.findByText('Favorites').click()).should('not.be.visible')
|
||||||
|
@ -57,11 +57,11 @@ context('Favorites', { scrollBehavior: false }, () => {
|
||||||
|
|
||||||
cy.get('#favoritesWrapper')
|
cy.get('#favoritesWrapper')
|
||||||
.within(() => {
|
.within(() => {
|
||||||
cy.$getVisibleSongRows().should('have.length', 3)
|
cy.$getSongRows().should('have.length', 3)
|
||||||
.first().should('contain.text', 'November')
|
.first().should('contain.text', 'November')
|
||||||
.within(() => cy.get('[data-test=like-btn]').click())
|
.within(() => cy.get('[data-test=like-btn]').click())
|
||||||
|
|
||||||
cy.$getVisibleSongRows().should('have.length', 2)
|
cy.$getSongRows().should('have.length', 2)
|
||||||
.first().should('not.contain.text', 'November')
|
.first().should('not.contain.text', 'November')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -72,11 +72,11 @@ context('Favorites', { scrollBehavior: false }, () => {
|
||||||
|
|
||||||
cy.get('#favoritesWrapper')
|
cy.get('#favoritesWrapper')
|
||||||
.within(() => {
|
.within(() => {
|
||||||
cy.$getVisibleSongRows().should('have.length', 3)
|
cy.$getSongRows().should('have.length', 3)
|
||||||
.first().should('contain.text', 'November')
|
.first().should('contain.text', 'November')
|
||||||
.click().type('{backspace}')
|
.click().type('{backspace}')
|
||||||
|
|
||||||
cy.$getVisibleSongRows().should('have.length', 2)
|
cy.$getSongRows().should('have.length', 2)
|
||||||
.first().should('not.contain.text', 'November')
|
.first().should('not.contain.text', 'November')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -5,7 +5,7 @@ context('Footer Pane', () => {
|
||||||
|
|
||||||
cy.$clickSidebarItem('All Songs')
|
cy.$clickSidebarItem('All Songs')
|
||||||
|
|
||||||
cy.$getVisibleSongRows().first().dblclick().within(function () {
|
cy.$getSongRows().first().dblclick().within(function () {
|
||||||
cy.get('.title').invoke('text').as('title')
|
cy.get('.title').invoke('text').as('title')
|
||||||
cy.get('.album').invoke('text').as('album')
|
cy.get('.album').invoke('text').as('album')
|
||||||
cy.get('.artist').invoke('text').as('artist')
|
cy.get('.artist').invoke('text').as('artist')
|
||||||
|
|
|
@ -10,7 +10,7 @@ context('Playlists', () => {
|
||||||
|
|
||||||
cy.get('#playlistWrapper').within(() => {
|
cy.get('#playlistWrapper').within(() => {
|
||||||
cy.get('.heading-wrapper').should('be.visible').and('contain', 'Simple Playlist')
|
cy.get('.heading-wrapper').should('be.visible').and('contain', 'Simple Playlist')
|
||||||
cy.$getVisibleSongRows().should('have.length', 3)
|
cy.$getSongRows().should('have.length', 3)
|
||||||
cy.findByText('Download All').should('be.visible')
|
cy.findByText('Download All').should('be.visible')
|
||||||
;['.btn-shuffle-all', '.btn-delete-playlist'].forEach(selector => cy.get(selector).should('be.visible'))
|
;['.btn-shuffle-all', '.btn-delete-playlist'].forEach(selector => cy.get(selector).should('be.visible'))
|
||||||
})
|
})
|
||||||
|
@ -77,7 +77,7 @@ context('Playlists', () => {
|
||||||
cy.$clickSidebarItem('All Songs')
|
cy.$clickSidebarItem('All Songs')
|
||||||
|
|
||||||
cy.get('#songsWrapper').within(() => {
|
cy.get('#songsWrapper').within(() => {
|
||||||
cy.$selectSongRange(1, 2)
|
cy.$selectSongRange(0, 1)
|
||||||
cy.get('[data-test=add-to-btn]').click()
|
cy.get('[data-test=add-to-btn]').click()
|
||||||
cy.get('[data-test=add-to-menu]')
|
cy.get('[data-test=add-to-menu]')
|
||||||
.should('be.visible')
|
.should('be.visible')
|
||||||
|
@ -101,7 +101,7 @@ context('Playlists', () => {
|
||||||
cy.$clickSidebarItem('All Songs')
|
cy.$clickSidebarItem('All Songs')
|
||||||
|
|
||||||
cy.get('#songsWrapper').within(() => {
|
cy.get('#songsWrapper').within(() => {
|
||||||
cy.$selectSongRange(1, 3)
|
cy.$selectSongRange(0, 2)
|
||||||
cy.get('[data-test=add-to-btn]').click()
|
cy.get('[data-test=add-to-btn]').click()
|
||||||
cy.get('[data-test=new-playlist-name]').type('A New Playlist{enter}')
|
cy.get('[data-test=new-playlist-name]').type('A New Playlist{enter}')
|
||||||
})
|
})
|
||||||
|
|
|
@ -14,8 +14,8 @@ context('Queuing', { scrollBehavior: false }, () => {
|
||||||
cy.get('#queueWrapper').within(() => {
|
cy.get('#queueWrapper').within(() => {
|
||||||
cy.findByText('Current Queue').should('be.visible')
|
cy.findByText('Current Queue').should('be.visible')
|
||||||
cy.findByTestId('shuffle-library').click()
|
cy.findByTestId('shuffle-library').click()
|
||||||
cy.get('.song-item').should('have.length.at.least', MIN_SONG_ITEMS_SHOWN)
|
cy.$getSongRows().should('have.length.at.least', MIN_SONG_ITEMS_SHOWN)
|
||||||
cy.get('.song-item:first-child').should('have.class', 'playing')
|
cy.get('@rows').first().should('have.class', 'playing')
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.$assertPlaying()
|
cy.$assertPlaying()
|
||||||
|
@ -27,12 +27,9 @@ context('Queuing', { scrollBehavior: false }, () => {
|
||||||
cy.get('#queueWrapper').within(() => {
|
cy.get('#queueWrapper').within(() => {
|
||||||
cy.findByText('Current Queue').should('be.visible')
|
cy.findByText('Current Queue').should('be.visible')
|
||||||
cy.findByTestId('shuffle-library').click()
|
cy.findByTestId('shuffle-library').click()
|
||||||
cy.get('').click()
|
cy.$getSongRows().should('have.length.at.least', MIN_SONG_ITEMS_SHOWN)
|
||||||
cy.get('.song-item').should('have.length.at.least', MIN_SONG_ITEMS_SHOWN)
|
cy.get('.screen-header [data-test=song-list-controls]').findByText('Clear').click()
|
||||||
cy.get('.screen-header [data-test=song-list-controls]')
|
cy.$getSongRows().should('have.length', 0)
|
||||||
.findByText('Clear')
|
|
||||||
.click()
|
|
||||||
cy.get('.song-item').should('have.length', 0)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -45,29 +42,29 @@ context('Queuing', { scrollBehavior: false }, () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.get('#queueWrapper').within(() => {
|
cy.get('#queueWrapper').within(() => {
|
||||||
cy.get('.song-item').should('have.length.at.least', MIN_SONG_ITEMS_SHOWN)
|
cy.$getSongRows().should('have.length.at.least', MIN_SONG_ITEMS_SHOWN)
|
||||||
cy.get('.song-item:first-child').should('have.class', 'playing')
|
.first().should('have.class', 'playing')
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.$assertPlaying()
|
cy.$assertPlaying()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('creates a queue from selected songs', () => {
|
it('creates a queue from selected songs', () => {
|
||||||
cy.$shuffleSeveralSongs()
|
cy.$shuffleSeveralSongs(3)
|
||||||
|
|
||||||
cy.get('#queueWrapper').within(() => {
|
cy.get('#queueWrapper').within(() => {
|
||||||
cy.get('.song-item').should('have.length', 3)
|
cy.$getSongRows().should('have.length', 3)
|
||||||
cy.get('.song-item:first-child').should('have.class', 'playing')
|
.first().should('have.class', 'playing')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
it('deletes a song from queue', () => {
|
it('deletes a song from queue', () => {
|
||||||
cy.$shuffleSeveralSongs()
|
cy.$shuffleSeveralSongs(3)
|
||||||
|
|
||||||
cy.get('#queueWrapper').within(() => {
|
cy.get('#queueWrapper').within(() => {
|
||||||
cy.get('.song-item').should('have.length', 3)
|
cy.$getSongRows().should('have.length', 3)
|
||||||
cy.get('.song-item:first-child').type('{backspace}')
|
cy.get('@rows').first().type('{backspace}')
|
||||||
cy.get('.song-item').should('have.length', 2)
|
cy.$getSongRows().should('have.length', 2)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -76,15 +73,15 @@ context('Queuing', { scrollBehavior: false }, () => {
|
||||||
cy.$clickSidebarItem('All Songs')
|
cy.$clickSidebarItem('All Songs')
|
||||||
|
|
||||||
cy.get('#songsWrapper').within(function () {
|
cy.get('#songsWrapper').within(function () {
|
||||||
cy.get('.song-item:nth-child(4) .title').invoke('text').as('title')
|
cy.$getSongRowAt(4).find('.title').invoke('text').as('title')
|
||||||
cy.get('.song-item:nth-child(4)').dblclick()
|
cy.$getSongRowAt(4).dblclick()
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.$clickSidebarItem('Current Queue')
|
cy.$clickSidebarItem('Current Queue')
|
||||||
cy.get('#queueWrapper').within(function () {
|
cy.get('#queueWrapper').within(function () {
|
||||||
cy.get('.song-item').should('have.length', 4)
|
cy.$getSongRows().should('have.length', 4)
|
||||||
cy.get(`.song-item:nth-child(2) .title`).should('have.text', this.title)
|
cy.$getSongRowAt(1).find('.title').should('have.text', this.title)
|
||||||
cy.get('.song-item:nth-child(2)').should('have.class', 'playing')
|
cy.$getSongRowAt(1).should('have.class', 'playing')
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.$assertPlaying()
|
cy.$assertPlaying()
|
||||||
|
|
|
@ -113,7 +113,7 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
|
||||||
cy.$assertPlaylistSongCount('Simple Playlist', 3)
|
cy.$assertPlaylistSongCount('Simple Playlist', 3)
|
||||||
cy.get('#songsWrapper').within(() => {
|
cy.get('#songsWrapper').within(() => {
|
||||||
if (config.songCount > 1) {
|
if (config.songCount > 1) {
|
||||||
cy.$selectSongRange(1, config.songCount).rightclick()
|
cy.$selectSongRange(0, config.songCount - 1).rightclick()
|
||||||
} else {
|
} else {
|
||||||
cy.get('.song-item:first-child').rightclick()
|
cy.get('.song-item:first-child').rightclick()
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,10 +50,7 @@ context('Song Editing', { scrollBehavior: false }, () => {
|
||||||
fixture: 'songs-multiple.put.200.json'
|
fixture: 'songs-multiple.put.200.json'
|
||||||
})
|
})
|
||||||
|
|
||||||
cy.get('#songsWrapper').within(() => {
|
cy.get('#songsWrapper').within(() => cy.$selectSongRange(0, 2).rightclick())
|
||||||
cy.$selectSongRange(1, 3).rightclick()
|
|
||||||
})
|
|
||||||
|
|
||||||
cy.findByTestId('song-context-menu').within(() => cy.findByText('Edit').click())
|
cy.findByTestId('song-context-menu').within(() => cy.findByText('Edit').click())
|
||||||
|
|
||||||
cy.findByTestId('edit-song-form').within(() => {
|
cy.findByTestId('edit-song-form').within(() => {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import '@testing-library/cypress/add-commands'
|
import '@testing-library/cypress/add-commands'
|
||||||
import 'cypress-file-upload'
|
import 'cypress-file-upload'
|
||||||
import Chainable = Cypress.Chainable
|
|
||||||
import scrollBehaviorOptions = Cypress.scrollBehaviorOptions
|
import scrollBehaviorOptions = Cypress.scrollBehaviorOptions
|
||||||
|
|
||||||
Cypress.Commands.add('$login', (options: Partial<LoginOptions> = {}) => {
|
Cypress.Commands.add('$login', (options: Partial<LoginOptions> = {}) => {
|
||||||
|
@ -47,11 +46,7 @@ Cypress.Commands.add('$findInTestId', (selector: string) => {
|
||||||
return cy.findByTestId(testId.trim()).find(rest.join(' '))
|
return cy.findByTestId(testId.trim()).find(rest.join(' '))
|
||||||
})
|
})
|
||||||
|
|
||||||
Cypress.Commands.add('$clickSidebarItem', (sidebarItemText: string) => {
|
Cypress.Commands.add('$clickSidebarItem', (text: string) => cy.get('#sidebar').findByText(text).click())
|
||||||
return cy.get('#sidebar')
|
|
||||||
.findByText(sidebarItemText)
|
|
||||||
.click()
|
|
||||||
})
|
|
||||||
|
|
||||||
Cypress.Commands.add('$mockPlayback', () => {
|
Cypress.Commands.add('$mockPlayback', () => {
|
||||||
cy.intercept('/play/**?api_token=mock-token', {
|
cy.intercept('/play/**?api_token=mock-token', {
|
||||||
|
@ -72,8 +67,8 @@ Cypress.Commands.add('$shuffleSeveralSongs', (count = 3) => {
|
||||||
cy.$clickSidebarItem('All Songs')
|
cy.$clickSidebarItem('All Songs')
|
||||||
|
|
||||||
cy.get('#songsWrapper').within(() => {
|
cy.get('#songsWrapper').within(() => {
|
||||||
cy.$getVisibleSongRows().first().click()
|
cy.$getSongRowAt(0).click()
|
||||||
cy.$getVisibleSongRows().eq(count - 1).click({ shiftKey: true })
|
cy.$getSongRowAt(count - 1).click({ shiftKey: true })
|
||||||
|
|
||||||
cy.get('.screen-header [data-test=btn-shuffle-selected]').click()
|
cy.get('.screen-header [data-test=btn-shuffle-selected]').click()
|
||||||
})
|
})
|
||||||
|
@ -94,8 +89,8 @@ Cypress.Commands.add('$assertFavoriteSongCount', (count: number) => {
|
||||||
Cypress.Commands.add(
|
Cypress.Commands.add(
|
||||||
'$selectSongRange',
|
'$selectSongRange',
|
||||||
(start: number, end: number, scrollBehavior: scrollBehaviorOptions = false) => {
|
(start: number, end: number, scrollBehavior: scrollBehaviorOptions = false) => {
|
||||||
cy.$getVisibleSongRows().eq(start - 1).click()
|
cy.$getSongRowAt(start).click()
|
||||||
return cy.$getVisibleSongRows().eq(end - 1).click({
|
return cy.$getSongRowAt(end).click({
|
||||||
scrollBehavior,
|
scrollBehavior,
|
||||||
shiftKey: true
|
shiftKey: true
|
||||||
})
|
})
|
||||||
|
@ -114,9 +109,8 @@ Cypress.Commands.add('$assertNotPlaying', () => {
|
||||||
})
|
})
|
||||||
|
|
||||||
Cypress.Commands.add('$assertSidebarItemActive', (text: string) => {
|
Cypress.Commands.add('$assertSidebarItemActive', (text: string) => {
|
||||||
cy.get('#sidebar')
|
cy.get('#sidebar').findByText(text).should('have.class', 'active')
|
||||||
.findByText(text)
|
|
||||||
.should('have.class', 'active')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
Cypress.Commands.add('$getVisibleSongRows', () => cy.get('.vue-recycle-scroller__item-view:visible').as('rows'))
|
Cypress.Commands.add('$getSongRows', () => cy.get('.song-item').as('rows'))
|
||||||
|
Cypress.Commands.add('$getSongRowAt', (position: number) => cy.$getSongRows().eq(position))
|
||||||
|
|
3
cypress/types.d.ts
vendored
3
cypress/types.d.ts
vendored
|
@ -26,7 +26,8 @@ declare namespace Cypress {
|
||||||
*/
|
*/
|
||||||
$shuffleSeveralSongs(count?: number): void
|
$shuffleSeveralSongs(count?: number): void
|
||||||
|
|
||||||
$getVisibleSongRows(): Chainable<JQuery>
|
$getSongRows(): Chainable<JQuery>
|
||||||
|
$getSongRowAt(position: number): Chainable<JQuery>
|
||||||
|
|
||||||
$assertPlaylistSongCount(name: string, count: number): void
|
$assertPlaylistSongCount(name: string, count: number): void
|
||||||
$assertFavoriteSongCount(count: number): void
|
$assertFavoriteSongCount(count: number): void
|
||||||
|
|
|
@ -39,13 +39,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
No songs queued.
|
No songs queued.
|
||||||
<span class="d-block secondary">
|
<span class="d-block secondary" v-if="libraryNotEmpty">
|
||||||
How about
|
How about
|
||||||
<a
|
<a data-testid="shuffle-library" class="start" @click.prevent="playAll(true)">
|
||||||
v-if="showShuffleLibraryButton"
|
|
||||||
data-testid="shuffle-library"
|
|
||||||
class="start" @click.prevent="playAll(true)"
|
|
||||||
>
|
|
||||||
shuffling the whole library
|
shuffling the whole library
|
||||||
</a>?
|
</a>?
|
||||||
</span>
|
</span>
|
||||||
|
@ -78,7 +74,8 @@ const {
|
||||||
toggleControls
|
toggleControls
|
||||||
} = useSongList(toRef(queueStore.state, 'songs'), { clearQueue: true })
|
} = useSongList(toRef(queueStore.state, 'songs'), { clearQueue: true })
|
||||||
|
|
||||||
const showShuffleLibraryButton = computed(() => songs.value.length > 0)
|
const allSongs = toRef(songStore.state, 'songs')
|
||||||
|
const libraryNotEmpty = computed(() => allSongs.value.length > 0)
|
||||||
|
|
||||||
const playAll = (shuffle: boolean) => playbackService.queueAndPlay(songs.value.length ? songs.value : songStore.all, shuffle)
|
const playAll = (shuffle: boolean) => playbackService.queueAndPlay(songs.value.length ? songs.value : songStore.all, shuffle)
|
||||||
const clearQueue = () => queueStore.clear()
|
const clearQueue = () => queueStore.clear()
|
||||||
|
|
Loading…
Reference in a new issue