test(e2e,playwright): unsubscribe page (#51852)

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

client/src/client-only-routes/show-unsubscribed.tsx

@@ -30,8 +30,12 @@ function ShowUnsubscribed({
             <Spacer size='large' />
             <Panel bsStyle='primary' className='text-center'>
               <Spacer size='medium' />
-              <h2>{t('misc.unsubscribed')}</h2>
-              <p>{t('misc.keep-coding')}</p>
+              <h2 data-playwright-test-label='main-heading'>
+                {t('misc.unsubscribed')}
+              </h2>
+              <p data-playwright-test-label='motivation-text'>
+                {t('misc.keep-coding')}
+              </p>
             </Panel>
           </FullWidthRow>
           {unsubscribeId ? (

e2e/unsubscribed.spec.ts

@@ -0,0 +1,90 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+import metaTags from '../client/i18n/locales/english/meta-tags.json';
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test.describe('The unsubscribed page without unsubscribeId', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/unsubscribed');
+  });
+
+  test('The page renders with correct title', async ({ page }) => {
+    await expect(page).toHaveTitle(
+      `${metaTags['youre-unsubscribed']} | freeCodeCamp.org`
+    );
+  });
+
+  test('The page has correct main heading', async ({ page }) => {
+    const mainHeading = page.getByTestId('main-heading');
+
+    await expect(mainHeading).toBeVisible();
+    await expect(mainHeading).toContainText(translations.misc['unsubscribed']);
+  });
+
+  test('The page has correct motivation text', async ({ page }) => {
+    const motivationText = page.getByTestId('motivation-text');
+
+    await expect(motivationText).toBeVisible();
+    await expect(motivationText).toContainText(
+      translations.misc['keep-coding']
+    );
+  });
+
+  test('The page has no button to resubscribe', async ({ page }) => {
+    const resubscribeButton = page.getByRole('link', {
+      name: translations.buttons['resubscribe']
+    });
+
+    await expect(resubscribeButton).not.toBeVisible();
+  });
+});
+
+test.describe('The unsubscribed page with unsubscribeId', () => {
+  const encoded_url_text =
+    '?messages=success%5B0%5D%3DWe%2527ve%2520successfully%2520updated%2520your%2520email%2520preferences.%2520Thank%2520you%2520for%2520resubscribing.';
+  // This value is sourced from self/freeCodeCamp/tools/scripts/seed/certified-user-data.js
+  // The file certified-user-data.js is used to seed the database before running the tests.
+  const unsubscribeId = 'tBX8stC5jiustPBteF2mV';
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/unsubscribed/${unsubscribeId}`);
+  });
+
+  test('The page renders with correct title and other texts', async ({
+    page
+  }) => {
+    await expect(page).toHaveTitle(
+      `${metaTags['youre-unsubscribed']} | freeCodeCamp.org`
+    );
+
+    const mainHeading = page.getByTestId('main-heading');
+
+    await expect(mainHeading).toBeVisible();
+    await expect(mainHeading).toContainText(translations.misc['unsubscribed']);
+
+    const motivationText = page.getByTestId('motivation-text');
+
+    await expect(motivationText).toBeVisible();
+    await expect(motivationText).toContainText(
+      translations.misc['keep-coding']
+    );
+  });
+
+  test('Resubscribe and redirect to home with encoded text in the url', async ({
+    page
+  }) => {
+    const resubscribeButton = page.getByRole('link', {
+      name: translations.buttons['resubscribe']
+    });
+
+    await expect(resubscribeButton).toBeVisible();
+    const resubscribeButtonHref = await resubscribeButton.getAttribute('href');
+    expect(resubscribeButtonHref).toContain(`/resubscribe/${unsubscribeId}`);
+    await resubscribeButton.click();
+
+    await expect(page).toHaveURL(`${encoded_url_text}`);
+  });
+});