Merge pull request #812 from finos/phosphor-puppeteer

Add puppeteer tests for `perspective-phosphor`
finos · Nov 14, 2019 · 40acc8a · 40acc8a
2 parents 7b80659 + 5cf5ad5
commit 40acc8a
Show file tree

Hide file tree

Showing 15 changed files with 294 additions and 16 deletions.
diff --git a/packages/perspective-phosphor/config/jest.integration.config.js b/packages/perspective-phosphor/config/jest.integration.config.js
@@ -0,0 +1,6 @@
+const config = require("@finos/perspective-test/jest.config");
+
+module.exports = Object.assign({}, config, {
+    roots: ["./js"],
+    rootDir: "../test/integration"
+});
diff --git a/packages/perspective-phosphor/config/jest.unit.config.js b/packages/perspective-phosphor/config/jest.unit.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    transform: {
+        ".js$": "@finos/perspective-test/src/js/transform.js"
+    },
+    rootDir: "../test/unit/"
+};
diff --git a/packages/perspective-phosphor/package.json b/packages/perspective-phosphor/package.json
@@ -23,7 +23,10 @@
         "build:styles": "webpack --color --config config/webpack.theme.config.js",
         "build:umd": "webpack --color --config config/webpack.umd.config.js",
         "clean": "rimraf dist",
-        "test": "jest --silent --color 2>&1"
+        "test": "yarn test:run",
+        "test:run": "npm-run-all test:unit test:integration",
+        "test:unit": "jest  --color --silent --config=./config/jest.unit.config.js 2>&1",
+        "test:integration": "jest --color --silent --config=./config/jest.integration.config.js 2>&1"
     },
     "dependencies": {
         "@finos/perspective": "^0.4.0-rc.3",
@@ -46,10 +49,5 @@
         "source-map-support": "^0.5.9",
         "typescript": "^3.6.0",
         "webpack-fix-style-only-entries": "^0.4.0"
-    },
-    "jest": {
-        "transform": {
-            ".js$": "@finos/perspective-test/src/js/transform.js"
-        }
     }
 }
