Add client e2e tests with cypress

Author: loginwashere

.semaphore/semaphore.yml

@@ -98,6 +98,11 @@ blocks:
           - npm --version
           - sem-service start postgres
       jobs:
+        - name: Client Tests
+          commands:
+            - cd src/client
+            - cache restore client-node-modules-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),client-node-modules-$SEMAPHORE_GIT_BRANCH,client-node-modules-master
+            - npm run test:e2e
         - name: Server Tests
           commands:
             - cd src/server
@@ -124,10 +129,10 @@ blocks:
             - cd src/client
             - cache restore client-node-modules-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),client-node-modules-$SEMAPHORE_GIT_BRANCH,client-node-modules-master
             - npm run build
-            - cache restore client-dist-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),client-dist-$SEMAPHORE_GIT_BRANCH,client-dist-master
+            - cache store client-dist-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),client-dist-$SEMAPHORE_GIT_BRANCH,client-dist-master
         - name: Build Server
           commands:
             - cd src/server
             - cache restore server-node-modules-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),server-node-modules-$SEMAPHORE_GIT_BRANCH,server-node-modules-master
             - npm run build
-            - cache restore server-dist-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),server-dist-$SEMAPHORE_GIT_BRANCH,server-dist-master
+            - cache store server-dist-$SEMAPHORE_GIT_BRANCH-$(checksum package-lock.json),server-dist-$SEMAPHORE_GIT_BRANCH,server-dist-master

src/client/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+cypress/integration/examples
+cypress/videos

src/client/cypress.json

@@ -0,0 +1 @@
+{}

src/client/cypress/config/ci.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://localhost:3030",
+  "env": {
+    "env": "ci"
+  }
+}

src/client/cypress/config/development.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://localhost:3030",
+  "env": {
+    "env": "development"
+  }
+}

src/client/cypress/fixtures/example.json

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

src/client/cypress/integration/home-page.spec.ts

@@ -0,0 +1,11 @@
+/// <reference types="Cypress" />
+
+context('Home Page', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('cy.get() - query DOM elements', () => {
+    cy.get('h1').should('contain', 'Home');
+  });
+});

src/client/cypress/plugins/index.js

@@ -0,0 +1,45 @@
+// ***********************************************************
+// 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)
+const wp = require('@cypress/webpack-preprocessor');
+const fs = require('fs-extra')
+const path = require('path')
+
+function getConfigurationByFile (file) {
+  const pathToConfigFile = path.resolve(__dirname, '..', 'config', `${file}.json`)
+
+  return fs.readJson(pathToConfigFile)
+}
+
+module.exports = (on, config) => {
+  const options = {
+    webpackOptions: {
+      resolve: {
+        extensions: [".ts", ".tsx", ".js"]
+      },
+      module: {
+        rules: [
+          {
+            test: /\.tsx?$/,
+            loader: "ts-loader",
+            options: { transpileOnly: true }
+          }
+        ]
+      }
+    },
+  }
+  on('file:preprocessor', wp(options));
+
+  const file = config.env.configFile || 'development'
+
+  return getConfigurationByFile(file);
+}

src/client/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// 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) => { ... })

src/client/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')