Skip to content

Commit

Permalink
tools: try to reduce flake in image upload e2e tests (#2415)
Browse files Browse the repository at this point in the history
try to reduce flake in the image upload tests
  • Loading branch information
david-crespo authored Sep 5, 2024
1 parent c2909e7 commit 880cb8c
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 13 deletions.
6 changes: 5 additions & 1 deletion app/forms/image-upload.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 4 additions & 12 deletions test/e2e/image-upload.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand Down Expand Up @@ -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, [
Expand Down

0 comments on commit 880cb8c

Please sign in to comment.