diff --git a/e2e/reset-modal.spec.ts b/e2e/reset-modal.spec.ts index a611a9d75c4..ca62cd8a675 100644 --- a/e2e/reset-modal.spec.ts +++ b/e2e/reset-modal.spec.ts @@ -44,21 +44,34 @@ test('should render the modal content correctly', async ({ page }) => { }); test('User can reset challenge', async ({ page }) => { + const initialText = 'CatPhotoApp'; + const initialFrame = page + .frameLocator('iframe[title="challenge preview"]') + .getByText(initialText); + + const updatedText = 'Only Dogs'; + const updatedFrame = page + .frameLocator('iframe[title="challenge preview"]') + .getByText(updatedText); + await page.goto( '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2' ); + // Building the preview can take a while + await expect(initialFrame).toBeVisible({ timeout: 10000 }); + const editorPaneLabel = 'Editor content;Press Alt+F1 for Accessibility Options.'; - const challengeSolution = '

Cat Photos

'; - await page.getByLabel(editorPaneLabel).fill(challengeSolution); - await expect( - page - .frameLocator('iframe[title="challenge preview"]') - .getByRole('heading', { name: 'Cat Photos' }) - ).toBeVisible(); + // Modify the text in the editor pane, clearing first, otherwise the existing + // text will be selected before typing + await page.getByLabel(editorPaneLabel).fill(''); + await page.getByLabel(editorPaneLabel).fill(updatedText); + await expect(updatedFrame).toBeVisible({ timeout: 10000 }); + // Run the tests so the lower jaw updates (later we confirm that the update + // are reset) await page .getByRole('button', { name: translations.buttons['check-code'] @@ -69,16 +82,14 @@ test('User can reset challenge', async ({ page }) => { page.getByText(translations.learn['sorry-keep-trying']) ).toBeVisible(); + // Reset the challenge await page.getByTestId('lowerJaw-reset-button').click(); await page .getByRole('button', { name: translations.buttons['reset-lesson'] }) .click(); - await expect( - page - .frameLocator('iframe[title="challenge preview"]') - .getByRole('heading', { name: 'Cat Photos' }) - ).not.toBeVisible(); + // Check it's back to the initial state + await expect(initialFrame).toBeVisible({ timeout: 10000 }); await expect( page.getByText(translations.learn['sorry-keep-trying']) ).not.toBeVisible();