fix: tests in footer.spec.ts (#52028)

client/src/components/Footer/__snapshots__/footer.test.tsx.snap

@@ -11,29 +11,21 @@ exports[`<Footer /> matches snapshot 1`] = `
       className="footer-desc-col"
       data-playwright-test-label="footer-desc-col"
     >
-      <p
-        data-playwright-test-label="footer-tax-exempt-status"
-      >
+      <p>
         footer.tax-exempt-status
       </p>
-      <p
-        data-playwright-test-label="footer-mission-statement"
-      >
+      <p>
         footer.mission-statement
       </p>
-      <p
-        data-playwright-test-label="footer-donation-initiatives-text"
-      >
+      <p>
         footer.donation-initiatives
       </p>
       <p
         className="footer-donation"
-        data-playwright-test-label="footer-donation-text"
       >
         You can
         <a
           className="inline"
-          data-playwright-test-label="footer-donation-page-link"
           href="/donate"
         >
           make a tax-deductible donation here
@@ -46,7 +38,6 @@ exports[`<Footer /> matches snapshot 1`] = `
     >
       <h2
         className="col-header"
-        data-playwright-test-label="trending-guides-col-header"
       >
         footer.trending-guides
       </h2>
@@ -332,16 +323,13 @@ exports[`<Footer /> matches snapshot 1`] = `
   >
     <h2
       className="col-header"
-      data-playwright-test-label="footer-bottom-col-header"
     >
       footer.our-nonprofit
     </h2>
     <div
       className="our-nonprofit"
-      data-playwright-test-label="our-nonprofit"
     >
       <a
-        data-playwright-test-label="footer-about-url"
         href="links:footer.about-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -349,7 +337,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.about
       </a>
       <a
-        data-playwright-test-label="footer-alumni-url"
         href="https://www.linkedin.com/school/free-code-camp/people/"
         rel="noopener noreferrer"
         target="_blank"
@@ -357,7 +344,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.alumni
       </a>
       <a
-        data-playwright-test-label="footer-open-source-url"
         href="https://github.com/freeCodeCamp/"
         rel="noopener noreferrer"
         target="_blank"
@@ -365,7 +351,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.open-source
       </a>
       <a
-        data-playwright-test-label="footer-shop-url"
         href="links:footer.shop-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -373,7 +358,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.shop
       </a>
       <a
-        data-playwright-test-label="footer-support-url"
         href="links:footer.support-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -381,7 +365,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.support
       </a>
       <a
-        data-playwright-test-label="footer-sponsors-url"
         href="links:footer.sponsors-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -389,7 +372,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.sponsors
       </a>
       <a
-        data-playwright-test-label="footer-honesty-url"
         href="links:footer.honesty-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -397,7 +379,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.honesty
       </a>
       <a
-        data-playwright-test-label="footer-coc-url"
         href="links:footer.coc-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -405,7 +386,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.coc
       </a>
       <a
-        data-playwright-test-label="footer-privacy-url"
         href="links:footer.privacy-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -413,7 +393,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.privacy
       </a>
       <a
-        data-playwright-test-label="footer-tos-url"
         href="links:footer.tos-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -421,7 +400,6 @@ exports[`<Footer /> matches snapshot 1`] = `
         footer.links.tos
       </a>
       <a
-        data-playwright-test-label="footer-copyright-url"
         href="links:footer.copyright-url"
         rel="noopener noreferrer"
         target="_blank"

client/src/components/Footer/index.tsx

@@ -13,26 +13,13 @@ function Footer(): JSX.Element {
           className='footer-desc-col'
           data-playwright-test-label='footer-desc-col'
         >
-          <p data-playwright-test-label='footer-tax-exempt-status'>
-            {t('footer.tax-exempt-status')}
-          </p>
-          <p data-playwright-test-label='footer-mission-statement'>
-            {t('footer.mission-statement')}
-          </p>
-          <p data-playwright-test-label='footer-donation-initiatives-text'>
-            {t('footer.donation-initiatives')}
-          </p>
-          <p
-            className='footer-donation'
-            data-playwright-test-label='footer-donation-text'
-          >
+          <p>{t('footer.tax-exempt-status')}</p>
+          <p>{t('footer.mission-statement')}</p>
+          <p>{t('footer.donation-initiatives')}</p>
+          <p className='footer-donation'>
             <Trans i18nKey='footer.donate-text'>
               You can
-              <Link
-                className='inline'
-                to='/donate'
-                data-playwright-test-label='footer-donation-page-link'
-              >
+              <Link className='inline' to='/donate'>
                 make a tax-deductible donation here
               </Link>
               .
@@ -40,12 +27,7 @@ function Footer(): JSX.Element {
           </p>
         </div>
         <div className='trending-guides'>
-          <h2
-            className='col-header'
-            data-playwright-test-label='trending-guides-col-header'
-          >
-            {t('footer.trending-guides')}
-          </h2>
+          <h2 className='col-header'>{t('footer.trending-guides')}</h2>
           <div
             className='trending-guides-articles'
             data-playwright-test-label='trending-guides-articles'
@@ -205,93 +187,47 @@ function Footer(): JSX.Element {
         </div>
       </div>
       <div className='footer-bottom'>
-        <h2
-          className='col-header'
-          data-playwright-test-label='footer-bottom-col-header'
-        >
-          {t('footer.our-nonprofit')}
-        </h2>
-        <div
-          className='our-nonprofit'
-          data-playwright-test-label='our-nonprofit'
-        >
-          <Link
-            external={false}
-            to={t('links:footer.about-url')}
-            data-playwright-test-label='footer-about-url'
-          >
+        <h2 className='col-header'>{t('footer.our-nonprofit')}</h2>
+        <div className='our-nonprofit'>
+          <Link external={false} to={t('links:footer.about-url')}>
             {t('footer.links.about')}
           </Link>
           <Link
             external={false}
             sameTab={false}
             to={'https://www.linkedin.com/school/free-code-camp/people/'}
-            data-playwright-test-label='footer-alumni-url'
           >
             {t('footer.links.alumni')}
           </Link>
-          <Link
-            external={false}
-            to={'https://github.com/freeCodeCamp/'}
-            data-playwright-test-label='footer-open-source-url'
-          >
+          <Link external={false} to={'https://github.com/freeCodeCamp/'}>
             {t('footer.links.open-source')}
           </Link>
           <Link
             external={false}
             sameTab={false}
             to={t('links:footer.shop-url')}
-            data-playwright-test-label='footer-shop-url'
           >
             {t('footer.links.shop')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.support-url')}
-            data-playwright-test-label='footer-support-url'
-          >
+          <Link external={false} to={t('links:footer.support-url')}>
             {t('footer.links.support')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.sponsors-url')}
-            data-playwright-test-label='footer-sponsors-url'
-          >
+          <Link external={false} to={t('links:footer.sponsors-url')}>
             {t('footer.links.sponsors')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.honesty-url')}
-            data-playwright-test-label='footer-honesty-url'
-          >
+          <Link external={false} to={t('links:footer.honesty-url')}>
             {t('footer.links.honesty')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.coc-url')}
-            data-playwright-test-label='footer-coc-url'
-          >
+          <Link external={false} to={t('links:footer.coc-url')}>
             {t('footer.links.coc')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.privacy-url')}
-            data-playwright-test-label='footer-privacy-url'
-          >
+          <Link external={false} to={t('links:footer.privacy-url')}>
             {t('footer.links.privacy')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.tos-url')}
-            data-playwright-test-label='footer-tos-url'
-          >
+          <Link external={false} to={t('links:footer.tos-url')}>
             {t('footer.links.tos')}
           </Link>
-          <Link
-            external={false}
-            to={t('links:footer.copyright-url')}
-            data-playwright-test-label='footer-copyright-url'
-          >
+          <Link external={false} to={t('links:footer.copyright-url')}>
             {t('footer.links.copyright')}
           </Link>
         </div>

e2e/footer.spec.ts

@@ -6,187 +6,149 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
-const footerComponentElements = {
-  descriptions: 'footer-desc-col',
-  trendingGuidesHeader: 'trending-guides-col-header',
-  trendingGuideArticles: 'trending-guides-articles',
-  footerBottomHeader: 'footer-bottom-col-header',
-  footerBottomLinks: 'our-nonprofit'
-} as const;
-
-test('Has descriptions', async ({ page }) => {
-  const descriptions = page
-    .getByTestId(footerComponentElements.descriptions)
-    .locator('p');
-  await expect(descriptions).toHaveCount(4);
-  for (const desc of await descriptions.all()) {
-    await expect(desc).toBeVisible();
-  }
-});
-
-test('Has header for trending guides', async ({ page }) => {
-  const trendingGuidesHeader = page.getByTestId(
-    footerComponentElements.trendingGuidesHeader
-  );
-  await expect(trendingGuidesHeader).toBeVisible();
-});
-
-test('Has 30 trending guide articles', async ({ page }) => {
-  const trendingGuideArticles = page
-    .getByTestId(footerComponentElements.trendingGuideArticles)
-    .locator('a');
-  await expect(trendingGuideArticles).toHaveCount(30);
-  for (const article of await trendingGuideArticles.all()) {
-    await expect(article).toBeVisible();
-  }
-});
-
-test('Has header for footer bottom', async ({ isMobile, page }) => {
-  const footerBottomHeader = page.getByTestId(
-    footerComponentElements.footerBottomHeader
-  );
-  if (isMobile) {
-    await expect(footerBottomHeader).toBeVisible();
-  } else {
-    await expect(footerBottomHeader).toBeHidden();
-  }
-});
-
-test('Has 11 nonprofits', async ({ page }) => {
-  const footerBottomLinks = page
-    .getByTestId(footerComponentElements.footerBottomLinks)
-    .locator('a');
-  await expect(footerBottomLinks).toHaveCount(11);
-  for (const footerBottomLink of await footerBottomLinks.all()) {
-    await expect(footerBottomLink).toBeVisible();
-  }
-});
-
 test.describe('Footer component left section', () => {
-  test('should render footer tax exempt statement text', async ({ page }) => {
-    const footerTaxExemptText = page.getByTestId('footer-tax-exempt-status');
-    await expect(footerTaxExemptText).toBeVisible();
-    await expect(footerTaxExemptText).toContainText(
-      translations.footer['tax-exempt-status']
-    );
+  test('should render the content properly', async ({ page }) => {
+    await expect(
+      page.getByText(translations.footer['tax-exempt-status'])
+    ).toBeVisible();
+    await expect(
+      page.getByText(translations.footer['mission-statement'])
+    ).toBeVisible();
+    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('should render footer mission statement text', async ({ page }) => {
-    const footerMissionStatement = page.getByTestId('footer-mission-statement');
-    await expect(footerMissionStatement).toBeVisible();
-    await expect(footerMissionStatement).toContainText(
-      translations.footer['mission-statement']
-    );
-  });
+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();
 
-  test('should render footer donation initiative text', async ({ page }) => {
-    const footerDonationInitiative = page.getByTestId(
-      'footer-donation-initiatives-text'
-    );
-    await expect(footerDonationInitiative).toBeVisible();
-    await expect(footerDonationInitiative).toContainText(
-      translations.footer['donation-initiatives']
-    );
-  });
+    const articles = await page
+      .getByTestId('trending-guides-articles')
+      .getByRole('link')
+      .all();
 
-  test('should correctly link to donations page', async ({ page }) => {
-    const donationPageLink = page.getByTestId('footer-donation-page-link');
-    await expect(donationPageLink).toHaveAttribute('href', '/donate');
+    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.getByTestId('footer-about-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.about
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['about-url']);
-    await expect(link).toHaveText(translations.footer.links.about);
   });
 
   test('should display correct link to alumni page', async ({ page }) => {
-    const link = page.getByTestId('footer-alumni-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.alumni
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute(
       'href',
       'https://www.linkedin.com/school/free-code-camp/people/'
     );
-    await expect(link).toHaveText(translations.footer.links.alumni);
   });
 
   test('should display correct link to open-source page', async ({ page }) => {
-    const link = page.getByTestId('footer-open-source-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links['open-source']
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute(
       'href',
       'https://github.com/freeCodeCamp/'
     );
-    await expect(link).toHaveText(translations.footer.links['open-source']);
   });
 
   test('should display correct link to shop', async ({ page }) => {
-    const link = page.getByTestId('footer-shop-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.shop
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['shop-url']);
-    await expect(link).toHaveText(translations.footer.links.shop);
   });
 
   test('should display correct link to support page', async ({ page }) => {
-    const link = page.getByTestId('footer-support-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.support
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['support-url']);
-    await expect(link).toHaveText(translations.footer.links.support);
   });
 
   test('should display correct link to sponsors page', async ({ page }) => {
-    const link = page.getByTestId('footer-sponsors-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.sponsors
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['sponsors-url']);
-    await expect(link).toHaveText(translations.footer.links.sponsors);
   });
 
   test('should display correct link to honesty page', async ({ page }) => {
-    const link = page.getByTestId('footer-honesty-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.honesty
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['honesty-url']);
-    await expect(link).toHaveText(translations.footer.links.honesty);
   });
 
   test('should display correct link to coc page', async ({ page }) => {
-    const link = page.getByTestId('footer-coc-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.coc
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['coc-url']);
-    await expect(link).toHaveText(translations.footer.links.coc);
   });
 
   test('should display correct link to privacy page', async ({ page }) => {
-    const link = page.getByTestId('footer-privacy-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.privacy
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['privacy-url']);
-    await expect(link).toHaveText(translations.footer.links.privacy);
   });
 
   test('should display correct link to tos page', async ({ page }) => {
-    const link = page.getByTestId('footer-tos-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.tos
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['tos-url']);
-    await expect(link).toHaveText(translations.footer.links.tos);
   });
 
   test('should display correct link to copyright page', async ({ page }) => {
-    const link = page.getByTestId('footer-copyright-url');
+    const link = page.getByRole('link', {
+      name: translations.footer.links.copyright
+    });
 
-    expect(await link.isVisible()).toBe(true);
+    await expect(link).toBeVisible();
     await expect(link).toHaveAttribute('href', links.footer['copyright-url']);
-    await expect(link).toHaveText(translations.footer.links.copyright);
   });
 });