Merge pull request #29 from frappe/cypress

Setup Cypress and tests

.eslintrc

@@ -7,7 +7,8 @@
   "env": {
     "browser": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
 
   "globals": {
@@ -21,7 +22,9 @@
     "it": true,
     "expect": true,
     "sinon": true,
-    "Clusterize": true
+    "Clusterize": true,
+    "cy": true,
+    "Cypress": true
   },
 
   "plugins": [

.gitignore

@@ -34,3 +34,7 @@ node_modules
 npm-debug.log.*
 
 .DS_Store
+
+# cypress
+cypress/screenshots
+cypress/videos

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js:
+  - 8
+cache:
+  directories:
+    - node_modules
+install:
+  - yarn
+script:
+  - yarn test

cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:8989"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/datatable_spec.js

@@ -0,0 +1,176 @@
+describe('DataTable', function () {
+    it('instance is created without any errors', () => {
+        cy.visit('/');
+
+        cy.window()
+            .its('DataTable')
+            .then(DataTable => {
+                // eslint-disable-next-line
+                new DataTable('#datatable2', {
+                    columns: ['Name', 'Position'],
+                    data: [
+                        ['Faris', 'Developer']
+                    ]
+                });
+            });
+
+        cy.get('#datatable2 .datatable')
+            .contains('Faris');
+    });
+
+    describe('Cell', function () {
+        before(function () {
+            cy.visit('/');
+        });
+
+        it('focuses cell on click', function () {
+            cy.clickCell(2, 0)
+                .should('have.class', 'dt-cell--focus');
+        });
+
+        it('not focuses cell which are not focusable', function () {
+            cy.clickCell(1, 0)
+                .should('not.have.class', 'dt-cell--focus');
+        });
+
+        it('edit cell on enter press', function () {
+            cy.getCell(4, 0).type('{enter}')
+                .should('have.class', 'dt-cell--editing')
+                .type('{enter}')
+                .should('not.have.class', 'dt-cell--editing');
+        });
+
+        it('edit cell on double click', function () {
+            cy.getCell(4, 0)
+                .as('target')
+                .dblclick({ force: true })
+                .should('have.class', 'dt-cell--editing');
+
+            cy.clickCell(3, 0);
+
+            cy.get('@target').should('not.have.class', 'dt-cell--editing');
+        });
+
+        // it('edit cell', function () {
+
+        //     cy.getCell(4, 1).dblclick();
+
+        //     cy.wait(100);
+
+        //     cy.focused()
+        //         .type('{selectall}')
+        //         .wait(100)
+        //         .type('{del}')
+        //         .wait(100)
+        //         .type('Test')
+        //         .wait(100)
+        //         .type('{enter}');
+
+        //     cy.getCell(4, 1).contains('Test');
+        // });
+
+        it('if editing is false: editing should not activate', function () {
+            cy.getCell(3, 0).dblclick({ force: true })
+                .should('not.have.class', 'dt-cell--editing');
+        });
+
+        it('navigation using arrow keys', function () {
+            cy.clickCell(2, 0)
+                .type('{rightarrow}');
+
+            cy.get('.dt-cell--focus')
+                .should('have.class', 'dt-cell--3-0')
+                .click({ force: true })
+                .type('{downarrow}');
+
+            cy.get('.dt-cell--focus')
+                .should('have.class', 'dt-cell--3-1');
+            // TODO: test navigation over hidden rows
+        });
+
+        it('navigation using ctrl + arrow keys', function () {
+            cy.clickCell(2, 0)
+                .type('{ctrl}{rightarrow}');
+            cy.get('.dt-cell--focus')
+                .should('have.class', 'dt-cell--7-0');
+        });
+
+        it('cell selection using shift + arrow keys', function () {
+            cy.getCell(2, 1)
+                .type('{shift}{rightarrow}{rightarrow}{downarrow}');
+
+            // 6 cells and 2 headers
+            cy.get('.dt-cell--highlight').should('have.length', 6 + 2);
+
+            cy.clickCell(2, 0);
+        });
+
+        it('mouse selection', function () {
+            // TODO
+            // cy.getCell(2, 1)
+            //     .trigger('mousedown', { which: 1, pageX: 331, pageY: 207, force: true })
+            //     .trigger('mousemove', { which: 1, pageX: 489, pageY: 312 })
+            //     .trigger('mouseup');
+        });
+    });
+
+    describe('Column', function () {
+        before(function () {
+            cy.visit('/');
+        });
+
+        it('header dropdown toggles on click', function () {
+            cy.getColumnCell(2)
+                .find('.dt-dropdown__toggle')
+                .as('toggle')
+                .click();
+            cy.getColumnCell(2)
+                .find('.dt-dropdown__list')
+                .as('dropdown-list')
+                .should('be.visible');
+
+            cy.get('@toggle').click();
+
+            cy.get('@dropdown-list').should('not.be.visible');
+        });
+
+        it('sort ascending button should work', function () {
+            cy.clickDropdown(2);
+            cy.clickDropdownItem(2, 'Sort Ascending');
+
+            cy.window().then(win => win.datatable.getColumn(2))
+                .its('sortOrder')
+                .should('eq', 'asc');
+
+            cy.window().then(win => win.datatable.datamanager)
+                .its('currentSort.colIndex')
+                .should('eq', 2);
+
+            cy.get('.dt-body .dt-row:first')
+                .contains('Airi Satou');
+
+            cy.clickDropdownItem(2, 'Reset sorting');
+        });
+
+        it('removes column using dropdown action', function () {
+            cy.get('.dt-cell--header').should('have.length', 8);
+
+            cy.clickDropdown(5);
+            cy.clickDropdownItem(5, 'Remove column');
+
+            cy.get('.dt-cell--header').should('have.length', 7);
+        });
+    });
+
+    describe('Row', function () {
+        it('check / uncheck row', function () {
+            cy.get('.dt-body .dt-row:first')
+                .find('input[type="checkbox"]')
+                .click();
+
+            cy.get('[data-row-index="0"]').should('have.class', 'dt-row--highlight');
+
+            cy.get('.dt-toast').contains('1 row selected');
+        });
+    });
+});

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,49 @@
+// ***********************************************
+// 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.Commands.add('getCell', (col, row) => {
+    return cy.get(`.dt-cell--${col}-${row}`);
+});
+
+Cypress.Commands.add('clickCell', (col, row) => {
+    return cy.getCell(col, row).click({ force: true });
+});
+
+Cypress.Commands.add('getColumnCell', (col) => {
+    return cy.get(`.dt-cell--header-${col}`);
+});
+
+Cypress.Commands.add('clickDropdown', (col) => {
+    return cy.getColumnCell(col)
+        .find('.dt-dropdown__toggle')
+        .click();
+});
+
+Cypress.Commands.add('clickDropdownItem', (col, item) => {
+    return cy.getColumnCell(col)
+        .find(`.dt-dropdown__list-item:contains("${item}")`)
+        .click({ force: true });
+});

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')

package.json

@@ -9,14 +9,19 @@
     "production": "rollup -c --production",
     "build:docs": "rollup -c --docs",
     "dev": "rollup -c -w",
-    "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js"
+    "cy:server": "http-server -p 8989",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "test": "start-server-and-test cy:server http://localhost:8989 cy:run"
   },
   "devDependencies": {
     "chai": "3.5.0",
+    "cypress": "^2.1.0",
     "deepmerge": "^2.0.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.11.0",
+    "http-server": "^0.11.1",
     "mocha": "3.3.0",
     "postcss-cssnext": "^3.1.0",
     "postcss-nested": "^3.0.0",
@@ -25,7 +30,8 @@
     "rollup-plugin-json": "^2.3.0",
     "rollup-plugin-node-resolve": "^3.0.3",
     "rollup-plugin-postcss": "^1.2.8",
-    "rollup-plugin-uglify-es": "^0.0.1"
+    "rollup-plugin-uglify-es": "^0.0.1",
+    "start-server-and-test": "^1.4.1"
   },
   "repository": {
     "type": "git",