diff --git a/frontend/src/metabase/visualizations/visualizations/Funnel.jsx b/frontend/src/metabase/visualizations/visualizations/Funnel.jsx index a3f00c7ac13be9339747b58983f798e7f0118f2b..a5a45722e3e91f0132de402aea1c39308a16059b 100644 --- a/frontend/src/metabase/visualizations/visualizations/Funnel.jsx +++ b/frontend/src/metabase/visualizations/visualizations/Funnel.jsx @@ -228,9 +228,8 @@ export default class Funnel extends Component { } render() { - const { headerIcon, settings } = this.props; - - const hasTitle = settings["card.title"]; + const { headerIcon, settings, showTitle } = this.props; + const hasTitle = showTitle && settings["card.title"]; if (settings["funnel.type"] === "bar") { return <FunnelBar {...this.props} />; diff --git a/frontend/src/metabase/visualizations/visualizations/Funnel.unit.spec.jsx b/frontend/src/metabase/visualizations/visualizations/Funnel.unit.spec.jsx new file mode 100644 index 0000000000000000000000000000000000000000..2e52da1d2459c83b145199aac150018abbd25cec --- /dev/null +++ b/frontend/src/metabase/visualizations/visualizations/Funnel.unit.spec.jsx @@ -0,0 +1,57 @@ +import { render, screen } from "__support__/ui"; + +import { + createMockCard, + createMockColumn, + createMockDataset, + createMockDatasetData, + createMockSingleSeries, + createMockVisualizationSettings, +} from "metabase-types/api/mocks"; +import Funnel from "./Funnel"; + +const cardTitle = "cardTitle"; + +const setup = funnelProps => { + const series = createMockSingleSeries( + createMockCard(), + createMockDataset({ + data: createMockDatasetData({ + cols: [ + createMockColumn({ display_name: "foo" }), + createMockColumn({ display_name: "bar" }), + ], + rows: [ + [10, 20], + [100, 200], + ], + }), + }), + ); + + const settings = createMockVisualizationSettings({ + "card.title": cardTitle, + column: jest.fn(), + }); + + render( + <Funnel + series={[series]} + settings={settings} + visualizationIsClickable={jest.fn()} + {...funnelProps} + />, + ); +}; + +describe("funnel", () => { + it("should not render the title when showTitle=false", async () => { + setup({ showTitle: false }); + expect(screen.queryByText(cardTitle)).not.toBeInTheDocument(); + }); + + it("should render the title when showTitle=true", async () => { + setup({ showTitle: true }); + expect(screen.getByText(cardTitle)).toBeInTheDocument(); + }); +});