fix: song editing tests

cypress/integration/song-context-menu.spec.ts

@@ -4,11 +4,7 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
     cy.$login()
     cy.$clickSidebarItem('All Songs')
 
-    cy.get('#songsWrapper').within(() => {
-      cy.get('.song-item:first-child').dblclick()
-      cy.get('.song-item:first-child').should('have.class', 'playing')
-    })
-
+    cy.get('#songsWrapper').within(() => cy.get('.song-item:first-child').dblclick().should('have.class', 'playing'))
     cy.$assertPlaying()
   })
 
@@ -17,11 +13,7 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
     cy.$login()
     cy.$clickSidebarItem('All Songs')
 
-    cy.get('#songsWrapper').within(() => {
-      cy.get('.song-item:first-child')
-        .as('item')
-        .rightclick()
-    })
+    cy.get('#songsWrapper').within(() => cy.get('.song-item:first-child').as('item').rightclick())
 
     cy.findByTestId('song-context-menu').within(() => cy.findByText('Play').click())
     cy.get('@item').should('have.class', 'playing')
@@ -39,12 +31,10 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
     cy.get('#songsWrapper').within(() => cy.get('.song-item:first-child').rightclick())
     cy.findByTestId('song-context-menu').within(() => cy.findByText('Go to Album').click())
 
