test(e2e): exam show tests (#51840)

client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
     className="challenge-title"
   >
     <h1
+      data-playwright-test-label="challenge-title"
       id="content-start"
     >
       title text

client/src/templates/Challenges/components/challenge-title.tsx

@@ -29,7 +29,9 @@ function ChallengeTitle({
         </>
       )}
       <div className='challenge-title'>
-        <h1 id='content-start'>{children}</h1>
+        <h1 id='content-start' data-playwright-test-label='challenge-title'>
+          {children}
+        </h1>
         {isCompleted && <GreenPass />}
       </div>
     </div>

client/src/templates/Challenges/exam/show.tsx

@@ -387,9 +387,11 @@ class ShowExam extends Component<ShowExamProps, ShowExamState> {
             ) : (
               <div className='exam-wrapper'>
                 <div className='exam-header'>
-                  <div>{title}</div>
+                  <div data-playwright-test-label='exam-show-title'>
+                    {title}
+                  </div>
                   <span>|</span>
-                  <div>
+                  <div data-playwright-test-label='exam-show-question-time'>
                     {t('learn.exam.time', {
                       t: formatSecondsToTime(examTimeInSeconds)
                     })}

e2e/exam-show-non-qualified.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+import intro from '../client/i18n/locales/english/intro.json';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const examUrl =
+  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(examUrl);
+});
+
+test.describe('Exam Show E2E Test Suite for non-qualified user', () => {
+  test('The page renders with correct title', async ({ page }) => {
+    await expect(page).toHaveTitle(
+      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
+    );
+  });
+
+  test('The page has correct header', async ({ page }) => {
+    const header = page.getByTestId('challenge-title');
+    await expect(header).toBeVisible();
+    await expect(header).toContainText(
+      intro['foundational-c-sharp-with-microsoft'].blocks[
+        'foundational-c-sharp-with-microsoft-certification-exam'
+      ].title
+    );
+  });
+
+  test('The page has an alert informing the user of their eligibility', async ({
+    page
+  }) => {
+    await expect(
+      page.getByText(translations.learn.exam.qualified)
+    ).not.toBeVisible();
+    await expect(
+      page.getByText(translations.learn.exam['not-qualified'])
+    ).toBeVisible();
+  });
+
+  test('Verifies the Correct Rendering of the Exam show non-qualified', async ({
+    page
+  }) => {
+    const startExam = page.getByRole('button', {
+      name: translations.buttons['click-start-exam']
+    });
+    await startExam.isVisible();
+    await startExam.isDisabled();
+    await expect(
+      page.getByText(
+        'Pass this exam to earn your Foundational C# with Microsoft Certification. Before starting the exam, please review the following guidelines:'
+      )
+    ).toBeVisible();
+  });
+});

e2e/exam-show-qualified.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test';
+import intro from '../client/i18n/locales/english/intro.json';
+import translations from '../client/i18n/locales/english/translations.json';
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+const examUrl =
+  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(examUrl);
+});
+
+test.describe('Exam Show E2E Test Suite for qualified user', () => {
+  test('The page renders with correct title', async ({ page }) => {
+    await expect(page).toHaveTitle(
+      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
+    );
+  });
+
+  test('The page has correct header', async ({ page }) => {
+    const header = page.getByTestId('challenge-title');
+    await expect(header).toBeVisible();
+    await expect(header).toContainText(
+      intro['foundational-c-sharp-with-microsoft'].blocks[
+        'foundational-c-sharp-with-microsoft-certification-exam'
+      ].title
+    );
+  });
+
+  test('The page has qualified for exam alert ', async ({ page }) => {
+    await expect(
+      page.getByText(translations.learn.exam['not-qualified'])
+    ).not.toBeVisible();
+    await expect(
+      page.getByText(translations.learn.exam.qualified)
+    ).toBeVisible();
+  });
+
+  test('Verifies the Correct Rendering of the Exam show', async ({ page }) => {
+    const startExam = page.getByRole('button', {
+      name: translations.buttons['click-start-exam']
+    });
+    await startExam.isVisible();
+    await startExam.isEnabled();
+    await expect(
+      page.getByText(
+        'Pass this exam to earn your Foundational C# with Microsoft Certification. Before starting the exam, please review the following guidelines:'
+      )
+    ).toBeVisible();
+  });
+
+  test('Exam Show When the User clicks on Start exam button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', {
+        name: translations.buttons['click-start-exam']
+      })
+      .click();
+    await expect(page).toHaveURL(examUrl);
+  });
+});

