Add cypress. Add test for App nav.

frontend/README.md

@@ -22,6 +22,10 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
+## Running Cypress Tests
+
+Run `yarn cy:run`
+
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

frontend/cypress.json

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

frontend/cypress/integration/src/app_spec.ts

@@ -0,0 +1,19 @@
+describe('App spec', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('shows App nav', () => {
+    cy.get('ul.app__links').should('have.length', 1);
+  });
+
+  it('shows items in App nav', () => {
+    const expectedNavLinks = ['home', 'hello'];
+
+    cy.get('ul.app__links li').should($items => {
+      const linkTextes = $items.toArray().forEach((item, index) => {
+        expect(item).to.contain(expectedNavLinks[index]);
+      });
+    });
+  });
+});

frontend/cypress/plugins/index.js

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  on('task', {
+    protobufEncode: require('cypress-protobuf'),
+  });
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

frontend/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 will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

frontend/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')

frontend/cypress/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": "../node_modules",
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": [
+    "**/*.ts",
+    "../node_modules/cypress"
+  ]
+}

frontend/package.json

@@ -8,7 +8,9 @@
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "proto:generate": "protoc --plugin=protoc-gen-ng=./node_modules/.bin/protoc-gen-ng --ng_out=./src/app/proto -I ../services ../services/**/src/**/*.proto"
+    "proto:generate": "protoc --plugin=protoc-gen-ng=./node_modules/.bin/protoc-gen-ng --ng_out=./src/app/proto -I ../services ../services/**/src/**/*.proto",
+    "cy:open": "CYPRESS_BASE_URL=http://localhost:4200 cypress open",
+    "cy:run": "CYPRESS_BASE_URL=http://localhost:4200 cypress run"
   },
   "private": true,
   "dependencies": {
@@ -37,6 +39,8 @@
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
+    "cypress": "^4.1.0",
+    "cypress-protobuf": "^1.0.5",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.1.0",
@@ -49,4 +53,4 @@
     "tslint": "~5.15.0",
     "typescript": "~3.7.5"
   }
-}
+}

frontend/tsconfig.json

@@ -11,13 +11,8 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ]
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"]
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,