From 8e125b331b306f7ad92414a38a69e83bff3ef6d7 Mon Sep 17 00:00:00 2001 From: Andy Date: Wed, 3 Apr 2019 16:28:15 +0100 Subject: [PATCH 1/2] Implemented an example UI/D3 based unit test The test is able to create UI elements and then test that what was created is correct. Also added a new `yarn test:unit` command to allow you to easily run just the unit tests in watch mode. --- packages/perspective-viewer-d3fc/package.json | 1 + .../src/js/tooltip/selectionData.js | 2 +- .../test/js/jest.unit.config.js | 19 +++ .../js/unit/tooltip.js/generateHTML.spec.js | 129 ++++++++++++++++++ 4 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 packages/perspective-viewer-d3fc/test/js/jest.unit.config.js create mode 100644 packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js diff --git a/packages/perspective-viewer-d3fc/package.json b/packages/perspective-viewer-d3fc/package.json index fc1690da96..b330311b3d 100644 --- a/packages/perspective-viewer-d3fc/package.json +++ b/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\"" diff --git a/packages/perspective-viewer-d3fc/src/js/tooltip/selectionData.js b/packages/perspective-viewer-d3fc/src/js/tooltip/selectionData.js index de9593d87f..016d250ee3 100644 --- a/packages/perspective-viewer-d3fc/src/js/tooltip/selectionData.js +++ b/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) } ]; } diff --git a/packages/perspective-viewer-d3fc/test/js/jest.unit.config.js b/packages/perspective-viewer-d3fc/test/js/jest.unit.config.js new file mode 100644 index 0000000000..6588defaa7 --- /dev/null +++ b/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"] +}; diff --git a/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js b/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js new file mode 100644 index 0000000000..67fed3f9cf --- /dev/null +++ b/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js @@ -0,0 +1,129 @@ +/****************************************************************************** + * + * 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 data = { + mainValue: new Date("2019-04-03T15:15Z").getTime() + }; + generateHtml(tooltip, data, settings); + expect(getContent()).toEqual(["main-1: Wed Apr 03 2019 16:15:00 GMT+0100 (GMT Summer Time)"]); + }); + + 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"]); + }); +}); From 7fabfb13b7e3c572397b8ebe8010b6fdf29f0082 Mon Sep 17 00:00:00 2001 From: Andy Date: Thu, 4 Apr 2019 10:02:33 +0100 Subject: [PATCH 2/2] Use locale formatting for all tooltip types (including dates) The `{style: "decimal"}` option is ignored for non-float types. This gives us a more locale suitable formatting of the date. The test uses the same function to format the date so that it matches. --- .../perspective-viewer-d3fc/src/js/tooltip/generateHTML.js | 2 +- .../test/js/unit/tooltip.js/generateHTML.spec.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/perspective-viewer-d3fc/src/js/tooltip/generateHTML.js b/packages/perspective-viewer-d3fc/src/js/tooltip/generateHTML.js index eabe3468d6..bd84536651 100644 --- a/packages/perspective-viewer-d3fc/src/js/tooltip/generateHTML.js +++ b/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"}); diff --git a/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js b/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js index 67fed3f9cf..79a71ecb01 100644 --- a/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js +++ b/packages/perspective-viewer-d3fc/test/js/unit/tooltip.js/generateHTML.spec.js @@ -56,11 +56,12 @@ describe("tooltip should", () => { test("format mainValue as date", () => { settings.mainValues[0].type = "datetime"; + const testDate = new Date("2019-04-03T15:15Z"); const data = { - mainValue: new Date("2019-04-03T15:15Z").getTime() + mainValue: testDate.getTime() }; generateHtml(tooltip, data, settings); - expect(getContent()).toEqual(["main-1: Wed Apr 03 2019 16:15:00 GMT+0100 (GMT Summer Time)"]); + expect(getContent()).toEqual([`main-1: ${testDate.toLocaleString()}`]); }); test("format mainValue as integer", () => {