feat(test): add UploadItem component tests

cypress/integration/uploading.spec.ts

@@ -62,7 +62,7 @@ context('Uploading', () => {
         fixture: 'upload.post.200.json'
       }).as('successfulUpload')
 
-      cy.get('[data-test=upload-item]:first-child [data-test=retry-upload-btn]').click()
+      cy.get('[data-test=upload-item]:first-child').findByTitle('Retry').click()
       cy.wait('@successfulUpload')
       cy.get('[data-test=upload-item]').should('have.length', 0)
     })
@@ -89,7 +89,7 @@ context('Uploading', () => {
   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]:first-child').findByTitle('Remove').click()
       cy.get('[data-test=upload-item]').should('have.length', 0)
     })
   })

resources/assets/js/components/ui/upload/UploadItem.spec.ts

@@ -0,0 +1,59 @@
+import { expect, it } from 'vitest'
+import { UploadFile, UploadStatus } from '@/config'
+import ComponentTestCase from '@/__tests__/ComponentTestCase'
+import { fireEvent } from '@testing-library/vue'
+import { uploadService } from '@/services'
+import Btn from '@/components/ui/Btn.vue'
+import UploadItem from './UploadItem.vue'
+
+let file: UploadFile
+
+new class extends ComponentTestCase {
+  private renderComponent (status: UploadStatus) {
+    file = {
+      status,
+      file: new File([], 'sample.mp3'),
+      id: 'x-file',
+      message: '',
+      name: 'Sample Track',
+      progress: 42
+    }
+
+    return this.render(UploadItem, {
+      props: {
+        file
+      },
+      global: {
+        stubs: {
+          Btn
+        }
+      }
+    })
+  }
+
+  protected test () {
+    it('renders', () => expect(this.renderComponent('Canceled').html()).toMatchSnapshot())
+
+    it.each<[UploadStatus]>([['Canceled'], ['Errored']])('allows retrying when %s', async (status) => {
+      const mock = this.mock(uploadService, 'retry')
+      const { getByTitle } = this.renderComponent(status)
+
+      await fireEvent.click(getByTitle('Retry'))
+
+      expect(mock).toHaveBeenCalled()
+    })
+
+    it.each<[UploadStatus]>([
+      ['Uploaded'],
+      ['Errored'],
+      ['Canceled']]
+    )('allows removal if not uploading', async (status) => {
+      const mock = this.mock(uploadService, 'remove')
+      const { getByTitle } = this.renderComponent(status)
+
+      await fireEvent.click(getByTitle('Remove'))
+
+      expect(mock).toHaveBeenCalled()
+    })
+  }
+}

resources/assets/js/components/ui/upload/UploadItem.vue

@@ -1,29 +1,13 @@
 <template>
-  <div :class="[file.status]" :title="file.message" class="upload-item">
-    <span :style="{ width: `${file.progress}%` }" class="progress"></span>
+  <div :class="cssClass" :title="file.message" class="upload-item">
+    <span :style="{ width: `${file.progress}%` }" class="progress"/>
     <span class="details">
       <span class="name">{{ file.name }}</span>
       <span class="controls">
-        <Btn
-          v-if="canRetry"
-          data-test="retry-upload-btn"
-          icon-only
-          title="Retry upload"
-          transparent
-          unrounded
-          @click="retry"
-        >
+        <Btn v-if="canRetry" icon-only title="Retry" transparent unrounded @click="retry">
           <i class="fa fa-repeat"></i>
         </Btn>
-        <Btn
-          v-if="canRemove"
-          data-test="remove-upload-btn"
-          icon-only
-          title="Remove"
-          transparent
-          unrounded
-          @click="remove"
-        >
+        <Btn v-if="canRemove" icon-only title="Remove" transparent unrounded @click="remove">
           <i class="fa fa-times"></i>
         </Btn>
       </span>
@@ -32,6 +16,7 @@
 </template>
 
 <script lang="ts" setup>
+import slugify from 'slugify'
 import { computed, defineAsyncComponent, toRefs } from 'vue'
 import { UploadFile } from '@/config'
 import { uploadService } from '@/services'
@@ -43,6 +28,7 @@ const { file } = toRefs(props)
 
 const canRetry = computed(() => file.value.status === 'Canceled' || file.value.status === 'Errored')
 const canRemove = computed(() => file.value.status !== 'Uploading') // we're not supporting cancel tokens (yet).
+const cssClass = computed(() => slugify(file.value.status).toLowerCase())
 
 const remove = () => uploadService.remove(file.value)
 const retry = () => uploadService.retry(file.value)
@@ -67,7 +53,7 @@ const retry = () => uploadService.retry(file.value)
     transition: .3s ease-out;
   }
 
-  &.Uploaded {
+  &.uploaded {
     background: var(--color-green);
 
     .progress {
@@ -75,7 +61,7 @@ const retry = () => uploadService.retry(file.value)
     }
   }
 
-  &.Errored {
+  &.errored {
     background: var(--color-red);
 
     .progress {

resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `"<div class=\\"canceled upload-item\\" title=\\"\\" data-v-ad447c04=\\"\\"><span style=\\"width: 42%;\\" class=\\"progress\\" data-v-ad447c04=\\"\\"></span><span class=\\"details\\" data-v-ad447c04=\\"\\"><span class=\\"name\\" data-v-ad447c04=\\"\\">Sample Track</span><span class=\\"controls\\" data-v-ad447c04=\\"\\"><button type=\\"button\\" icon-only=\\"\\" title=\\"Retry\\" transparent=\\"\\" unrounded=\\"\\" data-v-27deb898=\\"\\" data-v-ad447c04=\\"\\"><i class=\\"fa fa-repeat\\" data-v-ad447c04=\\"\\"></i></button><button type=\\"button\\" icon-only=\\"\\" title=\\"Remove\\" transparent=\\"\\" unrounded=\\"\\" data-v-27deb898=\\"\\" data-v-ad447c04=\\"\\"><i class=\\"fa fa-times\\" data-v-ad447c04=\\"\\"></i></button></span></span></div>"`;