Adding applitools to inegration tests

cypress/helpers/util.js

@@ -42,16 +42,32 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
   if (!options.fontSize) {
     options.fontSize = '16px';
   }
-  cy.log(options);
+  const useAppli = Cypress.env('useAppli');
+  const branch = Cypress.env('codeBranch');
+  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
+  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+
+  if (useAppli) {
+    cy.eyesOpen({
+      appName: 'Mermaid-' + branch,
+      testName: name,
+      batchName: branch,
+    });
+  }
+
   const url = mermaidUrl(graphStr, options, api);
 
   cy.visit(url);
   if (validation) cy.get('svg').should(validation);
   cy.get('svg');
   // Default name to test title
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
-  cy.matchImageSnapshot(name);
+  if (useAppli) {
+    cy.eyesCheckWindow('Click!');
+    cy.eyesClose();
+  } else {
+    cy.matchImageSnapshot(name);
+  }
 };
 
 export const renderGraph = (graphStr, options, api) => {

cypress/integration/rendering/appli.spec.js

@@ -0,0 +1,59 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Git Graph diagram', () => {
+  it('1: should render a simple gitgraph with commit on main branch', () => {
+    imgSnapshotTest(
+      `gitGraph
+       commit id: "1"
+       commit id: "2"
+       commit id: "3"
+      `,
+      {}
+    );
+  });
+  // it(`ultraFastTest`, function () {
+  //   // Navigate to the url we want to test
+  //   // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
+  //   // but then change the above URL to https://demo.applitools.com/index_v2.html
+  //   // (for the 2nd run)
+  //   cy.visit('https://demo.applitools.com');
+
+  //   // Call Open on eyes to initialize a test session
+  //   cy.eyesOpen({
+  //     appName: 'Demo App',
+  //     testName: 'Ultrafast grid demo',
+  //   });
+
+  //   // check the login page with fluent api, see more info here
+  //   // https://applitools.com/docs/topics/sdk/the-eyes-sdk-check-fluent-api.html
+  //   cy.eyesCheckWindow({
+  //     tag: 'Login Window',
+  //     target: 'window',
+  //     fully: true,
+  //   });
+
+  //   cy.get('#log-in').click();
+
+  //   // Check the app page
+  //   cy.eyesCheckWindow({
+  //     tag: 'App Window',
+  //     target: 'window',
+  //     fully: true,
+  //   });
+
+  //   // Call Close on eyes to let the server know it should display the results
+  //   cy.eyesClose();
+  // });
+  // it('works', () => {
+  //   cy.visit('https://applitools.com/helloworld');
+  //   cy.eyesOpen({
+  //     appName: 'Hello World!',
+  //     testName: 'My first JavaScript test!',
+  //     browser: { width: 800, height: 600 },
+  //   });
+  //   cy.eyesCheckWindow('Main Page');
+  //   cy.get('button').click();
+  //   cy.eyesCheckWindow('Click!');
+  //   cy.eyesClose();
+  // });
+});

cypress/plugins/index.js

@@ -17,7 +17,16 @@
 // }
 
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+require('@applitools/eyes-cypress')(module);
 
 module.exports = (on, config) => {
   addMatchImageSnapshotPlugin(on, config);
+  // copy any needed variables from process.env to config.env
+  config.env.useAppli = process.env.USE_APPLI ? true : false;
+  config.env.codeBranch = process.env.APPLI_BRANCH;
+
+  // do not forget to return the changed config object!
+  return config;
 };
+
+require('@applitools/eyes-cypress')(module);

cypress/support/eyes-index.d.ts

@@ -0,0 +1 @@
+import "@applitools/eyes-cypress"

cypress/support/index.js

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