@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/ButtonGroup/ButtonGroup.test.js

@@ -0,0 +1,153 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { Alert } from "react-native";
+import { ButtonGroup } from "./ButtonGroup";
+import { Button } from "../Button";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+import { atlantisContextDefaultValues } from "../AtlantisContext";
+const mockOnOpen = jest.fn();
+function ButtonGroupForTest(props) {
+    return (React.createElement(ButtonGroup, { bottomSheetHeading: props.bottomSheetHeading, showCancelInBottomSheet: props.showCancelInBottomSheet, onOpenBottomSheet: mockOnOpen }, props.children));
+}
+it("renders a single primary action", () => {
+    const createAction = jest.fn();
+    const { getByText, queryByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction })));
+    expect(getByText("Create")).not.toBeNull();
+    expect(queryByLabelText("More")).toBeNull();
+});
+it("renders 2 primary actions", () => {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const { getByText, queryByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Edit", icon: "edit", onPress: editAction })));
+    expect(getByText("Create")).not.toBeNull();
+    expect(getByText("Edit")).not.toBeNull();
+    expect(queryByLabelText("More")).toBeNull();
+});
+it("does not render more than 2 primary actions but adds a More button", () => {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const mysteryAction = jest.fn();
+    const { getByText, queryByText, getByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Edit", icon: "edit", onPress: editAction }),
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Mystery", icon: "edit", onPress: mysteryAction })));
+    expect(getByText("Create")).not.toBeNull();
+    expect(getByText("Edit")).not.toBeNull();
+    expect(queryByText("Mystery")).toBeNull();
+    expect(getByLabelText("More")).toBeDefined();
+});
+it("does not render secondary actions", () => {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const deleteAction = jest.fn();
+    const { getByText, queryByText, getByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Edit", icon: "edit", onPress: editAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Delete", icon: "trash", onPress: deleteAction })));
+    expect(getByText("Create")).not.toBeNull();
+    expect(queryByText("Edit")).toBeNull();
+    expect(queryByText("Delete")).toBeNull();
+    expect(getByLabelText("More")).toBeDefined();
+});
+it("renders first secondary action as a primary action button if no primary action specified", () => {
+    const editAction = jest.fn();
+    const deleteAction = jest.fn();
+    const { queryByText, getByText, getByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Edit", icon: "edit", onPress: editAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Delete", icon: "trash", onPress: deleteAction })));
+    expect(getByText("Edit")).not.toBeNull();
+    expect(queryByText("Delete")).toBeNull();
+    expect(getByLabelText("More")).toBeDefined();
+});
+it("fires the press handlers when the primary action buttons are pressed", () => {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const { getByText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Edit", icon: "edit", onPress: editAction })));
+    fireEvent.press(getByText("Create"));
+    expect(createAction).toHaveBeenCalled();
+    fireEvent.press(getByText("Edit"));
+    expect(editAction).toHaveBeenCalled();
+});
+it("opens the secondary action menu when the More button is pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const deleteAction = jest.fn();
+    const { findByText, queryByText, getByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Edit", icon: "edit", onPress: editAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Delete", icon: "trash", onPress: deleteAction })));
+    expect(queryByText("Edit")).toBeNull();
+    fireEvent.press(getByLabelText("More"));
+    expect(yield findByText("Edit")).not.toBeNull();
+    expect(yield findByText("Delete")).not.toBeNull();
+}));
+it("renders heading and cancel options if passed in", () => __awaiter(void 0, void 0, void 0, function* () {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const { findByText, getByLabelText } = render(React.createElement(ButtonGroupForTest, { bottomSheetHeading: "Heading", showCancelInBottomSheet: true },
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Edit", icon: "edit", onPress: editAction })));
+    fireEvent.press(getByLabelText("More"));
+    expect(yield findByText("Heading")).not.toBeNull();
+    expect(yield findByText("Cancel")).not.toBeNull();
+}));
+it("renders custom button for primary action if passed in", () => {
+    const createAction = jest.fn();
+    const customCreateButton = (React.createElement(Button, { label: "CustomCreate", onPress: createAction }));
+    const { queryByText, getByText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction, customButton: customCreateButton })));
+    expect(getByText("CustomCreate")).not.toBeNull();
+    expect(queryByText("Create")).toBeNull();
+});
+it("calls onOpenBottomSheet when the secondary actions are opened", () => __awaiter(void 0, void 0, void 0, function* () {
+    const createAction = jest.fn();
+    const editAction = jest.fn();
+    const deleteAction = jest.fn();
+    const { getByLabelText } = render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: "Create", icon: "plus", onPress: createAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Edit", icon: "edit", onPress: editAction }),
+        React.createElement(ButtonGroup.SecondaryAction, { label: "Delete", icon: "trash", onPress: deleteAction })));
+    fireEvent.press(getByLabelText("More"));
+    yield waitFor(() => {
+        expect(mockOnOpen).toHaveBeenCalledTimes(1);
+    });
+}));
+describe("ButtonGroup Offline/Online", () => {
+    const atlantisContextSpy = jest.spyOn(atlantisContext, "useAtlantisContext");
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+    const handlePress = jest.fn();
+    const label = "Click me";
+    const setup = () => render(React.createElement(ButtonGroupForTest, null,
+        React.createElement(ButtonGroup.PrimaryAction, { label: label, icon: "plus", onPress: handlePress })));
+    it("should show an alert and not fire the onPress", () => {
+        const alertSpy = jest.spyOn(Alert, "alert");
+        atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: false }));
+        const { getByText } = setup();
+        fireEvent.press(getByText(label));
+        expect(alertSpy).toHaveBeenCalled();
+        expect(handlePress).not.toHaveBeenCalled();
+    });
+    it("should fire the onPress and not show an alert", () => {
+        const alertSpy = jest.spyOn(Alert, "alert");
+        const { getByText } = setup();
+        fireEvent.press(getByText(label));
+        expect(handlePress).toHaveBeenCalled();
+        expect(alertSpy).not.toHaveBeenCalled();
+    });
+});

