From d2ab338c35d03cbf3e5533b430971c81e962ee71 Mon Sep 17 00:00:00 2001
From: HARSH ANAND <94885893+anand-harsh@users.noreply.github.com>
Date: Sat, 14 Oct 2023 02:47:55 +0530
Subject: [PATCH] test(e2e,playwright): show.tsx (#51947)

---
 client/src/templates/Challenges/odin/show.tsx |  2 ++
 e2e/show.spec.ts                              | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 e2e/show.spec.ts

diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx
index 6670fcbef6c..b096d6fdf77 100644
--- a/client/src/templates/Challenges/odin/show.tsx
+++ b/client/src/templates/Challenges/odin/show.tsx
@@ -353,6 +353,7 @@ class ShowOdin extends Component<ShowOdinProps, ShowOdinState> {
                   block={true}
                   bsSize='large'
                   bsStyle='primary'
+                  data-playwright-test-label='check-answer-button'
                   onClick={() =>
                     this.handleSubmit(
                       solution,
@@ -368,6 +369,7 @@ 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')}
diff --git a/e2e/show.spec.ts b/e2e/show.spec.ts
new file mode 100644
index 00000000000..d1e75835ba9
--- /dev/null
+++ b/e2e/show.spec.ts
@@ -0,0 +1,33 @@
+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'];
+
+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('the page should render with correct title', async ({ page }) => {
+  await expect(page).toHaveTitle(
+    'Write Your First Code Using C# - Write Your First C# Code | Learn | freeCodeCamp.org'
+  );
+});
+
+test('correct check answer button', async ({ page }) => {
+  const checkAnswer = page.getByTestId('check-answer-button');
+  await expect(checkAnswer).toBeVisible();
+  await expect(checkAnswer).toContainText(checkAnswerButton);
+});
+
+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);
+});