test(FilterForm): add tests for new features

DIRACGrid · Sep 9, 2024 · fe44208 · fe44208
1 parent bb4ba86
commit fe44208
Showing 1 changed file with 76 additions and 1 deletion.
diff --git a/packages/diracx-web-components/test/unit-tests/FilterForm.test.tsx b/packages/diracx-web-components/test/unit-tests/FilterForm.test.tsx
@@ -1,12 +1,15 @@
 import React from "react";
 import { render, screen, fireEvent, within } from "@testing-library/react";
 import { FilterForm } from "@/components/shared/FilterForm";
+import { Column } from "@/types/Column";
 
 describe("FilterForm", () => {
-  const columns = [
+  const columns: Column[] = [
     { id: "column1", label: "Column 1" },
     { id: "column2", label: "Column 2" },
     { id: "column3", label: "Column 3" },
+    { id: "column4", label: "Column 4", type: ["1", "2", "3"] },
+    { id: "column5", label: "Column 5", type: "DateTime" },
   ];
   const filters = [
     { id: 1, column: "column1", operator: "eq", value: "value1" },
@@ -160,4 +163,76 @@ describe("FilterForm", () => {
     });
     expect(handleFilterMenuClose).toHaveBeenCalled();
   });
+
+  it("renders the correct input for DateTime column type", () => {
+    render(
+      <FilterForm
+        columns={columns}
+        filters={filters}
+        setFilters={setFilters}
+        handleFilterChange={handleFilterChange}
+        handleFilterMenuClose={handleFilterMenuClose}
+        selectedFilterId={undefined}
+      />,
+    );
+
+    const columnSelect = screen.getByTestId("filter-form-select-column");
+    const columnButton = within(columnSelect).getByRole("combobox");
+    fireEvent.mouseDown(columnButton);
+    const columnOption = screen.getByText("Column 5");
+    fireEvent.click(columnOption);
+
+    const operatorSelect = screen.getByTestId("filter-form-select-operator");
+    expect(operatorSelect).toHaveTextContent("in the last");
+
+    const dateTimeInput = screen.getByLabelText("Value");
+
+    expect(dateTimeInput).toHaveRole("combobox");
+
+    // Simulate a click event on the operator Select element
+    const operatorButton = within(operatorSelect).getByRole("combobox");
+    fireEvent.mouseDown(operatorButton);
+
+    // Select the desired option from the dropdown list
+    const operatorOption = screen.getByText("is greater than");
+    fireEvent.click(operatorOption);
+
+    expect(screen.getByTestId("CalendarIcon")).toBeInTheDocument();
+  });
+
+  it("handles 'in' and 'not in' operators for category columns", () => {
+    render(
+      <FilterForm
+        columns={columns}
+        filters={filters}
+        setFilters={setFilters}
+        handleFilterChange={handleFilterChange}
+        handleFilterMenuClose={handleFilterMenuClose}
+        selectedFilterId={undefined}
+      />,
+    );
+
+    const columnSelect = screen.getByTestId("filter-form-select-column");
+    const columnButton = within(columnSelect).getByRole("combobox");
+    fireEvent.mouseDown(columnButton);
+    const columnOption = screen.getByText("Column 4");
+    fireEvent.click(columnOption);
+
+    const operatorSelect = screen.getByTestId("filter-form-select-operator");
+    const operatorButton = within(operatorSelect).getByRole("combobox");
+    fireEvent.mouseDown(operatorButton);
+    const operatorOption = screen.getByText("is in");
+    fireEvent.click(operatorOption);
+
+    const valueSelect = screen.getByLabelText("Value");
+    expect(valueSelect).toHaveRole("combobox");
+    fireEvent.mouseDown(valueSelect);
+
+    const valueOption1 = screen.getByText("1");
+    fireEvent.click(valueOption1);
+    const valueOption2 = screen.getByText("2");
+    fireEvent.click(valueOption2);
+
+    expect(valueSelect).toHaveTextContent("1, 2");
+  });
 });