package/dist/src/Card/Card.test.js

@@ -0,0 +1,80 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Card } from "./Card";
+import { Text } from "../Text";
+const cardHeaderTestID = "cardHeader";
+const cardFooterTestID = "cardFooter";
+it("renders with only a header title", () => {
+    const title = "Foobar";
+    const { getByTestId, getByText, queryAllByRole } = render(React.createElement(Card, { header: { title } }));
+    expect(getByText(title)).toBeDefined();
+    expect(getByTestId(cardHeaderTestID)).toBeDefined();
+    expect(queryAllByRole("button")).toEqual([]);
+});
+it("renders with an icon action", () => {
+    const iconName = "plus2";
+    const { getByTestId } = render(React.createElement(Card, { header: {
+            title: "Foobar",
+            actionItem: { iconName },
+            onPress: jest.fn(),
+        } }));
+    expect(getByTestId(iconName)).toBeDefined();
+});
+it("renders with a button action", () => {
+    const label = "Edit";
+    const { getByText } = render(React.createElement(Card, { header: {
+            title: "Foobar",
+            actionItem: { label },
+            onPress: jest.fn(),
+        } }));
+    expect(getByText(label)).toBeDefined();
+});
+it("renders without a header and footer", () => {
+    const content = "I am the content";
+    const { getByText, queryByTestId } = render(React.createElement(Card, null,
+        React.createElement(Text, null, content)));
+    expect(getByText(content)).toBeDefined();
+    expect(queryByTestId(cardHeaderTestID)).toBeNull();
+    expect(queryByTestId(cardFooterTestID)).toBeNull();
+});
+it("should call the onPress when pressing the header", () => {
+    const pressHandler = jest.fn();
+    const { getByText } = render(React.createElement(Card, { header: {
+            title: "Header",
+            actionItem: { iconName: "plus2" },
+            onPress: pressHandler,
+        } }));
+    fireEvent.press(getByText("Header"));
+    expect(pressHandler).toHaveBeenCalled();
+});
+it("should call the onPress when pressing the action button", () => {
+    const pressHandler = jest.fn();
+    const { getByText } = render(React.createElement(Card, { header: {
+            title: "Header",
+            actionItem: { label: "Edit" },
+            onPress: pressHandler,
+        } }));
+    fireEvent.press(getByText("Edit"));
+    expect(pressHandler).toHaveBeenCalled();
+});
+it("renders with a footer", () => {
+    const title = "View All";
+    const { getByText, getByTestId, queryByTestId } = render(React.createElement(Card, { footer: { title: title, onPress: jest.fn() } }));
+    expect(getByText(title)).toBeDefined();
+    expect(getByTestId(cardFooterTestID)).toBeDefined();
+    expect(queryByTestId(cardHeaderTestID)).toBeNull();
+});
+it("should call the onPress when pressing the footer", () => {
+    const headerPressHandler = jest.fn();
+    const footerPressHandler = jest.fn();
+    const { getByText } = render(React.createElement(Card, { header: {
+            title: "Header",
+            actionItem: { iconName: "plus2" },
+            onPress: headerPressHandler,
+        }, footer: {
+            title: "View All",
+            onPress: footerPressHandler,
+        } }));
+    fireEvent.press(getByText("View All"));
+    expect(footerPressHandler).toHaveBeenCalled();
+});

