Reduce mock file size in image upload tests (#2443)

* try smaller fake file

* more tweaks

Author: david-crespo

app/forms/image-upload.tsx

@@ -103,8 +103,8 @@ function Step({ children, state, label, className }: StepProps) {
   return (
     // data-status used only for e2e testing
     <div
-      className={cn('items-top flex gap-2 px-4 py-3', className)}
-      data-testid="upload-step"
+      className={cn('upload-step items-top flex gap-2 px-4 py-3', className)}
+      data-testid={`upload-step: ${label}`}
       data-status={status}
     >
       {/* padding on icon to align it with text since everything is aligned to top */}

mock-api/msw/handlers.ts

@@ -206,10 +206,11 @@ export const handlers = makeHandlers({
     disk.state = { state: 'import_ready' }
     return 204
   },
-  diskBulkWriteImport: ({ path, query, body }) => {
+  async diskBulkWriteImport({ path, query, body }) {
     const disk = lookup.disk({ ...path, ...query })
     const diskImport = db.diskBulkImportState.get(disk.id)
     if (!diskImport) throw notFoundErr(`disk import for disk '${disk.id}'`)
+    await delay(1000) // slow it down for the tests
     // if (Math.random() < 0.01) throw 400
     diskImport.blocks[body.offset] = true
     return 204

test/e2e/image-upload.e2e.ts

@@ -24,7 +24,7 @@ async function expectUploadProcess(page: Page) {
   const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
   await expect(progressModal).toBeVisible()
 
-  const steps = page.getByTestId('upload-step')
+  const steps = page.locator('css=.upload-step')
   await expect(steps).toHaveCount(8)
 
   const done = progressModal.getByRole('button', { name: 'Done' })
@@ -114,10 +114,7 @@ test.describe('Image upload', () => {
     await expectVisible(page, [fileRequired])
   })
 
-  test('cancel', async ({ page, browserName }) => {
-    // eslint-disable-next-line playwright/no-skipped-test
-    test.skip(browserName === 'webkit', 'safari. stop this')
-
+  test('cancel', async ({ page }) => {
     await fillForm(page, 'new-image')
 
     await page.click('role=button[name="Upload image"]')
@@ -126,10 +123,7 @@ test.describe('Image upload', () => {
     await expect(progressModal).toBeVisible()
 
     // wait to be in the middle of upload
-    const uploadStep = page
-      .getByTestId('upload-step')
-      .filter({ hasText: 'Upload image file' })
-      .first()
+    const uploadStep = page.getByTestId('upload-step: Upload image file')
     await expect(uploadStep).toHaveAttribute('data-status', 'running')
 
     // form is disabled and semi-hidden
@@ -196,10 +190,7 @@ test.describe('Image upload', () => {
     await page.click('role=button[name="Upload image"]')
 
     // wait to be in the middle of upload
-    const uploadStep = page
-      .locator('div[data-status]')
-      .filter({ hasText: 'Upload image file' })
-      .first()
+    const uploadStep = page.getByTestId('upload-step: Upload image file')
     await expect(uploadStep).toHaveAttribute('data-status', 'running')
 
     // form is disabled and semi-hidden
@@ -227,7 +218,7 @@ test.describe('Image upload', () => {
     { imageName: 'disk-create-500', stepText: 'Create temporary disk' },
     { imageName: 'import-start-500', stepText: 'Put disk in import mode' },
     { imageName: 'import-stop-500', stepText: 'Get disk out of import mode' },
-    { imageName: 'disk-finalize-500', stepText: 'Finalize disk' },
+    { imageName: 'disk-finalize-500', stepText: 'Finalize disk and create snapshot' },
   ]
 
   for (const { imageName, stepText } of failureCases) {
@@ -236,7 +227,7 @@ test.describe('Image upload', () => {
 
       await page.click('role=button[name="Upload image"]')
 
-      const step = page.locator('[data-status]').filter({ hasText: stepText }).first()
+      const step = page.getByTestId(`upload-step: ${stepText}`)
       await expect(step).toHaveAttribute('data-status', 'error', { timeout: 15000 })
       await expectVisible(page, [
         'text="Something went wrong. Please try again."',

test/e2e/utils.ts

@@ -195,7 +195,7 @@ export async function expectObscured(locator: Locator) {
 
 export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
-export async function chooseFile(page: Page, inputLocator: Locator, size = 15 * MiB) {
+export async function chooseFile(page: Page, inputLocator: Locator, size = 3 * MiB) {
   const fileChooserPromise = page.waitForEvent('filechooser')
   await inputLocator.click()
   const fileChooser = await fileChooserPromise