diff --git a/cypress/e2e/default/learn/challenges/output.ts b/cypress/e2e/default/learn/challenges/output.ts deleted file mode 100644 index 24439884dee..00000000000 --- a/cypress/e2e/default/learn/challenges/output.ts +++ /dev/null @@ -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(); -} diff --git a/e2e/output.spec.ts b/e2e/output.spec.ts index 9d43ef29514..ca475307f7f 100644 --- a/e2e/output.spec.ts +++ b/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: '