Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

support filter on selector dropdown #1338

Merged
merged 4 commits into from
May 31, 2024
Merged

support filter on selector dropdown #1338

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0190e84
support filter on selector dropdown
May 30, 2024
853294d
Merge branch 'develop' into feature/#428-selector-dropdown-filter
FredLL-Avaiga May 31, 2024
0caf617
Fab's comment
FredLL-Avaiga May 31, 2024
f79b53d
Fab's comments
May 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 37 additions & 43 deletions frontend/taipy-gui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions frontend/taipy-gui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion frontend/taipy-gui/src/components/Router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion frontend/taipy-gui/src/components/Taipy/DateRange.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion frontend/taipy-gui/src/components/Taipy/DateSelector.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
70 changes: 64 additions & 6 deletions frontend/taipy-gui/src/components/Taipy/Selector.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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");
Expand All @@ -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 () => {
Expand All @@ -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);
Expand All @@ -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");
Expand Down
Loading
Loading