test(e2e,playwright): test-suite.tsx (#51986)

Co-authored-by: Rohit Rai <rohitraijob@gmail.com>

client/src/templates/Challenges/components/test-suite.tsx

@@ -32,7 +32,12 @@ function TestSuite({ tests }: TestSuiteProps): JSX.Element {
       <ul className='challenge-test-suite'>
         {testSuiteTests.map(({ err, pass = false, text = '' }, index) => {
           const isInitial = !pass && !err;
-          const statusIcon = pass && !err ? <GreenPass /> : <Fail />;
+          const statusIcon =
+            pass && !err ? (
+              <GreenPass data-playwright-test-label='test-pass-icon' />
+            ) : (
+              <Fail />
+            );
           const initialText = t('icons.waiting');
           const statusText =
             pass && !err ? t('icons.passed') : t('icons.failed');
@@ -40,7 +45,11 @@ function TestSuite({ tests }: TestSuiteProps): JSX.Element {
           // status message and test text as one block.
           text = text.replace(/^<p>|<\/p>$/g, '');
           return (
-            <li className='test-result' key={text.slice(-6) + String(index)}>
+            <li
+              className='test-result'
+              data-playwright-test-label='test-result'
+              key={text.slice(-6) + String(index)}
+            >
               <div className='test-status-icon' aria-hidden='true'>
                 {isInitial ? <Initial /> : statusIcon}
               </div>

e2e/test-suite.spec.ts

@@ -0,0 +1,44 @@
+import { test, expect, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const runChallengeTest = async (page: Page, isMobile: boolean) => {
+  if (isMobile) {
+    await page.getByText('Run').click();
+  } else {
+    await page.getByText('Run the Tests (Ctrl + Enter)').click();
+  }
+};
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another'
+  );
+});
+
+test.describe('Challenge Test Suite Component Tests', () => {
+  test('should render correctly', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', {
+        name: translations.learn['editor-tabs'].tests
+      })
+    ).toBeVisible();
+    await expect(page.getByTestId('test-result')).toHaveCount(3);
+    await expect(page.getByText(translations.icons.initial)).toHaveCount(3);
+    await expect(
+      page.getByText('You should not change code above the specified comment.')
+    ).toBeVisible();
+    await expect(page.getByText('b should have a value of 7.')).toBeVisible();
+    await expect(
+      page.getByText('a should be assigned to b with =.')
+    ).toBeVisible();
+  });
+
+  test('should render one pass and two fail icon', async ({
+    page,
+    isMobile
+  }) => {
+    await runChallengeTest(page, isMobile);
+    await expect(page.getByTestId('test-pass-icon')).toHaveCount(1);
+    await expect(page.getByText(translations.icons.fail)).toHaveCount(2);
+  });
+});