@jobber/components-native 0.95.0 → 0.95.1-CLEANUPfi-d275a8e.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.95.0",
+  "version": "0.95.1-CLEANUPfi-d275a8e.1+d275a8eca",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -96,5 +96,5 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "ea9cbb709f05442a469763a4f12a332a59cb6350"
+  "gitHead": "d275a8ecaa05a97ddb522ad524ad3d5c2f5314b2"
 }

package/src/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react-native";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { FormProvider, useForm } from "react-hook-form";
+import { Button } from "react-native";
 import { Checkbox } from "./Checkbox";
 
 const accessibilityLabel = "testA11y";
@@ -102,3 +104,118 @@ describe("Checkbox", () => {
     expect(getByTestId("minus2")).toBeDefined();
   });
 });
+
+describe("Checkbox with FormProvider", () => {
+  const mockOnSubmit = jest.fn();
+  const checkboxName = "testCheckbox";
+  const checkboxLabel = "Test Checkbox";
+  const saveButtonText = "Save";
+
+  function FormWithProvider({
+    defaultChecked,
+  }: {
+    readonly defaultChecked?: boolean;
+  }) {
+    const formMethods = useForm();
+
+    return (
+      <FormProvider {...formMethods}>
+        <Checkbox
+          name={checkboxName}
+          label={checkboxLabel}
+          defaultChecked={defaultChecked}
+          accessibilityLabel={accessibilityLabel}
+        />
+        <Button
+          onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+          title={saveButtonText}
+          accessibilityLabel={saveButtonText}
+        />
+      </FormProvider>
+    );
+  }
+
+  beforeEach(() => {
+    mockOnSubmit.mockClear();
+  });
+
+  describe("defaultChecked prop sets form value", () => {
+    it("sets form value to true when defaultChecked is true", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={true} />,
+      );
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: true,
+      });
+    });
+
+    it("sets form value to false when defaultChecked is false", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={false} />,
+      );
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: false,
+      });
+    });
+
+    it("sets form value to undefined when defaultChecked is undefined", async () => {
+      const { getByLabelText } = render(<FormWithProvider />);
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: undefined,
+      });
+    });
+  });
+
+  describe("checkbox value updates form value", () => {
+    it("updates form value when checkbox is toggled", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={false} />,
+      );
+
+      const checkbox = getByLabelText(accessibilityLabel);
+      fireEvent.press(checkbox);
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: true,
+      });
+    });
+
+    it("preserves defaultChecked value when checkbox is not interacted with", async () => {
+      const { getByLabelText } = render(
+        <FormWithProvider defaultChecked={true} />,
+      );
+
+      const saveButton = getByLabelText(saveButtonText);
+      await waitFor(() => {
+        fireEvent.press(saveButton);
+      });
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        [checkboxName]: true,
+      });
+    });
+  });
+});

package/src/InputText/InputText.test.tsx

@@ -8,7 +8,7 @@ import {
   waitFor,
 } from "@testing-library/react-native";
 import type { TextStyle } from "react-native";
-import { Platform } from "react-native";
+import { Button, Platform } from "react-native";
 import { FormProvider, useForm } from "react-hook-form";
 import type { InputTextProps } from "./InputText";
 import { InputText } from "./InputText";
@@ -623,6 +623,120 @@ describe("InputText", () => {
       });
     });
   });
+
+  describe("with FormProvider", () => {
+    const mockOnSubmit = jest.fn();
+    const inputName = "testInput";
+    const inputAccessibilityLabel = "Test Input";
+    const saveButtonText = "Save";
+
+    function FormWithProvider({
+      defaultValue,
+    }: {
+      readonly defaultValue?: string;
+    }) {
+      const formMethods = useForm();
+
+      return (
+        <FormProvider {...formMethods}>
+          <InputText
+            name={inputName}
+            defaultValue={defaultValue}
+            accessibilityLabel={inputAccessibilityLabel}
+          />
+          <Button
+            onPress={formMethods.handleSubmit(values => mockOnSubmit(values))}
+            title={saveButtonText}
+            accessibilityLabel={saveButtonText}
+          />
+        </FormProvider>
+      );
+    }
+
+    beforeEach(() => {
+      mockOnSubmit.mockClear();
+    });
+
+    describe("defaultValue prop sets form value", () => {
+      it("sets form value to string when defaultValue is provided", async () => {
+        const testValue = "test value";
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue={testValue} />,
+        );
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: testValue,
+        });
+      });
+
+      it("sets form value to undefined when defaultValue is undefined", async () => {
+        const { getByLabelText } = render(<FormWithProvider />);
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: undefined,
+        });
+      });
+
+      it("sets form value to undefined when defaultValue is empty string", async () => {
+        const { getByLabelText } = render(<FormWithProvider defaultValue="" />);
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: undefined,
+        });
+      });
+    });
+
+    describe("input value updates form value", () => {
+      it("updates form value when input text is changed", async () => {
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue="initial" />,
+        );
+
+        const input = getByLabelText(inputAccessibilityLabel);
+        fireEvent.changeText(input, "new value");
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: "new value",
+        });
+      });
+
+      it("preserves defaultValue when input is not interacted with", async () => {
+        const testValue = "preserved value";
+        const { getByLabelText } = render(
+          <FormWithProvider defaultValue={testValue} />,
+        );
+
+        const saveButton = getByLabelText(saveButtonText);
+        await waitFor(() => {
+          fireEvent.press(saveButton);
+        });
+
+        expect(mockOnSubmit).toHaveBeenCalledWith({
+          [inputName]: testValue,
+        });
+      });
+    });
+  });
 });
 
 describe("Transform", () => {

package/src/hooks/useFormController.ts

@@ -40,7 +40,7 @@ export function useFormController<T>({
     name: fieldName,
     control,
     rules: validations,
-    defaultValue: value || undefined,
+    defaultValue: typeof value === "boolean" ? value : value || undefined,
   });
 
   // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".