diff --git a/frontend/test/metabase/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js b/frontend/test/metabase/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js index b9d8c483b9d263ca5d5decd6e9b4a88d8e3b8372..dae9c2e8aff172bd2b817eb9f8ce352ae4b46139 100644 --- a/frontend/test/metabase/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js +++ b/frontend/test/metabase/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js @@ -13,10 +13,50 @@ const DEFAULT_SETTINGS = { "graph.x_axis.axis_enabled": true, "graph.y_axis.axis_enabled": true, "graph.colors": ["#00FF00", "#FF0000"], - series: () => ({ display: "bar" }), - column: () => ({ date_style: "MMMM D, YYYY" }), + series: () => DEFAULT_SERIES_SETTINGS, + 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", () => { let element; const qsa = selector => [...element.querySelectorAll(selector)]; @@ -33,86 +73,115 @@ describe("LineAreaBarRenderer-bar", () => { document.body.removeChild(document.getElementById("fixture")); }); - ["area", "bar"].forEach(chartType => - ["stacked", "normalized"].forEach(stack_type => - // FIXME: failing on CI - 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, - }, - }, - 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, - }, - ); - - // hover over each bar - dispatchUIEvent(qsa(".bar, .dot")[0], "mousemove"); - dispatchUIEvent(qsa(".bar, .dot")[1], "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 }, - ]); - } - }), - ), - ); + it(`should render an bar chart with 1 series`, () => { + const onHoverChange = jest.fn(); + renderLineAreaBar(element, [MainSeries("bar")], { + 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: "Sum", value: 1 }, + ]); + }); + + it(`should render an bar chart with 2 series`, () => { + const onHoverChange = jest.fn(); + renderLineAreaBar(element, [MainSeries("bar"), ExtraSeries()], { + onHoverChange, + }); + + // hover over each bar + 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: 1 }, + ]); + expect(getDataKeyValues(calls[1][0])).toEqual([ + { key: "Category", value: "A" }, + { key: "Count", value: 2 }, + ]); + }); + + it(`should render an bar stacked chart with 2 series`, () => { + const onHoverChange = jest.fn(); + renderLineAreaBar( + element, + [MainSeries("bar", { "stackable.stack_type": "stacked" }), ExtraSeries()], + { + onHoverChange, + }, + ); + + // hover over each bar + 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: 1 }, + ]); + expect(getDataKeyValues(calls[1][0])).toEqual([ + { key: "Category", value: "A" }, + { key: "Count", value: 2 }, + ]); + }); + + it(`should render an bar normalized chart with 2 series`, () => { + const onHoverChange = jest.fn(); + renderLineAreaBar( + element, + [ + MainSeries("bar", { "stackable.stack_type": "normalized" }), + ExtraSeries(), + ], + { onHoverChange }, + ); + + // hover over each bar + 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) {