Visual regression tests with percy.io #103

.circleci/config.yml

@@ -89,8 +89,8 @@ jobs:
             - /root/.cache/Cypress
           key: v2-cypress-dependencies-{{ checksum "package-lock.json" }}
       - run:
-          name: cypress run
-          command: 'npm run cypress'
+          name: percy run
+          command: 'npm run percy'
 workflows:
   build:
     jobs:

README.md

@@ -5,6 +5,7 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=microcatalog&metric=alert_status)](https://sonarcloud.io/dashboard?id=microcatalog)
 [![microservice-catalog](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/ge12oz&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/ge12oz/runs)
 [![microservice-catalog](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/count/ge12oz&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/ge12oz/runs)
+[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/bb9225f6/microservice-catalog)
 [![Docker Image Version (latest by date)](https://img.shields.io/docker/v/tillias/microcatalog)](https://hub.docker.com/r/tillias/microcatalog)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Lines of Code](https://sonarcloud.io/api/project_badges/measure?project=microcatalog&metric=ncloc)](https://sonarcloud.io/dashboard?id=microcatalog)

cypress/integration/dependency-dashboard-actions.ts

@@ -43,7 +43,7 @@ describe('dependency dashboard', () => {
     });
   }
 
-  xit('create microservice', function () {
+  it('create microservice', function () {
 
     cy.visit('/dashboard/dependencies');
 
@@ -72,7 +72,7 @@ describe('dependency dashboard', () => {
     cy.get('jhi-vertex-legend a').should('have.text', firstMicroservice);
   })
 
-  xit('delete microservice', function () {
+  it('delete microservice', function () {
     createMicroserviceRequest(firstMicroservice);
 
     cy.visit('/dashboard/dependencies');
@@ -87,7 +87,7 @@ describe('dependency dashboard', () => {
     cy.get('#jhi-confirm-delete-microservice').click();
   })
 
-  xit('edit microservice', function () {
+  it('edit microservice', function () {
     createMicroserviceRequest(firstMicroservice);
 
     cy.visit('/dashboard/dependencies');
@@ -125,13 +125,15 @@ describe('dependency dashboard', () => {
       .type(secondMicroservice);
     cy.get('.ngb-highlight').click();
 
+    cy.server();
+    cy.route('GET', '/api/microservices').as('apiRequest');
+
     cy.get('.btn-primary').click();
 
     // click on firstMicroservice and validate edge is added in edge legend
     cy.get('ngx-spinner').should('not.be.visible');
 
-    cy.server();
-    cy.route('GET', '/api/microservices').as('apiRequest');
+
     cy.wait('@apiRequest');
 
     cy.get('canvas').click();

cypress/integration/impact-analysis.ts

@@ -0,0 +1,20 @@
+describe.only('impact analysis', () => {
+
+  before(function login() {
+    cy.logout();
+    cy.loginUser();
+  })
+
+  it('impact analysis is shown', function () {
+   cy.server();
+    cy.route('GET', '/api/impact-analysis/microservice/4').as('apiRequest');
+
+    cy.visit('/dashboard/impact-analysis/4');
+
+    cy.wait('@apiRequest');
+    cy.get('canvas');
+
+    cy.percySnapshot('impact-analysis', { widths: [1024] });
+  })
+
+})

cypress/integration/release-path.ts

@@ -0,0 +1,21 @@
+describe.only('release path', () => {
+
+  before(function login() {
+    cy.logout();
+    cy.loginUser();
+  })
+
+  it('release path is shown', function () {
+    cy.server();
+    cy.route('GET', '/api/release-path/microservice/1').as('apiRequest');
+
+    cy.visit('/dashboard/release-path/1');
+
+    cy.wait('@apiRequest');
+    cy.get('jhi-release-path > .p3 > .vis-network > canvas');
+    cy.get('jhi-release-graph > .p3 > .vis-network > canvas');
+
+    cy.percySnapshot('release-path', { widths: [1024] });
+  })
+
+})

cypress/plugins/index.js

@@ -12,10 +12,13 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+let percyHealthCheck = require('@percy/cypress/task')
+
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  on("task", percyHealthCheck);
 }

cypress/support/commands.js

@@ -23,3 +23,5 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import '@percy/cypress';

cypress/support/commands.ts

@@ -6,16 +6,17 @@ declare namespace Cypress {
     loginUser: typeof loginUser
     createMicroservice: typeof createMicroservice
     deleteMicroservice: typeof deleteMicroservice
+    createDependency: typeof createDependency
     deleteDependency: typeof deleteDependency
   }
 }
 
-function getTokenWithoutQuotationMarks() : string {
+function getTokenWithoutQuotationMarks(): string {
   const token = window.sessionStorage.getItem('jhi-authenticationtoken');
   return token.slice(1, token.length - 1);
 }
 
-function getBearerHeader() : string {
+function getBearerHeader(): string {
   return "Bearer " + getTokenWithoutQuotationMarks();
 }
 
@@ -38,7 +39,7 @@ function logout(): void {
   window.sessionStorage.clear();
 }
 
-function createMicroservice(microservice: any): void{
+function createMicroservice(microservice: any): void {
   cy.request({
     url: '/api/microservices',
     body: microservice,
@@ -59,6 +60,17 @@ function deleteMicroservice(name: string): void {
   });
 }
 
+function createDependency(dependency: any): void {
+  cy.request({
+    url: '/api/dependencies',
+    body: dependency,
+    method: 'POST',
+    headers: {
+      Authorization: getBearerHeader()
+    }
+  });
+}
+
 function deleteDependency(name: string): void {
   cy.request({
     url: '/api/dependencies/by/name/' + name,
@@ -75,4 +87,5 @@ Cypress.Commands.add('loginUser', () => loginUser());
 Cypress.Commands.add('logout', () => logout());
 Cypress.Commands.add('createMicroservice', (body) => createMicroservice(body));
 Cypress.Commands.add('deleteMicroservice', (name) => deleteMicroservice(name));
+Cypress.Commands.add('createDependency', (body) => createDependency(body));
 Cypress.Commands.add('deleteDependency', (name) => deleteDependency(name));

cypress/support/index.js

@@ -13,10 +13,14 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+
+
 // Import commands.js using ES2015 syntax:
 import './commands.js'
 import './commands.ts'
+
 require('cypress-commands');
+require('@percy/cypress')
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/tsconfig.json

@@ -8,10 +8,12 @@
   "include": [
     "**/*.ts",
     "../node_modules/cypress",
-    "../node_modules/cypress-commands"
+    "../node_modules/cypress-commands",
+    "../node_modules/@percy/cypress"
   ],
   "types": [
     "cypress-commands",
-    "cypress"
+    "cypress",
+    "@percy/cypress"
   ]
 }