E2e testing (plotly#45)

* virtualization - define base virtualization strategies - define additional props - add tscript support to project * virtualization - refactor controlledtable and table * virtualization - no strategy & fe page strategy basics * virtualization - update props - update fe and none strategy * virtualization - fix bug for when to create a new virtualizer * virtualization * virtualization - copy/paste * virtualization - legacy behavior support (n-items + trailing) * virtualization - the build.. * virtualization - fix cell key * virtualization * virtualization - remove legacy (tail rows + display rows) - be page virtualization strategy - first be python prototypes * remove expanded_rows and collapsable logic * fix lint * - refactor virtualization strategies - placeholder for filter and sort - placeholder for prototype / "state" readonly props * - viewport props (viewport dataframe & indices) - ramda @types * virtualization * - virtualizer through memoize / controlled component instead of state * fix render loop caused by virtualization when linked to BE * be and fe usage examples * restructure project * refactor project structure * clean up * refactor virtualization (wip) * clean up fe/be virtualization + paging + examples * fix lint * virtualization * version 3.0.0dev * revert * revert * revert * fix lint * fix pyling * fix pylint * pagination display * pagination display * fix demo code... * fix pr comments * fix pylint * add tslint to build * refactor ControlledTable component + updates * improve fixed rows * refactor logic for creating headers and rows * Virtualization (plotly#36) * virtualization - define base virtualization strategies - define additional props - add tscript support to project * virtualization - refactor controlledtable and table * virtualization - no strategy & fe page strategy basics * virtualization - update props - update fe and none strategy * virtualization - fix bug for when to create a new virtualizer * virtualization * virtualization - copy/paste * virtualization - legacy behavior support (n-items + trailing) * virtualization - the build.. * virtualization - fix cell key * virtualization * virtualization - remove legacy (tail rows + display rows) - be page virtualization strategy - first be python prototypes * remove expanded_rows and collapsable logic * fix lint * - refactor virtualization strategies - placeholder for filter and sort - placeholder for prototype / "state" readonly props * - viewport props (viewport dataframe & indices) - ramda @types * virtualization * - virtualizer through memoize / controlled component instead of state * fix render loop caused by virtualization when linked to BE * be and fe usage examples * restructure project * refactor project structure * clean up * refactor virtualization (wip) * clean up fe/be virtualization + paging + examples * fix lint * virtualization * version 3.0.0dev * revert * revert * revert * fix lint * fix pyling * fix pylint * pagination display * pagination display * fix demo code... * fix pr comments * fix pylint * add tslint to build * fixed columns * build * remove <Fragment> usage for 15.x support * fix lint * improve/fix styling in fixed_columns mode * fixed rows and columns (wip) * refactor some styling * fix rendering with fixed columns * fix binding * demo app * fix frozen columns (th cells) height * change default cell width * overflow scroll only if necessary * dropdown not clipped by container/overflow * fix percy test * update builds * update table style * clean up styles * cypress e2e stub * e2e stub * e2e stub * e2e stub * e2e stub * e2e stub * Fixed rows columns (plotly#37) * virtualization - define base virtualization strategies - define additional props - add tscript support to project * virtualization - refactor controlledtable and table * virtualization - no strategy & fe page strategy basics * virtualization - update props - update fe and none strategy * virtualization - fix bug for when to create a new virtualizer * virtualization * virtualization - copy/paste * virtualization - legacy behavior support (n-items + trailing) * virtualization - the build.. * virtualization - fix cell key * virtualization * virtualization - remove legacy (tail rows + display rows) - be page virtualization strategy - first be python prototypes * remove expanded_rows and collapsable logic * fix lint * - refactor virtualization strategies - placeholder for filter and sort - placeholder for prototype / "state" readonly props * - viewport props (viewport dataframe & indices) - ramda @types * virtualization * - virtualizer through memoize / controlled component instead of state * fix render loop caused by virtualization when linked to BE * be and fe usage examples * restructure project * refactor project structure * clean up * refactor virtualization (wip) * clean up fe/be virtualization + paging + examples * fix lint * virtualization * version 3.0.0dev * revert * revert * revert * fix lint * fix pyling * fix pylint * pagination display * pagination display * fix demo code... * fix pr comments * fix pylint * add tslint to build * refactor ControlledTable component + updates * improve fixed rows * refactor logic for creating headers and rows * fixed columns * build * remove <Fragment> usage for 15.x support * fix lint * improve/fix styling in fixed_columns mode * fixed rows and columns (wip) * refactor some styling * fix rendering with fixed columns * fix binding * demo app * fix frozen columns (th cells) height * change default cell width * overflow scroll only if necessary * dropdown not clipped by container/overflow * fix percy test * update builds * update table style * clean up styles * fix FF styling * not editable div instead of input * fix header width * no-clipping dropdown + clipping fixed columns * fix fixed columns * Merge with master * readme update * sort * update python build * fix sort * rename version * performance improvements - use stylesheet element instead of inline styles for components - refactor stylesheets usage (facade) - switch out inputs for divs when inactive - refactor cell component to simplify props - update dataframe on blur instead of all changes * remove testing div wrapper * tslint - allow class arrow functions * fix regression in stylesheet * rebuild python dist * build python dist * cell reorder * fix dropdown regression * high level navigation and typing test * navigation and selection tests in typescript using cypress * remove old code * refactor + cypress tests against Python BE / functional in CI * add percy snapshots in JS * update python tests * pylint * pylint * pylint * pylint * pylint * pylint * pylint * python3 map changed * - improve stylesheet facade - fix column width bug - improve fixed columns / rows styling * fix dropdown menu regressions * sanitize stylesheet columns overrides (w/ and w/o units) * fix lint * 3.0 performance (plotly#43) * performance improvements - use stylesheet element instead of inline styles for components - refactor stylesheets usage (facade) - switch out inputs for divs when inactive - refactor cell component to simplify props - update dataframe on blur instead of all changes * remove testing div wrapper * tslint - allow class arrow functions * fix regression in stylesheet * build python dist * cell reorder * fix dropdown regression * - improve stylesheet facade - fix column width bug - improve fixed columns / rows styling * fix dropdown menu regressions * sanitize stylesheet columns overrides (w/ and w/o units) * fix lint * fix click when value is undefined|null|empty * fix deletable columns * n_fixed_columns must take hidden columns into consideration * fix typo * fix header merge with fixed columns * update readme / limitations * fix fixed cell rendering after columns props change * fix fixed columns when hidden is not first or last of merged group * fix lint * cell alignment * fix dropdown alignment * fix e2e tests * fix column width regression on navigate + test * - improve keyboard navigation - add tests for keyboard navigation - add tests for column width - improve stability of python BE for tests * remove now renderer useless eslint file * clean up tests implementation * fix PR comments * fix dropdown keyboard navigation * pr - remove commented code
HammadTheOne · Aug 21, 2018 · 9e5f6d1 · 9e5f6d1
1 parent 5a37db7
commit 9e5f6d1
Show file tree

Hide file tree

Showing 40 changed files with 14,715 additions and 265 deletions.
diff --git a/packages/dash-table/.circleci/config.yml b/packages/dash-table/.circleci/config.yml
@@ -1,6 +1,59 @@
 version: 2
 
 jobs:
+    "test":
+        docker:
+            - image: circleci/python:3.6-node-browsers
+            - image: cypress/base:8
+
+        steps:
+            - checkout
+            - restore_cache:
+                key: deps1-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
+            - run:
+                name: Install npm packages
+                command: npm install
+            - run:
+                name: Cypress Install
+                command: |
+                    $(npm bin)/cypress install
+
+            - save_cache:
+                key: deps1-{{ .Branch }}-{{ checksum "npm-shrinkwrap.json" }}-{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
+                paths:
+                    - node_modules
+                    - /home/circleci/.cache/Cypress
+
+            - run:
+                name: Create virtualenv
+                command: |
+                    python3 -m venv venv
+
+            - run:
+                name: Install requirements
+                command: |
+                    . venv/bin/activate
+                    pip install -r tests/python_fixtures/requirements.txt --quiet
+
+            - save_cache:
+                key: deps1-{{ .Branch }}-{{ checksum "tests/python_fixtures/requirements.txt" }}
+                paths:
+                    - "venv"
+
+            - run:
+                name: Run build:js
+                command: npm run build:js
+
+            - run:
+                name: Run build:py
+                command: npm run build:py
+
+            - run:
+                name: Run hosts
+                command: |
+                    . venv/bin/activate
+                    npm run test
+
     "node":
         docker:
             - image: circleci/node:8.11.3
@@ -48,10 +101,10 @@ jobs:
                 name: Install requirements
                 command: |
                     . venv/bin/activate
-                    pip install -r tests/requirements.txt --quiet
+                    pip install -r tests/python_fixtures/requirements.txt --quiet
 
             - save_cache:
-                key: deps1-{{ .Branch }}-{{ checksum "tests/requirements.txt" }}
+                key: deps1-{{ .Branch }}-{{ checksum "tests/python_fixtures/requirements.txt" }}
                 paths:
                     - "venv"
 
@@ -73,7 +126,7 @@ jobs:
                 name: Integration Tests
                 command: |
                     . venv/bin/activate
-                    python -m unittest tests.test_render
+                    python -m unittest tests.python_fixtures.test_render
                 when: always
 
 
@@ -83,3 +136,4 @@ workflows:
         jobs:
             - "python-3.6"
             - "node"
+            - "test"
diff --git a/packages/dash-table/.eslintignore b/packages/dash-table/.eslintignore
@@ -1,2 +1,3 @@
 *.css
+cypress/**
 registerServiceWorker.js
diff --git a/packages/dash-table/.gitignore b/packages/dash-table/.gitignore
@@ -8,6 +8,8 @@
 
 # testing
 /coverage
+/tests/e2e/cypress/screenshots/**
+/storybook-static/**
 
 # misc
 .DS_Store

diff --git a/packages/dash-table/.storybook/config.js b/packages/dash-table/.storybook/config.js
@@ -0,0 +1,13 @@
+import { configure, getStorybook, setAddon } from '@storybook/react';
+
+import createPercyAddon from '@percy-io/percy-storybook';
+const { percyAddon, serializeStories } = createPercyAddon();
+setAddon(percyAddon);
+
+const req = require.context('./../tests/visual/percy-storybook', true, /\.percy\./);
+function loadStories() {
+    req.keys().forEach(req);
+}
+
+configure(loadStories, module);
+serializeStories(getStorybook);
diff --git a/packages/dash-table/.storybook/webpack.config.js b/packages/dash-table/.storybook/webpack.config.js
@@ -0,0 +1,5 @@
+let config = require('./../webpack.config.js');
+
+config.externals = {};
+
+module.exports = config;
diff --git a/packages/dash-table/cypress.json b/packages/dash-table/cypress.json
@@ -0,0 +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"
+}
diff --git a/packages/dash-table/dash_table/bundle.js b/packages/dash-table/dash_table/bundle.js
diff --git a/packages/dash-table/dash_table/demo.js b/packages/dash-table/dash_table/demo.js
diff --git a/packages/dash-table/dash_table/package.json b/packages/dash-table/dash_table/package.json
@@ -1,14 +1,28 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc2",
+  "version": "3.0.0rc3",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
-    "start": "webpack-dev-server --config ./webpack.config.js --content-base dash_table --mode development",
-    "build:js-dev": "webpack --mode development",
-    "build:js": "webpack --mode production",
+    "preprivate::opentests": "run-s private::wait*",
+    "preprivate::runtests": "run-s private::wait*",
+    "private::build": "webpack --display-reasons --bail",
+    "private::host_dash": "python tests/e2e/dash/v_be_page.py",
+    "private::host_js": "http-server ./dash_table -c-1 --silent",
+    "private::wait_dash": "wait-on http://localhost:8081",
+    "private::wait_js": "wait-on http://localhost:8080",
+    "private::lint.js": "eslint src",
+    "private::lint.ts": "tslint --project . src/**/*.ts",
+    "private::opentests": "cypress open",
+    "private::runtests": "cypress run",
+    "private::snapshots": "build-storybook && percy-storybook",
+    "build.watch": "webpack-dev-server --content-base dash_table --mode development",
+    "build:js-dev": "run-s \"private::build -- --mode development\"",
+    "build:js": "run-s \"private::build -- --mode production\"",
     "build:py": "./extract-meta src/dash-table/components/Table.js > dash_table/metadata.json && cp package.json dash_table",
-    "lint": "eslint src && tslint --project . src/**/*.ts"
+    "lint": "run-s private::lint.js private::lint.ts",
+    "test": "run-p --race private::host* private::runtests private::snapshots",
+    "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <chris@plot.ly",
   "license": "MIT",
@@ -21,26 +35,34 @@
     "sheetclip": "^0.3.0"
   },
   "devDependencies": {
+    "@cypress/webpack-preprocessor": "^2.0.1",
+    "@percy-io/percy-storybook": "^2.0.0",
+    "@storybook/cli": "^4.0.0-alpha.16",
+    "@storybook/react": "^4.0.0-alpha.16",
     "@types/ramda": "^0.25.36",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
+    "cypress": "^3.0.3",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.9.1",
     "file-loader": "^1.1.11",
+    "http-server": "^0.11.1",
     "less": "^3.8.0",
     "less-loader": "^4.1.0",
     "npm": "^6.1.0",
+    "npm-run-all": "^4.1.3",
     "react-docgen": "^2.20.1",
     "style-loader": "^0.21.0",
     "ts-loader": "^4.4.2",
     "tslint": "^5.11.0",
     "typescript": "^3.0.1",
+    "wait-on": "^2.1.0",
     "webpack": "^4.8.3",
     "webpack-cli": "^2.1.3",
     "webpack-dev-server": "^3.1.5"

diff --git a/packages/dash-table/demo/App.js b/packages/dash-table/demo/App.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import {Table} from 'dash-table';
 import {mockData} from './data';
 import Dropdown from 'react-select';
-import TestFixtures from 'tests/fixtures.json';
+import TestFixtures from 'tests/python_fixtures/fixtures.json';
 import {merge} from 'ramda';
 import { memoizeOne } from 'core/memoizer';
 

diff --git a/packages/dash-table/demo/data.js b/packages/dash-table/demo/data.js
@@ -11,28 +11,6 @@ export const mockData = unpackIntoColumnsAndDataFrames([
         editable: false,
         data: gendata(i => i),
     },
-    {
-        id: 'aaa',
-        name: ['', 'Weather', 'Temperature'],
-        type: 'numeric',
-        width: 150,
-        data: gendata(i => i + 1),
-    },
-
-    {
-        id: 'bbb',
-        name: ['', 'Weather', 'Climate'],
-        type: 'numeric',
-        options: ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'].map(i => ({
-            label: i,
-            value: i,
-        })),
-        clearable: true,
-        width: 200,
-        data: gendata(
-            i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4]
-        ),
-    },
 
     {
         id: 'ccc',
@@ -77,6 +55,29 @@ export const mockData = unpackIntoColumnsAndDataFrames([
         width: 150,
         data: gendata(i => i * 10),
     },
+
+    {
+        id: 'bbb',
+        name: ['', 'Weather', 'Climate'],
+        type: 'dropdown',
+        options: ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'].map(i => ({
+            label: i,
+            value: i,
+        })),
+        clearable: true,
+        width: 200,
+        data: gendata(
+            i => ['Humid', 'Wet', 'Snowy', 'Tropical Beaches'][i % 4]
+        ),
+    },
+
+    {
+        id: 'aaa',
+        name: ['', 'Weather', 'Temperature'],
+        type: 'numeric',
+        width: 150,
+        data: gendata(i => i + 1),
+    }
 ]);
 
 export const mockDataSimple = unpackIntoColumnsAndDataFrames([