Merge pull request #5063 from valor-software/feat-applitools

tests(common): snapshot visual tests with applitools

.travis.yml

@@ -58,6 +58,7 @@ jobs:
   allow_failures:
     - env: NGV=next
     - name: sauce-tests
+    - name: "Cypress Applitools Snapshot tests"
   include:
 # precache npm and apt dependencies
 #    - stage: precache
@@ -97,7 +98,7 @@ jobs:
       name: "Cypress Smoke Tests 3d thread"
       env: CI_THREAD_INDEX=3x-electron
       <<: *testSmokeCy
-#    check prod build
+    #    check prod build
     - script: npm run demo.ng-build
       name: "Check prod build with current Angular version"
     - script: npm run demo.ng-build
@@ -221,6 +222,9 @@ jobs:
         - CI_THREAD_INDEX=3.2x-electron
         - BASE_URL=https://valor-software.com/ngx-bootstrap/#/
       <<: *testPostDeploy
+    - script: APPLITOOLS_API_KEY=Nls100t102uNgLhLpblVUdA3tP104MQQS9VUYgHQ5tYOUuIxU110 CYPRESS_baseUrl=https://valor-software.com/ngx-bootstrap/#/ npm run cy:run:snapshot
+      name: "Cypress Applitools Snapshot tests"
+      if: tag =~ ^v\d+
 
 cache:
   apt: true

cypress/plugins/index.js

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

cypress/snapshot/snapshot_spec.js

@@ -0,0 +1,57 @@
+import { DatepickerPo } from '../support/datepicker.po';
+import { DropdownsPo } from '../support/dropdowns.po';
+import { ModalsPo } from '../support/modals.po';
+import { TabsPo } from '../support/tabs.po';
+import { TypeaheadPo } from '../support/typeahead.po';
+
+describe('Snapshot test', () => {
+  const componentsArray = [
+    new DatepickerPo(),
+    new DropdownsPo(),
+    new ModalsPo(),
+    new TypeaheadPo(),
+    new TabsPo()
+  ];
+
+  componentsArray.forEach(page => {
+    it(`navigate to each Demo and check example: ${page.pageUrl}`, () => {
+      page.navigateTo();
+      cy.get('ng-sample-box').each(demo => {
+        const subtitle = demo.parent().find('h3').text();
+
+        cy.wrap(demo).find(`.bd-example`)
+          .eyesOpen({
+            appName: 'NGX-bootstrap',
+            concurrency: 5,
+            matchLevel: 'Strict',
+            showLogs: true,
+            testName: `${page.pageUrl} - ${subtitle}`,
+            browser: [{
+              name: 'chrome',
+              browserVersion: 'latest',
+              width: 360,
+              height: 640
+            }, {
+              name: 'firefox',
+              browserVersion: 'latest',
+              width: 360,
+              height: 640
+            },
+              {
+              name: 'firefox',
+              browserVersion: 'latest',
+              width: 1366,
+              height: 768
+            }]
+          })
+          .eyesCheckWindow({
+            sizeMode: 'selector',
+            selector: `.bd-example`,
+            tag: `${page.pageUrl}-${subtitle}`,
+            sendDom: false,
+          })
+          .eyesClose();
+      });
+    });
+  });
+});

cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '@applitools/eyes.cypress/commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/tsconfig.json

@@ -14,6 +14,7 @@
   },
   "include": [
     "integration/*.ts",
+    "snapshot/*.ts",
     "full/*.ts",
     "full/**/*.ts",
     "support/*.ts",