-    cy.get('#albumWrapper')
-      .should('be.visible')
-      .within(() => {
-        cy.get('.screen-header').should('be.visible')
-        cy.get('.song-item').should('have.length.at.least', 1)
-      })
+    cy.get('#albumWrapper').should('be.visible').within(() => {
+      cy.get('.screen-header').should('be.visible')
+      cy.get('.song-item').should('have.length.at.least', 1)
+    })
   })
 
   it('invokes artist screen', () => {
@@ -54,12 +44,10 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
     cy.get('#songsWrapper').within(() => cy.get('.song-item:first-child').rightclick())
     cy.findByTestId('song-context-menu').within(() => cy.findByText('Go to Artist').click())
 
-    cy.get('#artistWrapper')
-      .should('be.visible')
-      .within(() => {
-        cy.get('.screen-header').should('be.visible')
-        cy.get('.song-item').should('have.length.at.least', 1)
-      })
+    cy.get('#artistWrapper').should('be.visible').within(() => {
+      cy.get('.screen-header').should('be.visible')
+      cy.get('.song-item').should('have.length.at.least', 1)
+    })
   })
 
   ;([
@@ -74,12 +62,7 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
 
       let songTitle
       cy.get('#songsWrapper').within(() => {
-        cy.get('.song-item:nth-child(4) .title')
-          .invoke('text')
-          .then(text => {
-            songTitle = text
-          })
-
+        cy.get('.song-item:nth-child(4) .title').invoke('text').then(text => (songTitle = text))
         cy.get('.song-item:nth-child(4)').rightclick()
       })
 
@@ -134,11 +117,10 @@ context('Song Context Menu', { scrollBehavior: false }, () => {
     cy.$clickSidebarItem('All Songs')
     cy.get('#songsWrapper').within(() => cy.get('.song-item:first-child').rightclick())
 
-    cy.findByTestId('song-context-menu')
-      .within(() => {
-        cy.findByText('Add To').click()
-        cy.findByText('Smart Playlist').should('not.exist')
-      })
+    cy.findByTestId('song-context-menu').within(() => {
+      cy.findByText('Add To').click()
+      cy.findByText('Smart Playlist').should('not.exist')
+    })
   })
 
   it('adds a favorite song from context menu', () => {

cypress/integration/song-editing.spec.ts

@@ -1,6 +1,6 @@
 context('Song Editing', { scrollBehavior: false }, () => {
   beforeEach(() => {
-    cy.intercept('/api/**/info', {
+    cy.intercept('/api/song/**/info', {
       fixture: 'song-info.get.200.json'
     })
 
@@ -23,11 +23,8 @@ context('Song Editing', { scrollBehavior: false }, () => {
 
       cy.get('[name=title]').clear().type('New Title')
       cy.findByTestId('edit-song-lyrics-tab').click()
-      cy.get('textarea[name=lyrics]')
-        .should('be.visible')
-        .and('contain.value', 'Sample song lyrics')
-        .clear()
-        .type('New lyrics{enter}Supports multiline.')
+      cy.get('textarea[name=lyrics]').should('be.visible').and('contain.value', 'Sample song lyrics')
+        .clear().type('New lyrics{enter}Supports multiline.')
 
       cy.get('button[type=submit]').click()
     })
@@ -61,14 +58,8 @@ context('Song Editing', { scrollBehavior: false }, () => {
       cy.get('textarea[name=lyrics]').should('not.exist')
       ;['3 songs selected', 'Mixed Albums'].forEach(text => cy.findByText(text).should('be.visible'))
 
-      cy.get('[name=album]').invoke('attr', 'placeholder').should('contain', 'No change')
-
-      // Test the typeahead/auto-complete feature
-      cy.get('[name=album]').type('A')
-      cy.findByText('Abstract').click()
-      cy.get('[name=album]').should('contain.value', 'Abstract')
-      cy.get('[name=album]').type('{downArrow}{downArrow}{downArrow}{downArrow}{enter}')
-      cy.get('[name=album]').should('contain.value', 'The Wall')
+      cy.get('[name=album]').invoke('attr', 'placeholder').should('contain', 'Leave unchanged')
+      cy.get('[name=album]').type('The Wall')
 
       cy.get('button[type=submit]').click()
     })
@@ -76,8 +67,6 @@ context('Song Editing', { scrollBehavior: false }, () => {
     cy.findByText('Updated 3 songs.').should('be.visible')
     cy.findByTestId('edit-song-form').should('not.exist')
 
-    cy.get('#songsWrapper .song-item:nth-child(1) .album').should('have.text', 'The Wall')
-    cy.get('#songsWrapper .song-item:nth-child(2) .album').should('have.text', 'The Wall')
-    cy.get('#songsWrapper .song-item:nth-child(3) .album').should('have.text', 'The Wall')
+    ;[1, 2, 3].forEach(i => cy.get(`#songsWrapper .song-item:nth-child(${i}) .album`).should('have.text', 'The Wall'))
   })
 })

cypress/integration/users.spec.ts

@@ -6,9 +6,7 @@ context('User Management', () => {
 
   it('shows the list of users', () => {
     cy.get('#usersWrapper').within(() => {
-      cy.get('[data-test=user-card]')
-        .should('have.length', 3)
-        .and('be.visible')
+      cy.get('[data-test=user-card]').should('have.length', 3).and('be.visible')
 
       cy.get('[data-test=user-card].me').within(() => {
         cy.get('[data-test=current-user-indicator]').should('be.visible')
@@ -24,10 +22,8 @@ context('User Management', () => {
 
     cy.findByTestId('add-user-btn').click()
     cy.findByTestId('add-user-form').within(() => {
-      cy.get('[name=name]')
-        .should('be.focused')
+      cy.get('[name=name]').should('be.focused')
         .type('Charles')
-
       cy.get('[name=email]').type('charles@koel.test')
       cy.get('[name=password]').type('a-secure-password')
       cy.get('[name=is_admin]').check()
@@ -57,16 +53,11 @@ context('User Management', () => {
     cy.get('#usersWrapper [data-test=user-card]:nth-child(2) [data-test=edit-user-btn]').click({ force: true })
 
     cy.findByTestId('edit-user-form').within(() => {
-      cy.get('[name=name]')
-        .should('be.focused')
-        .and('have.value', 'Alice')
-        .clear()
-        .type('Adriana')
+      cy.get('[name=name]').should('be.focused').and('have.value', 'Alice')
+        .clear().type('Adriana')
 
-      cy.get('[name=email]')
-        .should('have.value', 'alice@koel.test')
-        .clear()
-        .type('adriana@koel.test')
+      cy.get('[name=email]').should('have.value', 'alice@koel.test')
+        .clear().type('adriana@koel.test')
 
       cy.get('[name=password]').should('have.value', '')
       cy.get('[type=submit]').click()

cypress/support/commands.ts

@@ -17,7 +17,7 @@ Cypress.Commands.add('$login', (options: Partial<LoginOptions> = {}) => {
   cy.fixture(mergedOptions.asAdmin ? 'data.get.200.json' : 'data-non-admin.get.200.json').then(data => {
     delete mergedOptions.asAdmin
 
-    cy.intercept('api/data', {
+    cy.intercept('/api/data', {
       statusCode: 200,
       body: Object.assign(data, mergedOptions)
     })

resources/assets/js/components/song/SongContextMenu.vue

@@ -95,7 +95,7 @@ const doPlayback = () => {
 }
 
 const openEditForm = () => {
-  songs.value.length && eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', songs)
+  songs.value.length && eventBus.emit('MODAL_SHOW_EDIT_SONG_FORM', songs.value)
   close()
 }
 

resources/assets/js/components/song/SongEditForm.vue

@@ -50,7 +50,13 @@
 
             <div class="form-row">
               <label>Artist</label>
-              <input v-model="formData.artistName" :placeholder="artistNamePlaceholder" list="artistNames" type="text">
+              <input
+                v-model="formData.artistName"
+                :placeholder="artistNamePlaceholder"
+                list="artistNames"
+                name="artist"
+                type="text"
+              >
               <datalist id="artistNames">
                 <option v-for="name in artistNames" :key="name" :value="name"></option>
               </datalist>
@@ -58,7 +64,13 @@
 
             <div class="form-row">
               <label>Album</label>
-              <input v-model="formData.albumName" :placeholder="albumNamePlaceholder" list="albumNames" type="text">
+              <input
+                v-model="formData.albumName"
+                :placeholder="albumNamePlaceholder"
+                list="albumNames"
+                name="album"
+                type="text"
+              >
               <datalist id="albumNames">
                 <option v-for="name in albumNames" :key="name" :value="name"></option>
               </datalist>