@tsed/react-formio 1.11.1 → 1.13.0

package/src/components/input-tags/inputTags.stories.tsx

@@ -3,13 +3,13 @@ import { iconClass } from "../../utils/iconClass";
 import { InputTags } from "./inputTags.component";
 
 const useValue = (args: any) => {
-  const [value, useValue] = useState(args.value);
+  const [value, setValue] = useState(args.value);
 
   return {
     ...args,
     value,
     onChange(name: string, value: any) {
-      useValue(value);
+      setValue(value);
       args.onChange(name, value);
     }
   };
@@ -72,12 +72,7 @@ Sandbox.args = {
 };
 
 export const WithPrefix = (args: any) => {
-  return (
-    <InputTags
-      prefix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputTags prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithPrefix.args = {
@@ -89,12 +84,7 @@ WithPrefix.args = {
 };
 
 export const WithSuffix = (args: any) => {
-  return (
-    <InputTags
-      suffix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputTags suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithSuffix.args = {

package/src/components/input-text/inputText.component.spec.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { Sandbox } from "./inputText.stories";
+
+describe("input-text", () => {
+  it("should display the input-text component", () => {
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+  });
+
+  it("should display the input-text component with a different size", () => {
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} size='small' />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass("form-control-small");
+  });
+
+  it("should display the input-text with placeholder", () => {
+    const placeholderTest = "placeholder test";
+
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveDisplayValue(placeholderTest);
+  });
+
+  it("should change the value of the input-text", () => {
+    const placeholderTest = "placeholder test";
+
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} name={"test"} placeholder={placeholderTest} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: "newValue" } });
+    expect(input.value).toBe("newValue");
+    expect(input).not.toHaveDisplayValue(placeholderTest);
+    expect(input).toHaveDisplayValue("newValue");
+  });
+  it("should NOT change the value of the input-text if the value is NOT of type number", () => {
+    const placeholderTest = "placeholder test";
+
+    const { getByTestId } = render(<Sandbox {...Sandbox.args} type='number' name={"test"} placeholder={placeholderTest} />);
+    const input = getByTestId("input_test") as HTMLInputElement;
+
+    expect(input).toBeInTheDocument();
+    fireEvent.change(input, { target: { value: "newValue" } });
+    expect(input).not.toHaveDisplayValue("newValue");
+    fireEvent.change(input, { target: { value: 1234 } });
+    expect(input.value).toBe("1234");
+    expect(input).toHaveDisplayValue("1234");
+  });
+});

package/src/components/input-text/inputText.component.tsx

@@ -3,10 +3,7 @@ import PropTypes from "prop-types";
 import React, { useEffect, useMemo, useState } from "react";
 import { callLast } from "../../utils/callLast";
 import { getEventValue } from "../../utils/getEventValue";
-import {
-  FormControl,
-  FormControlProps
-} from "../form-control/formControl.component";
+import { FormControl, FormControlProps } from "../form-control/formControl.component";
 
 export interface InputTextProps<T = any> extends FormControlProps {
   type?: string;
@@ -33,6 +30,7 @@ export function InputText<T = any>({
   suffix,
   description,
   className,
+  placeholder,
   ...props
 }: InputTextProps<T>) {
   const [localValue, setValue] = useState(value);
@@ -60,7 +58,8 @@ export function InputText<T = any>({
         className={classnames("form-control", size && `form-control-${size}`)}
         id={name}
         required={required}
-        value={(localValue || "") as any}
+        value={(localValue || placeholder  || "") as any}
+        placeholder={placeholder}
         onChange={(event) => {
           const value = getEventValue(event);
           setValue(value);

package/src/components/input-text/inputText.stories.tsx

@@ -3,13 +3,13 @@ import { iconClass } from "../../utils/iconClass";
 import { InputText } from "./inputText.component";
 
 const useValue = (args: any) => {
-  const [value, useValue] = useState(args.value);
+  const [value, setValue] = useState(args.value);
 
   return {
     ...args,
     value,
     onChange(name: string, value: any) {
-      useValue(value);
+      setValue(value);
       args.onChange(name, value);
     }
   };
@@ -77,12 +77,7 @@ Sandbox.args = {
 };
 
 export const WithPrefix = (args: any) => {
-  return (
-    <InputText
-      prefix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText prefix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithPrefix.args = {
@@ -93,12 +88,7 @@ WithPrefix.args = {
 };
 
 export const WithSuffix = (args: any) => {
-  return (
-    <InputText
-      suffix={<i className={iconClass(undefined, "calendar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText suffix={<i className={iconClass(undefined, "calendar")} />} {...useValue(args)} />;
 };
 
 WithSuffix.args = {
@@ -109,12 +99,7 @@ WithSuffix.args = {
 };
 
 export const TypeNumber = (args: any) => {
-  return (
-    <InputText
-      suffix={<i className={iconClass(undefined, "dollar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
 };
 
 TypeNumber.args = {
@@ -127,12 +112,7 @@ TypeNumber.args = {
 };
 
 export const Sizing = (args: any) => {
-  return (
-    <InputText
-      suffix={<i className={iconClass(undefined, "dollar")} />}
-      {...useValue(args)}
-    />
-  );
+  return <InputText suffix={<i className={iconClass(undefined, "dollar")} />} {...useValue(args)} />;
 };
 
 Sizing.args = {

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 {
@@ -10,12 +10,7 @@ export interface LoaderProps {
   className?: string;
 }
 
-export function Loader({
-  isActive,
-  color = "blue",
-  icon = "radio-circle",
-  className = ""
-}: LoaderProps) {
+export function Loader({ isActive, color = "blue", icon = "radio-circle", className = "" }: PropsWithChildren<LoaderProps>) {
   if (isActive) {
     return (
       <div
@@ -24,11 +19,7 @@ export function Loader({
           className
         )}
       >
-        <span
-          data-testid={`icon_${icon}`}
-          color={color}
-          className={`text-11xl ${iconClass(undefined, icon, true)}`}
-        />
+        <span data-testid={`icon_${icon}`} color={color} className={`text-11xl ${iconClass(undefined, icon, true)}`} />
       </div>
     );
   }

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/modal/modal.component.spec.tsx

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom/extend-expect";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { WithFooter, WithTitle } from "./modal.stories";
 
@@ -8,9 +8,7 @@ describe("Modal", () => {
     it("should display the modal when we click on the button", async () => {
       const onClose = jest.fn();
 
-      const { queryByTestId, getByTestId } = render(
-        <WithTitle {...WithTitle.args} onClose={onClose} />
-      );
+      const { queryByTestId, getByTestId, findByTestId } = render(<WithTitle {...WithTitle.args} onClose={onClose} />);
 
       expect(queryByTestId("modalTitle")).toBeFalsy();
       expect(queryByTestId("modalBody")).toBeFalsy();
@@ -18,7 +16,7 @@ describe("Modal", () => {
 
       fireEvent.click(screen.getByRole("button", { name: "Open modal" }));
 
-      await waitFor(() => getByTestId("modalTitle"));
+      await findByTestId("modalTitle");
 
       expect(getByTestId("modalTitle")).toBeTruthy();
       expect(getByTestId("modalTitle")).toHaveTextContent("Modal title");
@@ -37,9 +35,7 @@ describe("Modal", () => {
 
   describe("WithFooter", () => {
     it("should display the modal when we click on the button", async () => {
-      const { getByRole, queryByTestId, getByTestId } = render(
-        <WithFooter {...WithFooter.args} />
-      );
+      const { getByRole, queryByTestId, getByTestId, findByTestId } = render(<WithFooter {...WithFooter.args} />);
 
       expect(queryByTestId("modalTitle")).toBeFalsy();
       expect(queryByTestId("modalBody")).toBeFalsy();
@@ -47,13 +43,13 @@ describe("Modal", () => {
 
       fireEvent.click(getByRole("button", { name: "Open modal" }));
 
-      await waitFor(() => getByTestId("modalTitle"));
+      await findByTestId("modalTitle");
 
       expect(getByTestId("modalTitle")).toBeTruthy();
       expect(getByTestId("modalTitle")).toHaveTextContent("Modal title");
       expect(getByTestId("modalBody")).toBeTruthy();
       expect(getByTestId("modalBody")).toHaveTextContent("Hello body");
-      expect(queryByTestId("modalFooter")).toBeTruthy();
+      expect(getByTestId("modalFooter")).toBeTruthy();
 
       fireEvent.click(screen.getByTestId("customCloseModal"));
 
@@ -63,13 +59,11 @@ describe("Modal", () => {
     });
     it("should call the onSubmit listener", async () => {
       const onSubmit = jest.fn();
-      const { getByRole, queryByTestId, getByTestId } = render(
-        <WithFooter {...WithFooter.args} onSubmit={onSubmit} />
-      );
+      const { getByRole, queryByTestId, findByTestId } = render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
 
       fireEvent.click(getByRole("button", { name: "Open modal" }));
 
-      await waitFor(() => getByTestId("modalTitle"));
+      await findByTestId("modalTitle");
 
       fireEvent.click(screen.getByTestId("customSubmitModal"));
 

package/src/components/modal/modal.component.tsx

@@ -48,9 +48,7 @@ export function Modal({
 
   useEffect(() => {
     if (titleRef.current || footerRef.current) {
-      const height =
-        (titleRef?.current?.offsetHeight || 0) +
-        (footerRef?.current?.offsetHeight || 0);
+      const height = (titleRef?.current?.offsetHeight || 0) + (footerRef?.current?.offsetHeight || 0);
 
       setMaxHeight(`calc(85vh - ${height}px)`);
     } else {
@@ -63,42 +61,23 @@ export function Modal({
   }
 
   return (
-    <div
-      role={"dialog"}
-      className={`formio-dialog formio-dialog-theme-default ${className}`}
-    >
+    <div role={"dialog"} className={`formio-dialog formio-dialog-theme-default ${className}`}>
       <div className='formio-dialog-overlay' onClick={onClickClose} />
       <div style={style} className={"formio-dialog-content"}>
         <div className={"formio-dialog-wrapper"}>
           {title ? (
-            <div
-              className={"formio-dialog-title"}
-              ref={titleRef}
-              data-testid={"modalTitle"}
-            >
+            <div className={"formio-dialog-title"} ref={titleRef} data-testid={"modalTitle"}>
               {title}
             </div>
           ) : null}
 
-          <div
-            className='formio-dialog-body'
-            style={{ maxHeight }}
-            data-testid={"modalBody"}
-          >
+          <div className='formio-dialog-body' style={{ maxHeight }} data-testid={"modalBody"}>
             {show && children}
           </div>
 
           {ModalFooter ? (
-            <div
-              className={"formio-dialog-footer"}
-              ref={footerRef}
-              data-testid={"modalFooter"}
-            >
-              <ModalFooter
-                {...props}
-                closeModal={closeModal}
-                onClose={onClickClose}
-              />
+            <div className={"formio-dialog-footer"} ref={footerRef} data-testid={"modalFooter"}>
+              <ModalFooter {...props} closeModal={closeModal} onClose={onClickClose} />
             </div>
           ) : null}
         </div>

package/src/components/modal/modal.stories.tsx

@@ -81,11 +81,7 @@ export const WithFooter = (args: ModalProps) => {
           Save
         </button>
 
-        <button
-          data-testid='customCloseModal'
-          className={"btn btn-danger mx-1"}
-          onClick={closeModal}
-        >
+        <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
           Close
         </button>
       </div>

package/src/components/modal/removeModal.component.tsx

@@ -5,20 +5,10 @@ import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";
 
-function RemoveModalFooter({
-  value,
-  valueToCompare,
-  onSubmit,
-  onClose,
-  i18n = (f: string) => f
-}: ModalProps) {
+function RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {
   return (
     <div className={"flex items-center justify-center bg-white p-2"}>
-      <button
-        data-testid='customCloseModal'
-        className={"btn btn-outline-dark mx-2"}
-        onClick={onClose}
-      >
+      <button data-testid='customCloseModal' className={"btn btn-outline-dark mx-2"} onClick={onClose}>
         {i18n("Cancel")}
       </button>
       <button
@@ -45,11 +35,7 @@ export interface RemoveModalProps extends ModalProps {
   maxWidth?: string;
 }
 
-export function RemoveModal({
-  maxWidth = "300px",
-  children,
-  ...props
-}: PropsWithChildren<RemoveModalProps>) {
+export function RemoveModal({ maxWidth = "300px", children, ...props }: PropsWithChildren<RemoveModalProps>) {
   const { i18n = noop } = props;
   const [value, setValue] = useState();
 
@@ -70,11 +56,7 @@ export function RemoveModal({
           <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;
           {i18n("name")} <strong>&quot;{props.valueToCompare}&quot;</strong>.
         </div>
-        <InputText
-          name='remove'
-          value={value}
-          onChange={(name, value) => setValue(value)}
-        />
+        <InputText name='remove' value={value} onChange={(name, value) => setValue(value)} />
       </div>
     </Modal>
   );

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

@@ -0,0 +1,111 @@
+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);
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(gotoPageSpy).toHaveBeenCalled();
+        // eslint-disable-next-line jest/no-conditional-expect
+        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();
+  });
+});