feat: convert output test to Playwright (#54788)

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

cypress/e2e/default/learn/challenges/output.ts

@@ -1,108 +0,0 @@
-import { selectors } from '../../../../support/selectors';
-
-const outputSelectors = {
-  editor: 'div.monaco-editor',
-  hotkeys: '.default-layout > div',
-  runTestsButton: 'button:contains("Run the Tests")'
-};
-
-const outputLocations = {
-  index:
-    '/learn/responsive-web-design/basic-html-and-html5/' +
-    'say-hello-to-html-elements',
-  jQuery:
-    '/learn/front-end-development-libraries/jquery/' +
-    'target-html-elements-with-selectors-using-jquery',
-  js:
-    '/learn/javascript-algorithms-and-data-structures/basic-javascript/' +
-    'comment-your-javascript-code'
-};
-
-const defaultOutput = `
-/**
-* Your test output will go here
-*/`;
-
-const runningOutput = '// running tests';
-const finishedOutput = '// tests completed';
-
-describe('Classic challenge', function () {
-  beforeEach(() => {
-    cy.visit(outputLocations.index);
-  });
-
-  it('renders the default output text', () => {
-    cy.title().should(
-      'eq',
-      'Basic HTML and HTML5: Say Hello to HTML Elements |' + ' freeCodeCamp.org'
-    );
-    cy.get(selectors.dataCy.outputText).contains(defaultOutput);
-  });
-
-  it('shows test output when the tests are run', () => {
-    // first wait for the editor to load
-    cy.get(outputSelectors.editor, { timeout: 15000 });
-    cy.get(outputSelectors.runTestsButton).click();
-
-    cy.get(selectors.dataCy.outputText).contains(runningOutput);
-    cy.get(selectors.dataCy.outputText).contains(finishedOutput);
-  });
-
-  it('shows test output when the tests are triggered by the keyboard', () => {
-    focusEditor().type('{ctrl}{enter}');
-
-    cy.get(selectors.dataCy.outputText).contains(runningOutput);
-    cy.get(selectors.dataCy.outputText).contains(finishedOutput);
-  });
-});
-
-describe('jQuery challenge', function () {
-  it('renders the default output text', () => {
-    cy.visit(outputLocations.jQuery);
-    cy.title().should(
-      'eq',
-      'jQuery: Target HTML Elements with Selectors Using jQuery | freeCodeCamp.org'
-    );
-    cy.get(selectors.dataCy.outputText).contains(defaultOutput);
-
-    cy.wait(5000);
-    cy.get(selectors.dataCy.outputText).should(
-      'not.contain',
-      'ReferenceError: $ is not defined'
-    );
-  });
-});
-
-describe('Custom output for JavaScript objects', function () {
-  it('Set and map objects', () => {
-    cy.visit(outputLocations.js);
-
-    focusEditor().type('{ctrl}a').clear();
-    focusEditor().type(
-      'const set = new Set();{enter}set.add(1);{enter}set.add("set");{enter}set.add(10);{enter}console.log(set);'
-    );
-    cy.get(selectors.dataCy.outputText).should(
-      'contain',
-      'Set(3) {1, set, 10}'
-    );
-
-    focusEditor().type('{ctrl}a').clear();
-    focusEditor().type(
-      'const map = new Map();{enter}map.set("first", 1);{enter}map.set("second", 2);{enter}map.set("other", "map");{enter}console.log(map);'
-    );
-    cy.get(selectors.dataCy.outputText).should(
-      'contain',
-      'Map(3) {first => 1, second => 2, other => map})'
-    );
-  });
-});
-
-function focusEditor() {
-  return cy
-    .get(outputSelectors.editor, {
-      timeout: 15000 // first wait for the editor to load
-    })
-    .first()
-    .click()
-    .focused();
-}

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}');
+  });
+});