Merge pull request #17 from Jaspersoft/hook-testing

Add BooleanInputControl tests, add tests for useLiveState

packages/jv-input-controls/src/controls/SingleValueTextInputControl.tsx

@@ -29,9 +29,9 @@ export const SingleValueTextInputControl = (props: TextFieldICProps) => {
     visible,
     ...remainingProps
   } = props;
-  const liveState = useLiveState({
-    initialValue: props.state?.value || theValue || defaultValue || "",
-  });
+  const liveState = useLiveState(
+    props.state?.value || theValue || defaultValue || "",
+  );
   const controlClasses = useControlClasses([], props);
   // inputProps is needed to handle readOnly by TextField from MUI natively:
   const inputProps: any = {};

packages/jv-input-controls/src/controls/hooks/useControlClasses.ts

@@ -16,7 +16,7 @@ export function useControlClasses(
     if (!props.visible) controlClasses.push(INVISIBLE_CLASS);
     if (props.mandatory) controlClasses.push(MANDATORY_CLASS);
     if (props.readOnly) controlClasses.push(READ_ONLY_CLASS);
-    setClasses(controlClasses);
+    setClasses([...initialClasses, ...controlClasses]);
   };
 
   useEffect(() => {

packages/jv-input-controls/src/controls/hooks/useLiveState.ts

@@ -1,14 +1,15 @@
 import { useState } from "react";
 
-export function useLiveState({ initialValue }: { initialValue: string }) {
+export function useLiveState(initialValue: any) {
   const [value, setValue] = useState(initialValue);
 
   function handleChange(e: any) {
     setValue(e.target.value);
   }
-
-  return {
+  const liveStateProps = {
     value: value,
     onChange: handleChange,
   };
+
+  return liveStateProps;
 }

packages/jv-input-controls/test/BooleanInputControl.test.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import BooleanInputControl from "../src/controls/BooleanInputControl";
+import { cleanup, render } from "@testing-library/react";
+
+const requiredProps = {
+  id: "0",
+  label: "test",
+  mandatory: false,
+  readOnly: false,
+  visible: true,
+  type: "bool",
+};
+
+const getBoolIC = (options?: object): React.JSX.Element => {
+  return <BooleanInputControl {...{ ...requiredProps, ...options }} />;
+};
+
+describe("BooleanInputControl tests", () => {
+  beforeEach(() => {
+    cleanup();
+  });
+
+  it("should create checkbox", () => {
+    render(getBoolIC());
+    const checkboxElement = document.querySelectorAll('input[type="checkbox"]');
+    expect(checkboxElement.length).toBe(1);
+  });
+
+  describe("should create switch", () => {
+    render(getBoolIC({ styleType: "switch" }));
+    const switchElement = document.querySelectorAll('input[type="checkbox"]');
+    expect(switchElement.length).toBe(1);
+  });
+});

packages/jv-input-controls/test/hooks/useControlClasses.test.ts

@@ -0,0 +1,42 @@
+import { renderHook } from "@testing-library/react";
+import { useControlClasses } from "../../src/controls/hooks/useControlClasses";
+
+const requiredProps = {
+  id: "0",
+  label: "test",
+  mandatory: false,
+  readOnly: false,
+  visible: true,
+  type: "bool",
+};
+
+describe("useControlClasses custom hook", () => {
+  it("should return an array with initial class provided", () => {
+    const { result } = renderHook(() =>
+      useControlClasses(["testing-class"], requiredProps),
+    );
+    expect(result.current).toContain("testing-class");
+  });
+
+  it("should include mandatory class for mandatory IC", () => {
+    const icProps = { ...requiredProps, mandatory: true };
+    const { result } = renderHook(() => useControlClasses([], icProps));
+    expect(result.current).toContain("jv-uMandatory");
+  });
+
+  it("should return readonly for readonly classes", () => {
+    const icProps = { ...requiredProps, readOnly: true };
+    const { result } = renderHook(() => useControlClasses([], icProps));
+    expect(result.current).toContain("jv-uReadOnly");
+    expect(result.current).not.toContain("jv-uMandatory");
+  });
+
+  it("should return hidden if not visible", () => {
+    const icProps = { ...requiredProps, visible: false };
+    const { result } = renderHook(() => useControlClasses([], icProps));
+    expect(result.current).toContain("jv-uVisibility-hide");
+    expect(result.current).not.toContain("jv-uMandatory");
+    expect(result.current).not.toContain("jv-uReadOnly");
+    expect(result.current).not.toContain("jv-uMandatory");
+  });
+});

packages/jv-input-controls/test/hooks/useLiveState.test.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useLiveState } from "../../src/controls/hooks/useLiveState";
+import { renderHook } from "@testing-library/react";
+
+describe("useLiveState hook tests", () => {
+  it("should store initial value", () => {
+    const { result } = renderHook(() => useLiveState(42));
+    expect(result.current.value).toBe(42);
+  });
+  it("should return 2 fields", () => {
+    const { result } = renderHook(() => useLiveState(0));
+    expect(Object.keys(result.current).length).toBe(2);
+  });
+  it("should return expected fields: value, onChange", () => {
+    const { result } = renderHook(() => useLiveState(0));
+    expect(result.current.value).toBeDefined();
+    expect(result.current.onChange).toBeDefined();
+    expect(result.current.onChange instanceof Function).toBeTruthy();
+  });
+});