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

Code before:
        exact: true
      })
    ).toBeVisible();
    await expect(
      page.getByRole('heading', {
        name: `If you've already tried the Read-Search-Ask method, then you can ask for help on the freeCodeCamp forum.`
      })
    ).toBeVisible();
    await expect(
      page.getByText(
        `Before making a new post please see if your question has already been answered on the forum.`
      )
    ).toBeVisible();

    await expect(
      page.getByRole('button', { name: translations.buttons['create-post'] })
    ).toBeVisible();
    await expect(
      page.getByRole('button', { name: translations.buttons.cancel })
    ).toBeVisible();
    await expect(
      page.getByRole('button', { name: translations.buttons.close })
    ).toBeVisible();
  });

  test('Create Post button closes the modal', async ({ page }) => {
    await page
      .getByRole('button', { name: translations.buttons['ask-for-help'] })
      .click();

    await page
      .getByRole('button', {
        name: translations.buttons['create-post']
      })
      .click();

    await expect(
      page.getByRole('heading', {
        name: translations.buttons['ask-for-help'],
        exact: true
      })
    ).not.toBeVisible();
  });

  test('Cancel button closes the modal', async ({ page }) => {
    await page
      .getByRole('button', { name: translations.buttons['ask-for-help'] })
      .click();

    await page
      .getByRole('button', { name: translations.buttons.cancel })

Review comment (suggestion):
I've been trying to test if it's correctly opening a new page with expected URL, something similar to example from the [Playwright docs](https://playwright.dev/docs/pages#handling-new-pages):

```ts
await page
  .getByRole('button', { name: translations.buttons['ask-for-help'] })
  .click();

const newPagePromise = context.waitForEvent('page');

page
  .getByRole('button', {
    name: translations.buttons['create-post']
  })
  .click()

const newPage = await newPagePromise;
await newPage.waitForLoadState();

await expect(newPage).toHaveURL(/.*\/forum\/.*/);
```

But I just couldn't get this test to pass. Will try tomorrow.

Code after:
        exact: true
      })
    ).toBeVisible();
    await expect(
      page.getByRole('heading', {
        name: `If you've already tried the Read-Search-Ask method, then you can ask for help on the freeCodeCamp forum.`
      })
    ).toBeVisible();
    await expect(
      page.getByText(
        `Before making a new post please see if your question has already been answered on the forum.`
      )
    ).toBeVisible();

    await expect(
      page.getByRole('button', { name: translations.buttons['create-post'] })
    ).toBeVisible();
    await expect(
      page.getByRole('button', { name: translations.buttons.cancel })
    ).toBeVisible();
    await expect(
      page.getByRole('button', { name: translations.buttons.close })
    ).toBeVisible();
  });

  test('Create Post button closes help modal and creates new page with forum url', async ({
    context,
    page
  }) => {
    await page
      .getByRole('button', { name: translations.buttons['ask-for-help'] })
      .click();

    const newPagePromise = context.waitForEvent('page');

    await page
      .getByRole('button', {
        name: translations.buttons['create-post']
      })
      .click();

    await expect(
      page.getByRole('heading', {
        name: translations.buttons['ask-for-help'],
        exact: true
      })
    ).not.toBeVisible();

    const newPage = await newPagePromise;
    await newPage.waitForLoadState();