Skip to content
Snippets Groups Projects
Commit 76c69ef9 authored by Tom Robinson's avatar Tom Robinson
Browse files

Add series name test case to LineAreaBarRenderer-bar.unit.spec.js

parent 044755a8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/test/metabase/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js
+ 151
− 82
View file @ 76c69ef9
...@@ -13,10 +13,50 @@ const DEFAULT_SETTINGS = { ...@@ -13,10 +13,50 @@ const DEFAULT_SETTINGS = {
"graph.x_axis.axis_enabled": true, "graph.x_axis.axis_enabled": true,
"graph.y_axis.axis_enabled": true, "graph.y_axis.axis_enabled": true,
"graph.colors": ["#00FF00", "#FF0000"], "graph.colors": ["#00FF00", "#FF0000"],
series: () => ({ display: "bar" }), series: () => DEFAULT_SERIES_SETTINGS,
column: () => ({ date_style: "MMMM D, YYYY" }), column: () => DEFAULT_COLUMN_SETTINGS,
}; };
const DEFAULT_SERIES_SETTINGS = {
display: "bar",
};
const DEFAULT_COLUMN_SETTINGS = {
date_style: "MMMM D, YYYY",
};
function MainSeries(chartType, settings = {}) {
return {
card: {
display: chartType,
visualization_settings: {
...DEFAULT_SETTINGS,
...settings,
},
},
data: {
cols: [
StringColumn({ display_name: "Category", source: "breakout" }),
NumberColumn({ display_name: "Sum", source: "aggregation" }),
],
rows: [["A", 1]],
},
};
}
function ExtraSeries() {
return {
card: {},
data: {
cols: [
StringColumn({ display_name: "Category", source: "breakout" }),
NumberColumn({ display_name: "Count", source: "aggregation" }),
],
rows: [["A", 2]],
},
};
}
describe("LineAreaBarRenderer-bar", () => { describe("LineAreaBarRenderer-bar", () => {
let element; let element;
const qsa = selector => [...element.querySelectorAll(selector)]; const qsa = selector => [...element.querySelectorAll(selector)];
...@@ -33,86 +73,115 @@ describe("LineAreaBarRenderer-bar", () => { ...@@ -33,86 +73,115 @@ describe("LineAreaBarRenderer-bar", () => {
document.body.removeChild(document.getElementById("fixture")); document.body.removeChild(document.getElementById("fixture"));
}); });
["area", "bar"].forEach(chartType => it(`should render an bar chart with 1 series`, () => {
["stacked", "normalized"].forEach(stack_type => const onHoverChange = jest.fn();
// FIXME: failing on CI renderLineAreaBar(element, [MainSeries("bar")], {
it(`should render a ${stack_type || onHoverChange,
""} ${chartType} chart with 2 series`, () => { });
const onHoverChange = jest.fn();
renderLineAreaBar( // hover over each bar
element, dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
[
{ const { calls } = onHoverChange.mock;
card: { expect(getDataKeyValues(calls[0][0])).toEqual([
display: chartType, { key: "Category", value: "A" },
visualization_settings: { { key: "Sum", value: 1 },
...DEFAULT_SETTINGS, ]);
"stackable.stack_type": stack_type, });
},
}, it(`should render an bar chart with 2 series`, () => {
data: { const onHoverChange = jest.fn();
cols: [ renderLineAreaBar(element, [MainSeries("bar"), ExtraSeries()], {
StringColumn({ onHoverChange,
display_name: "Category", });
source: "breakout",
}), // hover over each bar
NumberColumn({ dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
display_name: "Sum", dispatchUIEvent(qsa(".bar, .dot")[1], "mousemove");
source: "aggregation",
}), const { calls } = onHoverChange.mock;
], expect(getDataKeyValues(calls[0][0])).toEqual([
rows: [["A", 1]], { key: "Category", value: "A" },
}, { key: "Sum", value: 1 },
}, ]);
{ expect(getDataKeyValues(calls[1][0])).toEqual([
card: {}, { key: "Category", value: "A" },
data: { { key: "Count", value: 2 },
cols: [ ]);
StringColumn({ });
display_name: "Category",
source: "breakout", it(`should render an bar stacked chart with 2 series`, () => {
}), const onHoverChange = jest.fn();
NumberColumn({ renderLineAreaBar(
display_name: "Count", element,
source: "aggregation", [MainSeries("bar", { "stackable.stack_type": "stacked" }), ExtraSeries()],
}), {
], onHoverChange,
rows: [["A", 2]], },
}, );
},
], // hover over each bar
{ dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
onHoverChange, dispatchUIEvent(qsa(".bar, .dot")[1], "mousemove");
},
); const { calls } = onHoverChange.mock;
expect(getDataKeyValues(calls[0][0])).toEqual([
// hover over each bar { key: "Category", value: "A" },
dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove"); { key: "Sum", value: 1 },
dispatchUIEvent(qsa(".bar, .dot")[1], "mousemove"); ]);
expect(getDataKeyValues(calls[1][0])).toEqual([
const { calls } = onHoverChange.mock; { key: "Category", value: "A" },
if (stack_type === "normalized") { { key: "Count", value: 2 },
expect(getDataKeyValues(calls[0][0])).toEqual([ ]);
{ key: "Category", value: "A" }, });
{ key: "% Sum", value: "33%" },
]); it(`should render an bar normalized chart with 2 series`, () => {
expect(getDataKeyValues(calls[1][0])).toEqual([ const onHoverChange = jest.fn();
{ key: "Category", value: "A" }, renderLineAreaBar(
{ key: "% Count", value: "67%" }, element,
]); [
} else { MainSeries("bar", { "stackable.stack_type": "normalized" }),
expect(getDataKeyValues(calls[0][0])).toEqual([ ExtraSeries(),
{ key: "Category", value: "A" }, ],
{ key: "Sum", value: 1 }, { onHoverChange },
]); );
expect(getDataKeyValues(calls[1][0])).toEqual([
{ key: "Category", value: "A" }, // hover over each bar
{ key: "Count", value: 2 }, dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
]); dispatchUIEvent(qsa(".bar, .dot")[1], "mousemove");
}
}), const { calls } = onHoverChange.mock;
), 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%" },
]);
});
it("should replace the aggregation name with the series name", () => {
const onHoverChange = jest.fn();
renderLineAreaBar(
element,
[
MainSeries("bar", {
series: () => ({ ...DEFAULT_SERIES_SETTINGS, title: "Foo" }),
}),
],
{ onHoverChange },
);
// hover over each bar
dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove");
const { calls } = onHoverChange.mock;
expect(getDataKeyValues(calls[0][0])).toEqual([
{ key: "Category", value: "A" },
{ key: "Foo", value: 1 },
]);
});
}); });
function getDataKeyValues(hover) { function getDataKeyValues(hover) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment