feat(test): add e2e tests for Upload

cypress/fixtures/upload.post.200.json

@@ -0,0 +1,23 @@
+{
+  "id": "d113d12159155e47194972e9817f724d",
+  "title": "Mendelssohn Violin Concerto in E minor, Op. 64",
+  "length": 720,
+  "track": 1,
+  "disc": 1,
+  "album_id": 99,
+  "artist_id": 99,
+  "created_at": "2021-01-03T17:18:16.000000Z",
+  "artist": {
+    "id": 99,
+    "name": "Hilary Hahn",
+    "image": "http://localhost:8088/test/images/sample.png"
+  },
+  "album": {
+    "id": 99,
+    "artist_id": 99,
+    "name": "Spectacular",
+    "cover": "http://localhost:8088/test/images/sample.png",
+    "created_at": "2020-12-27T18:28:25.000000Z",
+    "is_compilation": false
+  }
+}

cypress/integration/uploading.spec.ts

@@ -0,0 +1,102 @@
+context('Uploading', () => {
+  beforeEach(() => {
+    cy.$login()
+    cy.$clickSidebarItem('Upload')
+  })
+
+  function assertResultsAddedToHomeScreen () {
+    cy.$clickSidebarItem('Home')
+    cy.get('.recently-added-album-list li:first-child .name').should('contain.text', 'Spectacular')
+    cy.get('.recently-added-album-list li:first-child .artist').should('contain.text', 'Hilary Hahn')
+    cy.get('.recently-added-song-list li:first-child')
+      .should('contain.text', 'Mendelssohn Violin Concerto in E minor, Op. 64')
+  }
+
+  function executeFailedUpload () {
+    // cy.intercept() doesn't allow overriding previous interceptors yet,
+    // so in the mean time, we need to resort to the deprecated cy.route().
+    // See https://github.com/cypress-io/cypress/issues/9302.
+    cy.server()
+    cy.route({
+      method: 'POST',
+      url: '/api/upload',
+      status: 413
+    }).as('failedUpload')
+
+    cy.get('[type=file]').attachFile('sample.mp3')
+    cy.get('[data-test=upload-item]')
+      .should('have.length', 1)
+      .and('be.visible')
+
+    cy.wait('@failedUpload')
+
+    cy.get('[data-test=upload-item]').should('have.length', 1)
+    cy.get('[data-test=upload-item]:first-child').should('have.class', 'Errored')
+  }
+
+  it('uploads songs', () => {
+    cy.intercept('POST', '/api/upload', {
+      fixture: 'upload.post.200.json'
+    }).as('upload')
+
+    cy.get('#uploadWrapper').within(() => {
+      cy.get('[type=file]').attachFile('sample.mp3')
+      cy.get('[data-test=upload-item]')
+        .should('have.length', 1)
+        .and('be.visible')
+
+      cy.wait('@upload')
+      cy.get('[data-test=upload-item]').should('have.length', 0)
+    })
+
+    assertResultsAddedToHomeScreen()
+  })
+
+  it('allows retrying individual failed uploads', () => {
+    cy.get('#uploadWrapper').within(() => {
+      executeFailedUpload()
+
+      cy.intercept('POST', '/api/upload', {
+        fixture: 'upload.post.200.json'
+      }).as('successfulUpload')
+
+      cy.get('[data-test=upload-item]:first-child [data-test=retry-upload-btn]').click()
+      cy.wait('@successfulUpload')
+      cy.get('[data-test=upload-item]').should('have.length', 0)
+    })
+
+    assertResultsAddedToHomeScreen()
+  })
+
+  it('allows retrying all failed uploads at once', () => {
+    cy.get('#uploadWrapper').within(() => {
+      executeFailedUpload()
+
+      cy.intercept('POST', '/api/upload', {
+        fixture: 'upload.post.200.json'
+      }).as('successfulUpload')
+
+      cy.findByTestId('upload-retry-all-btn').click()
+      cy.wait('@successfulUpload')
+      cy.get('[data-test=upload-item]').should('have.length', 0)
+    })
+
+    assertResultsAddedToHomeScreen()
+  })
+
+  it('allows removing individual failed uploads', () => {
+    cy.get('#uploadWrapper').within(() => {
+      executeFailedUpload()
+      cy.get('[data-test=upload-item]:first-child [data-test=remove-upload-btn]').click()
+      cy.get('[data-test=upload-item]').should('have.length', 0)
+    })
+  })
+
+  it('allows removing all failed uploads at once', () => {
+    cy.get('#uploadWrapper').within(() => {
+      executeFailedUpload()
+      cy.findByTestId('upload-remove-all-btn').click()
+      cy.get('[data-test=upload-item]').should('have.length', 0)
+    })
+  })
+})

cypress/support/commands.ts

@@ -1,4 +1,5 @@
 import '@testing-library/cypress/add-commands'
+import 'cypress-file-upload'
 import Chainable = Cypress.Chainable
 import scrollBehaviorOptions = Cypress.scrollBehaviorOptions
 
@@ -17,8 +18,6 @@ Cypress.Commands.add('$login', (options: Partial<LoginOptions> = {}): Chainable<
   cy.fixture(mergedOptions.asAdmin ? 'data.get.200.json' : 'data-non-admin.get.200.json').then(data => {
     delete mergedOptions.asAdmin
 
-    console.log(Object.assign(data, mergedOptions))
-
     cy.intercept('GET', 'api/data', {
       statusCode: 200,
       body: Object.assign(data, mergedOptions)

cypress/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "es5",
     "baseUrl": ".",
     "lib": ["es5", "dom"],
-    "types": ["cypress", "@testing-library/cypress", "@types/node"]
+    "types": ["cypress", "@testing-library/cypress", "@types/node", "cypress-file-upload"]
   },
   "include": [
     "**/*.ts"

package.json

@@ -17,6 +17,7 @@
     "@testing-library/cypress": "^7.0.3",
     "cross-env": "^3.2.3",
     "cypress": "^6.2.0",
+    "cypress-file-upload": "^4.1.1",
     "font-awesome": "^4.7.0",
     "husky": "^4.2.5",
     "kill-port": "^1.6.1",

resources/assets

@@ -1 +1 @@
-Subproject commit dd54881f72db57ef80b803c51560a444475732df
+Subproject commit a1e24168a3bf83cb3ca4d99de0b09806fc1bfac9

yarn.lock

@@ -2738,6 +2738,13 @@ cyclist@~0.2.2:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
   integrity sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=
 
+cypress-file-upload@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-4.1.1.tgz#952713c8104ab7008de99c65bd63f74b244fe4df"
+  integrity sha512-tX6UhuJ63rNgjdzxglpX+ZYf/bM6PDhFMtt1qCBljLtAgdearqyfD1AHqyh59rOHCjfM+bf6FA3o9b/mdaX6pw==
+  dependencies:
+    mime "^2.4.4"
+
 cypress@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-6.2.0.tgz#1a8a7dd5bd08db3064551a9f12072963cc9337bf"