diff --git a/packages/perspective-phosphor/test/integration/css/index.css b/packages/perspective-phosphor/test/integration/css/index.css
@@ -0,0 +1,18 @@
+body {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  #container{
+      width: 100%;
+      height: 100%;
+  }
+
diff --git a/packages/perspective-phosphor/test/integration/csv/superstore.csv b/packages/perspective-phosphor/test/integration/csv/superstore.csv
diff --git a/packages/perspective-phosphor/test/integration/html/index.html b/packages/perspective-phosphor/test/integration/html/index.html
@@ -0,0 +1,24 @@
+<!--
+   
+   Copyright (c) 2017, the Perspective Authors.
+   
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="perspective-phosphor.js"></script>
+        <script src="perspective-viewer-hypergrid.js"></script>
+
+        <link rel='stylesheet' href="index.css">
+        <link rel='stylesheet' href="material.css">
+    </head>
+    <body>
+        <perspective-viewer style="display: none;"></perspective-viewer>
+        <div id="container"></div>
+
+    </body>
+</html>
diff --git a/packages/perspective-phosphor/test/integration/js/workspace.spec.js b/packages/perspective-phosphor/test/integration/js/workspace.spec.js
@@ -0,0 +1,118 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2019, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const utils = require("@finos/perspective-test");
+const path = require("path");
+
+const TEST_ROOT = path.join(__dirname, "..", "..", "..");
+const PATHS = [
+    path.join(TEST_ROOT, "dist", "umd"),
+    path.join(TEST_ROOT, "dist", "themes"),
+    path.join(TEST_ROOT, "test", "integration", "html"),
+    path.join(TEST_ROOT, "test", "integration", "css"),
+    path.join(TEST_ROOT, "test", "integration", "csv")
+];
+
+utils.with_server({paths: PATHS}, () => {
+    describe.page(
+        "index.html",
+        () => {
+            test.capture(
+                "simple perspective workspace",
+                async page => {
+                    const container = await page.$("#container");
+                    await page.evaluate(async node => {
+                        const workspace = new window.PerspectivePhosphor.PerspectiveWorkspace({node});
+                        const widget = new window.PerspectivePhosphor.PerspectiveWidget();
+                        widget.viewer.setAttribute("id", "viewer");
+                        workspace.addViewer(widget);
+
+                        const response = await fetch("superstore.csv");
+                        widget.load(await response.text());
+                    }, container);
+
+                    await page.waitFor(() => {
+                        const elem = document.getElementById("viewer");
+                        return elem.view !== undefined;
+                    });
+                    await page.waitForSelector("#viewer:not([updating])");
+                },
+                {wait_for_update: false, timeout: 30000}
+            );
+
+            test.capture(
+                "perspective workspace and duplicate view",
+                async page => {
+                    const container = await page.$("#container");
+                    await page.evaluate(async node => {
+                        const workspace = new window.PerspectivePhosphor.PerspectiveWorkspace({node});
+                        const widget = new window.PerspectivePhosphor.PerspectiveWidget();
+
+                        widget.viewer.setAttribute("id", "viewer");
+
+                        workspace.addViewer(widget);
+                        const response = await fetch("superstore.csv");
+                        const data = await response.text();
+                        widget.load(data);
+
+                        workspace.dockpanel.duplicate(widget);
+                    }, container);
+
+                    await page.waitFor(() => {
+                        const elem = document.getElementById("viewer");
+                        return elem.view !== undefined;
+                    });
+
+                    await page.waitForSelector("#viewer:not([updating])");
+                },
+                // fail_on_errors = false because of hypergrid bug that causes errors when multiple grids are rendered
+                {wait_for_update: false, timeout: 60000, fail_on_errors: false}
+            );
+
+            test.skip(
+                "perspective workspace and master view",
+                async page => {
+                    const container = await page.$("#container");
+                    await page.evaluate(async node => {
+                        const workspace = new window.PerspectivePhosphor.PerspectiveWorkspace({node});
+                        window.workspace = workspace;
+                        const widget = new window.PerspectivePhosphor.PerspectiveWidget();
+
+                        widget.viewer.setAttribute("id", "viewer");
+
+                        workspace.addViewer(widget);
+                        const response = await fetch("superstore.csv");
+                        const data = await response.text();
+                        widget.load(data);
+
+                        workspace.dockpanel.duplicate(widget);
+                    }, container);
+
+                    await page.waitFor(() => {
+                        const elem = document.getElementById("viewer");
+                        return elem.view !== undefined;
+                    });
+
+                    await page.evaluate(() => {
+                        const widget = window.workspace.dockpanel.widgets().next();
+                        widget.restore({
+                            "row-pivots": ["Segment"],
+                            columns: ["Profit"]
+                        });
+                        window.workspace.makeMaster(widget);
+                        window.workspace.setRelativeSizes([1, 2]);
+                    });
+                    await page.waitForSelector("perspective-viewer:not([updating])");
+                },
+                {wait_for_update: false, timeout: 60000, fail_on_errors: false}
+            );
+        },
+        {root: TEST_ROOT}
+    );
+});
diff --git a/packages/perspective-phosphor/test/results/results.json b/packages/perspective-phosphor/test/results/results.json
@@ -0,0 +1,6 @@
+{
+    "__GIT_COMMIT__": "61e4a83125c8a5406fead71a83bf430f279815a7",
+    "index.html/perspective workspace and master view": "8c6165a59ac1e0e02e619021751df3c3",
+    "index.html/simple perspective workspace": "2aec2b4d01494380ba6e1bdb08365ade",
+    "index.html/perspective workspace and duplicate view": "ac0cb35d961f86aede74d9ee566f1f5c"
+}
diff --git a/...or/__mocks__/@finos/perspective-viewer.js → ...it/__mocks__/@finos/perspective-viewer.js b/...or/__mocks__/@finos/perspective-viewer.js → ...it/__mocks__/@finos/perspective-viewer.js
diff --git a/...ective-phosphor/test/js/dockpanel.spec.js → ...e-phosphor/test/unit/js/dockpanel.spec.js b/...ective-phosphor/test/js/dockpanel.spec.js → ...e-phosphor/test/unit/js/dockpanel.spec.js
@@ -1,5 +1,5 @@
-import {PerspectiveDockPanel} from "../../dist/esm/dockpanel";
-import {PerspectiveWidget} from "../../dist/esm/widget";
+import {PerspectiveDockPanel} from "../../../dist/esm/dockpanel";
+import {PerspectiveWidget} from "../../../dist/esm/widget";
 import {Widget} from "@phosphor/widgets";
 
 describe("dockpanel", () => {

diff --git a/...ective-phosphor/test/js/workspace.spec.js → ...e-phosphor/test/unit/js/workspace.spec.js b/...ective-phosphor/test/js/workspace.spec.js → ...e-phosphor/test/unit/js/workspace.spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/camelcase */
-import {PerspectiveWorkspace} from "../../dist/esm/workspace";
+import {PerspectiveWorkspace} from "../../../dist/esm/workspace";
 import {toArray} from "@phosphor/algorithm";
-import {PerspectiveWidget} from "../../dist/esm/widget";
+import {PerspectiveWidget} from "../../../dist/esm/widget";
 
 describe("workspace", () => {
     test("addViewer adds widget to underlying dockpanel", () => {

diff --git a/packages/perspective-test/jest.all.config.js b/packages/perspective-test/jest.all.config.js
@@ -4,7 +4,8 @@ module.exports = {
         "packages/perspective-viewer/test/js",
         "packages/perspective-viewer-hypergrid/test/js",
         "packages/perspective-viewer-highcharts/test/js",
-        "packages/perspective-viewer-d3fc/test/js"
+        "packages/perspective-viewer-d3fc/test/js",
+        "packages/perspective-phosphor/test/"
     ],
     verbose: true,
     testURL: "http://localhost/",

diff --git a/packages/perspective-test/src/js/beforeEachSpec.js b/packages/perspective-test/src/js/beforeEachSpec.js
@@ -7,7 +7,6 @@
  *
  */
 
-global.CustomEvent = () => {};
 global.customElements = {define: () => {}};
 global.HTMLElement = class {
     getAttribute() {}

diff --git a/packages/perspective-test/src/js/index.js b/packages/perspective-test/src/js/index.js
@@ -234,7 +234,7 @@ expect.extend({
     }
 });
 
-test.capture = function capture(name, body, {timeout = 60000, viewport = null, wait_for_update = true} = {}) {
+test.capture = function capture(name, body, {timeout = 60000, viewport = null, wait_for_update = true, fail_on_errors = true} = {}) {
     const _url = page_url;
     const _reload_page = page_reload;
     test(
@@ -333,7 +333,9 @@ test.capture = function capture(name, body, {timeout = 60000, viewport = null, w
                         await new Promise(f => setTimeout(f, 1000000));
                     }
                 }
-                expect(errors).toNotError();
+                if (fail_on_errors) {
+                    expect(errors).toNotError();
+                }
                 expect(hash).toBe(results[_url + "/" + name]);
             }
         },

diff --git a/scripts/test_js.js b/scripts/test_js.js
@@ -54,8 +54,8 @@ function jest() {
 }
 
 function slow_jest() {
-    if (!process.env.PACKAGE || minimatch("perspective-phosphor", process.env.PACKAGE) || minimatch("perspective-jupyterlab", process.env.PACKAGE)) {
-        return (IS_WRITE ? "WRITE_TESTS=1 " : "") + 'TZ=UTC node_modules/.bin/lerna exec --scope="@finos/perspective-@(jupyterlab|phosphor)" --concurrency 1 --no-bail -- yarn --silent test:run';
+    if (!process.env.PACKAGE || minimatch("perspective-phosphor", process.env.PACKAGE)) {
+        return (IS_WRITE ? "WRITE_TESTS=1 " : "") + 'TZ=UTC node_modules/.bin/lerna exec --scope="@finos/perspective-jupyterlab" --concurrency 1 --no-bail -- yarn --silent test:run';
     } else {
         return 'echo ""';
     }