Merge pull request #117 from redbearsam/feature/test-more-charts

Added integration screenshot tests for more d3fc charts
redbearsam · Mar 26, 2019 · f78d1e7 · f78d1e7
2 parents 6d86def + 2a18683
commit f78d1e7
Show file tree

Hide file tree

Showing 15 changed files with 5,734 additions and 154 deletions.
diff --git a/packages/perspective-viewer-d3fc/test/html/scatter.html b/packages/perspective-viewer-d3fc/test/html/scatter.html
diff --git a/...rspective-viewer-d3fc/test/html/line.html → ...iewer-d3fc/test/html/shares-template.html b/...rspective-viewer-d3fc/test/html/line.html → ...iewer-d3fc/test/html/shares-template.html
@@ -1,41 +1,40 @@
-<!--
-   
-   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="d3fc.plugin.js"></script>
-
-        <link rel='stylesheet' href="demo.css">
-
-    </head>
-    <body>
-
-        <perspective-viewer
-            view="d3_y_line"
-            columns='["Sales"]'>
-
-        </perspective-viewer>
-
-        <script>
-
-            var xhr = new XMLHttpRequest();
-            xhr.open('GET', 'superstore.csv', true);
-            xhr.onload = function () { 
-                document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
-            }
-            xhr.send(null);
-
-        </script>
-
-    </body>
-</html>
+<!--
+   
+   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="d3fc.plugin.js"></script>
+
+        <link rel='stylesheet' href="demo.css">
+    </head>
+    <body>
+
+        <perspective-viewer view="{view-name}" row-pivots='["Date"]' column-pivots='[]' filters='[]'
+            sort='[]' columns='["Open","Price","High","Low"]'
+            aggregates='{"Date":"distinct count","Change%":"sum","High":"sum","Low":"sum","Open":"sum","Price":"sum","Vol.":"sum"}'>
+
+        </perspective-viewer>
+
+        <script>
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', 'shares.csv', true);
+            xhr.onload = function () { 
+                document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
+            }
+            xhr.send(null);
+
+        </script>
+
+    </body>
+</html>
diff --git a/packages/perspective-viewer-d3fc/test/html/shares.csv b/packages/perspective-viewer-d3fc/test/html/shares.csv
diff --git a/...erspective-viewer-d3fc/test/html/bar.html → ...iewer-d3fc/test/html/simple-template.html b/...erspective-viewer-d3fc/test/html/bar.html → ...iewer-d3fc/test/html/simple-template.html
@@ -1,41 +1,41 @@
-<!--
-   
-   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="d3fc.plugin.js"></script>
-
-        <link rel='stylesheet' href="demo.css">
-
-    </head>
-    <body>
-
-        <perspective-viewer
-            view="d3_y_bar"
-            columns='["Sales"]'>
-
-        </perspective-viewer>
-
-        <script>
-
-            var xhr = new XMLHttpRequest();
-            xhr.open('GET', 'superstore.csv', true);
-            xhr.onload = function () { 
-                document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
-            }
-            xhr.send(null);
-
-        </script>
-
-    </body>
-</html>
+<!--
+   
+   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="d3fc.plugin.js"></script>
+
+        <link rel='stylesheet' href="demo.css">
+
+    </head>
+    <body>
+
+        <perspective-viewer
+            view="{view-name}"
+            columns='{columns}'>
+
+        </perspective-viewer>
+
+        <script>
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', 'superstore.csv', true);
+            xhr.onload = function () { 
+                document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
+            }
+            xhr.send(null);
+
+        </script>
+
+    </body>
+</html>
diff --git a/packages/perspective-viewer-d3fc/test/html/themed-template.html b/packages/perspective-viewer-d3fc/test/html/themed-template.html
@@ -0,0 +1,77 @@
+<!--
+   
+   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="d3fc.plugin.js"></script>
+
+        <link rel='stylesheet' href="demo.css">
+
+        <style>
+          perspective-viewer {
+            --active-column--background: none;
+            --select--background-color: none;
+            --column-drop-container--background: none;
+            background-color: #2a2c2f;
+            color: #cfd8dc;
+            --plugin--background: #2f3136;
+            --column-drop-label--color: #666;
+            --column--border-color: #3b3f46;
+            --column-drop-target--background: #135d78;
+            --active-column-selector--color: #22a0ce;
+            --column_type-float--color: #22a0ce;
+            --column_type-string--color: #ff8888;
+            --psp-text-field--border-color: #22a0ce;
+            --button-hover--color: #22a0ce;
+            --d3fc-legend-text: #bbbbbb;
+            --d3fc-axis--ticks: #bbbbbb;
+            --d3fc-axis--lines: #555555;
+            --d3fc-tooltip--background: #333333;
+            --d3fc-tooltip--color: #cfd8dc;
+            --d3fc-series: #d62728;
+            --d3fc-series-1: #d62728;
+            --d3fc-series-2: #9467bd;
+            --d3fc-series-3: #8c564b;
+            --d3fc-series-4: #e377c2;
+            --d3fc-series-5: #7f7f7f;
+            --d3fc-series-6: #bcbd22;
+            --d3fc-series-7: #17becf;
+            --d3fc-series-8: #0366d6;
+            --d3fc-series-9: #ff7f0e;
+            --d3fc-series-10: #2ca02c;
+            --warning--color: #333;
+          }
+
+        </style>
+    </head>
+    <body>
+
+        <perspective-viewer
+            view="{view-name}"
+            columns='{columns}'>
+
+        </perspective-viewer>
+
+        <script>
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', 'superstore.csv', true);
+            xhr.onload = function () { 
+                document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
+            }
+            xhr.send(null);
+
+        </script>
+
+    </body>
+</html>
diff --git a/packages/perspective-viewer-d3fc/test/js/area.spec.js b/packages/perspective-viewer-d3fc/test/js/area.spec.js
@@ -0,0 +1,26 @@
+/******************************************************************************
+ *
+ * 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 path = require("path");
+
+const utils = require("@jpmorganchase/perspective-viewer/test/js/utils.js");
+const simple_tests = require("@jpmorganchase/perspective-viewer/test/js/simple_tests.js");
+
+const {withTemplate} = require("./simple-template");
+withTemplate("area", "d3_y_area");
+
+utils.with_server({}, () => {
+    describe.page(
+        "area.html",
+        () => {
+            simple_tests.default();
+        },
+        {reload_page: false, root: path.join(__dirname, "..", "..")}
+    );
+});
diff --git a/packages/perspective-viewer-d3fc/test/js/bar.spec.js b/packages/perspective-viewer-d3fc/test/js/bar.spec.js
@@ -12,6 +12,12 @@ const path = require("path");
 const utils = require("@jpmorganchase/perspective-viewer/test/js/utils.js");
 const simple_tests = require("@jpmorganchase/perspective-viewer/test/js/simple_tests.js");
 
+const {withTemplate} = require("./simple-template");
+
+withTemplate("bar", "d3_y_bar");
+withTemplate("bar-x", "d3_x_bar");
+withTemplate("bar-themed", "d3_y_bar", {template: "themed-template"});
+
 utils.with_server({}, () => {
     describe.page(
         "bar.html",
@@ -20,4 +26,20 @@ utils.with_server({}, () => {
         },
         {root: path.join(__dirname, "..", "..")}
     );
+
+    describe.page(
+        "bar-x.html",
+        () => {
+            simple_tests.default();
+        },
+        {root: path.join(__dirname, "..", "..")}
+    );
+
+    describe.page(
+        "bar-themed.html",
+        () => {
+            simple_tests.default();
+        },
+        {root: path.join(__dirname, "..", "..")}
+    );
 });
diff --git a/packages/perspective-viewer-d3fc/test/js/candlestick.spec.js b/packages/perspective-viewer-d3fc/test/js/candlestick.spec.js
@@ -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.
+ *
+ */
+
+const path = require("path");
+
+const utils = require("@jpmorganchase/perspective-viewer/test/js/utils.js");
+
+const {withTemplate} = require("./simple-template");
+withTemplate("candlestick", "d3_candlestick", {template: "shares-template"});
+
+utils.with_server({}, () => {
+    describe.page(
+        "candlestick.html",
+        () => {
+            test.capture("filter by a single instrument.", async page => {
+                const viewer = await page.$("perspective-viewer");
+                await page.evaluate(element => element.setAttribute("filters", '[["Name", "==", "BARC"]]'), viewer);
+            });
+
+            test.capture("filter to date range.", async page => {
+                const viewer = await page.$("perspective-viewer");
+                await page.shadow_click("perspective-viewer", "#config_button");
+                await page.evaluate(element => element.setAttribute("column-pivots", '["Name"]'), viewer);
+                await page.evaluate(element => element.setAttribute("filters", '[["Date", ">", "2019-01-01"]]'), viewer);
+            });
+        },
+        {reload_page: false, root: path.join(__dirname, "..", "..")}
+    );
+});