Merge pull request #158 from redbearsam/feature/first-ui-unit-test

Implemented an example UI/D3 based unit test

Author: mhooper-scottlogic

packages/perspective-viewer-d3fc/package.json

@@ -19,6 +19,7 @@
         "test:build": "cpx \"test/html/*\" build",
         "watch": "webpack --color --watch --config src/config/d3fc.watch.config.js",
         "test:run": "jest --silent --color 2>&1",
+        "test:unit": "jest --config=test/js/jest.unit.config.js --color --watch",
         "test": "npm-run-all test:build test:run",
         "clean": "rimraf build && rimraf cjs",
         "clean:screenshots": "rimraf \"screenshots/**/*.@(failed|diff).png\""

packages/perspective-viewer-d3fc/src/js/tooltip/generateHTML.js

@@ -30,4 +30,4 @@ function addDataValues(tooltipDiv, values) {
         });
 }
 
-const formatNumber = value => (typeof value === "number" ? value.toLocaleString(undefined, {style: "decimal"}) : value);
+const formatNumber = value => value.toLocaleString(undefined, {style: "decimal"});

packages/perspective-viewer-d3fc/src/js/tooltip/selectionData.js

@@ -46,7 +46,7 @@ export function getDataValues(data, settings) {
     return [
         {
             name: settings.mainValues[0].name,
-            value: data.colorValue || data.mainValue - data.baseValue || data.mainValue
+            value: toValue(settings.mainValues[0].type, data.colorValue || data.mainValue - data.baseValue || data.mainValue)
         }
     ];
 }

packages/perspective-viewer-d3fc/test/js/jest.unit.config.js

@@ -0,0 +1,19 @@
+/******************************************************************************
+ *
+ * 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.
+ *
+ */
+
+module.exports = {
+    roots: ["unit"],
+    verbose: true,
+    testURL: "http://localhost/",
+    automock: false,
+    transform: {
+        ".js$": "./transform.js"
+    },
+    setupFiles: ["./beforeEachSpec.js"]
+};

packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js

@@ -0,0 +1,130 @@
+/******************************************************************************
+ *
+ * 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.
+ *
+ */
+import {select} from "d3";
+import {generateHtml} from "../../../../src/js/tooltip/generateHTML";
+
+describe("tooltip should", () => {
+    let tooltip = null;
+    let settings = null;
+
+    beforeEach(() => {
+        tooltip = select("body")
+            .append("div")
+            .classed("tooltip-test", true);
+        tooltip.append("div").attr("id", "tooltip-values");
+
+        settings = {
+            crossValues: [],
+            splitValues: [],
+            mainValues: [{name: "main-1", type: "integer"}]
+        };
+    });
+    afterEach(() => {
+        tooltip.remove();
+    });
+
+    const getContent = () => {
+        const content = [];
+        tooltip.selectAll("li").each((d, i, nodes) => {
+            content.push(select(nodes[i]).text());
+        });
+        return content;
+    };
+
+    test("show single mainValue", () => {
+        const data = {
+            mainValue: 101
+        };
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["main-1: 101"]);
+    });
+
+    test("show multiple mainValues", () => {
+        settings.mainValues.push({name: "main-2", type: "float"});
+        const data = {
+            mainValues: [101, 202.22]
+        };
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["main-1: 101", "main-2: 202.22"]);
+    });
+
+    test("format mainValue as date", () => {
+        settings.mainValues[0].type = "datetime";
+        const testDate = new Date("2019-04-03T15:15Z");
+        const data = {
+            mainValue: testDate.getTime()
+        };
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual([`main-1: ${testDate.toLocaleString()}`]);
+    });
+
+    test("format mainValue as integer", () => {
+        settings.mainValues[0].type = "integer";
+        const data = {
+            mainValue: 12345.6789
+        };
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["main-1: 12,345"]);
+    });
+
+    test("format mainValue as decimal", () => {
+        settings.mainValues[0].type = "float";
+        const data = {
+            mainValue: 12345.6789
+        };
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["main-1: 12,345.679"]);
+    });
+
+    test("show with single crossValue", () => {
+        settings.crossValues.push({name: "cross-1", type: "string"});
+        const data = {
+            crossValue: "tc-1",
+            mainValue: 101
+        };
+
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["cross-1: tc-1", "main-1: 101"]);
+    });
+
+    test("show with multiple crossValues", () => {
+        settings.crossValues.push({name: "cross-1", type: "string"});
+        settings.crossValues.push({name: "cross-2", type: "integer"});
+        const data = {
+            crossValue: "tc-1|1001",
+            mainValue: 101
+        };
+
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["cross-1: tc-1", "cross-2: 1,001", "main-1: 101"]);
+    });
+
+    test("show with single splitValue", () => {
+        settings.splitValues.push({name: "split-1", type: "string"});
+        const data = {
+            key: "ts-1",
+            mainValue: 101
+        };
+
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["split-1: ts-1", "main-1: 101"]);
+    });
+
+    test("show with multiple splitValues", () => {
+        settings.splitValues.push({name: "split-1", type: "string"});
+        settings.splitValues.push({name: "split-2", type: "integer"});
+        const data = {
+            key: "ts-1|1001",
+            mainValue: 101
+        };
+
+        generateHtml(tooltip, data, settings);
+        expect(getContent()).toEqual(["split-1: ts-1", "split-2: 1,001", "main-1: 101"]);
+    });
+});