test(e2e,playwright): blocked.tsx (#51745)

client/src/pages/blocked.tsx

@@ -13,10 +13,15 @@ function BlockedPage(): JSX.Element {
         <Spacer size='large' />
         <Row>
           <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
-            <h1 id='content-start'>We can&apos;t log you in.</h1>
+            <h1 id='content-start' data-playwright-test-label='main-heading'>
+              We can&apos;t log you in.
+            </h1>
             <Spacer size='large' />
             <Col lg={10} lgOffset={1} sm={10} smOffset={1} xs={12}>
-              <div className='text-left blocked-body'>
+              <div
+                className='text-left blocked-body'
+                data-playwright-test-label='blocked-body-text'
+              >
                 <p>
                   United States export control and economic sanctions rules
                   don&apos;t allow us to log in visitors from your region. Sorry
@@ -24,7 +29,10 @@ function BlockedPage(): JSX.Element {
                 </p>
                 <p>
                   If you want, you can{' '}
-                  <a href='https://www.okta.com/blocked'>
+                  <a
+                    href='https://www.okta.com/blocked'
+                    data-playwright-test-label='learn-more-link'
+                  >
                     learn more about these restrictions
                   </a>
                   .

e2e/blocked.test.ts

@@ -0,0 +1,43 @@
+import { test, expect, type Page } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  await page.goto('/blocked');
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test.describe('Blocked Page Tests', () => {
+  test('should display the correct title', async () => {
+    await expect(page).toHaveTitle('Access Denied | freeCodeCamp.org');
+  });
+
+  test('should display the main heading', async () => {
+    const mainHeading = page.getByTestId('main-heading');
+    expect(mainHeading).not.toBeNull();
+    expect(await mainHeading.textContent()).toBe("We can't log you in.");
+  });
+
+  test('should display the blocked body text', async () => {
+    const blockedBodyText = page.getByTestId('blocked-body-text');
+    expect(blockedBodyText).not.toBeNull();
+    expect(await blockedBodyText.textContent()).toContain(
+      "United States export control and economic sanctions rules don't allow us to log in visitors from your region. Sorry about this. The situation may change in the future."
+    );
+    expect(await blockedBodyText.textContent()).toContain(
+      'If you want, you can learn more about these restrictions.'
+    );
+  });
+
+  test('should have a link to learn more about restrictions', async () => {
+    const learnMoreLink = page.getByTestId('learn-more-link');
+    expect(learnMoreLink).not.toBeNull();
+    expect(await learnMoreLink.getAttribute('href')).toBe(
+      'https://www.okta.com/blocked'
+    );
+  });
+});