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

Code before:
    await expect(
      page.getByText(translations.footer['donation-initiatives'])
    ).toBeVisible();
    await expect(
      page.getByRole('link', { name: 'make a tax-deductible donation here' })
    ).toHaveAttribute('href', '/donate');
  });
});

test.describe('Footer trending Guides section', () => {
  test('should render the section with a header and 30 articles', async ({
    page
  }) => {
    await expect(
      page.getByRole('heading', {
        name: translations.footer['trending-guides']
      })
    ).toBeVisible();

    const articles = await page
      .getByTestId('trending-guides-articles')
      .getByRole('link')
      .all();

    expect(articles).toHaveLength(30);

    for (const article of articles) {
      await expect(article).toBeVisible();
    }
  });
});

test.describe('Footer bottom links', () => {
  test('should display correct link to about us page', async ({ page }) => {
    const link = page.getByRole('link', {
      name: translations.footer.links.about
    });

    await expect(link).toBeVisible();
    await expect(link).toHaveAttribute('href', links.footer['about-url']);
  });

  test('should display correct link to alumni page', async ({ page }) => {
    const link = page.getByRole('link', {
      name: translations.footer.links.alumni
    });

    await expect(link).toBeVisible();
    await expect(link).toHaveAttribute(
      'href',
      'https://www.linkedin.com/school/free-code-camp/people/'

Review comment (suggestion):
These two should be merged as we are testing the same section. I moved them to: https://github.com/huyenltnguyen/freeCodeCamp/blob/c958edc99b39ae191a2688b585e87e94459428d9/e2e/footer.spec.ts#L26-L47

Code after:
    await expect(
      page.getByText(translations.footer['donation-initiatives'])
    ).toBeVisible();
    await expect(
      page.getByRole('link', { name: 'make a tax-deductible donation here' })
    ).toHaveAttribute('href', '/donate');
  });
});

test.describe('Footer Trending Guides section', () => {
  test('should render the section with a header and 30 articles', async ({
    page
  }) => {
    await expect(
      page.getByRole('heading', {
        name: translations.footer['trending-guides']
      })
    ).toBeVisible();

    const articles = await page
      .getByTestId('trending-guides-articles')
      .getByRole('link')
      .all();

    expect(articles).toHaveLength(30);

    for (const article of articles) {
      await expect(article).toBeVisible();
    }
  });
});

test.describe('Footer bottom links', () => {
  test('should display correct link to about us page', async ({ page }) => {
    const link = page.getByRole('link', {
      name: translations.footer.links.about
    });

    await expect(link).toBeVisible();
    await expect(link).toHaveAttribute('href', links.footer['about-url']);
  });

  test('should display correct link to alumni page', async ({ page }) => {
    const link = page.getByRole('link', {
      name: translations.footer.links.alumni
    });

    await expect(link).toBeVisible();
    await expect(link).toHaveAttribute(
      'href',
      'https://www.linkedin.com/school/free-code-camp/people/'