3.1 refactor tests (#113)

* props fixes

* update changelog

* bump version

* filter typing

* - delete unused usage files
- restructure tests folder

* - separate cypress and visual tests into 2 ci jobs

* - build before tests!

* add browsers to the node image for visual-test

Author: Marc-Andre-Rivet

.circleci/config.yml

@@ -49,11 +49,40 @@ jobs:
                 command: npm run build:py
 
             - run:
-                name: Run hosts
+                name: Run tests
                 command: |
                     . venv/bin/activate
                     npm run test
 
+
+    "visual-test":
+        docker:
+            - image: circleci/node:8.11.3-browsers
+
+        steps:
+            - checkout
+
+            - restore_cache:
+                key: deps1-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}-{{ checksum "package.json" }}
+
+            - run:
+                name: Install package.json
+                command: npm i
+
+            - save_cache:
+                key: deps1-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}-{{ checksum "package.json" }}
+                paths:
+                    - node_modules
+
+            - run:
+                name: Run build:js
+                command: npm run build:js
+
+            - run:
+                name: Run visual tests
+                command: npm run test.visual
+
+
     "node":
         docker:
             - image: circleci/node:8.11.3
@@ -143,3 +172,4 @@ workflows:
             - "python-3.6"
             - "node"
             - "test"
+            - "visual-test"

.config/webpack/base.js

@@ -62,7 +62,7 @@ module.exports = (preprocessor = {}, mode = 'development') => {
         },
         resolve: {
             alias: {
-                'cypress': path.resolve('./tests/e2e/cypress/src'),
+                'cypress': path.resolve('./tests/cypress/src'),
                 'dash-table': path.resolve('./src/dash-table'),
                 'core': path.resolve('./src/core'),
                 'tests': path.resolve('./tests')

TODO.md

@@ -1,9 +1,9 @@
 {
     "video": false,
-    "fixturesFolder": "./tests/e2e/cypress/fixtures",
-    "integrationFolder": "./tests/e2e/cypress/integration",
-    "pluginsFile": "./tests/e2e/cypress/plugins/index.js",
-    "screenshotsFolder": "./tests/e2e/cypress/screenshots",
-    "supportFile": "./tests/e2e/cypress/support/index.js",
-    "videoFolder": "./tests/e2e/cypress/videos"
+    "fixturesFolder": "./tests/cypress/fixtures",
+    "integrationFolder": "./tests/cypress/tests",
+    "pluginsFile": "./tests/cypress/plugins/index.js",
+    "screenshotsFolder": "./tests/cypress/screenshots",
+    "supportFile": "./tests/cypress/support/index.js",
+    "videoFolder": "./tests/cypress/videos"
 }

cypress.json

@@ -7,8 +7,8 @@
     "preprivate::opentests": "run-s private::wait*",
     "preprivate::runtests": "run-s private::wait*",
     "private::build": "webpack --display-reasons --bail",
-    "private::host_dash8081": "python tests/e2e/dash/v_be_page.py",
-    "private::host_dash8082": "python tests/e2e/dash/v_copy_paste.py",
+    "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
+    "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
     "private::host_js": "http-server ./dash_table -c-1 --silent",
     "private::wait_dash8081": "wait-on http://localhost:8081",
     "private::wait_dash8082": "wait-on http://localhost:8082",
@@ -17,15 +17,14 @@
     "private::lint.ts": "tslint --project . src/**/*.ts",
     "private::opentests": "cypress open",
     "private::runtests": "cypress run --browser chrome",
-    "private::test-e2e": "run-p --race private::host* private::runtests",
-    "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
     "build:js": "run-s \"private::build -- --mode production\"",
     "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js-test": "webpack --display-reasons --bail --config webpack.test.config.js",
     "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
-    "test": "run-s private::test-*",
+    "test": "run-p --race private::host* private::runtests",
+    "test.visual": "build-storybook && percy-storybook",
     "test.watch": "run-p --race \"build:js-test -- --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <[email protected]",

dash_table/bundle.js

@@ -7,8 +7,8 @@
     "preprivate::opentests": "run-s private::wait*",
     "preprivate::runtests": "run-s private::wait*",
     "private::build": "webpack --display-reasons --bail",
-    "private::host_dash8081": "python tests/e2e/dash/v_be_page.py",
-    "private::host_dash8082": "python tests/e2e/dash/v_copy_paste.py",
+    "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
+    "private::host_dash8082": "python tests/cypress/dash/v_copy_paste.py",
     "private::host_js": "http-server ./dash_table -c-1 --silent",
     "private::wait_dash8081": "wait-on http://localhost:8081",
     "private::wait_dash8082": "wait-on http://localhost:8082",
@@ -17,15 +17,14 @@
     "private::lint.ts": "tslint --project . src/**/*.ts",
     "private::opentests": "cypress open",
     "private::runtests": "cypress run --browser chrome",
-    "private::test-e2e": "run-p --race private::host* private::runtests",
-    "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
     "build:js": "run-s \"private::build -- --mode production\"",
     "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js-test": "webpack --display-reasons --bail --config webpack.test.config.js",
     "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
-    "test": "run-s private::test-*",
+    "test": "run-p --race private::host* private::runtests",
+    "test.visual": "build-storybook && percy-storybook",
     "test.watch": "run-p --race \"build:js-test -- --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <[email protected]",

dash_table/demo.js

@@ -2,7 +2,7 @@ const wp = require('@cypress/webpack-preprocessor')
 
 module.exports = (on) => {
     const options = {
-        webpackOptions: require('../../../../webpack.test.config.js'),
+        webpackOptions: require('../../../webpack.test.config.js'),
     }
 
     on('file:preprocessor', wp(options))

dash_table/package.json

@@ -0,0 +1,18 @@
+import DashTable from 'cypress/DashTable';
+
+describe('delete', () => {
+    beforeEach(() => cy.visit('http://localhost:8081'));
+
+    it('can delete row', () => {
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '0'));
+        DashTable.getDelete(0).click();
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '1'));
+    });
+
+    it('can delete row when sorted', () => {
+        cy.get('tr th.column-0 .sort').click({ force: true });
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '28155'));
+        DashTable.getDelete(0).click();
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '28154'));
+    });
+});

