From 2f40035508237a8019b37727bec5116111ea0d84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fred=20Lef=C3=A9v=C3=A8re-Laoide?= Date: Mon, 18 Nov 2024 19:26:07 +0100 Subject: [PATCH] Boolean table cell in edit mode resolves #2257 --- .../src/components/Taipy/tableUtils.spec.ts | 28 ----- .../src/components/Taipy/tableUtils.spec.tsx | 118 ++++++++++++++++++ .../src/components/Taipy/tableUtils.tsx | 5 +- 3 files changed, 121 insertions(+), 30 deletions(-) delete mode 100644 frontend/taipy-gui/src/components/Taipy/tableUtils.spec.ts create mode 100644 frontend/taipy-gui/src/components/Taipy/tableUtils.spec.tsx diff --git a/frontend/taipy-gui/src/components/Taipy/tableUtils.spec.ts b/frontend/taipy-gui/src/components/Taipy/tableUtils.spec.ts deleted file mode 100644 index de42a1eaab..0000000000 --- a/frontend/taipy-gui/src/components/Taipy/tableUtils.spec.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { generateHeaderClassName } from "./tableUtils"; - -describe("generateHeaderClassName", () => { - it("should generate a CSS class name with a hyphen prefix and convert to lowercase", () => { - const result = generateHeaderClassName("ColumnName"); - expect(result).toBe("-columnname"); - }); - - it("should replace spaces and special characters with hyphens", () => { - const result = generateHeaderClassName("Column Name@123!"); - expect(result).toBe("-column-name-123-"); - }); - - it("should remove multiple hyphens in a row", () => { - const result = generateHeaderClassName("Column--Name"); - expect(result).toBe("-column-name"); - }); - - it("should handle empty strings and return an empty string", () => { - const result = generateHeaderClassName(""); - expect(result).toBe(""); - }); - - it("should return empty string for the undefined", () => { - const result = generateHeaderClassName(undefined); - expect(result).toBe(""); - }); -}); diff --git a/frontend/taipy-gui/src/components/Taipy/tableUtils.spec.tsx b/frontend/taipy-gui/src/components/Taipy/tableUtils.spec.tsx new file mode 100644 index 0000000000..7321259304 --- /dev/null +++ b/frontend/taipy-gui/src/components/Taipy/tableUtils.spec.tsx @@ -0,0 +1,118 @@ +import { render } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import userEvent from "@testing-library/user-event"; + +import { EditableCell, generateHeaderClassName, RowValue } from "./tableUtils"; + +describe("generateHeaderClassName", () => { + it("should generate a CSS class name with a hyphen prefix and convert to lowercase", () => { + const result = generateHeaderClassName("ColumnName"); + expect(result).toBe("-columnname"); + }); + + it("should replace spaces and special characters with hyphens", () => { + const result = generateHeaderClassName("Column Name@123!"); + expect(result).toBe("-column-name-123-"); + }); + + it("should remove multiple hyphens in a row", () => { + const result = generateHeaderClassName("Column--Name"); + expect(result).toBe("-column-name"); + }); + + it("should handle empty strings and return an empty string", () => { + const result = generateHeaderClassName(""); + expect(result).toBe(""); + }); + + it("should return empty string for the undefined", () => { + const result = generateHeaderClassName(undefined); + expect(result).toBe(""); + }); +}); + +describe("Editable cell", () => { + const formatConfig = { + timeZone: "FR", + forceTZ: false, + date: "dd/MM/yyyy", + dateTime: "dd/MM/yyyy hh:mm", + number: "", + }; + const colDesc = { dfid: "id", type: "bool", index: 0 }; + describe("Non editable mode", () => { + it("show a boolean as a switch", () => { + const { getByRole } = render( + + ); + const elt = getByRole("checkbox"); + expect(elt.tagName).toBe("INPUT"); + const switchCtl = elt.closest(".MuiSwitch-root"); + expect(switchCtl).not.toBeNull(); + expect(switchCtl).toHaveClass("taipy-table-bool"); + }); + it("show a boolean as a check", () => { + const { getByRole } = render( + + ); + const elt = getByRole("checkbox"); + expect(elt.tagName).toBe("INPUT"); + expect(elt.closest(".MuiSwitch-root")).toBeNull(); + expect(elt).toHaveClass("taipy-table-bool"); + }); + }); + describe("Editable mode", () => { + const onValidation = (value: RowValue, rowIndex: number, colName: string, userValue: string, tz?: string) => {}; + it("show a boolean as a switch", async () => { + const { getByRole, getByTestId } = render( + + ); + const but = getByTestId("EditIcon"); + await userEvent.click(but); + const elt = getByRole("checkbox"); + expect(elt.tagName).toBe("INPUT"); + const switchCtl = elt.closest(".MuiSwitch-root"); + expect(switchCtl).not.toBeNull(); + expect(switchCtl).toHaveClass("taipy-table-bool"); + }); + it("show a boolean as a check", async () => { + const { getByRole, getByTestId } = render( + + ); + const but = getByTestId("EditIcon"); + await userEvent.click(but); + const elt = getByRole("checkbox"); + expect(elt.tagName).toBe("INPUT"); + expect(elt.closest(".MuiSwitch-root")).toBeNull(); + expect(elt).toHaveClass("taipy-table-bool"); + }); + }); +}); diff --git a/frontend/taipy-gui/src/components/Taipy/tableUtils.tsx b/frontend/taipy-gui/src/components/Taipy/tableUtils.tsx index 69d457e6e3..13769e8928 100644 --- a/frontend/taipy-gui/src/components/Taipy/tableUtils.tsx +++ b/frontend/taipy-gui/src/components/Taipy/tableUtils.tsx @@ -565,7 +565,7 @@ export const EditableCell = (props: EditableCellProps) => { {edit ? ( colDesc.type?.startsWith("bool") ? ( - lightBool ? ( + {useCheckbox ? ( { inputRef={setInputFocus} className={getSuffixedClassNames(tableClassName, "-bool")} /> - ) + )} @@ -741,6 +741,7 @@ export const EditableCell = (props: EditableCellProps) => { checked={value as boolean} title={boolTitle} style={defaultCursor} + readOnly className={getSuffixedClassNames(tableClassName, "-bool")} /> ) : (