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

Code before:
    page,
    isMobile
  }) => {
    const search = page.getByTestId(headerComponentElements.search);
    const menuButton = page.getByTestId(headerComponentElements.menuButton);

    if (isMobile) {
      await expect(search).toBeHidden();
      await menuButton.click();
      await expect(search).toBeVisible();
    } else {
      await expect(search).toBeVisible();
    }
  });

  test('Clicking the freeCodeCamp logo should redirect to /learn', async ({
    page
  }) => {
    const logoLink = page.getByTestId(headerComponentElements.logoLink);
    const logo = page.getByTestId(headerComponentElements.logo);
    await expect(logoLink).toBeVisible();
    await expect(logo).toBeVisible();
    await logoLink.click();
    await page.waitForURL(`/learn`);
    await expect(page).toHaveURL(`/learn`);
  });

  test('Clicking the "Change Language" button should open the language list', async ({
    page
  }) => {
    const toggleLangButton = page.getByTestId(
      headerComponentElements.toggleLangButton
    );
    await expect(toggleLangButton).toBeVisible();
    await toggleLangButton.click();
    const langList = page.getByTestId(headerComponentElements.languageList);
    await expect(langList).toBeVisible();
  });

  test('The language list should contain a button for each available language', async ({
    page
  }) => {
    const locales = availableLangs.client.filter(
      lang => !hiddenLangs.includes(lang)
    );

    const toggleLangButton = page.getByTestId(
      headerComponentElements.toggleLangButton
    );
    await expect(toggleLangButton).toBeVisible();
    await toggleLangButton.click();

Review comment (suggestion):
This is okay, but we could also just check if the logo links to `/learn`, using the `.toHaveAttribute('href', '/learn')` assertion. That would speed up the test a little as we don't need to wait for the test to visit the page.

Code after:
    const skipContent = page.getByTestId(headerComponentElements.skipContent);
    await expect(skipContent).toBeVisible();
    await expect(skipContent).toHaveAttribute('href', '#content-start');
  });

  test('Renders universal nav by default', async ({ page }) => {
    const universalNavigation = page.getByTestId(
      headerComponentElements.universalNav
    );
    const universalNavigationLogo = page.getByTestId(
      headerComponentElements.universalNavLogo
    );
    await expect(universalNavigation).toBeVisible();
    await expect(universalNavigationLogo).toBeVisible();
    await expect(universalNavigationLogo).toHaveAttribute('href', '/learn');
  });

  test('Renders exam nav for Foundational C# with Microsoft exam', async ({
    page
  }) => {
    await page.goto(examUrl);
    await page
      .getByRole('button', {
        name: translations.buttons['click-start-exam']
      })
      .click();
    await expect(page).toHaveURL(examUrl);
    await expect(
      page.getByTestId(headerComponentElements.examNav)
    ).toBeVisible();
    await expect(
      page.getByTestId(headerComponentElements.examNavLogo)
    ).toBeVisible();
  });

  test('Should display search in header on desktop and in menu on mobile', async ({
    page,
    isMobile
  }) => {
    const search = page.getByTestId(headerComponentElements.search);
    const menuButton = page.getByTestId(headerComponentElements.menuButton);

    if (isMobile) {
      await expect(search).toBeHidden();
      await menuButton.click();
      await expect(search).toBeVisible();
    } else {
      await expect(search).toBeVisible();
    }
  });