package.json

@@ -1,6 +1,6 @@
 import DashTable from 'cypress/DashTable';
 
-describe('delete', () => {
+describe('select row', () => {
     describe('be pagination & sort', () => {
         beforeEach(() => cy.visit('http://localhost:8081'));
 
@@ -22,26 +22,4 @@ describe('delete', () => {
             DashTable.getSelect(0).within(() => cy.get('input').should('not.be.checked'));
         });
     });
-
-    describe('fe pagination & sort', () => {
-        beforeEach(() => cy.visit('http://localhost:8080'));
-
-        it('can select row', () => {
-            DashTable.getSelect(0).within(() => cy.get('input').click());
-            DashTable.getSelect(0).within(() => cy.get('input').should('be.checked'));
-        });
-
-        it('can select row when sorted', () => {
-            cy.get('tr th.column-0 .sort').click({ force: true });
-            DashTable.getSelect(0).within(() => cy.get('input').click());
-            DashTable.getSelect(0).within(() => cy.get('input').should('be.checked'));
-        });
-
-        it('select, sort, new row is not selected', () => {
-            DashTable.getSelect(0).within(() => cy.get('input').click());
-            DashTable.getSelect(0).within(() => cy.get('input').should('be.checked'));
-            cy.get('tr th.column-0 .sort').click({ force: true });
-            DashTable.getSelect(0).within(() => cy.get('input').should('not.be.checked'));
-        });
-    });
 });

tests/e2e/cypress/@Types/modules.d.ts renamed to tests/cypress/@Types/modules.d.ts

@@ -0,0 +1,18 @@
+import DashTable from 'cypress/DashTable';
+
+describe('delete', () => {
+    beforeEach(() => cy.visit('http://localhost:8080'));
+
+    it('can delete row', () => {
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '1'));
+        DashTable.getDelete(0).click();
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '2'));
+    });
+
+    it('can delete row when sorted', () => {
+        cy.get('tr th.column-0 .sort').click({ force: true });
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '4999'));
+        DashTable.getDelete(0).click();
+        DashTable.getCell(0, 0).within(() => cy.get('.dash-cell-value').should('have.html', '4998'));
+    });
+});

tests/e2e/dash/v_be_page.py renamed to tests/cypress/dash/v_be_page.py

@@ -0,0 +1,25 @@
+import DashTable from 'cypress/DashTable';
+
+describe('select row', () => {
+    describe('fe pagination & sort', () => {
+        beforeEach(() => cy.visit('http://localhost:8080'));
+
+        it('can select row', () => {
+            DashTable.getSelect(0).within(() => cy.get('input').click());
+            DashTable.getSelect(0).within(() => cy.get('input').should('be.checked'));
+        });
+
+        it('can select row when sorted', () => {
+            cy.get('tr th.column-0 .sort').click({ force: true });
+            DashTable.getSelect(0).within(() => cy.get('input').click());
+            DashTable.getSelect(0).within(() => cy.get('input').should('be.checked'));
+        });
+
+        it('select, sort, new row is not selected', () => {
+            DashTable.getSelect(0).within(() => cy.get('input').click());
+            DashTable.getSelect(0).within(() => cy.get('input').should('be.checked'));
+            cy.get('tr th.column-0 .sort').click({ force: true });
+            DashTable.getSelect(0).within(() => cy.get('input').should('not.be.checked'));
+        });
+    });
+});

tests/e2e/dash/v_copy_paste.py renamed to tests/cypress/dash/v_copy_paste.py

@@ -2,7 +2,7 @@ import * as R from 'ramda';
 
 import derivedViewportDataframe from 'dash-table/derived/viewportDataframe';
 
-describe.only('derived viewport', () => {
+describe('derived viewport', () => {
     const viewportDataframe = derivedViewportDataframe();
 
     describe('virtual dataframe <= page size', () => {
@@ -48,7 +48,7 @@ describe.only('derived viewport', () => {
             });
         });
     });
-    
+
     describe('virtual dataframe > page size', () => {
         describe('with fe pagination', () => {
             it('returns slice of dataframe', () => {
@@ -68,4 +68,4 @@ describe.only('derived viewport', () => {
             });
         });
     });
-});
+});

tests/e2e/cypress/plugins/index.js renamed to tests/cypress/plugins/index.js

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "allowJs": true,
         "allowSyntheticDefaultImports": true,
-        "baseUrl": "./..",
+        "baseUrl": ".",
         "emitDecoratorMetadata": false,
         "experimentalDecorators": true,
         "lib": ["esnext", "dom"],
@@ -12,7 +12,7 @@
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "paths": {
-            "cypress/*": ["cypress/src/*"],
+            "cypress/*": ["./src/*"],
             "core/*": ["./../../src/core/*"],
             "dash-table/*": ["./../../src/dash-table/*"]