Merge pull request #19 from hpi-sam/feature/setup-e2e-tests

Feature/setup e2e tests

.gitattributes

@@ -0,0 +1,4 @@
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

.vscode/tasks.json

@@ -1,6 +1,14 @@
 {
     "version": "2.0.0",
     "tasks": [
+        {
+            "label": "Start all & cypress",
+            "dependsOn": [
+                "Start all",
+                "Start cypress"
+            ],
+            "problemMatcher": []
+        },
         {
             "label": "Start all",
             "dependsOn": ["Start frontend", "Start backend", "Watch shared"],
@@ -14,6 +22,13 @@
             "path": "frontend/",
             "problemMatcher": []
         },
+        {
+            "label": "Start cypress",
+            "type": "npm",
+            "script": "cy:open",
+            "path": "frontend/",
+            "problemMatcher": []
+        },
         {
             "label": "Start backend",
             "type": "npm",

README.md

@@ -40,13 +40,35 @@ In addition you can make use of the following browser extensions:
 
 ## Testing
 
+### Unit tests
+
 We are using [Jest](https://jestjs.io/) for our unit tests.
 
 You can run it during development
 
 -   from the terminal via `npm run test:watch` in the root, `/shared`, `/backend` or `/frontend` folder
 -   or via the [recommended vscode extension](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest).
 
+### End to end tests
+
+We are using [cypress](https://www.npmjs.com/package/cypress) to run the end-to-end tests. You can find the code under `/frontend/cypress` in the repository.
+
+#### Running the tests
+
+To run the tests locally it is recommended to use the vscode [task](https://code.visualstudio.com/docs/editor/tasks) `Start all & cypress`. Alternatively you can start the frontend and backend manually and then run `npm run cy:open` in `/frontend`.
+
+If you only want to check wether the tests are passing you can run `npm run cy:run` in `/frontend` instead.
+
+#### Visual regression testing
+
+We are also making use of visual regression tests via [cypress-image-diff](https://github.com/uktrade/cypress-image-diff).
+The screenshots are stored under `/frontend/cypress-visual-screenshots`.
+
+The `baseline` folder contains the reference screenshots (the desired result).
+If a test fails a new screenshot is taken and put in the `comparison` folder.
+If the new screenshot is the new desired result, then you only have to move it in the `baseline` folder and replace the old reference screenshot with the same name.
+In the `diff` folder you can see the changes between the baseline and the comparison screenshot.
+
 ## Styleguide
 
 -   names are never unique, ids are

frontend/.gitignore

@@ -22,6 +22,13 @@ yarn-error.log
 testem.log
 /typings
 
+# cypress
+/cypress/screenshots
+/cypress/videos
+/cypress/downloads
+/cypress-visual-screenshots/comparison
+/cypress-visual-screenshots/diff
+
 # System Files
 .DS_Store
 Thumbs.db

frontend/README.md

@@ -14,10 +14,6 @@ Run `ng generate component component-name` to generate a new component. You can
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

frontend/cypress.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "https://on.cypress.io/cypress.schema.json",
+    "integrationFolder": "cypress/integration",
+    "supportFile": "cypress/support/index.ts",
+    "videosFolder": "cypress/videos",
+    "screenshotsFolder": "cypress/screenshots",
+    "pluginsFile": "cypress/plugins/index.ts",
+    "fixturesFolder": "cypress/fixtures",
+    "baseUrl": "http://localhost:4200"
+}

frontend/cypress/fixtures/new-exercise.ts

@@ -0,0 +1,4 @@
+import type { ExerciseState } from 'digital-fuesim-manv-shared';
+import { generateExercise } from 'digital-fuesim-manv-shared';
+
+export const newExercise: ExerciseState = generateExercise();

frontend/cypress/integration/landing-page.spec.ts

@@ -0,0 +1,35 @@
+// TODO: this is just a proof of concept on how to test - they should be replaced with real tests
+describe('The landing page', () => {
+    beforeEach(() => {
+        // TODO: reset the backend database e.g.:
+        // `cy.exec('npm run db:reset && npm run db:seed')`
+        // or sending a request to the server to reset the database (set to a fixture?)
+        // or creating a new exercise
+    });
+
+    it('loads the landing page', () => {
+        cy.visit('/');
+    });
+
+    it('can join an exercise', () => {
+        cy.visit('/');
+        cy.get('.container').should('not.contain', 'Add');
+        cy.contains('Join').click();
+        cy.get('.container').should('contain', 'Add');
+    });
+
+    // it('can add new patients', () => {
+    //     cy.visit('/');
+    //     cy.contains('Join').click();
+    //     cy.get('.container').should('contain', '0');
+    //     cy.contains('Add').click();
+    //     cy.get('.container').should('contain', '1');
+    //     cy.contains('Add').click();
+    //     cy.get('.container').should('contain', '2');
+    // });
+
+    it('is possible to make visual regression tests (for e.g. a canvas)', () => {
+        cy.visit('/');
+        cy.get('.container').compareSnapshot('landing page', 0.1);
+    });
+});

frontend/cypress/plugins/index.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error there is no type definition for this package yet
+import * as cypressImageDiffPlugin from 'cypress-image-diff-js/dist/plugin';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const pluginConfig: Cypress.PluginConfig = (on, config) => {
+    cypressImageDiffPlugin.default(on, config);
+};
+export default pluginConfig;

frontend/cypress/support/commands.ts

@@ -0,0 +1,47 @@
+// ***********************************************
+// This example namespace declaration will help
+// with Intellisense and code completion in your
+// IDE or Text Editor.
+// ***********************************************
+// declare namespace Cypress {
+//   interface Chainable<Subject = any> {
+//     customCommand(param: any): typeof customCommand;
+//   }
+// }
+//
+// function customCommand(param: any): void {
+//   console.warn(param);
+// }
+//
+// NOTE: You can use it like so:
+// Cypress.Commands.add('customCommand', customCommand);
+//
+// ***********************************************
+// 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) => { ... })
+// @ts-expect-error there is no type definition for this package yet
+import * as cypressImageDiffCommand from 'cypress-image-diff-js/dist/command';
+
+cypressImageDiffCommand();

frontend/cypress/support/index.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable @typescript-eslint/method-signature-style */
+// ***********************************************************
+// 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
+// ***********************************************************
+
+// When a command from ./commands is ready to use, import with `import './commands'` syntax
+import './commands';
+
+import type { RecurseDefaults } from 'cypress-recurse';
+
+/// <reference types="cypress" />
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * @param name The name of the snapshots that will be generated
+             * @param testThreshold @default 0 A number between 0 and 1 that represents the allowed percentage of pixels that can be different between the two snapshots
+             * @param retryOptions @default { limit: 0, timeout: Cypress.config('defaultCommandTimeout'), delay: Cypress.config('defaultCommandTimeout') / 5 }
+             * @example cy.compareSnapshot('empty-canvas', 0.1)
+             */
+            compareSnapshot(
+                name: string,
+                testThreshold?: number,
+                retryOptions?: typeof RecurseDefaults
+            ): Chainable<Element>;
+        }
+    }
+}

frontend/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["**/*.ts"],
+    "compilerOptions": {
+        "sourceMap": false,
+        "types": ["cypress"]
+    }
+}

frontend/jest.config.js

@@ -7,6 +7,7 @@ export default {
     roots: ['<rootDir>'],
     // overwrites the configuration from baseConfig
     transform: {},
+    testPathIgnorePatterns: ['<rootDir>/cypress/'],
     preset: 'jest-preset-angular',
     setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
 };