tests(common): add snapshot tests with cypress and applitools (valor-…

…software#1072)

* tests(common): add snapshot tests with cypress and applitools

.gitignore

@@ -6,6 +6,7 @@
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
+/cypress/screenshots/*
 
 # dependencies
 node_modules

.travis.yml

@@ -15,10 +15,17 @@ addons:
 cache:
   directories:
     - ./node_modules
+    - ~/.cache
+    - ~/.npm
 
 install:
-  - npm install
+  - npm ci
 
 script:
   - npm run build:lib
   - npm run test -- --watch=false --no-progress --browsers=ChromeHeadless
+  - ng serve &
+  - $(npm bin)/wait-on http-get://localhost:4200/#
+  - npm run test:main
+  - npm run test:screenshot
+  - kill $(jobs -p) || true

cypress.json

@@ -0,0 +1,7 @@
+{
+  "baseUrl": "http://localhost:4200/",
+  "video": false,
+  "eyesTimeout": 1200000,
+  "viewportWidth": 1366,
+  "viewportHeight": 768
+}

cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "componentsUrls": ["#LineChart", "#BarChart", "#DoughnutChart", "#RadarChart", "#PieChart", "#PolarAreaChart", "#BubbleChart", "#ScatterChart", "#DynamicChart"]
+}

cypress/integration/main-test.js

@@ -0,0 +1,63 @@
+const browsers = [{
+  name: 'chrome',
+  browserVersion: 'latest',
+  width: 1366,
+  height: 768
+}];
+
+describe('Main Page', () => {
+  it(`navigate to main Demo page and check info`, () => {
+    const topBarSelector = 'mat-toolbar';
+    const mainContentSelector = 'main';
+    cy.visit('');
+
+    cy.get(topBarSelector).should('be.visible')
+      .eyesOpen({
+        appName: 'NG2-charts',
+        testName: `NG2-charts Main Page Top Bar`,
+        browser: browsers
+      })
+      .eyesCheckWindow({
+        sizeMode: 'selector',
+        selector: topBarSelector,
+        sendDom: false,
+      })
+      .eyesClose();
+
+    cy.get(mainContentSelector).should('be.visible')
+      .eyesOpen({
+        appName: 'NG2-charts',
+        testName: `NG2-charts Main Page Content`,
+        browser: browsers
+      })
+      .eyesCheckWindow({
+        sizeMode: 'selector',
+        selector: mainContentSelector,
+        sendDom: false,
+        /*ignore: [
+          {selector: '#gh-count'}]*/
+      })
+      .eyesClose();
+  });
+});
+
+describe('Charts', () => {
+  const componentsArray = [
+    {url: '/#LineChart', selector: 'app-line-chart'},
+    {url: '/#BarChart', selector: 'app-bar-chart'},
+    {url: '/#DoughnutChart', selector: 'app-doughnut-chart'},
+    {url: '/#RadarChart', selector: 'app-radar-chart'},
+    {url: '/#PieChart', selector: 'app-pie-chart'},
+    {url: '/#PolarAreaChart', selector: 'app-polar-area-chart'},
+    {url: '/#BubbleChart', selector: 'app-bubble-chart'},
+    {url: '/#ScatterChart', selector: 'app-scatter-chart'},
+    {url: '/#DynamicChart', selector: 'app-dynamic-chart'}
+  ];
+
+  componentsArray.forEach(component => {
+    it(`${component.url}`, () => {
+      cy.visit(component.url);
+      cy.get(component.selector).find('canvas').wait(200).screenshot();
+    });
+  });
+});

cypress/integration/screenshot-test.js

@@ -0,0 +1,32 @@
+var Eyes = require('eyes.images').Eyes;
+const fs = require('fs');
+const urls = require('../fixtures/example').componentsUrls;
+
+var eyes = new Eyes();
+
+eyes.setApiKey('Nls100t102uNgLhLpblVUdA3tP104MQQS9VUYgHQ5tYOUuIxU110');
+
+eyes.setHostingApp("Chrome");
+
+eyes.setHostOS('MacOS latest');
+
+
+async function forEachAsync(array, callback) {
+  let i = 0;
+  for (; i < array.length; i++) {
+    await callback(array[i], i, array);
+  }
+}
+
+const testResults = eyes.open("NG2-charts", "Charts comparison", {width: 1366, height: 768}).then(async function () {
+  return forEachAsync(urls, async (url) => {
+    const image = fs.readFileSync(`./cypress/screenshots/main-test.js/Charts -- ${url}.png`);
+    await eyes.checkImage(image, url);
+  });
+}).then(function () {
+  return eyes.close();
+});
+
+testResults.then(function (results) {
+  console.log("Results: ", results);
+});

cypress/plugins/index.js

@@ -0,0 +1,3 @@
+module.exports = (on, config) => {
+};
+require('@applitools/eyes.cypress')(module);

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 '@applitools/eyes.cypress/commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')