package/dist/src/Card/components/InternalCardHeader.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { InternalCardHeader } from "./InternalCardHeader";
+it("should render a pressable header", () => {
+    const handlePress = jest.fn();
+    const screen = render(React.createElement(InternalCardHeader, { collapsable: true, onPress: handlePress, testID: "cardHeader" }, "\uD83C\uDF69"));
+    const header = screen.getByTestId("cardHeader");
+    expect(header).toBeDefined();
+    expect(header.props.accessibilityRole).toBe("button");
+    fireEvent.press(header);
+    expect(handlePress).toHaveBeenCalled();
+});
+it("should render an un-pressable header", () => {
+    const screen = render(React.createElement(InternalCardHeader, { collapsable: true, testID: "cardHeader" }, "\uD83C\uDF1E"));
+    const header = screen.getByTestId("cardHeader");
+    expect(header).toBeDefined();
+    expect(header.props.onPress).toBeUndefined();
+});

package/dist/src/Checkbox/Checkbox.test.js

@@ -0,0 +1,135 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+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";
+const onChange = jest.fn();
+afterEach(() => jest.resetAllMocks());
+describe("Checkbox", () => {
+    it("renders checkbox label", () => {
+        const label = "TestLabel";
+        const { getByLabelText } = render(React.createElement(Checkbox, { name: "testCheckbox", label: label }));
+        expect(getByLabelText(label)).toBeTruthy();
+    });
+    it("renders checkbox with defaultChecked set to true", () => {
+        const { getByTestId, getByRole } = render(React.createElement(Checkbox, { name: "testCheckbox", defaultChecked: true }));
+        expect(getByRole("checkbox").props.accessibilityState).toHaveProperty("checked", true);
+        expect(getByTestId("checkmark")).toBeDefined();
+    });
+    it("renders checkbox label with assistive text", () => {
+        const label = "TestLabel";
+        const assistive = "TestAssistive";
+        const { getByLabelText, getByText } = render(React.createElement(Checkbox, { name: "testCheckbox", label: label, assistiveText: assistive }));
+        expect(getByLabelText(label)).toBeTruthy();
+        expect(getByText(assistive)).toBeTruthy();
+    });
+    it("will call onChange with true when pressed without default checked state set", () => {
+        const { getByLabelText } = render(React.createElement(Checkbox, { name: "testCheckbox", onChange: onChange, accessibilityLabel: accessibilityLabel }));
+        const checkbox = getByLabelText(accessibilityLabel);
+        fireEvent.press(checkbox);
+        expect(onChange).toHaveBeenCalledWith(true);
+    });
+    it("will call onChange with false when checked checkbox is pressed", () => {
+        const { getByLabelText } = render(React.createElement(Checkbox, { name: "onChangeTest", checked: true, onChange: onChange, accessibilityLabel: accessibilityLabel }));
+        const checkbox = getByLabelText(accessibilityLabel);
+        fireEvent.press(checkbox);
+        expect(onChange).toHaveBeenCalledWith(false);
+    });
+    it("will call onChange with true when unchecked checkbox is pressed", () => {
+        const { getByLabelText } = render(React.createElement(Checkbox, { name: "onChangeTest", checked: false, onChange: onChange, accessibilityLabel: accessibilityLabel }));
+        const checkbox = getByLabelText(accessibilityLabel);
+        fireEvent.press(checkbox);
+        expect(onChange).toHaveBeenCalledWith(true);
+    });
+    it("will not call onChange when disabled", () => {
+        const { getByLabelText } = render(React.createElement(Checkbox, { name: "testCheckbox", onChange: onChange, disabled: true, accessibilityLabel: accessibilityLabel }));
+        const checkbox = getByLabelText(accessibilityLabel);
+        fireEvent.press(checkbox);
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it("can be set as indeterminate", () => {
+        const { getByTestId } = render(React.createElement(Checkbox, { name: "testCheckbox", onChange: onChange, indeterminate: true, accessibilityLabel: accessibilityLabel }));
+        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, }) {
+        const formMethods = useForm();
+        return (React.createElement(FormProvider, Object.assign({}, formMethods),
+            React.createElement(Checkbox, { name: checkboxName, label: checkboxLabel, defaultChecked: defaultChecked, accessibilityLabel: accessibilityLabel }),
+            React.createElement(Button, { onPress: formMethods.handleSubmit(values => mockOnSubmit(values)), title: saveButtonText, accessibilityLabel: saveButtonText })));
+    }
+    beforeEach(() => {
+        mockOnSubmit.mockClear();
+    });
+    describe("defaultChecked prop sets form value", () => {
+        it("sets form value to true when defaultChecked is true", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText } = render(React.createElement(FormWithProvider, { defaultChecked: true }));
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(mockOnSubmit).toHaveBeenCalledWith({
+                [checkboxName]: true,
+            });
+        }));
+        it("sets form value to false when defaultChecked is false", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText } = render(React.createElement(FormWithProvider, { defaultChecked: false }));
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(mockOnSubmit).toHaveBeenCalledWith({
+                [checkboxName]: false,
+            });
+        }));
+        it("sets form value to undefined when defaultChecked is undefined", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText } = render(React.createElement(FormWithProvider, null));
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(mockOnSubmit).toHaveBeenCalledWith({
+                [checkboxName]: undefined,
+            });
+        }));
+    });
+    describe("checkbox value updates form value", () => {
+        it("updates form value when checkbox is toggled", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText } = render(React.createElement(FormWithProvider, { defaultChecked: false }));
+            const checkbox = getByLabelText(accessibilityLabel);
+            fireEvent.press(checkbox);
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(mockOnSubmit).toHaveBeenCalledWith({
+                [checkboxName]: true,
+            });
+        }));
+        it("preserves defaultChecked value when checkbox is not interacted with", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText } = render(React.createElement(FormWithProvider, { defaultChecked: true }));
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(mockOnSubmit).toHaveBeenCalledWith({
+                [checkboxName]: true,
+            });
+        }));
+    });
+});

