@jobber/components-native 0.95.0 → 0.95.1-CLEANUPfi-c27afbd.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.95.0",
+  "version": "0.95.1-CLEANUPfi-c27afbd.0+c27afbdf1",
   "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": "c27afbdf1236cd8a23a64ef0be784c7b0f793ddb"
 }

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/hooks/useFormController.ts

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