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

Code before:
    const exitButtonSrOnly = page
      .getByRole('button', { name: translations.buttons.close })
      .nth(0);
    const exitButton = page
      .getByRole('button', { name: translations.buttons.close })
      .nth(1);

    await expect(exitButtonSrOnly).toBeVisible();
    await expect(exitButton).toBeVisible();
  });

  test('closes modal after user cancels account deleting', async ({ page }) => {
    await page.getByRole('button', { name: translations.buttons.menu }).click();

    await page
      .getByRole('link', { name: translations.buttons.settings })
      .click();

    await page
      .getByRole('button', { name: translations.settings.danger.delete })
      .click();
    await page
      .getByRole('button', { name: translations.settings.danger.nevermind })
      .click();

    await expect(page).toHaveURL(/.*\/settings\/?#/);
    await expect(
      page.getByRole('heading', {
        name: translations.settings.danger['delete-title']
      })
    ).not.toBeVisible();
  });

  test('deletes account and redirects to /learn after confirmation', async ({
    page
  }) => {
    await page.getByRole('button', { name: translations.buttons.menu }).click();

    await page
      .getByRole('link', { name: translations.buttons.settings })
      .click();

    await page
      .getByRole('button', { name: translations.settings.danger.delete })
      .click();

    await page
      .getByRole('button', { name: translations.settings.danger.certain })
      .click();

    await expect(page).toHaveURL(/.*\/learn\/?/);

Review comment (suggestion):
There should be a check for the appearance of the modal itself (an element with `role="dialog"`) before the checks for modal content. It's to ensure that we are displaying the content within a dialog, rather than a plain `div`.

Code after:

    await expect(
      page.getByRole('button', { name: translations.settings.danger.nevermind })
    ).toBeVisible();
    await expect(
      page.getByRole('button', { name: translations.settings.danger.certain })
    ).toBeVisible();

    // There are 2 close buttons on the modal: one is sr-only on top, and one on the bottom of modal
    const closeButtons = await page
      .getByRole('button', { name: translations.buttons.close })
      .all();
    expect(closeButtons).toHaveLength(2);
  });

  test('should close the modal after the user cancels account deleting', async ({
    page
  }) => {
    await page
      .getByRole('button', { name: translations.settings.danger.delete })
      .click();

    const dialogs = await page.getByRole('dialog').all();
    expect(dialogs).toHaveLength(2);

    await page
      .getByRole('button', { name: translations.settings.danger.nevermind })
      .click();

    for (const dialog of dialogs) {
      await expect(dialog).not.toBeVisible();
    }
  });

  test('should close the modal and redirect to /learn after the user clicks delete', async ({
    page
  }) => {
    await page.route('*/**/account/delete', async route => {
      // intercept the endpoint to prevent user account from being deleted
      // as the deletion will cause subsequent tests to fail
      const json = {};
      await route.fulfill({ json });
    });

    await page
      .getByRole('button', { name: translations.settings.danger.delete })
      .click();

    const dialogs = await page.getByRole('dialog').all();
    expect(dialogs).toHaveLength(2);