package/dist/src/Checkbox/CheckboxGroup.test.js

@@ -0,0 +1,197 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { FormProvider, useForm } from "react-hook-form";
+import { CheckboxGroup } from "./CheckboxGroup";
+import { Checkbox } from "./Checkbox";
+import { Button } from "../Button";
+const onSubmitMock = jest.fn();
+const parentCheckboxLabel = "all condiments";
+const firstCheckboxLabel = "relish";
+const secondCheckboxLabel = "ketchup";
+const thirdCheckboxLabel = "mustard";
+const saveButtonText = "Save";
+function setup(label, disabled, childDisabled) {
+    const checkboxGroup = render(React.createElement(CheckboxGroup, { name: "condimentsGroupCheckbox", label: label, accessibilityLabel: parentCheckboxLabel, disabled: disabled },
+        React.createElement(Checkbox, { label: "Relish", name: "relish", accessibilityLabel: firstCheckboxLabel }),
+        React.createElement(Checkbox, { label: "Ketchup", name: "ketchup", accessibilityLabel: secondCheckboxLabel, disabled: childDisabled }),
+        React.createElement(Checkbox, { label: "Mustard", name: "mustard", accessibilityLabel: thirdCheckboxLabel })));
+    return { checkboxGroup };
+}
+function SetupWithForm({ initialValues, onChangeHandlers, }) {
+    const formMethods = useForm({ defaultValues: initialValues });
+    return (React.createElement(FormProvider, Object.assign({}, formMethods),
+        React.createElement(CheckboxGroup, { name: "condiments", label: "All Condiments", accessibilityLabel: parentCheckboxLabel, onChange: onChangeHandlers === null || onChangeHandlers === void 0 ? void 0 : onChangeHandlers.all },
+            React.createElement(Checkbox, { label: "Relish", name: "relish", accessibilityLabel: firstCheckboxLabel, onChange: onChangeHandlers === null || onChangeHandlers === void 0 ? void 0 : onChangeHandlers.relish }),
+            React.createElement(Checkbox, { label: "Ketchup", name: "ketchup", accessibilityLabel: secondCheckboxLabel, onChange: onChangeHandlers === null || onChangeHandlers === void 0 ? void 0 : onChangeHandlers.ketchup }),
+            React.createElement(Checkbox, { label: "Mustard", name: "mustard", accessibilityLabel: thirdCheckboxLabel, onChange: onChangeHandlers === null || onChangeHandlers === void 0 ? void 0 : onChangeHandlers.mustard })),
+        React.createElement(Button, { onPress: formMethods.handleSubmit(values => onSubmitMock(values)), label: saveButtonText, accessibilityLabel: saveButtonText })));
+}
+describe("when none of the checkboxes in a group are checked", () => {
+    it("the parent checkbox should be in the unchecked state", () => {
+        const { checkboxGroup } = setup("All Condiments");
+        const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+        expect(parentCheckbox.props.accessibilityState.checked).toEqual(false);
+    });
+    describe("when the parent checkbox is pressed", () => {
+        it("should check all the checkboxes within the group", () => {
+            const { checkboxGroup } = setup("All Condiments");
+            fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+            [firstCheckboxLabel, secondCheckboxLabel, thirdCheckboxLabel].forEach(checkboxLabel => {
+                const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+                expect(checkboxElement.props.accessibilityState.checked).toEqual(true);
+            });
+        });
+    });
+});
+describe("when one of the checkboxes in a group are checked", () => {
+    it("the parent checkbox should be in the indeterminate state", () => {
+        const { checkboxGroup } = setup("All Condiments");
+        fireEvent.press(checkboxGroup.getByLabelText(secondCheckboxLabel));
+        const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+        expect(parentCheckbox.props.accessibilityState.checked).toEqual("mixed");
+    });
+});
+describe("when all of the checkboxes in a group are checked", () => {
+    function pressAllCheckboxes(checkboxGroup) {
+        fireEvent.press(checkboxGroup.getByLabelText(firstCheckboxLabel));
+        fireEvent.press(checkboxGroup.getByLabelText(secondCheckboxLabel));
+        fireEvent.press(checkboxGroup.getByLabelText(thirdCheckboxLabel));
+    }
+    it("the parent checkbox should be in the checked state", () => {
+        const { checkboxGroup } = setup("All Condiments");
+        pressAllCheckboxes(checkboxGroup);
+        const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+        expect(parentCheckbox.props.accessibilityState.checked).toEqual(true);
+    });
+    describe("when the parent checkbox is pressed", () => {
+        it("should uncheck all the checkboxes within the group", () => {
+            const { checkboxGroup } = setup("All Condiments");
+            pressAllCheckboxes(checkboxGroup);
+            fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+            [firstCheckboxLabel, secondCheckboxLabel, thirdCheckboxLabel].forEach(checkboxLabel => {
+                const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+                expect(checkboxElement.props.accessibilityState.checked).toEqual(false);
+            });
+        });
+    });
+});
+describe("when the parent checkbox does not have a label", () => {
+    it("does not render the parent checkbox", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { checkboxGroup } = setup(undefined);
+        const parentCheckbox = checkboxGroup.queryByLabelText(parentCheckboxLabel);
+        expect(parentCheckbox).toBeNull();
+    }));
+});
+describe("when the parent checkbox is disabled", () => {
+    it("disabled all the children checkboxes", () => {
+        const { checkboxGroup } = setup("All Condiments", true);
+        fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+        [firstCheckboxLabel, secondCheckboxLabel, thirdCheckboxLabel].forEach(checkboxLabel => {
+            const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+            expect(checkboxElement.props.accessibilityState.disabled).toEqual(true);
+        });
+    });
+});
+describe("when one of the checkboxes in a group are disabled", () => {
+    it("the parent shouldn't modify the disabled checkbox's state", () => {
+        const parentDisabled = false;
+        const childDisabled = true;
+        const { checkboxGroup } = setup("All Condiments", parentDisabled, childDisabled);
+        fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+        [firstCheckboxLabel, thirdCheckboxLabel].forEach(checkboxLabel => {
+            const checkboxElement = checkboxGroup.getByLabelText(checkboxLabel);
+            expect(checkboxElement.props.accessibilityState.checked).toEqual(true);
+        });
+        const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+        expect(parentCheckbox.props.accessibilityState.checked).toEqual("mixed");
+    });
+    it("the parent should update the non disabled checkboxes", () => {
+        const parentDisabled = false;
+        const childDisabled = true;
+        const { checkboxGroup } = setup("All Condiments", parentDisabled, childDisabled);
+        fireEvent.press(checkboxGroup.getByLabelText(parentCheckboxLabel));
+        const secondCheckbox = checkboxGroup.getByLabelText(secondCheckboxLabel);
+        const parentCheckbox = checkboxGroup.getByLabelText(parentCheckboxLabel);
+        expect(secondCheckbox.props.accessibilityState.checked).toEqual(false);
+        expect(parentCheckbox.props.accessibilityState.checked).toEqual("mixed");
+    });
+});
+describe("when one of the checkbox has no name", () => {
+    it("should throw an error", () => {
+        expect(() => render(React.createElement(CheckboxGroup, { name: "condimentsGroupCheckbox", label: "test", accessibilityLabel: parentCheckboxLabel },
+            React.createElement(Checkbox, { label: "Relish", name: "relish", accessibilityLabel: firstCheckboxLabel }),
+            React.createElement(Checkbox, { label: "Ketchup", name: "ketchup", accessibilityLabel: secondCheckboxLabel }),
+            React.createElement(Checkbox, { onChange: jest.fn, checked: false })))).toThrow("You must provide a name to checkboxes in a checkbox group");
+    });
+});
+describe("when controlled by a form", () => {
+    describe("when a checkbox is pressed", () => {
+        it("should update the form values", () => __awaiter(void 0, void 0, void 0, function* () {
+            const initialValues = {
+                condiments: {
+                    parentChecked: false,
+                    childrenChecked: { relish: false, ketchup: false, mustard: false },
+                },
+            };
+            const expectedValues = {
+                condiments: {
+                    parentChecked: false,
+                    childrenChecked: { relish: false, ketchup: true, mustard: false },
+                },
+            };
+            const { getByLabelText } = render(React.createElement(SetupWithForm, { initialValues: initialValues }));
+            fireEvent.press(getByLabelText(secondCheckboxLabel));
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(onSubmitMock).toHaveBeenCalledWith(expectedValues);
+        }));
+        it("should call the onChange handler for child checkbox", () => __awaiter(void 0, void 0, void 0, function* () {
+            const initialValues = {
+                condiments: {
+                    parentChecked: false,
+                    childrenChecked: { relish: false, ketchup: false, mustard: false },
+                },
+            };
+            const relishHandler = jest.fn();
+            const onChangeHandlers = {
+                relish: relishHandler,
+            };
+            const { getByLabelText } = render(React.createElement(SetupWithForm, { initialValues: initialValues, onChangeHandlers: onChangeHandlers }));
+            fireEvent.press(getByLabelText(firstCheckboxLabel));
+            expect(relishHandler).toHaveBeenCalledWith(true);
+        }));
+        it("should call the onChange handler for parent checkbox", () => __awaiter(void 0, void 0, void 0, function* () {
+            const initialValues = {
+                condiments: {
+                    parentChecked: false,
+                    childrenChecked: { relish: false, ketchup: false, mustard: false },
+                },
+            };
+            const allHandler = jest.fn();
+            const onChangeHandlers = {
+                all: allHandler,
+            };
+            const { getByLabelText } = render(React.createElement(SetupWithForm, { initialValues: initialValues, onChangeHandlers: onChangeHandlers }));
+            fireEvent.press(getByLabelText(parentCheckboxLabel));
+            expect(allHandler).toHaveBeenCalledWith({
+                parentChecked: true,
+                childrenChecked: {
+                    relish: true,
+                    ketchup: true,
+                    mustard: true,
+                },
+            });
+        }));
+    });
+});

package/dist/src/Checkbox/CheckboxGroupReducer.test.js

@@ -0,0 +1,25 @@
+import { checkboxGroupReducer, initCheckboxGroupState, } from "./CheckboxGroupReducer";
+let state;
+const checkbox1 = "checkbox1";
+const checkbox2 = "checkbox2";
+const checkbox3 = "checkbox3";
+const childrenNames = [checkbox1, checkbox2, checkbox3];
+describe("update", () => {
+    beforeEach(() => {
+        state = initCheckboxGroupState(childrenNames);
+    });
+    it("should update childrenChecked", () => {
+        const result = checkboxGroupReducer(state, {
+            type: "Update",
+            data: { childrenChecked: { [checkbox1]: true } },
+        });
+        expect(result).toEqual(Object.assign(Object.assign({}, state), { childrenChecked: Object.assign(Object.assign({}, state.childrenChecked), { [checkbox1]: true }) }));
+    });
+    it("should update parentChecked", () => {
+        const result = checkboxGroupReducer(state, {
+            type: "Update",
+            data: { parentChecked: true },
+        });
+        expect(result).toEqual(Object.assign(Object.assign({}, state), { parentChecked: true }));
+    });
+});