test(e2e,playwright): Footer (#51761)

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

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

@@ -9,6 +9,7 @@ exports[`<Footer /> matches snapshot 1`] = `
   >
     <div
       className="footer-desc-col"
+      data-playwright-test-label="footer-desc-col"
     >
       <p>
         footer.tax-exempt-status
@@ -37,11 +38,13 @@ exports[`<Footer /> matches snapshot 1`] = `
     >
       <h2
         className="col-header"
+        data-playwright-test-label="trending-guides-col-header"
       >
         footer.trending-guides
       </h2>
       <div
         className="trending-guides-articles"
+        data-playwright-test-label="trending-guides-articles"
       >
         <span>
           <a
@@ -321,11 +324,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
         href="links:footer.about-url"

client/src/components/Footer/index.tsx

@@ -9,7 +9,10 @@ function Footer(): JSX.Element {
   return (
     <footer className='site-footer'>
       <div className='footer-top'>
-        <div className='footer-desc-col'>
+        <div
+          className='footer-desc-col'
+          data-playwright-test-label='footer-desc-col'
+        >
           <p>{t('footer.tax-exempt-status')}</p>
           <p>{t('footer.mission-statement')}</p>
           <p>{t('footer.donation-initiatives')}</p>
@@ -24,8 +27,16 @@ function Footer(): JSX.Element {
           </p>
         </div>
         <div className='trending-guides'>
-          <h2 className='col-header'>{t('footer.trending-guides')}</h2>
-          <div className='trending-guides-articles'>
+          <h2
+            className='col-header'
+            data-playwright-test-label='trending-guides-col-header'
+          >
+            {t('footer.trending-guides')}
+          </h2>
+          <div
+            className='trending-guides-articles'
+            data-playwright-test-label='trending-guides-articles'
+          >
             {/* the span elements were add so the link can be inline and its text would be the only active target */}
             <span>
               <Link external={false} to={t('trending:article0link')}>
@@ -181,8 +192,16 @@ function Footer(): JSX.Element {
         </div>
       </div>
       <div className='footer-bottom'>
-        <h2 className='col-header'>{t('footer.our-nonprofit')}</h2>
-        <div className='our-nonprofit'>
+        <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')}>
             {t('footer.links.about')}
           </Link>

e2e/footer.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test';
+
+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.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+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 ({ page, isMobile }) => {
+  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();
+  }
+});