test(e2e,playwright): Footer component (#51815)

Co-authored-by: Umang Patel <umang.patel@lastyard.com>

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

@@ -11,21 +11,29 @@ exports[`<Footer /> matches snapshot 1`] = `
       className="footer-desc-col"
       data-playwright-test-label="footer-desc-col"
     >
-      <p>
+      <p
+        data-playwright-test-label="footer-tax-exempt-status"
+      >
         footer.tax-exempt-status
       </p>
-      <p>
+      <p
+        data-playwright-test-label="footer-mission-statement"
+      >
         footer.mission-statement
       </p>
-      <p>
+      <p
+        data-playwright-test-label="footer-donation-initiatives-text"
+      >
         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
@@ -333,6 +341,7 @@ exports[`<Footer /> matches snapshot 1`] = `
       data-playwright-test-label="our-nonprofit"
     >
       <a
+        data-playwright-test-label="footer-about-url"
         href="links:footer.about-url"
         rel="noopener noreferrer"
         target="_blank"
@@ -340,6 +349,7 @@ 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"
@@ -347,6 +357,7 @@ 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"
@@ -354,6 +365,7 @@ 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"
@@ -361,6 +373,7 @@ 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"
@@ -368,6 +381,7 @@ 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"
@@ -375,6 +389,7 @@ 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"
@@ -382,6 +397,7 @@ 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"
@@ -389,6 +405,7 @@ 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"
@@ -396,6 +413,7 @@ 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"
@@ -403,6 +421,7 @@ 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,13 +13,26 @@ function Footer(): JSX.Element {
           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>
-          <p className='footer-donation'>
+          <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'
+          >
             <Trans i18nKey='footer.donate-text'>
               You can
-              <Link className='inline' to='/donate'>
+              <Link
+                className='inline'
+                to='/donate'
+                data-playwright-test-label='footer-donation-page-link'
+              >
                 make a tax-deductible donation here
               </Link>
               .
@@ -202,45 +215,83 @@ function Footer(): JSX.Element {
           className='our-nonprofit'
           data-playwright-test-label='our-nonprofit'
         >
-          <Link external={false} to={t('links:footer.about-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.about-url')}
+            data-playwright-test-label='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/'}>
+          <Link
+            external={false}
+            to={'https://github.com/freeCodeCamp/'}
+            data-playwright-test-label='footer-open-source-url'
+          >
             {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')}>
+          <Link
+            external={false}
+            to={t('links:footer.support-url')}
+            data-playwright-test-label='footer-support-url'
+          >
             {t('footer.links.support')}
           </Link>
-          <Link external={false} to={t('links:footer.sponsors-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.sponsors-url')}
+            data-playwright-test-label='footer-sponsors-url'
+          >
             {t('footer.links.sponsors')}
           </Link>
-          <Link external={false} to={t('links:footer.honesty-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.honesty-url')}
+            data-playwright-test-label='footer-honesty-url'
+          >
             {t('footer.links.honesty')}
           </Link>
-          <Link external={false} to={t('links:footer.coc-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.coc-url')}
+            data-playwright-test-label='footer-coc-url'
+          >
             {t('footer.links.coc')}
           </Link>
-          <Link external={false} to={t('links:footer.privacy-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.privacy-url')}
+            data-playwright-test-label='footer-privacy-url'
+          >
             {t('footer.links.privacy')}
           </Link>
-          <Link external={false} to={t('links:footer.tos-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.tos-url')}
+            data-playwright-test-label='footer-tos-url'
+          >
             {t('footer.links.tos')}
           </Link>
-          <Link external={false} to={t('links:footer.copyright-url')}>
+          <Link
+            external={false}
+            to={t('links:footer.copyright-url')}
+            data-playwright-test-label='footer-copyright-url'
+          >
             {t('footer.links.copyright')}
           </Link>
         </div>

e2e/footer.spec.ts

@@ -1,4 +1,10 @@
 import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+import links from '../client/i18n/locales/english/links.json';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
 
 const footerComponentElements = {
   descriptions: 'footer-desc-col',
@@ -8,10 +14,6 @@ const footerComponentElements = {
   footerBottomLinks: 'our-nonprofit'
 } as const;
 
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
 test('Has descriptions', async ({ page }) => {
   const descriptions = page
     .getByTestId(footerComponentElements.descriptions)
@@ -39,7 +41,7 @@ test('Has 30 trending guide articles', async ({ page }) => {
   }
 });
 
-test('Has header for footer bottom', async ({ page, isMobile }) => {
+test('Has header for footer bottom', async ({ isMobile, page }) => {
   const footerBottomHeader = page.getByTestId(
     footerComponentElements.footerBottomHeader
   );
@@ -59,3 +61,132 @@ test('Has 11 nonprofits', async ({ page }) => {
     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 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('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']
+    );
+  });
+
+  test('should correctly link to donations page', async ({ page }) => {
+    const donationPageLink = page.getByTestId('footer-donation-page-link');
+    await expect(donationPageLink).toHaveAttribute('href', '/donate');
+  });
+});
+
+test.describe('Footer bottom links', () => {
+  test('should display correct link to about us page', async ({ page }) => {
+    const link = page.getByTestId('footer-about-url');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    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');
+
+    expect(await link.isVisible()).toBe(true);
+    await expect(link).toHaveAttribute('href', links.footer['copyright-url']);
+    await expect(link).toHaveText(translations.footer.links.copyright);
+  });
+});