Repository: freeCodeCamp/freeCodeCamp
File: e2e/header.spec.ts (TypeScript)

Code before:
    await expect(menuButton).toBeVisible();
    await menuButton.click();
    await expect(menu).toBeVisible();

    const menuLinks = [
      {
        name: translations.buttons.donate,
        href: '/donate'
      },
      { name: translations.buttons.curriculum, href: '/learn' },
      { name: translations.buttons.forum, href: links.nav.forum },
      { name: translations.buttons.news, href: links.nav.news },
      {
        name: translations.buttons.radio,
        href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
      },
      {
        name: translations.buttons.contribute,
        href: links.nav.contribute
      }
    ];

    for (const menuLink of menuLinks) {
      const link = page
        .getByRole('link', { name: menuLink.name })
        .filter({ hasText: menuLink.name }); // need to distinguish from freeCodeCamp logo link in header
      await expect(link).toBeVisible();
      await expect(link).toHaveAttribute('href', menuLink.href);
    }
  });

  test('The Sign In button should redirect to api/signin', async ({ page }) => {
    const signInButton = page.getByRole('link', {
      name: translations.buttons['sign-in']
    });
    const apiLocation = process.env.API_LOCATION || 'http://localhost:3000';

    await expect(signInButton).toHaveAttribute('href', `${apiLocation}/signin`);
  });
});


Review comment (suggestion):
Would passing the `exact` option allow us to omit the filter?

```suggestion
      const link = page.getByRole('link', { name: menuLink.name, exact: true })
```

The name of the logo link is "freeCodeCamp Curriculum" while the one in the menu is just "Curriculum".

Code after:
    const langButtons = page.getByTestId(
      headerComponentElements.languageButton
    );
    await expect(langButtons).toHaveCount(locales.length);

    for (let i = 0; i < locales.length; i++) {
      const btn = langButtons.nth(i);
      await expect(btn).toContainText(LangNames[locales[i]]);
    }
  });

  test('Clicking the menu button should open the menu', async ({ page }) => {
    const menuButton = page.getByTestId(headerComponentElements.menuButton);
    const menu = page.getByTestId(headerComponentElements.menu);
    await expect(menuButton).toBeVisible();
    await menuButton.click();
    await expect(menu).toBeVisible();
  });

  test('The menu should contain links to: donate, curriculum, forum, news, radio, and contribute', async ({
    page
  }) => {
    const menuButton = page.getByTestId(headerComponentElements.menuButton);
    const menu = page.getByTestId(headerComponentElements.menu);
    await expect(menuButton).toBeVisible();
    await menuButton.click();
    await expect(menu).toBeVisible();

    const menuLinks = [
      {
        name: translations.buttons.donate,
        href: '/donate'
      },
      { name: translations.buttons.curriculum, href: '/learn' },
      { name: translations.buttons.forum, href: links.nav.forum },
      { name: translations.buttons.news, href: links.nav.news },
      {
        name: translations.buttons.radio,
        href: process.env.RADIO_LOCATION || 'https://coderadio.freecodecamp.org'
      },
      {
        name: translations.buttons.contribute,
        href: links.nav.contribute
      }
    ];

    for (const menuLink of menuLinks) {
      const link = page.getByRole('link', { name: menuLink.name, exact: true });
      await expect(link).toBeVisible();
      await expect(link).toHaveAttribute('href', menuLink.href);
    }