diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx index d4068302e3..cba8df02d9 100644 --- a/app/forms/image-upload.tsx +++ b/app/forms/image-upload.tsx @@ -103,8 +103,8 @@ function Step({ children, state, label, className }: StepProps) { return ( // data-status used only for e2e testing
{/* padding on icon to align it with text since everything is aligned to top */} diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts index 7898990fa1..a7742c9249 100644 --- a/mock-api/msw/handlers.ts +++ b/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 diff --git a/test/e2e/image-upload.e2e.ts b/test/e2e/image-upload.e2e.ts index 1b5970143c..f234b13ee8 100644 --- a/test/e2e/image-upload.e2e.ts +++ b/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."', diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts index 285bb313ca..a75b4da24a 100644 --- a/test/e2e/utils.ts +++ b/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