chore(dev-app): initial setup for snapshot diff testing

apps/ngrid-dev-app-e2e/src/integration/ngrid/column-width/column-width.component.spec.ts

@@ -0,0 +1,7 @@
+describe('ngrid-dev-app', () => {
+  beforeEach(() => cy.visit('/ngrid-column-width'));
+
+  it('should display welcome message', () => {
+    cy.matchImageSnapshot('column-width.component');
+  });
+});

apps/ngrid-dev-app-e2e/src/plugins/index.js

@@ -11,6 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
 
 module.exports = (on, config) => {
@@ -19,4 +20,6 @@ module.exports = (on, config) => {
 
   // Preprocess Typescript file using Nx helper
   on('file:preprocessor', preprocessTypescript(config));
+
+  addMatchImageSnapshotPlugin(on, config);
 };

apps/ngrid-dev-app-e2e/src/support/commands.ts

@@ -1,20 +1,24 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
+import '@pebula/ngrid-cypress';
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
 
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+declare global {
+  namespace Cypress {
+    interface ResolvedConfigOptions {
+      isInteractive: boolean;
+    }
+  }
+}
+
+// if (Cypress.config('isInteractive')) {
+//   Cypress.Commands.add('matchImageSnapshot', () => {
+//     cy.log('Skipping snapshot 👀')
+//   })
+// } else {
+//   addMatchImageSnapshotCommand({
+//     customSnapshotsDir: './src/__snapshots__',
+//     failureThreshold: 0.03, // threshold for entire image
+//     failureThresholdType: 'percent', // percent of image or number of pixels
+//     customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
+//     capture: 'viewport', // capture viewport in screenshot
+//   });
+// }

apps/ngrid-docs-app-e2e/src/integration/features/columns/column-groups.spec.ts

@@ -6,7 +6,7 @@ describe('ngrid-docs-app', () => {
       .nGrid()
       .should( ngrid => {
         expect(ngrid.getColumns()).to.deep.eq(['id', 'name', 'gender', 'email', 'country', 'language']);
-        const headerRows = ngrid.getHeaderMetRows();
+        const headerRows = ngrid.getHeaderMetaRows();
         expect(headerRows.length).to.eq(1);
         const hr = headerRows[0];
         expect(hr.isGroup).to.eq(true);
@@ -25,7 +25,7 @@ describe('ngrid-docs-app', () => {
       .nGrid()
       .should( ngrid => {
         expect(ngrid.getColumns()).to.deep.eq(['id', 'name', 'gender', 'email', 'country', 'language']);
-        const headerRows = ngrid.getHeaderMetRows();
+        const headerRows = ngrid.getHeaderMetaRows();
         expect(headerRows.length).to.eq(3);
         const [hr0, hr1, hr2] = headerRows;
 

apps/ngrid-docs-app-e2e/src/integration/features/columns/column-reorder.spec.ts

@@ -7,7 +7,7 @@ describe('ngrid-docs-app', () => {
       .nGrid()
       .should( ngrid => {
         expect(ngrid.getColumns()).to.deep.eq(['id', 'name', 'gender', 'email', 'country', 'language', 'birthdate', 'balance']);
-        const headerRows = ngrid.getHeaderMetRows();
+        const headerRows = ngrid.getHeaderMetaRows();
         expect(headerRows.length).to.eq(2);
         const [hr0, hr1] = headerRows;
 
@@ -36,7 +36,7 @@ describe('ngrid-docs-app', () => {
     .wait(500)
     .should( ngrid => {
       expect(ngrid.getColumns()).to.deep.eq(['id', 'name', 'email', 'gender', 'language', 'country', 'birthdate', 'balance']);
-      const headerRows = ngrid.getHeaderMetRows();
+      const headerRows = ngrid.getHeaderMetaRows();
       expect(headerRows.length).to.eq(2);
       const [hr0, hr1] = headerRows;
 

apps/ngrid-docs-app-e2e/src/integration/features/columns/hide-column.spec.ts

@@ -30,7 +30,7 @@ describe('ngrid-docs-app', () => {
       .nGrid()
       .should( ngrid => {
         expect(ngrid.getColumns()).to.deep.eq(['id', 'name', 'gender', 'birthdate', 'bio', 'email', 'country', 'language']);
-        const headerRows = ngrid.getHeaderMetRows();
+        const headerRows = ngrid.getHeaderMgetHeaderMetaRowsetRows();
         expect(headerRows.length).to.eq(1);
         const hr = headerRows[0];
         expect(hr.isGroup).to.eq(true);
@@ -50,7 +50,7 @@ describe('ngrid-docs-app', () => {
         cy.wait(100).should(() => {
           expect(ngrid.getColumns()).to.deep.eq(['id', 'bio', 'email', 'country', 'language']);
 
-          const headerRows1 = ngrid.getHeaderMetRows();
+          const headerRows1 = ngrid.getHeaderMetaRows();
           expect(headerRows1.length).to.eq(1);
           const hr1 = headerRows1[0];
           expect(hr1.isGroup).to.eq(true);

libs/ngrid-cypress/src/lib/ngrid-harness/ngrid-harness.ts

@@ -9,7 +9,7 @@ export class NGridCypressHarness {
     const cdkTable = viewPort.querySelector('pbl-cdk-table');
   }
 
-  getHeaderMetRows() {
+  getHeaderMetaRows() {
     const fixedMetaRows = this.element.querySelector('div[pbl-ngrid-fixed-meta-row-container="header"');
     const fixedHeaderMetaRows = fixedMetaRows.querySelectorAll('pbl-ngrid-meta-row');
 

package.json

@@ -92,6 +92,7 @@
     "@octokit/rest": "^16.28.1",
     "@rigor789/remark-autolink-headings": "^5.1.0",
     "@types/chalk": "^0.4.31",
+    "@types/cypress-image-snapshot": "^3.1.2",
     "@types/express-serve-static-core": "^4.17.8",
     "@types/faker": "^4.1.4",
     "@types/globby": "^8.0.0",
@@ -108,6 +109,7 @@
     "convert-source-map": "^1.6.0",
     "country-data": "^0.0.31",
     "cypress": "^4.0.0",
+    "cypress-image-snapshot": "^3.1.1",
     "dotenv": "6.2.0",
     "gatsby-remark-prismjs": "^3.2.0",
     "glob": "^7.1.4",