refactor: test output -> arrays (#39178)

cypress/integration/learn/challenges/output.js

@@ -0,0 +1,61 @@
+/* global cy */
+
+const selectors = {
+  defaultOutput: '.output-text',
+  hotkeys: '.default-layout > div',
+  runTestsButton: 'button:contains("Run the Tests")'
+};
+
+const locations = {
+  index:
+    '/learn/responsive-web-design/basic-html-and-html5/' +
+    'say-hello-to-html-elements'
+};
+
+const defaultOutput = `
+/**
+* Your test output will go here.
+*/`;
+
+const runningOutput = '// running tests';
+const finishedOutput = '// tests completed';
+
+describe('Classic challenge', function() {
+  it('renders', () => {
+    cy.visit(locations.index);
+
+    cy.title().should(
+      'eq',
+      'Learn Basic HTML and HTML5: Say Hello to HTML Elements |' +
+        ' freeCodeCamp.org'
+    );
+  });
+
+  it('renders the default output text', () => {
+    cy.visit(locations.index);
+    cy.get(selectors.defaultOutput).contains(defaultOutput);
+  });
+
+  it('shows test output when the tests are run', () => {
+    cy.visit(locations.index);
+    cy.get(selectors.runTestsButton)
+      .click()
+      .then(() => {
+        cy.get(selectors.defaultOutput)
+          .contains(runningOutput)
+          .contains(finishedOutput);
+      });
+  });
+
+  it('shows test output when the tests are triggered by the keyboard', () => {
+    cy.visit(locations.index);
+    cy.get(selectors.hotkeys)
+      .focus()
+      .type('{ctrl}{enter}')
+      .then(() => {
+        cy.get(selectors.defaultOutput)
+          .contains(runningOutput)
+          .contains(finishedOutput);
+      });
+  });
+});