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: '

Hello World

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

Hello World

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