From 67bc921ff56ff99148ef94f6f584b26a25f9ca71 Mon Sep 17 00:00:00 2001 From: namnguyen Date: Fri, 2 Aug 2024 11:30:57 +0700 Subject: [PATCH] add more test cases --- .../components/Taipy/PaginatedTable.spec.tsx | 158 ++++++++++++++++-- .../src/components/Taipy/PaginatedTable.tsx | 7 +- 2 files changed, 151 insertions(+), 14 deletions(-) diff --git a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx index 70b8c8a5ab..a1f61c7246 100644 --- a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx +++ b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.spec.tsx @@ -11,8 +11,8 @@ * specific language governing permissions and limitations under the License. */ -import React from "react"; -import { render, waitFor } from "@testing-library/react"; +import React, { act } from "react"; +import { fireEvent, render, waitFor } from "@testing-library/react"; import "@testing-library/jest-dom"; import userEvent from "@testing-library/user-event"; @@ -163,6 +163,20 @@ const buttonColumns = JSON.stringify({ Code: { dfid: "Code", type: "str", index: 3 }, }); +const styledColumns = JSON.stringify({ + Entity: { dfid: "Entity" }, + "Daily hospital occupancy": { + dfid: "Daily hospital occupancy", + type: "int64", + style: "some style function", + tooltip: "some tooltip", + }, +}); + +const invalidColumns = JSON.stringify({ + invalid: true, +}); + describe("PaginatedTable Component", () => { it("renders", async () => { const { getByText } = render(); @@ -187,13 +201,17 @@ describe("PaginatedTable Component", () => { expect(elt.parentElement).not.toHaveClass("Mui-disabled"); }); it("is enabled by active", async () => { - const { getByText, getAllByTestId } = render(); + const { getByText, getAllByTestId } = render( + + ); const elt = getByText("Entity"); expect(elt.parentElement).not.toHaveClass("Mui-disabled"); expect(getAllByTestId("ArrowDownwardIcon").length).toBeGreaterThan(0); }); it("Hides sort icons when not active", async () => { - const { queryByTestId } = render(); + const { queryByTestId } = render( + + ); expect(queryByTestId("ArrowDownwardIcon")).toBeNull(); }); it("dispatch 2 well formed messages at first render", async () => { @@ -201,7 +219,12 @@ describe("PaginatedTable Component", () => { const state: TaipyState = INITIAL_STATE; render( - + ); expect(dispatch).toHaveBeenCalledWith({ @@ -337,7 +360,7 @@ describe("PaginatedTable Component", () => { ); - expect(getAllByText("Austria").length).toBeGreaterThan(1) + expect(getAllByText("Austria").length).toBeGreaterThan(1); rerender( @@ -375,7 +398,13 @@ describe("PaginatedTable Component", () => { const state: TaipyState = INITIAL_STATE; const { getAllByTestId, queryAllByTestId, rerender } = render( - + ); @@ -401,7 +430,13 @@ describe("PaginatedTable Component", () => { const state: TaipyState = INITIAL_STATE; const { getByTestId, queryAllByTestId, getAllByTestId, rerender } = render( - + ); @@ -499,7 +534,13 @@ describe("PaginatedTable Component", () => { const state: TaipyState = INITIAL_STATE; const { getByTestId } = render( - + ); @@ -521,7 +562,13 @@ describe("PaginatedTable Component", () => { const state: TaipyState = INITIAL_STATE; const { getAllByTestId, getByTestId, queryAllByTestId, rerender } = render( - + ); @@ -608,7 +655,7 @@ describe("PaginatedTable Component", () => { col: "int", index: 1, reason: "click", - value: undefined + value: undefined, }, type: "SEND_ACTION_ACTION", }); @@ -645,9 +692,96 @@ describe("PaginatedTable Component", () => { col: "Code", index: 0, reason: "button", - value: "button action" + value: "button action", }, type: "SEND_ACTION_ACTION", }); }); + it("should renders correctly when style is applied to columns", async () => { + const dispatch = jest.fn(); + const state: TaipyState = INITIAL_STATE; + await waitFor(() => { + render( + + + + ); + }); + const elt = document.querySelector('table[aria-labelledby="tableTitle"]'); + expect(elt).toBeInTheDocument(); + }); + it("logs error when baseColumns prop is invalid", () => { + // Mock console.info to check if it gets called + console.info = jest.fn(); + // Render the component with invalid baseColumns prop + render(); + // Check if console.info was called + expect(console.info).toHaveBeenCalled(); + }); + it("should sort the table in ascending order", async () => { + await waitFor(() => { + render(); + }); + const elt = document.querySelector('svg[data-testid="ArrowDownwardIcon"]'); + act(() => { + fireEvent.click(elt as Element); + }); + expect(document.querySelector('th[aria-sort="ascending"]')).toBeInTheDocument(); + }); + it("should handle rows per page change", async () => { + const { getByRole, queryByRole } = render(); + const rowsPerPageDropdown = getByRole("combobox"); + fireEvent.mouseDown(rowsPerPageDropdown); + const option = queryByRole("option", { selected: false, name: "50" }); + fireEvent.click(option as Element); + const table = document.querySelector( + 'table[aria-labelledby="tableTitle"].MuiTable-root.MuiTable-stickyHeader.css-cz602z-MuiTable-root' + ); + expect(table).toBeInTheDocument(); + }); + it("should handle on row click", async () => { + render(); + const elt = document.querySelectorAll('td[role="cell"]'); + await userEvent.click(elt[0]); + }); + it("should allow all rows", async () => { + const { getByRole, queryByRole } = render( + + ); + const rowsPerPageDropdown = getByRole("combobox"); + fireEvent.mouseDown(rowsPerPageDropdown); + const option = queryByRole("option", { selected: false, name: "All" }); + expect(option).toBeInTheDocument(); + }); + it("should display row per page correctly", async () => { + const { getByRole, queryByRole } = render( + + ); + const rowsPerPageDropdown = getByRole("combobox"); + fireEvent.mouseDown(rowsPerPageDropdown); + const option = queryByRole("option", { selected: false, name: "10" }); + expect(option).toBeInTheDocument(); + }); + it("logs error when pageSizeOptions prop is invalid", () => { + // Create a spy on console.log + const logSpy = jest.spyOn(console, "log"); + // Render the component with invalid pageSizeOptions prop + render(); + // Check if console.log was called with the expected arguments + expect(logSpy).toHaveBeenCalledWith( + "PaginatedTable pageSizeOptions is wrong ", + "not a valid json", + expect.any(Error) + ); + // Clean up the spy + logSpy.mockRestore(); + }); }); diff --git a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx index 51e121edad..fe0acff713 100644 --- a/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx +++ b/frontend/taipy-gui/src/components/Taipy/PaginatedTable.tsx @@ -199,6 +199,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => { useDispatchRequestUpdateOnFirstRender(dispatch, id, module, updateVars); + // TODO: unexpected behavior, need to check useEffect(() => { if (selected.length) { if (selected[0] < startIndex || selected[0] > startIndex + rowsPerPage) { @@ -259,7 +260,9 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => { afs, compare ? onCompare : undefined, updateVars && getUpdateVar(updateVars, "comparedatas"), - typeof userData == "object" ? (userData as Record>).context : undefined + typeof userData == "object" + ? (userData as Record>).context + : undefined ) ); } else { @@ -286,7 +289,7 @@ const PaginatedTable = (props: TaipyPaginatedTableProps) => { module, compare, onCompare, - userData + userData, ]); const onSort = useCallback(