@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.12

package/src/molecules/tabs/hooks/tabControl.spec.tsx

@@ -0,0 +1,388 @@
+import { act, render, renderHook, screen } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { type PropsWithChildren, useContext, useRef } from "react";
+
+import { TabControlContext, TabsProvider } from "../context/TabControl";
+import { Tab } from "../Tab.js";
+import { useActiveTab, useRegisterTabControl, useTabControls, useTabDispatch } from "./tabControl";
+
+interface Config {
+  selected: number;
+}
+
+const createWrapper = ({ selected }: Config = { selected: 3 }) => {
+  return ({ children }: PropsWithChildren) => {
+    return <TabsProvider selected={selected}>{children}</TabsProvider>;
+  };
+};
+
+describe("tab control hooks", () => {
+  beforeAll(() => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    vi.mocked(console.warn).mockReset();
+  });
+
+  describe("useActiveTab()", () => {
+    it("returns the current tab value", () => {
+      const { result } = renderHook(useActiveTab, { wrapper: createWrapper() });
+
+      expect(result.current).toBe(3);
+    });
+  });
+
+  describe("useRegisterTabControl()", () => {
+    it("returns the dispatch function", () => {
+      const { result } = renderHook(() => useRegisterTabControl({ value: 0, ref: useRef(null) }), {
+        wrapper: createWrapper()
+      });
+
+      expect(result.current).toEqual(expect.any(Function));
+    });
+
+    it("register and unregister", () => {
+      const { result, unmount } = renderHook(() => {
+        const div = document.createElement("div");
+
+        return useRegisterTabControl({ value: 0, ref: useRef<HTMLDivElement>(div) });
+      });
+
+      unmount();
+
+      expect(result.current).toEqual(expect.any(Function));
+    });
+
+    describe("without provider", () => {
+      it("log a warning", async () => {
+        const { result, unmount } = renderHook(() => {
+          const div = document.createElement("div");
+          return useRegisterTabControl({ value: 0, ref: useRef<HTMLDivElement>(div) });
+        });
+
+        await act(() => result.current({ type: "update", payload: 4 }));
+
+        unmount();
+
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context dispatch used outside of Provider");
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context register used outside of Provider");
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context unregister used outside of Provider");
+      });
+    });
+  });
+
+  describe("useTabDispatch()", () => {
+    it("returns the dispatch function", () => {
+      const { result } = renderHook(useTabDispatch, {
+        wrapper: createWrapper()
+      });
+
+      expect(result.current).toEqual(expect.any(Function));
+    });
+
+    describe("without provider", () => {
+      it("log a warning", async () => {
+        const { result } = renderHook(useTabDispatch);
+
+        await act(() => result.current({ type: "update", payload: 4 }));
+
+        expect(console.warn).toHaveBeenCalledWith("Tab Controller Context dispatch used outside of Provider");
+      });
+    });
+
+    describe("dispatch update", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const update = () => {
+            dispatch({ type: "update", payload: 4 });
+          };
+
+          return (
+            <>
+              <button onClick={update}>update</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("4");
+      });
+    });
+
+    describe("dispatch end", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const end = () => {
+            dispatch({ type: "end" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={5}>Label 5</Tab>
+
+              <button onClick={end}>end</button>
+
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+        expect(output).toHaveValue("5");
+      });
+    });
+
+    describe("dispatch start", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const start = () => {
+            dispatch({ type: "start" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={5}>Label 5</Tab>
+              <button onClick={start}>start</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("0");
+      });
+    });
+
+    describe("dispatch next", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const next = () => {
+            dispatch({ type: "next" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={4}>Label 4</Tab>
+              <Tab value={5}>Label 5</Tab>
+              <button onClick={next}>next</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("4");
+      });
+
+      describe("when current tab is last one", () => {
+        it("loop to the first tab", async () => {
+          const Test = () => {
+            const dispatch = useTabDispatch();
+            const tab = useActiveTab();
+
+            const next = () => {
+              dispatch({ type: "next" });
+            };
+
+            return (
+              <>
+                <Tab value={0}>Label 0</Tab>
+                <Tab value={3}>Label 3</Tab>
+                <Tab value={4}>Label 4</Tab>
+                <Tab value={5}>Label 5</Tab>
+                <button onClick={next}>next</button>
+                <output name='result'>{tab}</output>
+              </>
+            );
+          };
+
+          render(<Test />, { wrapper: createWrapper({ selected: 5 }) });
+
+          const button = screen.getByRole("button");
+          const output = screen.getByRole("status");
+
+          expect(output).toHaveValue("5");
+
+          await userEvent.click(button);
+
+          expect(output).toHaveValue("0");
+        });
+      });
+    });
+
+    describe("dispatch previous", () => {
+      it("update the state", async () => {
+        const Test = () => {
+          const dispatch = useTabDispatch();
+          const tab = useActiveTab();
+
+          const previous = () => {
+            dispatch({ type: "previous" });
+          };
+
+          return (
+            <>
+              <Tab value={0}>Label 0</Tab>
+              <Tab value={2}>Label 2</Tab>
+              <Tab value={3}>Label 3</Tab>
+              <Tab value={4}>Label 4</Tab>
+              <Tab value={5}>Label 5</Tab>
+              <button onClick={previous}>previous</button>
+              <output name='result'>{tab}</output>
+            </>
+          );
+        };
+
+        render(<Test />, { wrapper: createWrapper() });
+
+        const button = screen.getByRole("button");
+        const output = screen.getByRole("status");
+
+        expect(output).toHaveValue("3");
+
+        await userEvent.click(button);
+
+        expect(output).toHaveValue("2");
+      });
+
+      describe("when current tab is first one", () => {
+        it("loop to the last tab", async () => {
+          const Test = () => {
+            const dispatch = useTabDispatch();
+            const tab = useActiveTab();
+
+            const previous = () => {
+              dispatch({ type: "previous" });
+            };
+
+            return (
+              <>
+                <Tab value={0}>Label 0</Tab>
+                <Tab value={2}>Label 2</Tab>
+                <Tab value={3}>Label 3</Tab>
+                <Tab value={4}>Label 4</Tab>
+                <Tab value={5}>Label 5</Tab>
+                <button onClick={previous}>previous</button>
+                <output name='result'>{tab}</output>
+              </>
+            );
+          };
+
+          render(<Test />, { wrapper: createWrapper({ selected: 0 }) });
+
+          const button = screen.getByRole("button");
+          const output = screen.getByRole("status");
+
+          expect(output).toHaveValue("0");
+
+          await userEvent.click(button);
+
+          expect(output).toHaveValue("5");
+        });
+      });
+    });
+  });
+
+  describe("useTabControl()", () => {
+    it("retuns the elements registered map", () => {
+      const Test = () => {
+        const div = document.createElement("div");
+        const ref = useRef(div);
+
+        useRegisterTabControl({ value: 0, ref });
+
+        const controls = useTabControls();
+
+        return <output name='result'>{controls.size}</output>;
+      };
+
+      render(<Test />, { wrapper: createWrapper() });
+
+      const output = screen.getByRole("status");
+
+      expect(output).toHaveValue("1");
+    });
+
+    it("allow unregister", async () => {
+      const Test = () => {
+        const div = document.createElement("div");
+        const ref = useRef(div);
+
+        const { register, unregister } = useContext(TabControlContext);
+        const controls = useTabControls();
+
+        return (
+          <>
+            <button onClick={() => register(0, ref)}>REGISTER</button>
+            <button onClick={() => unregister(0)}>UNREGISTER</button>
+            <output name='result'>{controls.size}</output>
+          </>
+        );
+      };
+
+      render(<Test />, { wrapper: createWrapper() });
+
+      const register = screen.getByRole("button", { name: "REGISTER" });
+      const unregister = screen.getByRole("button", { name: "UNREGISTER" });
+
+      await userEvent.click(register);
+
+      expect(screen.getByRole("status")).toHaveValue("1");
+
+      await userEvent.click(unregister);
+
+      expect(screen.getByRole("status")).toHaveValue("0");
+    });
+  });
+});