e2e/exam-started-show.spec.ts

@@ -0,0 +1,98 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+import intro from '../client/i18n/locales/english/intro.json';
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+const examUrl =
+  '/learn/foundational-c-sharp-with-microsoft/foundational-c-sharp-with-microsoft-certification-exam/foundational-c-sharp-with-microsoft-certification-exam';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(examUrl);
+  await page
+    .getByRole('button', {
+      name: translations.buttons['click-start-exam']
+    })
+    .click();
+});
+
+test.describe('Exam Show E2E Test Suite for started exam', () => {
+  test('The page renders with correct title', async ({ page }) => {
+    await expect(page).toHaveTitle(
+      'Foundational C# with Microsoft Certification Exam: Foundational C# with Microsoft Certification Exam | freeCodeCamp.org'
+    );
+  });
+
+  test('The page has correct navigation direct flow', async ({ page }) => {
+    const QUESTION_COUNT = 5;
+    const headerTitle = page.getByTestId('exam-show-title');
+    const prevQuestionBtn = page.getByRole('button', {
+      name: translations.buttons['previous-question']
+    });
+    const exitButton = page.getByRole('button', {
+      name: translations.buttons['exit-exam']
+    });
+    const nextBtn = page.getByRole('button', {
+      name: translations.buttons['next-question']
+    });
+    const finishExamBtn = page.getByRole('button', {
+      name: translations.buttons['finish-exam']
+    });
+    for (let i = 0; i < QUESTION_COUNT; i++) {
+      await expect(headerTitle).toBeVisible();
+      await expect(headerTitle).toContainText(
+        intro['foundational-c-sharp-with-microsoft'].blocks[
+          'foundational-c-sharp-with-microsoft-certification-exam'
+        ].title
+      );
+
+      await expect(page.getByTestId('exam-show-question-time')).toContainText(
+        translations.learn.exam.time.split(':')[0]
+      );
+      await expect(
+        page.getByText(`Question ${i + 1} of ${QUESTION_COUNT}`)
+      ).toBeVisible();
+      await expect(prevQuestionBtn).toBeVisible();
+      if (i != 0) {
+        await expect(prevQuestionBtn).toBeEnabled();
+      } else {
+        await expect(prevQuestionBtn).not.toBeEnabled();
+      }
+      await page.getByRole('radio').first().check({ force: true });
+      await expect(exitButton).toBeVisible();
+      await expect(exitButton).toBeEnabled();
+      if (i < QUESTION_COUNT - 1) {
+        await expect(finishExamBtn).not.toBeVisible();
+        await expect(nextBtn).toBeVisible();
+        await nextBtn.click();
+      } else {
+        await expect(finishExamBtn).toBeEnabled();
+        await expect(finishExamBtn).toBeVisible();
+        await expect(nextBtn).not.toBeVisible();
+      }
+    }
+  });
+
+  test('The page has correct navigation back flow', async ({ page }) => {
+    const headerTitle = page.getByTestId('exam-show-title');
+    await expect(headerTitle).toBeVisible();
+    await expect(headerTitle).toContainText(
+      intro['foundational-c-sharp-with-microsoft'].blocks[
+        'foundational-c-sharp-with-microsoft-certification-exam'
+      ].title
+    );
+    await expect(page.getByTestId('exam-show-question-time')).toContainText(
+      translations.learn.exam.time.split(':')[0]
+    );
+
+    await page.getByRole('radio').first().check({ force: true });
+    await page
+      .getByRole('button', { name: translations.buttons['next-question'] })
+      .click();
+    await expect(page.getByText('Question 2 of 5')).toBeVisible();
+    await page
+      .getByRole('button', { name: translations.buttons['previous-question'] })
+      .click();
+    await expect(page.getByText('Question 1 of 5')).toBeVisible();
+  });
+});