diff --git a/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx b/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx
index 5570f0325b7245d1ae4ba1dd29b80595fd2f1519..341ad3133856cf68151f166bb6955e8311089096 100644
--- a/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx
+++ b/frontend/src/metabase/query_builder/components/BreakoutPopover.jsx
@@ -38,7 +38,7 @@ const BreakoutPopover = ({
         onClose();
       }
     }}
-    tableMetadata={query.tableMetdata()}
+    tableMetadata={query.tableMetadata()}
     enableSubDimensions
     alwaysExpanded={alwaysExpanded}
   />
diff --git a/frontend/test/metabase/modes/components/actions/PivotByAction.unit.spec.js b/frontend/test/metabase/modes/components/actions/PivotByAction.unit.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..6617ceed2e18e18eb794bcb3bac0e2414b274f45
--- /dev/null
+++ b/frontend/test/metabase/modes/components/actions/PivotByAction.unit.spec.js
@@ -0,0 +1,56 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from "react";
+
+import {
+  question,
+  questionNoFields,
+  ORDERS_TABLE_ID,
+  ORDERS_CREATED_DATE_FIELD_ID,
+} from "__support__/sample_dataset_fixture";
+
+import { mount } from "enzyme";
+import { click } from "__support__/enzyme_utils";
+
+import PivotByAction from "metabase/modes/components/actions/PivotByAction";
+
+describe("PivotByAction", () => {
+  it("should return a broken out card", () => {
+    const TestPivotByAction = PivotByAction("Test", "test", () => true);
+
+    const countQuestion = question
+      .query()
+      .addAggregation(["count"])
+      .question()
+      .setDisplay("scalar");
+
+    const actions = TestPivotByAction({ question: countQuestion });
+    expect(actions).toHaveLength(1);
+
+    const PopoverComponent = actions[0].popover;
+
+    const onChangeCardAndRun = jest.fn();
+    const wrapper = mount(
+      <PopoverComponent onChangeCardAndRun={onChangeCardAndRun} />,
+    );
+
+    click(wrapper.find(".List-item a").first());
+
+    expect(onChangeCardAndRun).toHaveBeenLastCalledWith({
+      nextCard: {
+        dataset_query: {
+          database: 1,
+          query: {
+            aggregation: [["count"]],
+            breakout: [["datetime-field", ["field-id", 1], "day"]],
+            "source-table": 1,
+          },
+          type: "query",
+        },
+        display: "line",
+        name: null,
+        visualization_settings: {},
+      },
+    });
+  });
+});