Repository: freeCodeCamp/freeCodeCamp
File: e2e/reset-modal.spec.ts (TypeScript)

Code before:
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.';

  // 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();

  // 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']
    })
    .click();

  await expect(
    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();

  // Check it's back to the initial state
  await expect(initialFrame).toBeVisible();
  await expect(
    page.getByText(translations.learn['sorry-keep-trying'])
  ).not.toBeVisible();
});

Review comment (suggestion):
```suggestion
  await expect(updatedFrame).toBeVisible({ timeout: 10000});
```

We should maybe put a wait in here too - sometimes the preview reload can take a minute.

Code after:
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.';

  // 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']
    })
    .click();

  await expect(
    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();

  // 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();
});