feat(example-app): add visual testing with Applitools (#1605)

Author: Marien Scott

package.json

@@ -91,6 +91,7 @@
     "@angular/platform-browser-dynamic": "^7.0.1",
     "@angular/platform-server": "^7.0.1",
     "@angular/router": "^7.0.1",
+    "@applitools/eyes-cypress": "^3.4.12",
     "@ngrx/db": "^2.2.0-beta.0",
     "core-js": "^2.5.4",
     "hammerjs": "^2.0.8",
@@ -121,7 +122,7 @@
     "conventional-changelog-cli": "^1.3.21",
     "coveralls": "^2.13.0",
     "cpy-cli": "^1.0.1",
-    "cypress": "^3.1.2",
+    "cypress": "^3.1.5",
     "deep-freeze": "^0.0.1",
     "deep-freeze-strict": "^1.1.1",
     "express": "^4.16.4",

projects/example-app-cypress/cypress.json

@@ -6,5 +6,6 @@
   "supportFile": "support/index.js",
   "screenshotsFolder": "screenshots",
   "videosFolder": "videos",
-  "video": false
+  "video": false,
+  "projectId": "w65h7e"
 }

projects/example-app-cypress/integration/round-trip.spec.ts

@@ -1,14 +1,26 @@
 context('Full round trip', () => {
   before(() => {
+    (cy as any).eyesOpen({
+      appName: 'books_app',
+      testName: 'round-trip',
+      browser: { width: 800, height: 600 },
+    });
     window.indexedDB.deleteDatabase('books_app');
     cy.visit('/');
   });
 
+  after(() => {
+    (cy as any).eyesClose();
+  });
+
   it('shows a message when the credentials are wrong', () => {
     cy.get('[placeholder=Username]').type('wronguser');
     cy.get('[placeholder=Password]').type('supersafepassword');
     cy.get('[type="submit"]').click();
 
+    (cy as any).eyesCheckWindow(
+      'shows a message when the credentials are wrong'
+    );
     cy.contains('Invalid username or password').should('be.visible');
   });
 
@@ -24,6 +36,7 @@ context('Full round trip', () => {
     cy.contains('menu').click();
     cy.contains('Browse Books').click();
 
+    (cy as any).eyesCheckWindow('is possible to search for books');
     cy.get('[placeholder="Search for a book"]').type('The Alchemist');
     cy.get('bc-book-preview')
       .its('length')
@@ -36,6 +49,7 @@ context('Full round trip', () => {
       .click();
 
     cy.contains('Add Book to Collection').click();
+    (cy as any).eyesCheckWindow('is possible to add books');
     cy.contains('Add Book to Collection').should('not.exist');
   });
 
@@ -48,13 +62,16 @@ context('Full round trip', () => {
 
     cy.contains('Add Book to Collection').click();
     cy.contains('Remove Book from Collection').click();
+
+    (cy as any).eyesCheckWindow('is possible to remove books');
     cy.contains('Remove Book from Collection').should('not.exist');
   });
 
   it('is possible to show the collection', () => {
     cy.contains('menu').click();
     cy.contains('My Collection').click();
 
+    (cy as any).eyesCheckWindow('is possible to show the collection');
     cy.get('bc-book-preview')
       .its('length')
       .should('be', 1);
@@ -65,6 +82,7 @@ context('Full round trip', () => {
     cy.contains('Sign Out').click();
     cy.contains('OK').click();
 
+    (cy as any).eyesCheckWindow('is possible to sign out');
     cy.get('[placeholder=Username]').should('exist');
     cy.get('[placeholder=Password]').should('exist');
   });

projects/example-app-cypress/plugins/index.js

@@ -1,5 +1,6 @@
 const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
 
-module.exports = on => {
+module.exports = on => 
   on('file:preprocessor', cypressTypeScriptPreprocessor);
-};
+
+require('@applitools/eyes-cypress')(module);

projects/example-app-cypress/support/index.js

@@ -0,0 +1,3 @@
+import'@applitools/eyes-cypress/commands';
+
+