Add segment editor tests (#37225)

frontend/src/metabase-lib/test-helpers.ts

@@ -129,6 +129,18 @@ export const findAggregationOperator = (
   return operator;
 };
 
+export const findSegment = (query: Lib.Query, segmentName: string) => {
+  const stageIndex = 0;
+  const segment = Lib.availableSegments(query, stageIndex).find(
+    segment =>
+      Lib.displayInfo(query, stageIndex, segment).displayName === segmentName,
+  );
+  if (!segment) {
+    throw new Error(`Could not find segment ${segmentName}`);
+  }
+  return segment;
+};
+
 function withTemporalBucketAndBinningStrategy(
   query: Lib.Query,
   column: Lib.ColumnMetadata,

frontend/src/metabase/querying/components/FilterModal/SegmentFilterEditor/SegmentFilterEditor.tsx

-import { useMemo } from "react";
 import { t } from "ttag";
 import { Flex, Grid, MultiSelect, Text } from "metabase/ui";
 import { Icon } from "metabase/core/components/Icon";
@@ -13,17 +12,14 @@ export function SegmentFilterEditor({
   segmentItems,
   onChange,
 }: SegmentFilterEditorProps) {
-  const data = useMemo(() => {
-    return segmentItems.map((segmentItem, segmentIndex) => ({
-      value: String(segmentIndex),
-      label: segmentItem.displayName,
-      isSelected: segmentItem.filterPositions.length > 0,
-    }));
-  }, [segmentItems]);
+  const options = segmentItems.map((segmentItem, segmentIndex) => ({
+    value: String(segmentIndex),
+    label: segmentItem.displayName,
+    isSelected: segmentItem.filterPositions.length > 0,
+  }));
 
-  const value = useMemo(() => {
-    return data.filter(item => item.isSelected).map(item => item.value);
-  }, [data]);
+  const data = options.map(({ value, label }) => ({ value, label }));
+  const value = options.filter(item => item.isSelected).map(item => item.value);
 
   const handleChange = (newValue: string[]) => {
     const newSegments = newValue
@@ -48,6 +44,7 @@ export function SegmentFilterEditor({
           value={value}
           placeholder={t`Filter segments`}
           nothingFound={t`No matching segment found.`}
+          aria-label={t`Filter segments`}
           searchable
           onChange={handleChange}
         />

frontend/src/metabase/querying/components/FilterModal/SegmentFilterEditor/SegmentFilterEditor.unit.spec.tsx

+import userEvent from "@testing-library/user-event";
+import { createMockMetadata } from "__support__/metadata";
+import { renderWithProviders, screen } from "__support__/ui";
+import { createMockSegment } from "metabase-types/api/mocks";
+import {
+  createSampleDatabase,
+  ORDERS,
+  ORDERS_ID,
+} from "metabase-types/api/mocks/presets";
+import * as Lib from "metabase-lib";
+import { createQuery, findSegment } from "metabase-lib/test-helpers";
+import type { SegmentItem } from "../types";
+import { SegmentFilterEditor } from "./SegmentFilterEditor";
+
+const SEGMENT1 = createMockSegment({
+  id: 1,
+  name: "Segment 1",
+  definition: {
+    "source-table": ORDERS_ID,
+    filter: [">", ["field", ORDERS.TOTAL, null], 0],
+  },
+  table_id: ORDERS_ID,
+});
+
+const SEGMENT2 = createMockSegment({
+  id: 2,
+  name: "Segment 2",
+  definition: {
+    "source-table": ORDERS_ID,
+    filter: [">", ["field", ORDERS.TOTAL, null], 0],
+  },
+  table_id: ORDERS_ID,
+});
+
+const METADATA = createMockMetadata({
+  databases: [createSampleDatabase()],
+  segments: [SEGMENT1, SEGMENT2],
+});
+
+interface SetupOpts {
+  segmentItems: SegmentItem[];
+}
+
+function setup({ segmentItems }: SetupOpts) {
+  const onChange = jest.fn();
+
+  renderWithProviders(
+    <SegmentFilterEditor segmentItems={segmentItems} onChange={onChange} />,
+  );
+
+  const getNextSegmentItems = () => {
+    const [nextSegmentItems] = onChange.mock.lastCall;
+    return nextSegmentItems;
+  };
+
+  return { getNextSegmentItems };
+}
+
+describe("SegmentFilterEditor", () => {
+  const defaultQuery = createQuery({ metadata: METADATA });
+  const stageIndex = 0;
+
+  it("should add a segment", async () => {
+    const { getNextSegmentItems } = setup({
+      segmentItems: getSegmentItems(defaultQuery, stageIndex),
+    });
+
+    userEvent.click(screen.getByPlaceholderText("Filter segments"));
+    userEvent.click(await screen.findByText(SEGMENT2.name));
+
+    const nextSegmentItems = getNextSegmentItems();
+    expect(nextSegmentItems).toHaveLength(1);
+    expect(nextSegmentItems[0].displayName).toBe(SEGMENT2.name);
+  });
+
+  it("should remove a segment", async () => {
+    const query = Lib.filter(
+      defaultQuery,
+      stageIndex,
+      findSegment(defaultQuery, SEGMENT1.name),
+    );
+    const { getNextSegmentItems } = setup({
+      segmentItems: getSegmentItems(query, stageIndex),
+    });
+    expect(screen.getByText(SEGMENT1.name)).toBeInTheDocument();
+    expect(screen.queryByText(SEGMENT2.name)).not.toBeInTheDocument();
+
+    userEvent.type(screen.getByLabelText("Filter segments"), "{backspace}");
+    const nextSegmentItems = getNextSegmentItems();
+    expect(nextSegmentItems).toHaveLength(0);
+  });
+});
+
+function getSegmentItems(query: Lib.Query, stageIndex: number): SegmentItem[] {
+  const segments = Lib.availableSegments(query, stageIndex);
+  return segments.map(segment => {
+    const segmentInfo = Lib.displayInfo(query, stageIndex, segment);
+
+    return {
+      segment,
+      stageIndex,
+      displayName: segmentInfo.displayName,
+      filterPositions: segmentInfo.filterPositions ?? [],
+    };
+  });
+}