test(e2e,playwright): output.tsx (#52007)

2026-05-28 18:26:54 +00:00 · 2023-10-19 02:25:20 +05:30
parent aa6b149aa5
commit a63f7d9e85
1 changed files with 83 additions and 0 deletions
@@ -0,0 +1,83 @@
+import { test, expect, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const outputTexts = {
+  default: `
+  /**
+  * Your test output will go here
+  */`,
+  error: `SyntaxError: unknown: Unexpected token (1:3)
+
+  > 1 | var
+      |    ^`,
+  final: `// running tests
+  You should declare myName with the var keyword, ending with a semicolon
+  // tests completed`
+};
+
+const insertTextInCodeEditor = async (page: Page, isMobile: boolean) => {
+  if (isMobile) {
+    await page
+      .getByRole('tab', { name: translations.learn['editor-tabs'].code })
+      .click();
+  }
+  await page.getByLabel('Editor content').fill('var');
+  if (isMobile) {
+    await page
+      .getByRole('tab', { name: translations.learn['editor-tabs'].console })
+      .click();
+  }
+};
+
+const runChallengeTest = async (page: Page, isMobile: boolean) => {
+  if (isMobile) {
+    await page.getByRole('tab', { name: 'Code' }).click();
+    await page.getByText('Run').click();
+    await page.getByRole('tab', { name: 'Console' }).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/declare-javascript-variables'
+  );
+});
+
+test.describe('Challenge Output Component Tests', () => {
+  test('should render with default output', async ({ page, isMobile }) => {
+    if (isMobile) {
+      await page.getByRole('tab', { name: 'Console' }).click();
+    }
+    const outputConsole = page.getByRole('region', {
+      name: translations.learn['editor-tabs'].console
+    });
+    await expect(outputConsole).toBeVisible();
+    await expect(outputConsole).toHaveText(outputTexts.default);
+  });
+
+  test('should contain error output when var is entered in editor', async ({
+    page,
+    isMobile
+  }) => {
+    await insertTextInCodeEditor(page, isMobile);
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toHaveText(outputTexts.error);
+  });
+
+  test('should contain final output after test run', async ({
+    page,
+    isMobile
+  }) => {
+    await runChallengeTest(page, isMobile);
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toHaveText(outputTexts.final);
+  });
+});