test: check that JS projects can be submitted. (#43222)

* test: check that JS projects can be submitted.

* refactor: remove stale workflow comments

* refactor: remove redundant build

* chore: update Cypress version in CI

* test: create separate electron-only workflow

* test: put data-cy on correct button

* test: drop mailhog from electron CI

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* refactor: update differences comment

* test: separate toggling from logging in

* test: check solutions can be viewed on cert

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

cypress/integration/learn/challenges/projects.js

@@ -1,4 +1,10 @@
-const projects = {
+/* global cy */
+
+const selectors = {
+  editor: '.react-monaco-editor-container'
+};
+
+const pythonProjects = {
   superBlock: 'machine-learning-with-python',
   block: 'machine-learning-with-python-projects',
   challenges: [
@@ -24,10 +30,14 @@ const projects = {
     }
   ]
 };
+
 describe('project submission', () => {
+  beforeEach(() => {
+    cy.exec('npm run seed');
+  });
   // NOTE: this will fail once challenge tests are added.
   it('Should be possible to submit Python projects', () => {
-    const { superBlock, block, challenges } = projects;
+    const { superBlock, block, challenges } = pythonProjects;
     challenges.forEach(({ slug }) => {
       const url = `/learn/${superBlock}/${block}/${slug}`;
       cy.visit(url);
@@ -47,4 +57,77 @@ describe('project submission', () => {
       // cy.url().should('not.have.string', url);
     });
   });
+  it(
+    'JavaScript projects can be submitted and then viewed in /settings and on the certifications',
+    { browser: 'electron' },
+    () => {
+      cy.login();
+      cy.fixture('../../config/curriculum.json').then(curriculum => {
+        const { challenges, meta } =
+          curriculum['javascript-algorithms-and-data-structures'].blocks[
+            'javascript-algorithms-and-data-structures-projects'
+          ];
+
+        const projectTitles = meta.challengeOrder.map(([, title]) => title);
+        const projectsInOrder = projectTitles.map(projectTitle => {
+          return challenges.find(({ title }) => title === projectTitle);
+        });
+
+        // We need to wait for everything to finish loading and hydrating, so we
+        // use this text as a proxy for that.
+        const textInNextPage = projectTitles.slice(1);
+        textInNextPage.push('Claim Your Certification');
+
+        projectsInOrder.forEach(
+          ({ block, superBlock, dashedName, solutions }, i) => {
+            const url = `/learn/${superBlock}/${block}/${dashedName}`;
+            cy.visit(url);
+
+            solutions.forEach(files => {
+              files.forEach(({ contents }) => {
+                cy.get(selectors.editor).as('editor');
+                cy.get('@editor').click().focused().type('{ctrl+a}{del}');
+                // NOTE: clipboard operations are flaky in watch mode, because
+                // the document can lose focus
+                cy.window()
+                  .its('navigator.clipboard')
+                  .invoke('writeText', contents);
+                cy.document().invoke('execCommand', 'paste');
+                cy.contains('Run the Tests').click();
+                cy.contains('Submit and go to next challenge', {
+                  timeout: 8000
+                }).click();
+                cy.contains(textInNextPage[i]);
+              });
+            });
+          }
+        );
+
+        cy.visit('/settings');
+
+        projectTitles.forEach(title => {
+          cy.get(`[data-cy="${title}"]`).click();
+          // TODO: if we write a test to check that the solution is visible
+          // before reloading, we should include that here.
+          cy.contains('Solution for');
+          cy.contains('Close').click();
+        });
+
+        // Claim and view solutions on certification page
+
+        cy.toggleAll();
+        cy.visit('/learn/javascript-algorithms-and-data-structures');
+        cy.contains('Claim Certification').click();
+        cy.contains('Show Certification').click();
+
+        projectTitles.forEach(title => {
+          cy.get(`[data-cy="${title} solution"]`).click();
+          // TODO: if we write a test to check that the solution is visible
+          // before reloading, we should include that here.
+          cy.contains('Solution for');
+          cy.contains('Close').click();
+        });
+      });
+    }
+  );
 });

cypress/integration/learn/responsive-web-design/claim-cert-from-learn.js

@@ -49,6 +49,7 @@ describe('Responsive Web Design Superblock', () => {
   });
   describe('After submitting all 5 projects', () => {
     before(() => {
+      cy.login();
       cy.toggleAll();
       const { superBlock, block, challenges } = projects;
       challenges.forEach(({ slug, solution }) => {

cypress/plugins/index.js

@@ -11,7 +11,14 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 /* eslint-disable no-unused-vars */
+
+const { execSync } = require('child_process');
+const { existsSync } = require('fs');
+
 module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+  on('before:run', () => {
+    if (!existsSync('../../config/curriculum.json')) {
+      execSync('npm run build:curriculum');
+    }
+  });
 };

cypress/support/commands.js

@@ -45,7 +45,6 @@ Cypress.Commands.add('login', () => {
 });
 
 Cypress.Commands.add('toggleAll', () => {
-  cy.login();
   cy.visit('/settings');
   // cy.get('input[name="isLocked"]').click();
   // cy.get('input[name="name"]').click();