feat(test): add e2e tests for song card

cypress/integration/home.spec.ts

@@ -28,4 +28,18 @@ context('Home Screen', () => {
       .url()
       .should('contain', '/#!/recently-played')
   })
+
+  it('a song item can be played', () => {
+    cy.$mockPlayback()
+
+    cy.get('.top-song-list [data-test=song-card]:first-child').within(() => {
+      cy.get('a.control').invoke('show').click()
+    }).should('have.class', 'playing')
+    cy.$assertPlaying()
+  })
+
+  it('a song item has a context menu', () => {
+    cy.get('.top-song-list [data-test=song-card]:first-child').rightclick()
+    cy.findByTestId('song-context-menu').should('be.visible')
+  })
 })

cypress/support/commands.ts

@@ -87,3 +87,15 @@ Cypress.Commands.add(
       shiftKey: true
     })
   })
+
+Cypress.Commands.add('$assertPlaying', () => {
+  cy.findByTestId('pause-btn').should('exist')
+  cy.findByTestId('play-btn').should('not.exist')
+  cy.findByTestId('sound-bar-play').should('be.visible')
+})
+
+Cypress.Commands.add('$assertNotPlaying', () => {
+  cy.findByTestId('pause-btn').should('not.exist')
+  cy.findByTestId('play-btn').should('exist')
+  cy.findByTestId('sound-bar-play').should('not.exist')
+})

cypress/types.d.ts

@@ -20,6 +20,8 @@ declare namespace Cypress {
     $assertPlaylistSongCount(name: string, count: number): void
     $assertFavoriteSongCount(count: number): void
     $selectSongRange(start: number, end: number, scrollBehavior?: scrollBehaviorOptions): Chainable<JQuery>
+    $assertPlaying(): void
+    $assertNotPlaying(): void
 
     /**
      * Support finding an element within an element identified with a test ID.

resources/assets

@@ -1 +1 @@
-Subproject commit 68d2c8aeb5d1b0f69447181d69ba4effe5c2e576
+Subproject commit ba0a66ce0a2160ee1e829d981b18937dcf4bb82d