diff --git a/frontend/test/visualizations/__support__/visualizations.js b/frontend/test/visualizations/__support__/visualizations.js
index 7aa257b4d00fd65613458a584e4763533b539c01..0112378a8a83fb8fe9521b20e501e3119195d72e 100644
--- a/frontend/test/visualizations/__support__/visualizations.js
+++ b/frontend/test/visualizations/__support__/visualizations.js
@@ -1,3 +1,6 @@
+import { getComputedSettingsForSeries } from "metabase/visualizations/lib/settings/visualization";
+import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
+
export function makeCard(card) {
return {
name: "card",
@@ -160,3 +163,19 @@ export function dispatchUIEvent(element, eventName) {
e.initUIEvent(eventName, true, true, window, 1);
element.dispatchEvent(e);
}
+
+export function renderChart(renderer, element, series, props) {
+ const chartType = series[0].card.display;
+ const settings = getComputedSettingsForSeries(series);
+
+ return renderer(element, {
+ chartType,
+ series,
+ settings,
+ ...props,
+ });
+}
+
+export function renderLineAreaBar(...args) {
+ return renderChart(lineAreaBarRenderer, ...args);
+}
diff --git a/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js b/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
index d435450fd29819a94bed1331370ed9acf9585842..253ee58436784ccc2e7dd779b36375b2909a7711 100644
--- a/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
+++ b/frontend/test/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
@@ -1,10 +1,10 @@
import "__support__/mocks"; // included explicitly whereas with integrated tests it comes with __support__/integrated_tests
-import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
import {
NumberColumn,
StringColumn,
dispatchUIEvent,
+ renderLineAreaBar,
} from "../__support__/visualizations";
const DEFAULT_SETTINGS = {
@@ -14,6 +14,7 @@ const DEFAULT_SETTINGS = {
"graph.y_axis.axis_enabled": true,
"graph.colors": ["#00FF00", "#FF0000"],
series: () => ({ display: "bar" }),
+ column: () => ({ date_style: "MMMM D, YYYY" }),
};
describe("LineAreaBarRenderer-bar", () => {
@@ -34,109 +35,85 @@ describe("LineAreaBarRenderer-bar", () => {
["area", "bar"].forEach(chartType =>
["stacked", "normalized"].forEach(stack_type =>
- it(
- "should render a " +
- (stack_type || "") +
- " " +
- chartType +
- " chart with 2 series",
- function() {
- return new Promise((resolve, reject) => {
- let hoverCount = 0;
- lineAreaBarRenderer(element, {
- chartType: chartType,
- series: [
- {
- card: {},
- data: {
- cols: [
- StringColumn({
- display_name: "Category",
- source: "breakout",
- }),
- NumberColumn({
- display_name: "Sum",
- source: "aggregation",
- }),
- ],
- rows: [["A", 1]],
- },
+ it(`should render a ${stack_type ||
+ ""} ${chartType} chart with 2 series`, () => {
+ const onHoverChange = jest.fn();
+ renderLineAreaBar(
+ element,
+ [
+ {
+ card: {
+ display: chartType,
+ visualization_settings: {
+ ...DEFAULT_SETTINGS,
+ "stackable.stack_type": stack_type,
},
- {
- card: {},
- data: {
- cols: [
- StringColumn({
- display_name: "Category",
- source: "breakout",
- }),
- NumberColumn({
- display_name: "Count",
- source: "aggregation",
- }),
- ],
- rows: [["A", 2]],
- },
- },
- ],
- settings: {
- ...DEFAULT_SETTINGS,
- "stackable.stack_type": stack_type,
},
- onHoverChange: hover => {
- try {
- const data =
- hover.data &&
- hover.data.map(({ key, value }) => ({ key, value }));
- let standardDisplay;
- let normalizedDisplay;
-
- hoverCount++;
- if (hoverCount === 1) {
- standardDisplay = [
- { key: "Category", value: "A" },
- { key: "Sum", value: 1 },
- ];
-
- normalizedDisplay = [
- { key: "Category", value: "A" },
- { key: "% Sum", value: "33%" },
- ];
-
- expect(data).toEqual(
- stack_type === "normalized"
- ? normalizedDisplay
- : standardDisplay,
- );
- dispatchUIEvent(qsa(".bar, .dot")[1], "mousemove");
- } else if (hoverCount === 2) {
- standardDisplay = [
- { key: "Category", value: "A" },
- { key: "Count", value: 2 },
- ];
-
- normalizedDisplay = [
- { key: "Category", value: "A" },
- { key: "% Count", value: "67%" },
- ];
+ data: {
+ cols: [
+ StringColumn({
+ display_name: "Category",
+ source: "breakout",
+ }),
+ NumberColumn({
+ display_name: "Sum",
+ source: "aggregation",
+ }),
+ ],
+ rows: [["A", 1]],
+ },
+ },
+ {
+ card: {},
+ data: {
+ cols: [
+ StringColumn({
+ display_name: "Category",
+ source: "breakout",
+ }),
+ NumberColumn({
+ display_name: "Count",
+ source: "aggregation",
+ }),
+ ],
+ rows: [["A", 2]],
+ },
+ },
+ ],
+ {
+ onHoverChange,
+ },
+ );
- expect(data).toEqual(
- stack_type === "normalized"
- ? normalizedDisplay
- : standardDisplay,
- );
+ // hover over each bar
+ dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
+ dispatchUIEvent(qsa(".bar, .dot")[1], "mousemove");
- resolve();
- }
- } catch (e) {
- reject(e);
- }
- },
- });
- dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
- });
- },
- ),
+ const { calls } = onHoverChange.mock;
+ if (stack_type === "normalized") {
+ expect(getDataKeyValues(calls[0][0])).toEqual([
+ { key: "Category", value: "A" },
+ { key: "% Sum", value: "33%" },
+ ]);
+ expect(getDataKeyValues(calls[1][0])).toEqual([
+ { key: "Category", value: "A" },
+ { key: "% Count", value: "67%" },
+ ]);
+ } else {
+ expect(getDataKeyValues(calls[0][0])).toEqual([
+ { key: "Category", value: "A" },
+ { key: "Sum", value: 1 },
+ ]);
+ expect(getDataKeyValues(calls[1][0])).toEqual([
+ { key: "Category", value: "A" },
+ { key: "Count", value: 2 },
+ ]);
+ }
+ }),
),
);
});
+
+function getDataKeyValues(hover) {
+ return hover.data.map(({ key, value }) => ({ key, value }));
+}
diff --git a/frontend/test/visualizations/components/LineAreaBarRenderer-scatter.unit.spec.js b/frontend/test/visualizations/components/LineAreaBarRenderer-scatter.unit.spec.js
index a2b25cfa983c85ab7a3cda81e0bd4739b0b775b3..cce9bb459370a4723edbfa1bb09b26ace6b392c7 100644
--- a/frontend/test/visualizations/components/LineAreaBarRenderer-scatter.unit.spec.js
+++ b/frontend/test/visualizations/components/LineAreaBarRenderer-scatter.unit.spec.js
@@ -2,7 +2,11 @@ import "__support__/mocks"; // included explicitly whereas with integrated tests
import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
-import { NumberColumn, dispatchUIEvent } from "../__support__/visualizations";
+import {
+ NumberColumn,
+ dispatchUIEvent,
+ renderLineAreaBar,
+} from "../__support__/visualizations";
const DEFAULT_SETTINGS = {
"graph.x_axis.scale": "linear",
@@ -11,6 +15,7 @@ const DEFAULT_SETTINGS = {
"graph.y_axis.axis_enabled": true,
"graph.colors": ["#000000"],
series: () => ({ display: "scatter" }),
+ column: () => ({}),
};
describe("LineAreaBarRenderer-scatter", () => {
@@ -32,11 +37,14 @@ describe("LineAreaBarRenderer-scatter", () => {
});
it("should render a scatter chart with 2 dimensions", function(done) {
- lineAreaBarRenderer(element, {
- chartType: "scatter",
- series: [
+ renderLineAreaBar(
+ element,
+ [
{
- card: {},
+ card: {
+ display: "scatter",
+ visualization_settings: DEFAULT_SETTINGS,
+ },
data: {
cols: [
NumberColumn({ display_name: "A", source: "breakout" }),
@@ -46,27 +54,31 @@ describe("LineAreaBarRenderer-scatter", () => {
},
},
],
- settings: DEFAULT_SETTINGS,
- onHoverChange: hover => {
- expect(hover.data.length).toBe(2);
- expect(hover.data[0].key).toBe("A");
- expect(hover.data[0].value).toBe(1);
- expect(hover.data[1].key).toBe("B");
- expect(hover.data[1].value).toBe(2);
+ {
+ onHoverChange: hover => {
+ expect(hover.data.length).toBe(2);
+ expect(hover.data[0].key).toBe("A");
+ expect(hover.data[0].value).toBe(1);
+ expect(hover.data[1].key).toBe("B");
+ expect(hover.data[1].value).toBe(2);
- done();
+ done();
+ },
},
- });
+ );
dispatchUIEvent(qsa(".bubble")[0], "mousemove");
});
it("should render a scatter chart with 2 dimensions and 1 metric", function(done) {
- lineAreaBarRenderer(element, {
- chartType: "scatter",
- series: [
+ renderLineAreaBar(
+ element,
+ [
{
- card: {},
+ card: {
+ display: "scatter",
+ visualization_settings: DEFAULT_SETTINGS,
+ },
data: {
cols: [
NumberColumn({ display_name: "A", source: "breakout" }),
@@ -77,18 +89,19 @@ describe("LineAreaBarRenderer-scatter", () => {
},
},
],
- settings: DEFAULT_SETTINGS,
- onHoverChange: hover => {
- expect(hover.data.length).toBe(3);
- expect(hover.data[0].key).toBe("A");
- expect(hover.data[0].value).toBe(1);
- expect(hover.data[1].key).toBe("B");
- expect(hover.data[1].value).toBe(2);
- expect(hover.data[2].key).toBe("C");
- expect(hover.data[2].value).toBe(3);
- done();
+ {
+ onHoverChange: hover => {
+ expect(hover.data.length).toBe(3);
+ expect(hover.data[0].key).toBe("A");
+ expect(hover.data[0].value).toBe(1);
+ expect(hover.data[1].key).toBe("B");
+ expect(hover.data[1].value).toBe(2);
+ expect(hover.data[2].key).toBe("C");
+ expect(hover.data[2].value).toBe(3);
+ done();
+ },
},
- });
+ );
dispatchUIEvent(qsa(".bubble")[0], "mousemove");
});
diff --git a/frontend/test/visualizations/components/LineAreaBarRenderer.unit.spec.js b/frontend/test/visualizations/components/LineAreaBarRenderer.unit.spec.js
index 929e165fb92b385c1754a6bcb11573f07898869b..447d131f151112c98465884a031083f7d5c040c1 100644
--- a/frontend/test/visualizations/components/LineAreaBarRenderer.unit.spec.js
+++ b/frontend/test/visualizations/components/LineAreaBarRenderer.unit.spec.js
@@ -1,6 +1,5 @@
import "__support__/mocks"; // included explicitly whereas with integrated tests it comes with __support__/integrated_tests
-import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
import { formatValue } from "metabase/lib/formatting";
import d3 from "d3";
@@ -10,6 +9,7 @@ import {
DateTimeColumn,
StringColumn,
dispatchUIEvent,
+ renderLineAreaBar,
} from "../__support__/visualizations";
let formatTz = offset =>
@@ -268,46 +268,49 @@ describe("LineAreaBarRenderer", () => {
unit,
settings,
}) => {
- lineAreaBarRenderer(element, {
- chartType: "line",
- series: rowsOfSeries.map(rows => ({
+ renderLineAreaBar(
+ element,
+ rowsOfSeries.map(rows => ({
data: {
cols: [DateTimeColumn({ unit }), NumberColumn()],
rows: rows,
},
- card: {},
+ card: {
+ display: "line",
+ visualization_settings: {
+ "graph.x_axis.scale": "timeseries",
+ "graph.x_axis.axis_enabled": true,
+ "graph.colors": ["#000000"],
+ ...settings,
+ },
+ },
})),
- settings: {
- "graph.x_axis.scale": "timeseries",
- "graph.x_axis.axis_enabled": true,
- "graph.colors": ["#000000"],
- series: () => ({ display: "line" }),
- ...settings,
+ {
+ onHoverChange,
},
- onHoverChange,
- });
+ );
};
const renderScalarBar = ({ scalars, onHoverChange, unit }) => {
- lineAreaBarRenderer(element, {
- chartType: "bar",
- series: scalars.map(scalar => ({
+ renderLineAreaBar(
+ element,
+ scalars.map(scalar => ({
data: {
cols: [StringColumn(), NumberColumn()],
rows: [scalar],
},
- card: {},
+ card: {
+ display: "bar",
+ visualization_settings: {
+ "bar.scalar_series": true,
+ "funnel.type": "bar",
+ "graph.colors": ["#509ee3", "#9cc177", "#a989c5", "#ef8c8c"],
+ "graph.x_axis.axis_enabled": true,
+ "graph.x_axis.scale": "ordinal",
+ },
+ },
})),
- settings: {
- "bar.scalar_series": true,
- "funnel.type": "bar",
- "graph.colors": ["#509ee3", "#9cc177", "#a989c5", "#ef8c8c"],
- "graph.x_axis.axis_enabled": true,
- "graph.x_axis.scale": "ordinal",
- "graph.x_axis._is_numeric": false,
- series: () => ({ display: "bar" }),
- },
- onHoverChange,
- });
+ { onHoverChange },
+ );
};
});
diff --git a/frontend/test/visualizations/lib/settings.unit.spec.js b/frontend/test/visualizations/lib/settings.unit.spec.js
index c3d0e9cf4f3d038288635aa8b00f21e28621e2b3..2cea5e665a5d7776e56eadaa7e09bf24de355d1e 100644
--- a/frontend/test/visualizations/lib/settings.unit.spec.js
+++ b/frontend/test/visualizations/lib/settings.unit.spec.js
@@ -97,6 +97,7 @@ describe("settings framework", () => {
hidden: false,
props: {},
value: "foo",
+ set: true,
},
]);
});