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>

.github/workflows/cypress-electron.yml

@@ -0,0 +1,83 @@
+# Mirrors the Cypress workflow with the following changes:
+# - Cypress run has a spec
+# - We create the stats.json file here since the workflow only runs once.
+# - Mailhog is missing since none of the tests use it.
+name: Cypress Electron
+on:
+  push:
+    branches-ignore:
+      - 'renovate/**'
+  pull_request:
+
+jobs:
+  cypress-run:
+    name: Test
+    runs-on: ubuntu-18.04
+    strategy:
+      matrix:
+        browsers: [electron]
+        node-version: [14.x]
+    services:
+      mongodb:
+        image: mongo:3.6.19
+        ports:
+          - 27017:27017
+
+    steps:
+      # We use .npmrc to set the default version to 0, and prevents download during development.
+      # This installs it specifically in the CI runs.
+      - name: Set Action Environment Variables
+        run: |
+          echo "CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}" >> $GITHUB_ENV
+          echo "GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}" >> $GITHUB_ENV
+          echo "CYPRESS_INSTALL_BINARY=7.7.0" >> $GITHUB_ENV
+
+      - name: Checkout Source Files
+        uses: actions/checkout@v2
+
+      - name: Checkout client config
+        uses: actions/checkout@v2
+        with:
+          repository: freeCodeCamp/client-config
+          path: client-config
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Set freeCodeCamp Environment Variables
+        run: cp sample.env .env
+
+      - name: Install Dependencies
+        run: |
+          npm ci
+          npm run ensure-env
+
+      - name: Move serve.json to client
+        run: |
+          mkdir -p client/public
+          cp client-config/serve.json client/public/serve.json
+
+      - name: Seed Database
+        run: npm run seed
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          record: ${{ env.CYPRESS_RECORD_KEY != 0 }}
+          build: npm run build
+          start: npm run start-ci
+          wait-on: http://localhost:8000
+          wait-on-timeout: 1200
+          config: baseUrl=http://localhost:8000
+          browser: ${{ matrix.browsers }}
+          spec: 'cypress/integration/learn/challenges/projects.js'
+          headless: true
+
+      - name: Upload Webpack stats
+        uses: actions/upload-artifact@v2
+        with:
+          name: webpack-stats
+          path: client/public/stats.json

.github/workflows/cypress.yml

@@ -31,7 +31,7 @@ jobs:
         run: |
           echo "CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}" >> $GITHUB_ENV
           echo "GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}" >> $GITHUB_ENV
-          echo "CYPRESS_INSTALL_BINARY=7.1.0" >> $GITHUB_ENV
+          echo "CYPRESS_INSTALL_BINARY=7.7.0" >> $GITHUB_ENV
 
       - name: Checkout Source Files
         uses: actions/checkout@v2
@@ -55,7 +55,6 @@ jobs:
         run: |
           npm ci
           npm run ensure-env
-          npm run build:curriculum
 
       - name: Move serve.json to client
         run: |
@@ -70,19 +69,9 @@ jobs:
         with:
           record: ${{ env.CYPRESS_RECORD_KEY != 0 }}
           build: npm run build
-          # this should mirror the production build, but for now we're using gatsby
-          # serve instead (the npm script serve:client needs updating!)
           start: npm run start-ci
           wait-on: http://localhost:8000
-          # the site builds in about 8 minutes, so there is currently 12 minutes of time
-          # left for testing.
           wait-on-timeout: 1200
           config: baseUrl=http://localhost:8000
           browser: ${{ matrix.browsers }}
           headless: true
-
-      - name: Upload Webpack stats
-        uses: actions/upload-artifact@v2
-        with:
-          name: webpack-stats
-          path: client/public/stats.json

client/src/client-only-routes/show-project-links.tsx

@@ -101,7 +101,11 @@ const ShowProjectLinks = (props: IShowProjectLinksProps): JSX.Element => {
       );
     }
     return (
-      <button className='project-link-button-override' onClick={onClickHandler}>
+      <button
+        className='project-link-button-override'
+        data-cy={`${projectTitle} solution`}
+        onClick={onClickHandler}
+      >
         {t('certification.project.solution')}
       </button>
     );

client/src/components/settings/Certification.js

@@ -183,6 +183,7 @@ export class CertificationSettings extends Component {
           block={true}
           bsStyle='primary'
           className='btn-invert'
+          data-cy={projectTitle}
           id={`btn-for-${projectId}`}
           onClick={onClickHandler}
         >

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
+  on('before:run', () => {
-  // `config` is the resolved Cypress config
+    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();