feat: add cypress for e2e tests

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/landing.js

@@ -0,0 +1,16 @@
+/* global cy */
+const selectors = {
+  heading: "[data-test-label='landing-header']",
+  callToAction: "[data-test-label='landing-big-cta']"
+};
+
+describe('Landing page', function() {
+  it('renders', function() {
+    cy.visit('/');
+
+    cy.title().should('eq', 'Learn to code at home | freeCodeCamp.org');
+
+    cy.contains(selectors.heading, 'Welcome to freeCodeCamp.org');
+    cy.contains(selectors.callToAction, "Sign in and get started (it's free)");
+  });
+});

cypress/integration/learn/index.js

@@ -0,0 +1,46 @@
+/* global cy expect */
+
+const selectors = {
+  challengeMap: "[data-test-label='learn-curriculum-map']"
+};
+
+const locations = {
+  index: '/learn'
+};
+
+const superBlockNames = [
+  'Responsive Web Design',
+  'JavaScript Algorithms and Data Structures',
+  'Front End Libraries',
+  'Data Visualization',
+  'APIs and Microservices',
+  'Information Security and Quality Assurance',
+  'Coding Interview Prep'
+];
+
+describe('Learn Landing page', function() {
+  it('renders', () => {
+    cy.visit(locations.index);
+
+    cy.title().should('eq', 'Learn to code at home | freeCodeCamp.org');
+  });
+
+  it('Has the correct heading for an unauthenticated User', () => {
+    cy.visit(locations.index);
+
+    cy.contains('h1', 'Welcome to freeCodeCamp.org');
+  });
+
+  it('renders a curriuculum map', () => {
+    cy.document().then(document => {
+      const superBlocks = document.querySelectorAll(
+        `${selectors.challengeMap} > ul > li`
+      );
+      expect(superBlocks).to.have.length(7);
+
+      superBlocks.forEach((superBlock, idx) => {
+        expect(superBlock.innerText).to.have.string(superBlockNames[idx]);
+      });
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// 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 */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/run-e2e.sh

@@ -0,0 +1,83 @@
+#!/bin/bash
+
+gastby_pid=''
+api_pid=''
+
+application_host='http://localhost:8000'
+cypress_cmd='cypress:open'
+
+finally() {
+  echo "End to end bash script exiting gracefully"
+
+  local exit_code="${1:-0}"
+  # This is the clean up.
+  # Find any node processes running from within the client dir
+  local hanging_client_processes=$(ps aux | grep -v grep | grep client/node_modules | awk '{print $2}')
+  local hanging_api_processes=$(ps aux | grep -v grep | grep api-server/node_modules | awk '{print $2}')
+  local hanging_server_processes=$(ps aux | grep -v grep | grep 'node production-start.js' | awk '{print $2}')
+
+  # Send kill signal to the processes
+  if [ ${#hanging_api_processes} -gt "0" ];  then
+    kill -9 $hanging_api_processes &>/dev/null
+  fi
+  if [ ${#hanging_client_processes} -gt "0" ]; then
+    kill -9 $hanging_client_processes &>/dev/null
+  fi
+  if [ ${#hanging_server_processes} -gt "0" ]; then
+    kill -9 $hanging_server_processes &>/dev/null
+  fi
+
+  kill -9 $gastby_pid $api_pid &>/dev/null
+
+  echo "Finally exiting with a status code of ${exit_code}"
+  exit "${exit_code}"
+}
+
+trap finally SIGINT
+
+run_development_application() {
+  cd client
+  npm run stand-alone &
+  gastby_pid=$!
+
+
+  cd ../api-server
+  npm start &
+  api_pid=$!
+
+  cypress_cmd='cypress:run'
+  cd ../
+}
+
+run_production_application() {
+  cd client
+  npm run build
+  npm run serve &
+  gastby_pid=$!
+
+  cd ../
+
+  application_host='http://localhost:9000/'
+  cypress_cmd='cypress:run'
+}
+
+if [ "$NODE_ENV" = "production" ]; then
+  run_production_application
+else
+  run_development_application
+fi
+
+while true; do
+  curl $application_host &>/dev/null
+  curl_exit_code=$?
+
+  if [ $curl_exit_code = "0" ]; then
+    break
+  else
+    sleep 10
+  fi
+done
+
+npm run $cypress_cmd
+
+finally $?

cypress/support/commands.js

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => {});
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add(
+//   'drag',
+//   { prevSubject: 'element' },
+//   (subject, options) => {}
+// );
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add(
+//   'dismiss',
+//   { prevSubject: 'optional' },
+//   (subject, options) => {}
+// );
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => {});

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')