Clean up notebook `BreakoutStep` component (#30107)

* Move `BreakoutStep` to its own directory

* Rearrange props

* Add unit tests

frontend/src/metabase/query_builder/components/notebook/steps/BreakoutStep.tsx → frontend/src/metabase/query_builder/components/notebook/steps/BreakoutStep/BreakoutStep.tsx

@@ -3,8 +3,8 @@ import { t } from "ttag";
 
 import BreakoutPopover from "metabase/query_builder/components/BreakoutPopover";
 
-import type { NotebookStepUiComponentProps } from "../types";
-import ClauseStep from "./ClauseStep";
+import type { NotebookStepUiComponentProps } from "../../types";
+import ClauseStep from "../ClauseStep";
 
 const breakoutTetherOptions = {
   attachment: "top left",
@@ -27,13 +27,13 @@ function BreakoutStep({
 }: NotebookStepUiComponentProps) {
   return (
     <ClauseStep
-      data-testid="breakout-step"
-      color={color}
-      initialAddText={t`Pick a column to group by`}
       items={query.breakouts()}
-      renderName={item => item.displayName() ?? ""}
-      tetherOptions={breakoutTetherOptions}
+      initialAddText={t`Pick a column to group by`}
       readOnly={readOnly}
+      color={color}
+      isLastOpened={isLastOpened}
+      tetherOptions={breakoutTetherOptions}
+      renderName={item => item.displayName() ?? ""}
       renderPopover={breakout => (
         <BreakoutPopover
           query={query}
@@ -45,8 +45,8 @@ function BreakoutStep({
           }
         />
       )}
-      isLastOpened={isLastOpened}
       onRemove={breakout => updateQuery(breakout.remove())}
+      data-testid="breakout-step"
     />
   );
 }

frontend/src/metabase/query_builder/components/notebook/steps/BreakoutStep/BreakoutStep.unit.spec.tsx

+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render, screen, getIcon } from "__support__/ui";
+import { ORDERS } from "__support__/sample_database_fixture";
+import type StructuredQuery from "metabase-lib/queries/StructuredQuery";
+import { createMockNotebookStep, DEFAULT_LEGACY_QUERY } from "../../test-utils";
+import BreakoutStep from "./BreakoutStep";
+
+function setup(step = createMockNotebookStep()) {
+  const updateQuery = jest.fn();
+
+  render(
+    <BreakoutStep
+      step={step}
+      query={step.query}
+      topLevelQuery={step.topLevelQuery}
+      color="summarize"
+      isLastOpened={false}
+      reportTimezone="UTC"
+      updateQuery={updateQuery}
+    />,
+  );
+
+  function getNextQuery() {
+    const [lastCall] = updateQuery.mock.calls.slice(-1);
+    return lastCall[0] as StructuredQuery;
+  }
+
+  return { getNextQuery, updateQuery };
+}
+
+describe("BreakoutStep", () => {
+  it("should render correctly without a breakout", () => {
+    setup();
+    expect(screen.getByText("Pick a column to group by")).toBeInTheDocument();
+  });
+
+  it("should render a breakout correctly", () => {
+    const query = DEFAULT_LEGACY_QUERY.breakout(ORDERS.CREATED_AT);
+    setup(createMockNotebookStep({ query }));
+
+    expect(screen.getByText("Created At")).toBeInTheDocument();
+  });
+
+  it("should add a breakout", () => {
+    const { getNextQuery } = setup();
+
+    userEvent.click(screen.getByText("Pick a column to group by"));
+    userEvent.click(screen.getByText("Created At"));
+
+    const [breakout] = getNextQuery().breakouts();
+    expect(breakout.dimension().displayName()).toBe("Created At");
+  });
+
+  it("should change a breakout column", () => {
+    const query = DEFAULT_LEGACY_QUERY.breakout(ORDERS.CREATED_AT);
+    const { getNextQuery } = setup(createMockNotebookStep({ query }));
+
+    userEvent.click(screen.getByText("Created At"));
+    userEvent.click(screen.getByText("Product"));
+    userEvent.click(screen.getByText("Category"));
+
+    const [breakout] = getNextQuery().breakouts();
+    expect(breakout.dimension().displayName()).toBe("Category");
+  });
+
+  it("should remove a breakout", () => {
+    const query = DEFAULT_LEGACY_QUERY.breakout(ORDERS.CREATED_AT);
+    const { getNextQuery } = setup(createMockNotebookStep({ query }));
+
+    userEvent.click(getIcon("close"));
+
+    expect(getNextQuery().breakouts()).toHaveLength(0);
+  });
+});

frontend/src/metabase/query_builder/components/notebook/steps/BreakoutStep/index.ts

+export { default } from "./BreakoutStep";