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

Code before:
  await expect(landingH2Heading).toHaveText(translations.landing['h2-heading']);
});

test('Has 5 brand logos', async () => {
  const logos = page.getByTestId('brand-logo-container').locator('svg');
  await expect(logos).toHaveCount(5);
  for (const logo of await logos.all()) {
    await expect(logo).toBeVisible();
  }
});

test('The landing-top & testimonial sections should contain call-to-action', async () => {
  const ctas = page.locator("[data-test-label='landing-big-cta']");

  for (const cta of await ctas.all()) {
    await expect(cta).toBeVisible();
  }
});

test('The landing-top & testimonial sections call to action should contain a descriptive text content', async () => {
  const ctas = page.locator("[data-test-label='landing-big-cta']");

  for (const cta of await ctas.all()) {
    await expect(cta).toHaveText(translations.buttons['logged-in-cta-btn']);
  }
});

test("The landing-top should contain a descriptive text explaining the camper's image", async () => {
  const campersCaption = page.locator(
    "[data-test-label='landing-page-figure-caption']"
  );
  await expect(campersCaption).toHaveText(
    translations.landing['hero-img-description']
  );
});

test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({
  isMobile
}) => {
  const landingPageImage = page.getByTestId('landing-page-figure');
  if (isMobile) {
    await expect(landingPageImage).toBeHidden();
  } else {
    await expect(landingPageImage).toBeVisible();
  }
});

test('The as seen in container is visible with featured logos', async () => {
  const asSeenInContainer = page.getByTestId('landing-as-seen-in-text');
  await expect(asSeenInContainer).toHaveText(
    translations.landing['as-seen-in']

Review comment (performance):
We should merge these test into one for performance efficiency.

We also should avoid using test labels / test IDs, as mentioned here: https://contribute.freecodecamp.org/#/how-to-add-playwright-tests?id=-identifying-a-dom-element.

The test would then just be:

```tsx

test('The landing-top & testimonial sections should contain call-to-action', async () => {
  const ctas = await page
    .getByRole('link', {
      name: translations.buttons['logged-in-cta-btn']
    })
    .all();

  expect(ctas).toHaveLength(4);

  for (const cta of ctas) {
    await expect(cta).toBeVisible();
  }
});
```

Code after:
  await expect(landingH2Heading).toHaveText(translations.landing['h2-heading']);
});

test('Has 5 brand logos', async () => {
  const logos = page.getByTestId('brand-logo-container').locator('svg');
  await expect(logos).toHaveCount(5);
  for (const logo of await logos.all()) {
    await expect(logo).toBeVisible();
  }
});

test('The landing-top & testimonial sections should contain call-to-action, and have a descriptive text content', async () => {
  const ctas = await page
    .getByRole('link', {
      name: translations.buttons['logged-in-cta-btn']
    })
    .all();

  expect(ctas).toHaveLength(4);

  for (const cta of ctas) {
    await expect(cta).toBeVisible();
  }
});

test("The landing-top should contain a descriptive text explaining the camper's image", async () => {
  const campersImage = page.getByAltText(translations.landing['hero-img-alt']);
  const captionText = page.getByText(
    translations.landing['hero-img-description']
  );

  await expect(campersImage).toBeVisible();
  await expect(captionText).toBeVisible();
});

test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({
  isMobile
}) => {
  const landingPageImage = page.getByTestId('landing-page-figure');
  if (isMobile) {
    await expect(landingPageImage).toBeHidden();
  } else {
    await expect(landingPageImage).toBeVisible();
  }
});

test('The as seen in container is visible with featured logos', async () => {
  const asSeenInContainer = page.getByTestId('landing-as-seen-in-text');
  await expect(asSeenInContainer).toHaveText(
    translations.landing['as-seen-in']
  );