feat(e2e): add Cypress to the project for E2E testing

.gitignore

@@ -1,6 +1,9 @@
 .gitk*
 .idea/*
 .DS_Store
+yarn-error.log
+yarn.lock
 node_modules/*
 SlickgridRelease*
-nuget*
+nuget*
+testresult.xml

.npmignore

@@ -5,3 +5,4 @@ examples
 nuget*
 SlickgridRelease*
 tests
+testresult.xml

.vscode/tasks.json

@@ -0,0 +1,17 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Cypress Open GUI",
+      "type": "shell",
+      "command": "yarn run cypress:open",
+      "problemMatcher": []
+    },
+    {
+      "label": "Cypress CI",
+      "type": "shell",
+      "command": "yarn run cypress:ci",
+      "problemMatcher": []
+    }
+  ]
+}

cypress.json

@@ -0,0 +1,7 @@
+{
+    "baseUrl": "https://6pac.github.io/SlickGrid",
+    "baseExampleUrl": "https://6pac.github.io/SlickGrid/examples",
+    "video": false,
+    "viewportWidth": 1200,
+    "viewportHeight": 800
+  }

cypress/integration/exampleGridMenu.spec.js

@@ -0,0 +1,70 @@
+/// <reference types="Cypress" />
+
+describe('Example - Grid Menu', () => {
+  const fullTitles = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
+  const titlesWithoutId = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
+
+
+  it('should display Example Grid Menu', () => {
+    cy.visit(`${Cypress.config('baseExampleUrl')}/example-grid-menu.html`);
+    cy.get('h2').should('contain', 'Demonstrates:');
+    cy.contains('This example demonstrates using the Slick.Controls.GridMenu ');
+  });
+
+  it('should have exact Column Titles in the grid', () => {
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should click on the Grid Menu to hide the column A from being displayed', () => {
+    cy.get('#myGrid')
+      .find('button.slick-gridmenu-button')
+      .trigger('click')
+      .click();
+
+    cy.get('#myGrid')
+      .get('.slick-gridmenu:visible')
+      .find('.slick-gridmenu-list')
+      .children('li:nth-child(1)')
+      .children('label')
+      .should('contain', 'A')
+      .click();
+
+    cy.get('#myGrid')
+      .get('.slick-gridmenu:visible')
+      .find('span.close')
+      .trigger('click')
+      .click();
+
+    const smallerTitleList = titlesWithoutId.slice(1);
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(smallerTitleList[index]));
+  });
+
+  it('should click on the External Grid Menu to show the column A as 1st column again', () => {
+    cy.get('button')
+      .contains('Grid Menu')
+      .trigger('click')
+      .click();
+
+    cy.get('#myGrid')
+      .get('.slick-gridmenu:visible')
+      .find('.slick-gridmenu-list')
+      .children('li:nth-child(1)')
+      .children('label')
+      .should('contain', 'A')
+      .click();
+
+    cy.get('[data-dismiss=slick-gridmenu]')
+      .click({ force: true });
+
+    cy.get('#myGrid')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(titlesWithoutId[index]));
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// 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
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- 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 is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

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

examples/example-grid-menu.html

@@ -46,7 +46,7 @@ <h2>Demonstrates:</h2>
       <li>Possibility to attach the Grid Menu to an external button (try clicking on the button below).</li>
       <li>You can also use some events like "onMenuClose()" and to trigger a resize of the columns with "autosizeColumns()" when "forceFitColumns: false"</li>
       <p>
-        <button onclick="toggleGridMenu(event)"><img src="../images/drag-handle.png"/> Grid Menu</button>
+        <button id="external-gridmenu" onclick="toggleGridMenu(event)"><img src="../images/drag-handle.png"/> Grid Menu</button>
       </p>
       <p>
         Always show vertical scroll (with "alwaysShowVerticalScroll" flag), so that it works with small and large dataset.

package.json

@@ -16,19 +16,23 @@
     "grid"
   ],
   "author": "Michael Leibman <[email protected]>",
-  "contributors": [ 
-    "Ben McIntyre <[email protected]>" 
+  "contributors": [
+    "Ben McIntyre <[email protected]>"
   ],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/6pac/SlickGrid/issues"
   },
   "homepage": "https://github.com/6pac/SlickGrid#readme",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "cypress:ci": "node node_modules/cypress/bin/cypress run --reporter xunit --reporter-options output=testresult.xml",
+    "cypress:open": "node node_modules/cypress/bin/cypress open"
   },
   "dependencies": {
     "jquery": ">=1.8.0",
     "jquery-ui": ">=1.8.0"
+  },
+  "devDependencies": {
+    "cypress": "^3.3.1"
   }
 }