migration: queue integration tests

This commit is contained in:
Phan An 2022-04-27 23:43:00 +02:00
parent 9cf7a09cde
commit 20693759f6
No known key found for this signature in database
GPG key ID: A81E4477F0BB6FDC
12 changed files with 49 additions and 63 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

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

View file

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