add tests for render_warning

finos · Oct 30, 2018 · 37120db · 37120db
1 parent 7d52a18
commit 37120db
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 16 deletions.
diff --git a/packages/perspective-viewer-highcharts/test/html/render_warning.html b/packages/perspective-viewer-highcharts/test/html/render_warning.html
@@ -0,0 +1,50 @@
+<!--
+   
+   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>
+
+        <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
+        <script src="perspective.view.js"></script>
+        <script src="highcharts.plugin.js"></script>
+        <script src="perspective.js"></script>
+
+        <link rel='stylesheet' href="demo.css">
+    </head>
+    <body>
+
+        <perspective-viewer
+            view="y_bar"
+            columns='["col_a"]'>
+        </perspective-viewer>
+
+        <script>
+            function newRows() {
+                var rows = [];
+                for (var x = 0; x < 500; x++) {
+                    var y = x + 10
+                    rows.push({
+                        col_a: x * 5 - 10,
+                        col_b: y * 10 + 90,
+                    });
+                }
+                return rows;
+            }
+
+            window.addEventListener("WebComponentsReady", function() {
+                var viewer = document.getElementsByTagName("perspective-viewer")[0];
+                // eslint-disable-next-line no-undef
+                var table = perspective.worker().table(newRows());
+                viewer.load(table);
+            });
+        </script>
+
+    </body>
+</html>
diff --git a/packages/perspective-viewer-highcharts/test/js/bar.spec.js b/packages/perspective-viewer-highcharts/test/js/bar.spec.js
@@ -57,15 +57,111 @@ utils.with_server({}, () => {
         });
     });
 
-    /*describe.page("render_warning.html", () => {
+    describe.page("render_warning.html", () => {
+        test.capture("render warning should not show under size limit.", async page => {
+            await page.waitForSelector("perspective-viewer:not([updating])");
+        });
+
+        test.capture(
+            "render warning should show above size limit.",
+            async page => {
+                const viewer = await page.$("perspective-viewer");
+                await page.evaluate(element => element.shadowRoot.querySelector("#config_button").click(), viewer);
+                await page.evaluate(element => {
+                    window.getPlugin("y_bar").max_size = 50;
+                    element.setAttribute("columns", '["col_b"]');
+                }, viewer);
+                await page.waitForFunction(
+                    element => {
+                        return !element.shadowRoot.querySelector(".plugin_information.hidden");
+                    },
+                    {},
+                    viewer
+                );
+            },
+            60000,
+            null,
+            false
+        );
+
         test.capture(
-            "render warning should show when size limit is reached.",
+            "dismissing render warning should trigger render.",
             async page => {
-                console.log(page);
+                const viewer = await page.$("perspective-viewer");
+                await page.evaluate(element => element.shadowRoot.querySelector("#config_button").click(), viewer);
+                await page.evaluate(element => {
+                    window.getPlugin("y_bar").max_size = 50;
+                    element.setAttribute("columns", '["col_b"]');
+                }, viewer);
+                await page.waitForFunction(
+                    element => {
+                        return !element.shadowRoot.querySelector(".plugin_information.hidden");
+                    },
+                    {},
+                    viewer
+                );
+                await page.evaluate(element => element.shadowRoot.querySelector(".plugin_information__action").click(), viewer);
+                await page.waitForSelector("perspective-viewer:not([updating])");
             },
             100000,
             null,
-            100000
+            false
         );
-    });*/
+
+        test.capture(
+            "selecting 'do not show again' should stop render warnings.",
+            async page => {
+                const viewer = await page.$("perspective-viewer");
+                await page.evaluate(element => element.shadowRoot.querySelector("#config_button").click(), viewer);
+                await page.evaluate(element => {
+                    window.getPlugin("y_bar").max_size = 50;
+                    element.setAttribute("columns", '["col_a", "col_b"]');
+                }, viewer);
+                await page.waitForFunction(
+                    element => {
+                        return !element.shadowRoot.querySelector(".plugin_information.hidden");
+                    },
+                    {},
+                    viewer
+                );
+                await page.evaluate(element => element.shadowRoot.querySelector(".plugin_information__action.plugin_information__action--dismiss").click(), viewer);
+                await page.evaluate(element => {
+                    element.setAttribute("columns", '["col_b"]');
+                }, viewer);
+                await page.waitForSelector("perspective-viewer:not([updating])", {timeout: 100000});
+            },
+            60000,
+            null,
+            false
+        );
+
+        test.capture(
+            "underlying data updates should not trigger rerender if warning is visible.",
+            async page => {
+                await page.evaluate(() => {
+                    window.getPlugin("y_bar").max_size = 50;
+                });
+
+                const viewer = await page.$("perspective-viewer");
+                await page.evaluate(element => element.shadowRoot.querySelector("#config_button").click(), viewer);
+                await page.evaluate(element => {
+                    element.setAttribute("columns", '["col_a", "col_b"]');
+                }, viewer);
+                await page.waitForSelector("perspective-viewer[updating]", {timeout: 100000});
+                await page.evaluate(element => {
+                    element.update([{col_a: 1234, col_b: 4321}]);
+                }, viewer);
+                await page.waitForFunction(
+                    element => {
+                        return !element.shadowRoot.querySelector(".plugin_information.hidden");
+                    },
+                    {},
+                    viewer
+                );
+            },
+            60000,
+            null,
+            false
+        );
+    });
 });
