@tsed/react-formio 1.10.14 → 1.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.10.14",
+  "version": "1.11.2",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -14,7 +14,7 @@
     "prettier": "prettier '{src,test}/**/*.{ts,tsx}' --write"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.10.14",
+    "@tsed/redux-utils": "1.11.2",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -29,8 +29,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.10.14",
-    "@tsed/tailwind-formio": "1.10.14",
+    "@tsed/tailwind": "1.11.2",
+    "@tsed/tailwind-formio": "1.11.2",
     "eslint-plugin-jsx-a11y": "^6.5.1"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",

package/src/components/card/card.component.tsx

@@ -2,6 +2,7 @@ import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
 
 export interface CardProps {
+  children: React.ReactNode;
   label: string;
   className?: string;
 }

package/src/components/loader/loader.component.spec.tsx

@@ -1,21 +1,22 @@
 import { render } from "@testing-library/react";
 import React from "react";
-import { Loader } from "./loader.component";
-
+import { Sandbox } from "./loader.stories";
 describe("Loader", () => {
-  it("should render a component (with isActive = true)", () => {
-    const { getByTestId } = render(<Loader isActive={true} />);
+  it("should render a component (when isActive = true)", () => {
+    const { getByTestId } = render(<Sandbox isActive={true} />);
 
     const icon = getByTestId("icon_radio-circle");
 
     expect(icon).toBeTruthy();
+    expect(icon).toBeInTheDocument();
   });
 
-  it("should render a component (with isActive = false)", () => {
-    const { queryByTestId } = render(<Loader isActive={false} />);
+  it("should render a component (when isActive = false)", () => {
+    const { queryByTestId } = render(<Sandbox isActive={false} />);
 
     const icon = queryByTestId("icon_radio-circle");
 
     expect(icon).toBeFalsy();
+    expect(icon).not.toBeInTheDocument();
   });
 });

package/src/components/loader/loader.component.tsx

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import PropTypes from "prop-types";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { iconClass } from "../../utils/iconClass";
 
 export interface LoaderProps {
@@ -15,7 +15,7 @@ export function Loader({
   color = "blue",
   icon = "radio-circle",
   className = ""
-}: LoaderProps) {
+}: PropsWithChildren<LoaderProps>) {
   if (isActive) {
     return (
       <div
@@ -37,7 +37,7 @@ export function Loader({
 
 Loader.propTypes = {
   isActive: PropTypes.bool,
-  icon: PropTypes.bool,
+  icon: PropTypes.string,
   color: PropTypes.string,
   className: PropTypes.string
 };

package/src/components/loader/loader.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Loader } from "./loader.component";
+
+export default {
+  title: "ReactFormio/Loader",
+  component: Loader,
+  argTypes: {},
+  parameters: {}
+};
+
+export const Sandbox = (args: any) => {
+  return <Loader {...args} />;
+};
+
+Sandbox.args = {
+  isActive: true
+};

package/src/components/pagination/pagination.component.spec.tsx

@@ -0,0 +1,137 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import React from "react";
+import { Sandbox } from "./pagination.stories";
+
+describe("Pagination", () => {
+  it("should render the pagination component", () => {
+    const { container, getByTestId, queryAllByTestId } = render(
+      <Sandbox {...Sandbox.args} />
+    );
+    const paginationBtn = queryAllByTestId("pagination-button");
+    const allBtnBlocks = paginationBtn.map((bloc) => bloc.textContent);
+    const select = getByTestId("select_page");
+
+    expect(container).toBeInTheDocument();
+    paginationBtn.forEach((child) => expect(child).toBeInTheDocument());
+    expect(select).toBeInTheDocument();
+    expect(allBtnBlocks[0]).toBe("Previous");
+    expect(allBtnBlocks[allBtnBlocks.length - 1]).toBe("Next");
+  });
+
+  it("should call previousPage() callback", () => {
+    const previousPageSpy = jest.fn();
+    const { queryAllByTestId } = render(
+      <Sandbox previousPage={previousPageSpy} canPreviousPage={true} />
+    );
+    const paginationBtn = queryAllByTestId("pagination-button");
+    const btnPreviousPage = paginationBtn.find(
+      (btn) => btn.textContent === "Previous"
+    );
+
+    fireEvent.click(btnPreviousPage);
+
+    expect(previousPageSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call nextPage() callback", () => {
+    const nextPageSpy = jest.fn();
+    render(<Sandbox nextPage={nextPageSpy} canNextPage={true} />);
+
+    fireEvent.click(screen.getByText(/Next/i));
+
+    expect(nextPageSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call gotoPage() callback when cliking on a button page", () => {
+    const gotoPageSpy = jest.fn();
+    let page: number;
+
+    const { queryAllByTestId } = render(
+      <Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />
+    );
+    const paginationBtn = queryAllByTestId("pagination-button");
+    const buttonsPage = paginationBtn.filter(
+      (btn) => btn.textContent !== "Previous" && btn.textContent !== "Next"
+    );
+
+    buttonsPage.forEach((btn) => {
+      if (btn.textContent !== "...") {
+        page = +btn.textContent;
+        fireEvent.click(btn);
+        expect(gotoPageSpy).toHaveBeenCalled();
+        expect(gotoPageSpy).toHaveBeenCalledWith(page - 1);
+      }
+    });
+  });
+
+  it("should have Previous button disabled and not clickable", () => {
+    const previousPageSpy = jest.fn();
+    const { getByText } = render(
+      <Sandbox
+        canPreviousPage={false}
+        previousPage={previousPageSpy}
+        {...Sandbox.args}
+      />
+    );
+    const previousButton = getByText("Previous");
+
+    expect(previousButton).toHaveAttribute("disabled");
+    fireEvent.click(previousButton);
+    expect(previousPageSpy).not.toHaveBeenCalled();
+  });
+
+  it("should have Previous button NOT disabled and clickable", () => {
+    const previousPageSpy = jest.fn();
+    const { getByText } = render(
+      <Sandbox
+        {...Sandbox.args}
+        canPreviousPage={true}
+        previousPage={previousPageSpy}
+      />
+    );
+
+    const previousButton = getByText("Previous");
+
+    expect(previousButton).not.toHaveAttribute("disabled");
+    fireEvent.click(previousButton);
+    expect(previousPageSpy).toHaveBeenCalled();
+  });
+
+  it("should have Next button disabled and not clickable", () => {
+    const nextPageSpy = jest.fn();
+    const { getByText } = render(
+      <Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />
+    );
+
+    const nextButton = getByText("Next");
+    expect(nextButton).toHaveAttribute("disabled");
+    fireEvent.click(nextButton);
+    expect(nextPageSpy).not.toHaveBeenCalled();
+  });
+
+  it("should have Next button NOT disabled and clickable", () => {
+    const nextPageSpy = jest.fn();
+    const { getByText } = render(
+      <Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />
+    );
+    const nextButton = getByText("Next");
+    expect(nextButton).not.toHaveAttribute("disabled");
+    fireEvent.click(nextButton);
+    expect(nextPageSpy).toHaveBeenCalled();
+  });
+
+  it("should correctly render select component", () => {
+    const pageSizes = [10, 25, 50, 100, 200, 500];
+
+    const { getByTestId } = render(
+      <Sandbox {...Sandbox.args} pageSizes={pageSizes} />
+    );
+    const selectComp = getByTestId("select_page");
+    const selectChilds = Array.prototype.map.call(selectComp, function (child) {
+      return +child.textContent;
+    });
+
+    expect(selectComp).toBeInTheDocument();
+    expect(selectChilds.length === pageSizes.length).toBeTruthy();
+  });
+});

package/src/components/pagination/pagination.component.tsx

@@ -28,6 +28,7 @@ function PaginationButton(
   return (
     <Component
       {...otherProps}
+      data-testid='pagination-button'
       disabled={disabled}
       className={classnames(
         "page-link",
@@ -67,7 +68,7 @@ export function Pagination(props: PaginationProps) {
     nextPage,
     canNextPage,
     pageCount,
-    pageIndex,
+    pageIndex = 1,
     pageOptions,
     pageSize,
     setPageSize,

package/src/components/pagination/pagination.stories.tsx

@@ -1,43 +1,27 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Pagination } from "./pagination.component";
 
 export default {
   title: "ReactFormio/Pagination",
   component: Pagination,
-  argTypes: {
-    pageSizes: {
-      control: {
-        type: "object"
-      }
-    },
-    pageCount: {
-      control: {
-        type: "number"
-      }
-    },
-    pageIndex: {
-      control: {
-        type: "number"
-      }
-    },
-    canPreviousPage: {
-      control: {
-        type: "boolean"
-      }
-    },
-    canNextPage: {
-      control: {
-        type: "boolean"
-      }
-    }
-  },
+
   parameters: {}
 };
 
 export const Sandbox = (args: any) => {
+  const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
+
+  useEffect(() => {
+    args.gotoPage && args.gotoPage(currentPageIndex);
+  }, [currentPageIndex]);
+
   return (
     <div>
-      <Pagination {...args} />
+      <Pagination
+        {...args}
+        pageIndex={currentPageIndex}
+        gotoPage={setPageIndex}
+      />
     </div>
   );
 };

package/src/components/table/filters/selectColumnFilter.component.spec.tsx

@@ -0,0 +1,54 @@
+import "@testing-library/jest-dom/extend-expect";
+import { render } from "@testing-library/react";
+import React from "react";
+import { SelectColumnFilter } from "./selectColumnFilter.component";
+
+describe("SelectColumnFilter", () => {
+  it("should display select with choices", async () => {
+    const mockSetFilter = jest.fn();
+    const props = {
+      name: "data.id",
+      setFilter: mockSetFilter,
+      column: {
+        id: "id",
+        preFilteredRows: [
+          { values: { id: "select-choice-1" } },
+          { values: { id: "select-choice-2" } }
+        ]
+      }
+    };
+
+    const { getByText } = render(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      <SelectColumnFilter {...props} />
+    );
+
+    expect(getByText("select-choice-1")).toBeDefined();
+    expect(getByText("select-choice-2")).toBeDefined();
+  });
+  it("should display select with custom choices", async () => {
+    const mockSetFilter = jest.fn();
+    const props = {
+      name: "data.id",
+      setFilter: mockSetFilter,
+      column: {
+        id: "id",
+        preFilteredRows: [
+          { values: { id: "select-choice-1" } },
+          { values: { id: "select-choice-2" } }
+        ],
+        choices: [{ label: "fake-choice", value: "fake-choice" }]
+      }
+    };
+
+    const { queryByText, getByText } = render(
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      <SelectColumnFilter {...props} />
+    );
+
+    expect(queryByText("select-choice-1")).toBeNull();
+    expect(getByText("fake-choice")).toBeDefined();
+  });
+});

package/src/components/table/filters/selectColumnFilter.component.tsx

@@ -5,8 +5,14 @@ import { Select } from "../../select/select.component";
 export function SelectColumnFilter<D extends Record<string, unknown> = {}>({
   column
 }: FilterProps<D>) {
-  const { filterValue, setFilter } = column;
-  const { choices = [] } = column as any;
+  const { id, preFilteredRows, filterValue, setFilter } = column;
+  const { choices: customChoices } = column as any;
+
+  const choices =
+    customChoices ||
+    [...new Set(preFilteredRows.map((row) => row.values[id]))]
+      .filter((value) => value)
+      .map((value) => ({ label: value, value }));
 
   return (
     <Select