support filter on selector dropdown (Avaiga#1338)

* support filter on selector dropdown update date-fns to 3.x resolves Avaiga#428 * Fab's comment Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com> * Fab's comments --------- Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io> Co-authored-by: Fabien Lelaquais <86590727+FabienLelaquais@users.noreply.github.com>
Satoshi-Sh · May 31, 2024 · cff3262 · cff3262
1 parent b3497fa
commit cff3262
Show file tree

Hide file tree

Showing 15 changed files with 310 additions and 177 deletions.
diff --git a/frontend/taipy-gui/package-lock.json b/frontend/taipy-gui/package-lock.json
diff --git a/frontend/taipy-gui/package.json b/frontend/taipy-gui/package.json
@@ -11,8 +11,8 @@
     "@mui/x-tree-view": "^7.0.0",
     "apache-arrow": "^14.0.2",
     "axios": "^1.2.0",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
+    "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "lodash": "^4.17.21",
     "notistack": "^3.0.0",
     "plotly.js": "^2.6.0",

diff --git a/frontend/taipy-gui/src/components/Router.tsx b/frontend/taipy-gui/src/components/Router.tsx
@@ -18,7 +18,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/system";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import { SnackbarProvider } from "notistack";
 import { HelmetProvider } from "react-helmet-async";
 import { BrowserRouter, Route, Routes } from "react-router-dom";

diff --git a/frontend/taipy-gui/src/components/Taipy/DateRange.spec.tsx b/frontend/taipy-gui/src/components/Taipy/DateRange.spec.tsx
@@ -17,7 +17,7 @@ import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 
 import DateRange from "./DateRange";
 import { TaipyContext } from "../../context/taipyContext";

diff --git a/frontend/taipy-gui/src/components/Taipy/DateSelector.spec.tsx b/frontend/taipy-gui/src/components/Taipy/DateSelector.spec.tsx
@@ -17,7 +17,7 @@ import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
 
 import DateSelector from "./DateSelector";
 import { TaipyContext } from "../../context/taipyContext";

diff --git a/frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx b/frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx
@@ -177,8 +177,10 @@ describe("Selector Component", () => {
             const { getByTestId } = render(<Selector lov={lov} dropdown={true} />);
             getByTestId("ArrowDropDownIcon");
         });
-        it("displays as an simple input with default value", async () => {
-            const { getByText, getByTestId, queryAllByTestId } = render(<Selector lov={lov} defaultValue="id1" dropdown={true} />);
+        it("displays as a simple input with default value", async () => {
+            const { getByText, getByTestId, queryAllByTestId } = render(
+                <Selector lov={lov} defaultValue="id1" dropdown={true} />
+            );
             getByText("Item 1");
             expect(queryAllByTestId("CancelIcon")).toHaveLength(0);
             getByTestId("ArrowDropDownIcon");
@@ -202,10 +204,10 @@ describe("Selector Component", () => {
             const elt = getByText("Item 1");
             expect(elt.parentElement).not.toHaveClass("Mui-disabled");
         });
-            it("opens a dropdown on click", async () => {
+        it("opens a dropdown on click", async () => {
             const { getByText, getByRole, queryAllByRole } = render(<Selector lov={lov} dropdown={true} />);
             const butElt = getByRole("combobox");
-            expect(butElt).toBeInTheDocument()
+            expect(butElt).toBeInTheDocument();
             await userEvent.click(butElt);
             getByRole("listbox");
             const elt = getByText("Item 2");
@@ -214,6 +216,58 @@ describe("Selector Component", () => {
         });
     });
 
+    describe("Selector Component with dropdown + filter", () => {
+        //dropdown
+        it("displays as an empty control with arrow", async () => {
+            const { getByTestId } = render(<Selector lov={lov} dropdown={true} filter={true} />);
+            getByTestId("ArrowDropDownIcon");
+        });
+        it("displays as a simple input with default value", async () => {
+            const { getByRole, getByTestId, queryAllByTestId } = render(
+                <Selector lov={lov} defaultValue="id1" dropdown={true} filter={true} />
+            );
+            expect(getByRole("combobox")).toHaveValue("Item 1");
+            expect(queryAllByTestId("CancelIcon")).toHaveLength(0);
+            getByTestId("ArrowDropDownIcon");
+        });
+        it("displays a delete icon when multiple", async () => {
+            const { getByTestId } = render(
+                <Selector lov={lov} defaultValue="id1" dropdown={true} multiple={true} filter={true} />
+            );
+            getByTestId("CancelIcon");
+        });
+        it("is disabled", async () => {
+            const { getByRole } = render(
+                <Selector lov={lov} defaultValue="id1" active={false} dropdown={true} filter={true} />
+            );
+            const elt = getByRole("combobox");
+            expect(elt.parentElement).toHaveClass("Mui-disabled");
+        });
+        it("is enabled by default", async () => {
+            const { getByRole } = render(<Selector lov={lov} defaultValue="id1" dropdown={true} filter={true} />);
+            const elt = getByRole("combobox");
+            expect(elt.parentElement).not.toHaveClass("Mui-disabled");
+        });
+        it("is enabled by active", async () => {
+            const { getByRole } = render(
+                <Selector defaultValue="id1" lov={lov} active={true} dropdown={true} filter={true} />
+            );
+            const elt = getByRole("combobox");
+            expect(elt.parentElement).not.toHaveClass("Mui-disabled");
+        });
+        it("opens a dropdown on click", async () => {
+            const { getByText, getByRole, queryAllByRole } = render(
+                <Selector lov={lov} dropdown={true} filter={true} />
+            );
+            const butElt = getByRole("combobox");
+            expect(butElt).toBeInTheDocument();
+            await userEvent.click(butElt);
+            getByRole("listbox");
+            const elt = getByText("Item 2");
+            await userEvent.click(elt);
+            expect(queryAllByRole("listbox")).toHaveLength(0);
+        });
+    });
     describe("Selector Component radio mode", () => {
         //dropdown
         it("displays a list of unselected radios", async () => {
@@ -228,7 +282,9 @@ describe("Selector Component", () => {
             expect(elt.parentElement?.querySelector("span.Mui-checked")).not.toBeNull();
         });
         it("selects on click", async () => {
-            const { getByText, getByRole, queryAllByRole } = render(<Selector lov={lov} defaultValue="id1"  mode="radio" />);
+            const { getByText, getByRole, queryAllByRole } = render(
+                <Selector lov={lov} defaultValue="id1" mode="radio" />
+            );
             const elt = getByText("Item 2");
             expect(elt.parentElement?.querySelector("span.Mui-checked")).toBeNull();
             await userEvent.click(elt);
@@ -250,7 +306,9 @@ describe("Selector Component", () => {
             expect(elt.parentElement?.querySelector("span.Mui-checked")).not.toBeNull();
         });
         it("selects on click", async () => {
-            const { getByText, getByRole, queryAllByRole } = render(<Selector lov={lov} defaultValue="id1"  mode="check" />);
+            const { getByText, getByRole, queryAllByRole } = render(
+                <Selector lov={lov} defaultValue="id1" mode="check" />
+            );
             const elt1 = getByText("Item 1");
             expect(elt1.parentElement?.querySelector("span.Mui-checked")).not.toBeNull();
             const elt2 = getByText("Item 2");