diff --git a/packages/perspective-viewer-highcharts/test/results/results.json b/packages/perspective-viewer-highcharts/test/results/results.json
@@ -78,5 +78,10 @@
     "scatter.html/tooltip shows proper column labels.": "efe51febbbe56d4a7147050c45a6673e",
     "scatter.html/tooltip shows pivot labels.": "cfcf1aa879d7cc315b507d2e5d5f540c",
     "line.html/tooltip shows proper column labels.": "9754ca4d31e51374b6d943669e979616",
-    "line.html/tooltip shows pivot labels.": "ef28cd5b4d790c67a47dafc8b976a726"
+    "line.html/tooltip shows pivot labels.": "ef28cd5b4d790c67a47dafc8b976a726",
+    "render_warning.html/render warning should not show under size limit.": "fbac6926fcc91ed2d40755b6ec21d9b4",
+    "render_warning.html/render warning should show above size limit.": "ad7814aaa1cd1a6090fc33f323766469",
+    "render_warning.html/dismissing render warning should trigger render.": "964aea475f68e1757f817f7f6d9f0665",
+    "render_warning.html/selecting 'do not show again' should stop render warnings.": "964aea475f68e1757f817f7f6d9f0665",
+    "render_warning.html/underlying data updates should not trigger rerender if warning is visible.": "caf9e95761d19f18f483ed76456e55dc"
 }
diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js
@@ -50,6 +50,10 @@ global.registerPlugin = function registerPlugin(name, plugin) {
     RENDERERS[name] = plugin;
 };
 
+global.getPlugin = function getPlugin(name) {
+    return RENDERERS[name];
+};
+
 function _register_debug_plugin() {
     global.registerPlugin("debug", {
         name: "Debug",
@@ -634,6 +638,7 @@ async function update(ignore_size_check = false) {
         const count = num_columns * num_rows;
         if (count >= this._plugin.max_size) {
             this._plugin_information.classList.remove("hidden");
+            this.removeAttribute("updating");
             return;
         }
     }
@@ -989,11 +994,11 @@ class ViewPrivate extends HTMLElement {
             this.setAttribute("view", this._vis_selector.value);
             this._debounce_update();
         });
-        this._plugin_information_action.addEventListener("mousedown", () => {
+        this._plugin_information_action.addEventListener("click", () => {
             this._debounce_update({ignore_size_check: true});
             this._plugin_information.classList.add("hidden");
         });
-        this._plugin_information_dismiss.addEventListener("mousedown", () => {
+        this._plugin_information_dismiss.addEventListener("click", () => {
             this._debounce_update({ignore_size_check: true});
             this._plugin_information.classList.add("hidden");
             this._show_warnings = false;

diff --git a/packages/perspective-viewer/src/less/default.less b/packages/perspective-viewer/src/less/default.less
@@ -311,7 +311,7 @@
         justify-content: flex-start;
         padding: 0.5rem;
         width: 100%;
-        z-index: 1;
+        z-index: 10000;
 
         &.hidden {
             display: none !important;

diff --git a/packages/perspective-viewer/test/js/utils.js b/packages/perspective-viewer/test/js/utils.js
@@ -168,7 +168,7 @@ test.run = function run(name, body, viewport = null) {
     });
 };
 
-test.capture = function capture(name, body, timeout = 60000, viewport = null, update_timeout = 30000) {
+test.capture = function capture(name, body, timeout = 60000, viewport = null, wait_for_update = true) {
     let _url = url;
     test(
         name,
@@ -184,12 +184,13 @@ test.capture = function capture(name, body, timeout = 60000, viewport = null, up
 
             await new Promise(setTimeout);
             await page.goto(`http://127.0.0.1:${__PORT__}/${_url}`);
-            await page.waitForSelector("perspective-viewer:not([updating])", {timeout: update_timeout});
+            const viewer_selector = wait_for_update ? "perspective-viewer:not([updating])" : "perspective-viewer";
+            await page.waitForSelector(viewer_selector);
 
             await body(page);
 
             // let animation run;
-            await page.waitForSelector("perspective-viewer:not([updating])", {timeout: update_timeout});
+            await page.waitForSelector(viewer_selector);
 
             const screenshot = await page.screenshot();
             // await page.close();
@@ -263,8 +264,19 @@ exports.invoke_tooltip = async function invoke_tooltip(svg_selector, page) {
     );
 };
 
-exports.trigger_render_warning = async function trigger_render_warning(page, col_name) {
-    const viewer = await page.$("perspective-viewer");
-    await page.evaluate(element => element.shadowRoot.querySelector("#config_button").click(), viewer);
-    await page.evaluate(element => element.setAttribute("columns", `["${col_name}"]`), viewer);
+exports.render_warning = {
+    set_warning_threshold: async function(page, plugin_name, threshold) {
+        await page.evaluate(() => {
+            window.getPlugin(plugin_name).max_size = threshold;
+        });
+    },
+    wait_for_warning: async function(page, viewer) {
+        await page.waitForFunction(
+            element => {
+                return !element.shadowRoot.querySelector(".plugin_information.hidden");
+            },
+            {},
+            viewer
+        );
+    }
 };