diff --git a/.gitignore b/.gitignore index 1eb3e5a5..e2574576 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,9 @@ .gitk* .idea/* .DS_Store +yarn-error.log +yarn.lock node_modules/* SlickgridRelease* -nuget* \ No newline at end of file +nuget* +testresult.xml \ No newline at end of file diff --git a/.npmignore b/.npmignore index da76d0e8..04c502da 100644 --- a/.npmignore +++ b/.npmignore @@ -5,3 +5,4 @@ examples nuget* SlickgridRelease* tests +testresult.xml \ No newline at end of file diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 00000000..dc1b9ac0 --- /dev/null +++ b/.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": [] + } + ] +} diff --git a/cypress.json b/cypress.json new file mode 100644 index 00000000..bd04c125 --- /dev/null +++ b/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 + } diff --git a/cypress/integration/exampleGridMenu.spec.js b/cypress/integration/exampleGridMenu.spec.js new file mode 100644 index 00000000..739db7bd --- /dev/null +++ b/cypress/integration/exampleGridMenu.spec.js @@ -0,0 +1,70 @@ +/// + +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])); + }); +}); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js new file mode 100644 index 00000000..fd170fba --- /dev/null +++ b/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 +} diff --git a/cypress/support/commands.js b/cypress/support/commands.js new file mode 100644 index 00000000..c1f5a772 --- /dev/null +++ b/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) => { ... }) diff --git a/cypress/support/index.js b/cypress/support/index.js new file mode 100644 index 00000000..d68db96d --- /dev/null +++ b/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') diff --git a/examples/example-grid-menu.html b/examples/example-grid-menu.html index 382f89a7..21a34406 100644 --- a/examples/example-grid-menu.html +++ b/examples/example-grid-menu.html @@ -46,7 +46,7 @@

Demonstrates:

  • Possibility to attach the Grid Menu to an external button (try clicking on the button below).
  • You can also use some events like "onMenuClose()" and to trigger a resize of the columns with "autosizeColumns()" when "forceFitColumns: false"
  • - +

    Always show vertical scroll (with "alwaysShowVerticalScroll" flag), so that it works with small and large dataset. diff --git a/package.json b/package.json index b0eaacaa..abf9f27d 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "grid" ], "author": "Michael Leibman ", - "contributors": [ - "Ben McIntyre " + "contributors": [ + "Ben McIntyre " ], "license": "MIT", "bugs": { @@ -25,10 +25,14 @@ }, "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" } }