package/src/molecules/tabs/hooks/tabControl.ts

@@ -0,0 +1,52 @@
+import { type RefObject, useContext, useEffect } from "react";
+
+import { TabControlContext } from "../context/TabControl";
+
+export const useActiveTab = () => {
+  const { value } = useContext(TabControlContext);
+
+  return value;
+};
+
+export const useTabDispatch = () => {
+  const { dispatch } = useContext(TabControlContext);
+
+  return dispatch;
+};
+
+export const useTabsUid = () => {
+  const { uid } = useContext(TabControlContext);
+
+  return uid;
+};
+
+interface Props<T extends HTMLElement> {
+  value: number;
+  ref: RefObject<T>;
+}
+
+export function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>) {
+  const { dispatch, register, unregister } = useContext(TabControlContext);
+
+  useEffect(() => {
+    register(value, ref);
+
+    return () => {
+      unregister(value);
+    };
+  }, [value, ref, register, unregister]);
+
+  return dispatch;
+}
+
+export const useTabControls = () => {
+  const { refs } = useContext(TabControlContext);
+
+  return refs;
+};
+
+export const useActiveTabControl = () => {
+  const { value, refs } = useContext(TabControlContext);
+
+  return [value, refs.get(value)] as const;
+};

package/src/organisms/__fixtures__/form-firstname.fixture.json

@@ -1,4 +1,5 @@
 {
+  "title": "Form with First Name",
   "type": "form",
   "display": "form",
   "tags": [],

package/src/organisms/__fixtures__/form.fixture.json

@@ -1,4 +1,5 @@
 {
+  "title": "Form complex",
   "type": "form",
   "tags": [],
   "components": [