feat: convert output test to Playwright (#54788)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

e2e/output.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect, type Page } from '@playwright/test';
 
 import translations from '../client/i18n/locales/english/translations.json';
-import { getEditors } from './utils/editor';
+import { clearEditor, getEditors } from './utils/editor';
 
 const outputTexts = {
   default: `
@@ -53,13 +53,75 @@ const runChallengeTest = async (page: Page, isMobile: boolean) => {
   }
 };
 
-test.beforeEach(async ({ page }) => {
-  await page.goto(
-    '/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
-  );
+test.describe('For classic challenges', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
+    );
+  });
+
+  test('it renders the default output', async ({ page }) => {
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toHaveText(outputTexts.default);
+  });
+
+  test('shows test output when the tests are run', async ({
+    page,
+    isMobile,
+    browserName
+  }) => {
+    const closeButton = page.getByRole('button', { name: 'Close' });
+    await expect(page).toHaveTitle(
+      'Basic HTML and HTML5: Say Hello to HTML Elements |' + ' freeCodeCamp.org'
+    );
+
+    await clearEditor({ browserName, page });
+    await insertTextInCodeEditor({
+      page,
+      isMobile,
+      text: '<h1>Hello World</h1>'
+    });
+    await runChallengeTest(page, isMobile);
+    await closeButton.click();
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toHaveText(outputTexts.passed);
+  });
+
+  test('shows test output when the tests are triggered by the keyboard', async ({
+    page,
+    isMobile,
+    browserName
+  }) => {
+    const closeButton = page.getByRole('button', { name: 'Close' });
+    await clearEditor({ browserName, page });
+    await insertTextInCodeEditor({
+      page,
+      isMobile,
+      text: '<h1>Hello World</h1>'
+    });
+    await page.keyboard.press('Control+Enter');
+    await closeButton.click();
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toHaveText(outputTexts.passed);
+  });
 });
 
 test.describe('Challenge Output Component Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables'
+    );
+  });
+
   test('should render with default output', async ({ page, isMobile }) => {
     if (isMobile) {
       await page.getByRole('tab', { name: 'Console' }).click();
@@ -125,3 +187,60 @@ test.describe('Challenge Output Component Tests', () => {
     ).toHaveText(outputTexts.passed);
   });
 });
+
+test.describe('Jquery challenges', () => {
+  test('Jquery challenge should render with default output', async ({
+    page
+  }) => {
+    await page.goto(
+      '/learn/front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery'
+    );
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toHaveText(outputTexts.default);
+
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).not.toHaveText('ReferenceError: $ is not defined');
+  });
+});
+
+test.describe('Custom output for Set and Map', () => {
+  test('Custom output for JavaScript Objects Set and Map', async ({
+    page,
+    isMobile,
+    browserName
+  }) => {
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code'
+    );
+    await insertTextInCodeEditor({
+      page,
+      isMobile,
+      text: 'const set = new Set(); set.add(1); set.add("set"); set.add(10); console.log(set);'
+    });
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toContainText('Set(3) {1, set, 10}');
+
+    await clearEditor({ browserName, page });
+
+    await insertTextInCodeEditor({
+      page,
+      isMobile,
+      text: 'const map = new Map(); map.set(1, "one"); map.set("two", 2); console.log(map);'
+    });
+
+    await expect(
+      page.getByRole('region', {
+        name: translations.learn['editor-tabs'].console
+      })
+    ).toContainText('Map(2) {1 => one, two => 2}');
+  });
+});