Setup cypress for local development and circle ci (#276)

This commits including to setup cypress for

1 Run cypress e2e in local development environment
2 Run cypress e2e along with the circle pipeline
3 Generate coverage report for either html format and text format
4 One hello world e2e testing is included as well

Author: LieutenantRoger

.circleci/config.yml

@@ -147,6 +147,35 @@ jobs:
       APPNAME: "platform-ui-mvp"
     steps: *deploy_steps
 
+  # Test job for the cases when we don not need deployment.
+  e2e-test:
+    docker:
+      - image: cypress/browsers:node16.14.2-slim-chrome100-ff99-edge
+    steps:
+      - checkout
+      - restore_cache:
+          key: test-node-modules-{{ checksum "yarn.lock" }}
+      - run:
+          name: Config Git
+          command: git config --global url."https://git@".insteadOf git://
+      - run:
+          name: Install Dependencies
+          command: yarn install
+          no_output_timeout: 20m
+      - run:
+          name: Install Cypress Binary
+          command: yarn cypress install
+      - run:
+          name: Build the application
+          command: yarn build
+          no_output_timeout: 20m
+      - save_cache:
+          key: test-node-modules-{{ checksum "yarn.lock" }}
+          paths:
+            - node_modules
+            - /root/.cache/Cypress
+      - run: yarn cy:ci
+
 workflows:
   version: 2
   build:
@@ -172,6 +201,9 @@ workflows:
               ignore:
                 - master
 
+      - e2e-test:
+          context : org-global
+
       - build-prod:
           context : org-global
           filters:
@@ -183,6 +215,7 @@ workflows:
           context : org-global
           requires:
             - build-dev
+            - e2e-test
           filters: 
             branches:
               only:

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+.nyc_output
 
 # production
 /build

babel.config.js

@@ -50,6 +50,7 @@ module.exports = function (api) {
           ],
         ],
         plugins: [
+          "istanbul",
           [
             "module-resolver",
             {

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  fixturesFolder: false,
+  video: false,
+  screenshotOnRunFailure: false,
+  defaultCommandTimeout: 10000,
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: "cypress/e2e/**/*.spec.{js,jsx,ts,tsx}",
+    supportFile: "cypress/support/e2e.ts",
+    viewportHeight: 1000,
+    viewportWidth: 1280,
+    setupNodeEvents(on, config) {
+      require('@cypress/code-coverage/task')(on, config)
+      return config;
+    },
+  },
+})

cypress/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

cypress/e2e/home/home.spec.ts

@@ -0,0 +1,6 @@
+describe('Landing Page', () => {
+  beforeEach(() => cy.visit('/'))
+  it('loads landing page should be successfully', () => {
+    cy.get('[data-cy="root"]').should('be.visible')
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,8 @@
+/// <reference types="cypress" />
+
+Cypress.on('uncaught:exception', () => {
+  // returning false here prevents Cypress from failing the test
+  return false
+})
+
+export {}

cypress/support/e2e.ts

@@ -0,0 +1,2 @@
+import '@cypress/code-coverage/support'
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["./**/*.ts"],
+  "exclude": [],
+  "compilerOptions": {
+    "types": ["cypress"],
+    "lib": ["es2015", "dom"],
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true
+  }
+}

package.json

@@ -3,6 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "scripts": {
+        "dev": "yarn react-app-rewired start",
         "start": "sh start-ssl.sh",
         "start:bsouza": "sudo sh start-ssl-bsouza.sh",
         "build": "yarn react-app-rewired build",
@@ -13,7 +14,11 @@
         "eslint": "eslint 'src/**/*.{js,jsx}'",
         "eslint:fix": "eslint 'src/**/*.{js,jsx}' --fix",
         "test": "react-scripts test --watchAll",
-        "test:no-watch": "react-scripts test --watchAll=false --passWithNoTests"
+        "test:no-watch": "react-scripts test --watchAll=false --passWithNoTests",
+        "cy:run": "cypress run",
+        "cy:ci": "start-server-and-test 'serve -s build -n -p 3000' http://localhost:3000 'cy:run'",
+        "report:coverage": "nyc report --reporter=html",
+        "report:coverage:text": "nyc report --reporter=text"
     },
     "dependencies": {
         "@datadog/browser-logs": "^4.7.1",
@@ -70,6 +75,7 @@
         "@babel/preset-react": "^7.7.4",
         "@babel/preset-typescript": "^7.16.7",
         "@babel/runtime": "^7.8.7",
+        "@cypress/code-coverage": "^3.10.0",
         "@stripe/react-stripe-js": "1.7.2",
         "@stripe/stripe-js": "1.29.0",
         "@testing-library/jest-dom": "^5.14.1",
@@ -78,7 +84,7 @@
         "@types/axios": "^0.14.0",
         "@types/jest": "^27.0.1",
         "@types/lodash": "^4.14.182",
-        "@types/node": "^17.0.24",
+        "@types/node": "^18.7.13",
         "@types/reach__router": "^1.3.10",
         "@types/react": "^18.0.5",
         "@types/react-dom": "^18.0.1",
@@ -97,23 +103,29 @@
         "concurrently": "^5.0.1",
         "config": "^3.3.6",
         "cross-env": "^7.0.2",
+        "cypress": "^10.6.0",
         "eslint": "^8.18.0",
         "eslint-config-prettier": "^6.7.0",
         "eslint-config-react-app": "^7.0.1",
         "eslint-config-react-important-stuff": "^2.0.0",
+        "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-prettier": "^3.1.1",
         "file-loader": "^6.2.0",
         "husky": "^8.0.0",
         "identity-obj-proxy": "^3.0.0",
+        "istanbul-lib-coverage": "^3.2.0",
         "jest": "^25.2.7",
         "jest-cli": "^25.2.7",
         "lint-staged": "^13.0.3",
+        "nyc": "^15.1.0",
         "postcss-loader": "^4.0.4",
         "postcss-scss": "^3.0.2",
         "prettier": "^2.0.4",
         "pretty-quick": "^2.0.1",
         "resolve-url-loader": "^3.1.2",
         "sass-loader": "^10.0.5",
+        "serve": "^14.0.1",
+        "start-server-and-test": "^1.14.0",
         "style-loader": "^2.0.0",
         "systemjs-webpack-interop": "^2.1.2",
         "tslint": "^6.1.3",