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

Code before:
  }
});

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']
  );
  const featuredLogos = page.getByTestId('landing-as-seen-in-container-logos');
  await expect(featuredLogos).toBeVisible();
});

test('Testimonial section has a header', async () => {
  const testimonialsHeader = page.getByTestId('testimonials-section-header');
  await expect(testimonialsHeader).toHaveText(

Review comment (suggestion):
Similarly, we can query the image by its alt text, as well as checking if there is a caption text.

```tsx
test("The landing-top should display a camper image with a caption", 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();
});
```

Code after:
  }
});

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']
  );
  const featuredLogos = page.getByTestId('landing-as-seen-in-container-logos');
  await expect(featuredLogos).toBeVisible();
});

test('Testimonial section has a header', async () => {
  const testimonialsHeader = page.getByTestId('testimonials-section-header');
  await expect(testimonialsHeader).toHaveText(
    translations.landing.testimonials['heading']