From 20693759f68cda2a8f1b901f5805427129b9b37b Mon Sep 17 00:00:00 2001 From: Phan An Date: Wed, 27 Apr 2022 23:43:00 +0200 Subject: [PATCH] migration: queue integration tests --- cypress/integration/albums.spec.ts | 2 +- cypress/integration/artists.spec.ts | 2 +- cypress/integration/extra-panel.spec.ts | 2 +- cypress/integration/favorites.spec.ts | 14 +++---- cypress/integration/footer-pane.spec.ts | 2 +- cypress/integration/playlists.spec.ts | 6 +-- cypress/integration/queuing.spec.ts | 41 +++++++++---------- cypress/integration/song-context-menu.spec.ts | 2 +- cypress/integration/song-editing.spec.ts | 5 +-- cypress/support/commands.ts | 22 ++++------ cypress/types.d.ts | 3 +- .../js/components/screens/QueueScreen.vue | 11 ++--- 12 files changed, 49 insertions(+), 63 deletions(-) diff --git a/cypress/integration/albums.spec.ts b/cypress/integration/albums.spec.ts index 80cfb9f8..87a1a2cd 100644 --- a/cypress/integration/albums.spec.ts +++ b/cypress/integration/albums.spec.ts @@ -46,7 +46,7 @@ context('Albums', { scrollBehavior: false }, () => { }) 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.findByText('Download All').should('be.visible') diff --git a/cypress/integration/artists.spec.ts b/cypress/integration/artists.spec.ts index 2e5348e7..8a7df825 100644 --- a/cypress/integration/artists.spec.ts +++ b/cypress/integration/artists.spec.ts @@ -47,7 +47,7 @@ context('Artists', { scrollBehavior: false }, () => { }) 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.findByText('Download All').should('be.visible') diff --git a/cypress/integration/extra-panel.spec.ts b/cypress/integration/extra-panel.spec.ts index 033da229..080e2b09 100644 --- a/cypress/integration/extra-panel.spec.ts +++ b/cypress/integration/extra-panel.spec.ts @@ -17,7 +17,7 @@ context('Extra Information Panel', () => { }) 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 [data-test=add-lyrics-btn]').click() diff --git a/cypress/integration/favorites.spec.ts b/cypress/integration/favorites.spec.ts index e9f8e74e..7e6461e8 100644 --- a/cypress/integration/favorites.spec.ts +++ b/cypress/integration/favorites.spec.ts @@ -9,7 +9,7 @@ context('Favorites', { scrollBehavior: false }, () => { cy.findByText('Songs You Love').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')) }) }) @@ -23,7 +23,7 @@ context('Favorites', { scrollBehavior: false }, () => { cy.get('#songsWrapper') .within(() => { - cy.$getVisibleSongRows().first().within(() => { + cy.$getSongRows().first().within(() => { 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-liked]').should('be.visible')) @@ -42,7 +42,7 @@ context('Favorites', { scrollBehavior: false }, () => { cy.get('#songsWrapper') .within(() => { - cy.$getVisibleSongRows().first().click() + cy.$getSongRows().first().click() cy.get('[data-test=add-to-btn]').click() cy.get('[data-test=add-to-menu]').should('be.visible') .within(() => cy.findByText('Favorites').click()).should('not.be.visible') @@ -57,11 +57,11 @@ context('Favorites', { scrollBehavior: false }, () => { cy.get('#favoritesWrapper') .within(() => { - cy.$getVisibleSongRows().should('have.length', 3) + cy.$getSongRows().should('have.length', 3) .first().should('contain.text', 'November') .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') }) }) @@ -72,11 +72,11 @@ context('Favorites', { scrollBehavior: false }, () => { cy.get('#favoritesWrapper') .within(() => { - cy.$getVisibleSongRows().should('have.length', 3) + cy.$getSongRows().should('have.length', 3) .first().should('contain.text', 'November') .click().type('{backspace}') - cy.$getVisibleSongRows().should('have.length', 2) + cy.$getSongRows().should('have.length', 2) .first().should('not.contain.text', 'November') }) }) diff --git a/cypress/integration/footer-pane.spec.ts b/cypress/integration/footer-pane.spec.ts index c3d4b522..a1d58731 100644 --- a/cypress/integration/footer-pane.spec.ts +++ b/cypress/integration/footer-pane.spec.ts @@ -5,7 +5,7 @@ context('Footer Pane', () => { 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('.album').invoke('text').as('album') cy.get('.artist').invoke('text').as('artist') diff --git a/cypress/integration/playlists.spec.ts b/cypress/integration/playlists.spec.ts index fb70f37d..015ac5d6 100644 --- a/cypress/integration/playlists.spec.ts +++ b/cypress/integration/playlists.spec.ts @@ -10,7 +10,7 @@ context('Playlists', () => { cy.get('#playlistWrapper').within(() => { 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') ;['.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.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-menu]') .should('be.visible') @@ -101,7 +101,7 @@ context('Playlists', () => { cy.$clickSidebarItem('All Songs') cy.get('#songsWrapper').within(() => { - cy.$selectSongRange(1, 3) + cy.$selectSongRange(0, 2) cy.get('[data-test=add-to-btn]').click() cy.get('[data-test=new-playlist-name]').type('A New Playlist{enter}') }) diff --git a/cypress/integration/queuing.spec.ts b/cypress/integration/queuing.spec.ts index e7a1a5f9..46663c24 100644 --- a/cypress/integration/queuing.spec.ts +++ b/cypress/integration/queuing.spec.ts @@ -14,8 +14,8 @@ context('Queuing', { scrollBehavior: false }, () => { cy.get('#queueWrapper').within(() => { cy.findByText('Current Queue').should('be.visible') cy.findByTestId('shuffle-library').click() - cy.get('.song-item').should('have.length.at.least', MIN_SONG_ITEMS_SHOWN) - cy.get('.song-item:first-child').should('have.class', 'playing') + cy.$getSongRows().should('have.length.at.least', MIN_SONG_ITEMS_SHOWN) + cy.get('@rows').first().should('have.class', 'playing') }) cy.$assertPlaying() @@ -27,12 +27,9 @@ context('Queuing', { scrollBehavior: false }, () => { cy.get('#queueWrapper').within(() => { cy.findByText('Current Queue').should('be.visible') cy.findByTestId('shuffle-library').click() - cy.get('').click() - 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('.song-item').should('have.length', 0) + cy.$getSongRows().should('have.length.at.least', MIN_SONG_ITEMS_SHOWN) + cy.get('.screen-header [data-test=song-list-controls]').findByText('Clear').click() + cy.$getSongRows().should('have.length', 0) }) }) @@ -45,29 +42,29 @@ context('Queuing', { scrollBehavior: false }, () => { }) cy.get('#queueWrapper').within(() => { - cy.get('.song-item').should('have.length.at.least', MIN_SONG_ITEMS_SHOWN) - cy.get('.song-item:first-child').should('have.class', 'playing') + cy.$getSongRows().should('have.length.at.least', MIN_SONG_ITEMS_SHOWN) + .first().should('have.class', 'playing') }) cy.$assertPlaying() }) it('creates a queue from selected songs', () => { - cy.$shuffleSeveralSongs() + cy.$shuffleSeveralSongs(3) cy.get('#queueWrapper').within(() => { - cy.get('.song-item').should('have.length', 3) - cy.get('.song-item:first-child').should('have.class', 'playing') + cy.$getSongRows().should('have.length', 3) + .first().should('have.class', 'playing') }) }) it('deletes a song from queue', () => { - cy.$shuffleSeveralSongs() + cy.$shuffleSeveralSongs(3) cy.get('#queueWrapper').within(() => { - cy.get('.song-item').should('have.length', 3) - cy.get('.song-item:first-child').type('{backspace}') - cy.get('.song-item').should('have.length', 2) + cy.$getSongRows().should('have.length', 3) + cy.get('@rows').first().type('{backspace}') + cy.$getSongRows().should('have.length', 2) }) }) @@ -76,15 +73,15 @@ context('Queuing', { scrollBehavior: false }, () => { cy.$clickSidebarItem('All Songs') cy.get('#songsWrapper').within(function () { - cy.get('.song-item:nth-child(4) .title').invoke('text').as('title') - cy.get('.song-item:nth-child(4)').dblclick() + cy.$getSongRowAt(4).find('.title').invoke('text').as('title') + cy.$getSongRowAt(4).dblclick() }) cy.$clickSidebarItem('Current Queue') cy.get('#queueWrapper').within(function () { - cy.get('.song-item').should('have.length', 4) - cy.get(`.song-item:nth-child(2) .title`).should('have.text', this.title) - cy.get('.song-item:nth-child(2)').should('have.class', 'playing') + cy.$getSongRows().should('have.length', 4) + cy.$getSongRowAt(1).find('.title').should('have.text', this.title) + cy.$getSongRowAt(1).should('have.class', 'playing') }) cy.$assertPlaying() diff --git a/cypress/integration/song-context-menu.spec.ts b/cypress/integration/song-context-menu.spec.ts index caec501f..f719ba0f 100644 --- a/cypress/integration/song-context-menu.spec.ts +++ b/cypress/integration/song-context-menu.spec.ts @@ -113,7 +113,7 @@ context('Song Context Menu', { scrollBehavior: false }, () => { cy.$assertPlaylistSongCount('Simple Playlist', 3) cy.get('#songsWrapper').within(() => { if (config.songCount > 1) { - cy.$selectSongRange(1, config.songCount).rightclick() + cy.$selectSongRange(0, config.songCount - 1).rightclick() } else { cy.get('.song-item:first-child').rightclick() } diff --git a/cypress/integration/song-editing.spec.ts b/cypress/integration/song-editing.spec.ts index 9aef228c..6f445375 100644 --- a/cypress/integration/song-editing.spec.ts +++ b/cypress/integration/song-editing.spec.ts @@ -50,10 +50,7 @@ context('Song Editing', { scrollBehavior: false }, () => { fixture: 'songs-multiple.put.200.json' }) - cy.get('#songsWrapper').within(() => { - cy.$selectSongRange(1, 3).rightclick() - }) - + cy.get('#songsWrapper').within(() => cy.$selectSongRange(0, 2).rightclick()) cy.findByTestId('song-context-menu').within(() => cy.findByText('Edit').click()) cy.findByTestId('edit-song-form').within(() => { diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 8a6c1d2e..bf65f89f 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -1,6 +1,5 @@ import '@testing-library/cypress/add-commands' import 'cypress-file-upload' -import Chainable = Cypress.Chainable import scrollBehaviorOptions = Cypress.scrollBehaviorOptions Cypress.Commands.add('$login', (options: Partial = {}) => { @@ -47,11 +46,7 @@ Cypress.Commands.add('$findInTestId', (selector: string) => { return cy.findByTestId(testId.trim()).find(rest.join(' ')) }) -Cypress.Commands.add('$clickSidebarItem', (sidebarItemText: string) => { - return cy.get('#sidebar') - .findByText(sidebarItemText) - .click() -}) +Cypress.Commands.add('$clickSidebarItem', (text: string) => cy.get('#sidebar').findByText(text).click()) Cypress.Commands.add('$mockPlayback', () => { cy.intercept('/play/**?api_token=mock-token', { @@ -72,8 +67,8 @@ Cypress.Commands.add('$shuffleSeveralSongs', (count = 3) => { cy.$clickSidebarItem('All Songs') cy.get('#songsWrapper').within(() => { - cy.$getVisibleSongRows().first().click() - cy.$getVisibleSongRows().eq(count - 1).click({ shiftKey: true }) + cy.$getSongRowAt(0).click() + cy.$getSongRowAt(count - 1).click({ shiftKey: true }) cy.get('.screen-header [data-test=btn-shuffle-selected]').click() }) @@ -94,8 +89,8 @@ Cypress.Commands.add('$assertFavoriteSongCount', (count: number) => { Cypress.Commands.add( '$selectSongRange', (start: number, end: number, scrollBehavior: scrollBehaviorOptions = false) => { - cy.$getVisibleSongRows().eq(start - 1).click() - return cy.$getVisibleSongRows().eq(end - 1).click({ + cy.$getSongRowAt(start).click() + return cy.$getSongRowAt(end).click({ scrollBehavior, shiftKey: true }) @@ -114,9 +109,8 @@ Cypress.Commands.add('$assertNotPlaying', () => { }) Cypress.Commands.add('$assertSidebarItemActive', (text: string) => { - cy.get('#sidebar') - .findByText(text) - .should('have.class', 'active') + cy.get('#sidebar').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)) diff --git a/cypress/types.d.ts b/cypress/types.d.ts index 5dc17cb1..ffa836a1 100644 --- a/cypress/types.d.ts +++ b/cypress/types.d.ts @@ -26,7 +26,8 @@ declare namespace Cypress { */ $shuffleSeveralSongs(count?: number): void - $getVisibleSongRows(): Chainable + $getSongRows(): Chainable + $getSongRowAt(position: number): Chainable $assertPlaylistSongCount(name: string, count: number): void $assertFavoriteSongCount(count: number): void diff --git a/resources/assets/js/components/screens/QueueScreen.vue b/resources/assets/js/components/screens/QueueScreen.vue index 707c5c48..0f40712e 100644 --- a/resources/assets/js/components/screens/QueueScreen.vue +++ b/resources/assets/js/components/screens/QueueScreen.vue @@ -39,13 +39,9 @@ No songs queued. - + How about - + shuffling the whole library ? @@ -78,7 +74,8 @@ const { toggleControls } = 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 clearQueue = () => queueStore.clear()