From 1c77a3bb04e9da36ce6d777da8399b6ff09414cb Mon Sep 17 00:00:00 2001
From: Ann-Cherian <121712751+Ann-Cherian@users.noreply.github.com>
Date: Fri, 13 Oct 2023 13:21:00 +0530
Subject: [PATCH] test(e2e,playwright): challenge-description.tsx (#51914)

---
 .../components/challenge-description.tsx      |  5 +++-
 e2e/challenge-description.spec.ts             | 23 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 e2e/challenge-description.spec.ts

diff --git a/client/src/templates/Challenges/components/challenge-description.tsx b/client/src/templates/Challenges/components/challenge-description.tsx
index 1c7dc638468..59392169380 100644
--- a/client/src/templates/Challenges/components/challenge-description.tsx
+++ b/client/src/templates/Challenges/components/challenge-description.tsx
@@ -15,7 +15,10 @@ function ChallengeDescription(challenge: Challenge): JSX.Element {
   const bClass = challenge.block ? challenge.block : '';
 
   return (
-    <div className={`challenge-instructions ${sbClass} ${bClass}`}>
+    <div
+      className={`challenge-instructions ${sbClass} ${bClass}`}
+      data-playwright-test-label='challenge-description'
+    >
       {challenge.description && <PrismFormatted text={challenge.description} />}
       {challenge.instructions && (
         <>
diff --git a/e2e/challenge-description.spec.ts b/e2e/challenge-description.spec.ts
new file mode 100644
index 00000000000..ecf1ba96aa6
--- /dev/null
+++ b/e2e/challenge-description.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/foundational-c-sharp-with-microsoft/write-your-first-code-using-c-sharp/trophy-write-your-first-code-using-c-sharp'
+  );
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test.describe('Challenge Description Component Tests', () => {
+  test('should be visible', async ({ page }) => {
+    const challengeDescription = page.getByTestId('challenge-description');
+    await expect(challengeDescription).toBeVisible();
+  });
+
+  test('should contain text', async ({ page }) => {
+    const challengeDescription = page.getByTestId('challenge-description');
+    await expect(challengeDescription).toHaveText(/ */);
+  });
+});