test(e2e,playwright): donate.tsx (#51768)

client/src/components/Donation/donation-text-components.tsx

@@ -18,9 +18,13 @@ export const DonationText = (): JSX.Element => {
   const { t } = useTranslation();
   return (
     <>
-      <p>{t('donate.efficiency')}</p>
-      <p>{t('donate.why-donate-1')}</p>
-      <p>{t('donate.why-donate-2')}</p>
+      <p data-playwright-test-label='donate-text-1'>{t('donate.efficiency')}</p>
+      <p data-playwright-test-label='donate-text-2'>
+        {t('donate.why-donate-1')}
+      </p>
+      <p data-playwright-test-label='donate-text-3'>
+        {t('donate.why-donate-2')}
+      </p>
     </>
   );
 };

client/src/pages/donate.tsx

@@ -75,9 +75,13 @@ function DonatePage({
                 <Row>
                   <Col className={'text-center'} xs={12}>
                     {isDonating ? (
-                      <h2>{t('donate.thank-you')}</h2>
+                      <h2 data-playwright-test-label='main-head'>
+                        {t('donate.thank-you')}
+                      </h2>
                     ) : (
-                      <h2>{t('donate.help-more')}</h2>
+                      <h2 data-playwright-test-label='main-head'>
+                        {t('donate.help-more')}
+                      </h2>
                     )}
                     <Spacer size='medium' />
                   </Col>
@@ -99,7 +103,9 @@ function DonatePage({
                 <Row className='donate-support' id='FAQ'>
                   <Col className={'text-center'} xs={12}>
                     <hr />
-                    <h2>{t('donate.faq')}</h2>
+                    <h2 data-playwright-test-label='faq-head'>
+                      {t('donate.faq')}
+                    </h2>
                     <Spacer size='medium' />
                   </Col>
                   <Col xs={12}>

e2e/donate-page-default.spec.ts

@@ -0,0 +1,72 @@
+import { test, expect, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const frequentlyAskedQuestions = [
+  translations.donate['get-help'],
+  translations.donate['how-transparent'],
+  translations.donate['how-efficient'],
+  translations.donate['how-one-time'],
+  translations.donate['does-crypto'],
+  translations.donate['can-check'],
+  translations.donate['how-matching-gift'],
+  translations.donate['how-endowment'],
+  translations.donate['how-legacy'],
+  translations.donate['how-stock'],
+  translations.donate['how-update'],
+  translations.donate['anything-else']
+];
+
+let page: Page;
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  await page.goto('/donate');
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test.describe('Donate Page', () => {
+  test('should display the correct title', async () => {
+    await expect(page).toHaveTitle('Support our charity | freeCodeCamp.org');
+  });
+
+  test('should display the main heading', async () => {
+    const mainHeading = page.getByTestId('main-head');
+    expect(mainHeading).not.toBeNull();
+    expect(await mainHeading.textContent()).toBe('Help us do more');
+  });
+
+  test('should display donation page upper text 1', async () => {
+    const donateText1 = page.getByTestId('donate-text-1');
+    await expect(donateText1).toHaveText(
+      'freeCodeCamp is a highly efficient education charity.'
+    );
+  });
+
+  test('should display donation page benefit 2', async () => {
+    const donateText2 = page.getByTestId('donate-text-2');
+    await expect(donateText2).toHaveText(
+      'When you donate to freeCodeCamp, you help people learn new skills and provide for their families.'
+    );
+  });
+
+  test('should display donation page benefit 3', async () => {
+    const donateText3 = page.getByTestId('donate-text-3');
+    await expect(donateText3).toHaveText(
+      'You also help us create new resources for you to use to expand your own technology skills.'
+    );
+  });
+
+  test('should display the faq heading', async () => {
+    const faqHead = page.getByTestId('faq-head');
+    expect(faqHead).not.toBeNull();
+    expect(await faqHead.textContent()).toBe('Frequently asked questions');
+  });
+
+  test('Frequently asked question list buttons', async () => {
+    for (const i of frequentlyAskedQuestions) {
+      await page.getByRole('button', { name: `${i}` }).isVisible();
+    }
+  });
+});