fix(ui): display checkmark on completed C# challenges (#52504)

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

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

@@ -23,6 +23,7 @@ import CompletionModal from '../components/completion-modal';
 import HelpModal from '../components/help-modal';
 import Scene from '../components/scene/scene';
 import PrismFormatted from '../components/prism-formatted';
+import ChallengeTitle from '../components/challenge-title';
 import {
   challengeMounted,
   updateChallengeMeta,
@@ -219,6 +220,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
             question: { text, answers, solution },
             assignments,
             audioPath,
+            translationPending,
             scene
           }
         }
@@ -228,7 +230,8 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
       pageContext: {
         challengeMeta: { nextChallengePath, prevChallengePath }
       },
-      t
+      t,
+      isChallengeCompleted
     } = this.props;
 
     const blockNameTitle = `${t(
@@ -277,7 +280,12 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
               )}
               <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                 <Spacer size='medium' />
-                <h2>{title}</h2>
+                <ChallengeTitle
+                  isCompleted={isChallengeCompleted}
+                  translationPending={translationPending}
+                >
+                  {title}
+                </ChallengeTitle>
                 <PrismFormatted className={'line-numbers'} text={description} />
                 {audioPath && (
                   <>
@@ -390,7 +398,6 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   block={true}
                   bsSize='large'
                   bsStyle='primary'
-                  data-playwright-test-label='check-answer-button'
                   onClick={() =>
                     this.handleSubmit(
                       solution,
@@ -406,7 +413,6 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   bsSize='large'
                   bsStyle='primary'
                   className='btn-invert'
-                  data-playwright-test-label='ask-for-help-button'
                   onClick={openHelpModal}
                 >
                   {t('buttons.ask-for-help')}

e2e/show.spec.ts

@@ -1,33 +1,70 @@
 import { test, expect } from '@playwright/test';
 import translations from '../client/i18n/locales/english/translations.json';
 
-const checkAnswerButton = translations.buttons['check-answer'];
-const askForHelpButton = translations.buttons['ask-for-help'];
-
+// Tests for challenges rendered by `client/src/templates/Challenges/odin/show.tsx`
+test.describe('Odin challenges', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(
       '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/write-your-first-c-sharp-code'
     );
   });
 
-test.afterEach(async ({ page }) => {
-  await page.close();
-});
+  test.describe('When the user is signed out', () => {
+    test.use({ storageState: { cookies: [], origins: [] } });
 
-test('the page should render with correct title', async ({ page }) => {
+    test('should render the content correctly', async ({ page }) => {
       await expect(page).toHaveTitle(
         'Write Your First Code Using C# - Write Your First C# Code | Learn | freeCodeCamp.org'
       );
+
+      await expect(
+        page.getByRole('heading', {
+          level: 1,
+          name: 'Write Your First C# Code'
+        })
+      ).toBeVisible();
+
+      // Checkmark doesn't show up if the user has completed the challenge but is signed out
+      await expect(
+        page.getByRole('img', { name: translations.icons.passed })
+      ).toBeHidden();
+
+      await expect(
+        page.getByRole('button', { name: translations.buttons['check-answer'] })
+      ).toBeVisible();
+
+      await expect(
+        page.getByRole('button', { name: translations.buttons['ask-for-help'] })
+      ).toBeVisible();
+    });
   });
 
-test('correct check answer button', async ({ page }) => {
-  const checkAnswer = page.getByTestId('check-answer-button');
-  await expect(checkAnswer).toBeVisible();
-  await expect(checkAnswer).toContainText(checkAnswerButton);
-});
+  test.describe('When the user is signed in', () => {
+    test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
-test('correct ask for help button', async ({ page }) => {
-  const askHelp = page.getByTestId('ask-for-help-button');
-  await expect(askHelp).toBeVisible();
-  await expect(askHelp).toContainText(askForHelpButton);
+    test('should render the content correctly', async ({ page }) => {
+      await expect(page).toHaveTitle(
+        'Write Your First Code Using C# - Write Your First C# Code | Learn | freeCodeCamp.org'
+      );
+
+      await expect(
+        page.getByRole('heading', {
+          level: 1,
+          name: 'Write Your First C# Code'
+        })
+      ).toBeVisible();
+
+      await expect(
+        page.getByRole('img', { name: translations.icons.passed })
+      ).toBeVisible();
+
+      await expect(
+        page.getByRole('button', { name: translations.buttons['check-answer'] })
+      ).toBeVisible();
+
+      await expect(
+        page.getByRole('button', { name: translations.buttons['ask-for-help'] })
+      ).toBeVisible();
+    });
+  });
 });