From 830b3536425e307df885f3e40ea66fb0cc06f266 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 5 Sep 2024 13:42:13 -0500
Subject: [PATCH] try to reduce flake in the image upload tests

---
 app/forms/image-upload.tsx   |  6 +++++-
 test/e2e/image-upload.e2e.ts | 16 ++++------------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index a60ea16cee..1f584e8fce 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -101,7 +101,11 @@ function Step({ children, state, label, className }: StepProps) {
   /* eslint-enable react/jsx-key */
   return (
     // data-status used only for e2e testing
-    <div className={cn('items-top flex gap-2 px-4 py-3', className)} data-status={status}>
+    <div
+      className={cn('items-top flex gap-2 px-4 py-3', className)}
+      data-testid="upload-step"
+      data-status={status}
+    >
       {/* padding on icon to align it with text since everything is aligned to top */}
       <div className="pt-px">{icon}</div>
       <div
diff --git a/test/e2e/image-upload.e2e.ts b/test/e2e/image-upload.e2e.ts
index c1a51923a7..53b5025ad2 100644
--- a/test/e2e/image-upload.e2e.ts
+++ b/test/e2e/image-upload.e2e.ts
@@ -19,16 +19,14 @@ import {
 // to complete in time, so we just assert that they all start out ready and end
 // up complete
 async function expectUploadProcess(page: Page) {
-  const steps = page.locator('div[data-status]')
-
-  for (const step of await steps.all()) {
-    await expect(step).toHaveAttribute('data-status', 'ready', { timeout: 10000 })
-  }
-
   // check these here instead of first because if we don't look for the ready
   // states right away we won't catch them in time
   const progressModal = page.getByRole('dialog', { name: 'Image upload progress' })
   await expect(progressModal).toBeVisible()
+
+  const steps = page.getByTestId('upload-step')
+  await expect(steps).toHaveCount(8)
+
   const done = progressModal.getByRole('button', { name: 'Done' })
 
   for (const step of await steps.all()) {
@@ -234,12 +232,6 @@ test.describe('Image upload', () => {
 
       await page.click('role=button[name="Upload image"]')
 
-      const steps = page.locator('div[data-status]')
-
-      for (const step of await steps.all()) {
-        await expect(step).toHaveAttribute('data-status', 'ready')
-      }
-
       const step = page.locator('[data-status]').filter({ hasText: stepText }).first()
       await expect(step).toHaveAttribute('data-status', 'error', { timeout: 15000 })
       await expectVisible(page, [