Add perspective-viewer-hypergrid tests for selectable

JaylinLee · Dec 14, 2019 · 22c6f96 · 22c6f96
1 parent 105c302
commit 22c6f96
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 3 deletions.
diff --git a/packages/perspective-viewer-hypergrid/src/js/styles.js b/packages/perspective-viewer-hypergrid/src/js/styles.js
@@ -26,8 +26,8 @@ properties.add_styles({
     treeHeaderBackgroundColor: `${title}-tree-header--background`,
     backgroundColor: `${title}--background`,
     treeHeaderColor: `${title}-tree-header--color`,
-    treeHeaderForegroundSelectionColor: `${title}-tree-header--color`,
-    treeHeaderBackgroundSelectionColor: `${title}-tree-header--background`,
+    treeHeaderForegroundSelectionColor: `${title}-tree-header-selection--color`,
+    treeHeaderBackgroundSelectionColor: `${title}-tree-header-selection--background`,
     backgroundSelectionColor: `${title}-selection--background`,
     foregroundSelectionColor: [`${title}--color`, `color`],
     borderBottom: `${title}--border-bottom-color`,
@@ -97,8 +97,8 @@ const base_grid_properties = {
     columnSelection: false,
     rowSelection: false,
     checkboxOnlyRowSelections: false,
-    backgroundSelectionColor: "#ffffff",
     columnClip: true,
+    treeHeaderBackgroundSelectionColor: "rgba(147, 185, 255, 0.625)", // same as default hypergrid backgroundSelectionColor
     columnHeaderFont: COLUMN_HEADER_FONT,
     columnHeaderForegroundSelectionFont: COLUMN_HEADER_FONT,
     columnHeaderBackgroundSelectionColor: undefined,

diff --git a/packages/perspective-viewer-hypergrid/test/html/selectable.html b/packages/perspective-viewer-hypergrid/test/html/selectable.html
@@ -0,0 +1,35 @@
+<!--
+   
+   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-viewer.js"></script>
+        <script src="perspective-viewer-hypergrid.js"></script>
+
+        <link rel='stylesheet' href="demo.css">
+
+    </head>
+    <body>
+
+        <perspective-viewer id="viewer" columns='["Row ID","Order ID","Order Date","Sales"]' selectable>
+
+        </perspective-viewer>
+        <script>
+            const data = [
+                {name: "Homer", number: 100},
+                {name: "Marge", number: 200}
+            ];
+
+            document.getElementById("viewer").load(data, {index: "name"});
+        </script>
+
+    </body>
+</html>
diff --git a/packages/perspective-viewer-hypergrid/test/js/selection.spec.js b/packages/perspective-viewer-hypergrid/test/js/selection.spec.js
@@ -0,0 +1,80 @@
+/******************************************************************************
+ *
+ * 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.
+ *
+ */
+
+const utils = require("@finos/perspective-test");
+const path = require("path");
+
+utils.with_server({}, () => {
+    describe.page(
+        "selectable.html",
+        () => {
+            describe("no pivots", () => {
+                describe("selecting a row", () => {
+                    test.capture("highlights the row with no pivots", async page => {
+                        await page.$("perspective-viewer");
+                        await page.focus("perspective-viewer");
+                        await page.mouse.click(80, 60);
+                        await page.mouse.move(80, 40);
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+                    });
+
+                    test.capture("keeps selection when row moves with no pivots", async page => {
+                        const viewer = await page.$("perspective-viewer");
+                        await page.evaluate(element => {
+                            element.setAttribute("sort", '[["number", "asc"]]');
+                        }, viewer);
+
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+
+                        await page.focus("perspective-viewer");
+                        await page.mouse.click(80, 60);
+
+                        await page.evaluate(element => {
+                            element.update([{name: "Homer", number: 300}]);
+                        }, viewer);
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+                    });
+                });
+            });
+            describe("row pivots", () => {
+                describe("selecting a row", () => {
+                    test.capture("highlights the row with row pivots", async page => {
+                        const viewer = await page.$("perspective-viewer");
+                        await page.evaluate(element => {
+                            element.setAttribute("row-pivots", '["name"]');
+                        }, viewer);
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+
+                        await page.focus("perspective-viewer");
+                        await page.mouse.click(80, 60);
+                        await page.mouse.move(80, 40);
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+                    });
+
+                    test.capture("keeps selection when row moves with row pivots", async page => {
+                        const viewer = await page.$("perspective-viewer");
+                        await page.evaluate(element => {
+                            element.setAttribute("sort", '[["number", "asc"]]');
+                            element.setAttribute("row-pivots", '["name"]');
+                        }, viewer);
+
+                        await page.focus("perspective-viewer");
+                        await page.mouse.click(80, 60);
+
+                        await page.evaluate(element => {
+                            element.update([{name: "Homer", number: 300}]);
+                        }, viewer);
+                        await page.waitForSelector("perspective-viewer:not([updating])");
+                    });
+                });
+            });
+        },
+        {reload_page: false, root: path.join(__dirname, "..", "..")}
+    );
+});