@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/Flex/Flex.test.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View } from "react-native";
+import { tokens } from "@jobber/design";
+import { Flex } from "./Flex";
+import { columnStyles } from "./Flex.styles";
+import { Text } from "../Text";
+import { Icon } from "../Icon";
+function getContentComponent(parentView) {
+    var _a;
+    return (_a = parentView === null || parentView === void 0 ? void 0 : parentView.children[0]) === null || _a === void 0 ? void 0 : _a.children[0];
+}
+function getFlexCol(flexRow) {
+    return flexRow.children;
+}
+function setUp(props) {
+    const container = render(React.createElement(View, { accessibilityLabel: "contentView" },
+        React.createElement(Flex, { align: props === null || props === void 0 ? void 0 : props.align, template: props === null || props === void 0 ? void 0 : props.template, gap: props === null || props === void 0 ? void 0 : props.gap },
+            React.createElement(Icon, { name: "email" }),
+            React.createElement(Text, null, "Hi onLookers!"),
+            React.createElement(Text, null, "You look Great Today!"),
+            React.createElement(Text, null, "Thanks for coming to my Ted Talk :D"))));
+    const contentView = getContentComponent(container.getByLabelText("contentView"));
+    const flexRow = container.getAllByTestId("ATL-Flex-Row");
+    const flexCol = getFlexCol(flexRow[0]);
+    return Object.assign(Object.assign({}, container), { contentView, flexRow, flexCol });
+}
+describe("Gap", () => {
+    const gapTestCases = [
+        ["none", 0],
+        ["smallest", tokens["space-smallest"]],
+        ["smaller", tokens["space-smaller"]],
+        ["small", tokens["space-small"]],
+        ["base", tokens["space-base"]],
+        ["large", tokens["space-large"]],
+    ];
+    it.each(gapTestCases)("Should have a gap of %s around the children components", (a, expected) => {
+        const { contentView, flexCol } = setUp({
+            template: ["grow", "grow", "shrink"],
+            gap: a,
+        });
+        expect(flexCol[1].props.style).toContainEqual({
+            paddingLeft: expected,
+        });
+        expect(contentView.props.childSpacing).toEqual(a);
+    });
+});
+describe("Vertical alignment", () => {
+    it("should align children to center by default if align is not specified", () => {
+        const { flexRow } = setUp({
+            template: ["grow", "grow", "shrink"],
+            gap: "large",
+        });
+        expect(flexRow[0].props.style).toContainEqual({ alignItems: "center" });
+    });
+    const alignTestCases = [
+        ["flex-start"],
+        ["flex-end"],
+        ["center"],
+        ["baseline"],
+        ["stretch"],
+    ];
+    it.each(alignTestCases)("should align children to %s", a => {
+        const { flexRow } = setUp({
+            template: ["grow", "grow", "shrink"],
+            align: a,
+        });
+        expect(flexRow[0].props.style).toContainEqual({
+            alignItems: a,
+        });
+    });
+});
+describe("Layout", () => {
+    it("should by default display a 1 row flex grid with equal spacing between each children", () => {
+        const { flexCol, flexRow } = setUp({});
+        expect(flexCol[0].props.style).toContainEqual(columnStyles.grow);
+        expect(flexCol[1].props.style).toContainEqual(columnStyles.grow);
+        expect(flexCol[2].props.style).toContainEqual(columnStyles.grow);
+        expect(flexCol[3].props.style).toContainEqual(columnStyles.grow);
+        expect(flexRow.length).toEqual(1);
+    });
+    it("should follow the template to decide whether to grow or shrink", () => {
+        const { flexCol } = setUp({
+            template: ["grow", "grow", "shrink"],
+        });
+        expect(flexCol[0].props.style).toContainEqual(columnStyles.grow);
+        expect(flexCol[1].props.style).toContainEqual(columnStyles.grow);
+        expect(flexCol[2].props.style).toContainEqual(columnStyles.shrink);
+    });
+    it("should create a flex grid with 2 rows", () => {
+        const { flexRow } = setUp({
+            template: ["grow", "grow", "shrink"],
+        });
+        expect(flexRow.length).toEqual(2);
+    });
+    it("should inject extra children on the last row of a multiRow flex grid if needed", () => {
+        const { flexRow } = setUp({
+            template: ["grow", "grow", "shrink"],
+        });
+        const flexCol2 = getFlexCol(flexRow[1]);
+        expect(flexRow.length > 1).toBeTruthy();
+        expect(flexCol2.length).toEqual(3);
+    });
+});

package/dist/src/Form/Form.test.js

@@ -0,0 +1,393 @@
+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 { act, fireEvent, render, waitFor } from "@testing-library/react-native";
+import { Alert, Keyboard } from "react-native";
+import { Form, FormBannerMessageType } from ".";
+import { FormSubmitErrorType } from "./types";
+import { atlantisContextDefaultValues } from "../AtlantisContext";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+import { Text } from "../Text";
+import { Checkbox } from "../Checkbox";
+import { InputNumber } from "../InputNumber";
+import { Switch } from "../Switch";
+import { Option, Select } from "../Select";
+import { InputText } from "../InputText";
+jest.mock("lodash/debounce", () => {
+    return jest.fn(fn => {
+        fn.cancel = jest.fn();
+        return fn;
+    });
+});
+const onSubmitMock = jest.fn().mockImplementation(() => {
+    return Promise.resolve(() => Promise.resolve());
+});
+const onSuccessMock = jest.fn();
+const onErrorMock = jest.fn();
+const onChangeMock = jest.fn();
+const onChangeSelectMock = jest.fn();
+const onChangeSwitchMock = jest.fn();
+const mockScrollTo = jest.fn();
+const mockScrollToTop = jest.fn();
+jest.mock("./hooks/useFormViewRefs", () => ({
+    useFormViewRefs: () => {
+        return {
+            scrollViewRef: {
+                current: { scrollTo: mockScrollTo },
+            },
+            bottomViewRef: { current: {} },
+            scrollToTop: mockScrollToTop,
+        };
+    },
+}));
+const bannerError = {
+    title: "My error",
+    messages: ["userError1", "userError2"],
+};
+const noticeMessage = {
+    messageType: FormBannerMessageType.NoticeMessage,
+    message: "Take note of this information.",
+};
+const warningMessage = {
+    messageType: FormBannerMessageType.WarningMessage,
+    message: "Caution is warranted in this case.",
+};
+const testInputTextName = "test";
+const testInputTextNameExclude = "exclude";
+const testInputTextPlaceholderExclude = "Test Exclude";
+const testInputTextPlaceholder = "Test Input";
+const testSelectName = "testSelect";
+const testSwitchName = "testSwitch";
+const testInputNumberName = "testNumber";
+const testCheckboxName = "testCheckbox";
+const switchLabel = "switchLabel";
+const checkboxLabel = "checkboxLabel";
+const selectLabel = "selectLabel";
+const saveButtonText = "Save";
+const requiredInputText = "This field is required";
+const minLengthText = "Test is too short";
+function FormTest(props) {
+    return React.createElement(MockForm, Object.assign({}, props));
+}
+function MockForm({ onSubmit, sendBannerErrors = false, sendNetworkErrors = false, saveLabel, renderStickySection, initialLoading = false, initialValues = undefined, bannerMessages, localCacheKey, localCacheExclude, onBeforeSubmit, localCacheId, renderFooter, saveButtonOffset, UNSAFE_allowDiscardLocalCacheWhenOffline = false, }) {
+    const formErrors = {};
+    if (sendBannerErrors) {
+        formErrors.bannerError = bannerError;
+    }
+    if (sendNetworkErrors) {
+        formErrors.networkError = "Ouch";
+    }
+    return (React.createElement(Form, { onSubmit: onSubmit, onSubmitError: onErrorMock, onSubmitSuccess: onSuccessMock, bannerErrors: formErrors, bannerMessages: bannerMessages, saveButtonLabel: saveLabel, renderStickySection: renderStickySection, initialLoading: initialLoading, initialValues: initialValues, localCacheKey: localCacheKey, localCacheExclude: localCacheExclude, localCacheId: localCacheId, onBeforeSubmit: onBeforeSubmit, renderFooter: renderFooter, saveButtonOffset: saveButtonOffset, UNSAFE_allowDiscardLocalCacheWhenOffline: UNSAFE_allowDiscardLocalCacheWhenOffline },
+        React.createElement(InputText, { name: testInputTextName, placeholder: testInputTextPlaceholder, onChangeText: onChangeMock, accessibilityLabel: testInputTextPlaceholder, validations: {
+                required: requiredInputText,
+                minLength: { value: 3, message: minLengthText },
+            } }),
+        Array.isArray(localCacheExclude) && localCacheExclude.length > 0 && (React.createElement(InputText, { name: testInputTextNameExclude, placeholder: testInputTextPlaceholderExclude })),
+        React.createElement(Select, { onChange: onChangeSelectMock, label: selectLabel, name: testSelectName },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")),
+        React.createElement(Switch, { name: testSwitchName, label: "Test Switch", accessibilityLabel: switchLabel, onValueChange: onChangeSwitchMock }),
+        React.createElement(InputNumber, { name: testInputNumberName, placeholder: "Test Num" }),
+        React.createElement(Checkbox, { name: testCheckboxName, accessibilityLabel: checkboxLabel })));
+}
+const testPresetValues = {
+    [testInputTextName]: "PresetValueTestText",
+    [testSelectName]: "2",
+    [testSwitchName]: true,
+    [testInputNumberName]: 123454321,
+    [testCheckboxName]: true,
+};
+function wait() {
+    return __awaiter(this, arguments, void 0, function* (milliseconds = 0) {
+        yield new Promise(resolve => setTimeout(resolve, milliseconds));
+    });
+}
+afterEach(() => {
+    jest.clearAllMocks();
+});
+const loadingLabel = "Loading";
+const tryAgainLabel = "Try again";
+describe("Form", () => {
+    describe("Initial Load", () => {
+        it("should show activity indicator", () => {
+            const { getByLabelText } = render(React.createElement(FormTest, { initialLoading: true, onSubmit: onSubmitMock }));
+            expect(getByLabelText(loadingLabel)).toBeTruthy();
+        });
+        it("should be populated with provided initialValues", () => {
+            const { getByDisplayValue, getByLabelText } = render(React.createElement(FormTest, { initialValues: testPresetValues, onSubmit: onSubmitMock }));
+            expect(getByDisplayValue(testPresetValues[testInputTextName])).toBeDefined();
+            expect(getByDisplayValue(testPresetValues[testInputNumberName].toString())).toBeDefined();
+            expect(getByLabelText(switchLabel).props.value).toEqual(true);
+            expect(getByLabelText(checkboxLabel).props.accessibilityState.checked).toEqual(true);
+        });
+    });
+    describe("Save", () => {
+        it("renders the save button of the form", () => {
+            const { getByLabelText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const saveButton = getByLabelText(saveButtonText);
+            expect(saveButton).toBeTruthy();
+        });
+        it("displays relevant validation errors when trying to save the form", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText, getAllByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const saveButton = getByLabelText(saveButtonText);
+            yield waitFor(() => {
+                fireEvent.press(saveButton);
+            });
+            expect(getAllByText(requiredInputText, { includeHiddenElements: true })).toBeDefined();
+            const newValue = "A";
+            yield waitFor(() => {
+                fireEvent.changeText(getByLabelText(testInputTextPlaceholder), newValue);
+            });
+            expect(getAllByText(minLengthText, { includeHiddenElements: true })).toBeDefined();
+        }));
+        it("should submit correct create form data", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByLabelText, getByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const saveButton = getByLabelText(saveButtonText);
+            const newValue = "New Value";
+            fireEvent.changeText(getByLabelText(testInputTextPlaceholder), newValue);
+            expect(onChangeMock).toHaveBeenCalled();
+            fireEvent(getByLabelText(switchLabel), "onValueChange", true);
+            expect(onChangeSwitchMock).toHaveBeenCalled();
+            fireEvent(getByText(selectLabel, { includeHiddenElements: true }), "onChange", "2");
+            expect(onChangeSelectMock).toHaveBeenCalled();
+            fireEvent.press(saveButton);
+            yield waitFor(() => {
+                expect(onSubmitMock).toHaveBeenCalledWith({
+                    [testInputTextName]: newValue,
+                    [testSelectName]: "2",
+                    [testSwitchName]: true,
+                });
+            });
+        }));
+        it("should dismiss keyboard when form is saved", () => __awaiter(void 0, void 0, void 0, function* () {
+            const keyboardDismissSpy = jest.spyOn(Keyboard, "dismiss");
+            const { getByLabelText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const newValue = "New Value";
+            fireEvent.changeText(getByLabelText(testInputTextPlaceholder), newValue);
+            const saveButton = getByLabelText(saveButtonText);
+            fireEvent.press(saveButton);
+            yield waitFor(() => {
+                expect(onSubmitMock).toHaveBeenCalled();
+            });
+            expect(keyboardDismissSpy).toHaveBeenCalled();
+        }));
+        it("renders a save button with a custom label if provided", () => {
+            const customSaveButtonText = "MySave";
+            const { getByLabelText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, saveLabel: customSaveButtonText }));
+            const saveButton = getByLabelText(customSaveButtonText);
+            expect(saveButton).toBeTruthy();
+        });
+        it("renders a custom sticky component if provided", () => {
+            const customSaveButtonText = "CheckboxOverload";
+            const { getByLabelText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, saveLabel: customSaveButtonText, renderStickySection: (onSubmit, label) => (React.createElement(Checkbox, { checked: false, name: label, accessibilityLabel: label, onChange: onSubmit })) }));
+            const overrideCheckbox = getByLabelText(customSaveButtonText);
+            expect(overrideCheckbox).toBeTruthy();
+        });
+    });
+    describe("Submitting", () => {
+        it("should show submission spinner when submitting form data", () => __awaiter(void 0, void 0, void 0, function* () {
+            const timeoutSubmit = jest.fn().mockImplementation(() => {
+                return new Promise(res => setTimeout(() => res(() => Promise.resolve()), 1000));
+            });
+            const { getByLabelText } = yield waitFor(() => render(React.createElement(FormTest, { onSubmit: timeoutSubmit })));
+            const saveButton = getByLabelText(saveButtonText);
+            fireEvent.press(saveButton);
+            expect(getByLabelText(loadingLabel)).toBeTruthy();
+        }));
+        it("should call beforeSubmit if one is provided", () => __awaiter(void 0, void 0, void 0, function* () {
+            const beforeSubmitMock = jest.fn().mockImplementation(() => {
+                return Promise.resolve(true);
+            });
+            const { getByLabelText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, onBeforeSubmit: beforeSubmitMock }));
+            const newValue = "New Value";
+            fireEvent.changeText(getByLabelText(testInputTextPlaceholder), newValue);
+            const saveButton = getByLabelText(saveButtonText);
+            fireEvent.press(saveButton);
+            yield waitFor(() => {
+                expect(beforeSubmitMock).toHaveBeenCalled();
+                expect(onSubmitMock).toHaveBeenCalled();
+            });
+        }));
+        it("does not submit if beforeSubmit returns false", () => __awaiter(void 0, void 0, void 0, function* () {
+            const beforeSubmitMock = jest.fn().mockImplementation(() => {
+                return Promise.resolve(false);
+            });
+            const { getByLabelText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, onBeforeSubmit: beforeSubmitMock }));
+            const newValue = "New Value";
+            fireEvent.changeText(getByLabelText(testInputTextPlaceholder), newValue);
+            const saveButton = getByLabelText(saveButtonText);
+            fireEvent.press(saveButton);
+            yield waitFor(() => {
+                expect(beforeSubmitMock).toHaveBeenCalled();
+                expect(onSubmitMock).not.toHaveBeenCalled();
+            });
+        }));
+        describe("While offline", () => {
+            const mockSubmit = jest.fn().mockImplementation(() => Promise.reject({
+                errorType: FormSubmitErrorType.NetworkError,
+            }));
+            const setup = () => {
+                const view = render(React.createElement(FormTest, { sendNetworkErrors: true, onSubmit: mockSubmit }));
+                const { getByLabelText } = view;
+                const newValue = "New Value";
+                fireEvent.changeText(getByLabelText(testInputTextPlaceholder), newValue);
+                fireEvent.press(getByLabelText(saveButtonText));
+                return view;
+            };
+            it("should show offline alert when attempting to save while offline", () => __awaiter(void 0, void 0, void 0, function* () {
+                const alertSpy = jest.spyOn(Alert, "alert");
+                setup();
+                yield act(wait);
+                expect(alertSpy).toHaveBeenCalledTimes(1);
+                expect(alertSpy).toHaveBeenCalledWith("Network Unavailable", "Check your internet connection and try again later.", expect.anything());
+            }));
+            it("Submits Form on successful retry", () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                const alertSpy = jest.spyOn(Alert, "alert");
+                setup();
+                yield act(wait);
+                const alertActions = alertSpy.mock.calls[0][2];
+                const retryAction = alertActions === null || alertActions === void 0 ? void 0 : alertActions.find(action => action.text === tryAgainLabel);
+                mockSubmit.mockImplementationOnce(() => Promise.resolve());
+                (_a = retryAction === null || retryAction === void 0 ? void 0 : retryAction.onPress) === null || _a === void 0 ? void 0 : _a.call(retryAction);
+                yield act(wait);
+                expect(alertSpy).toHaveBeenCalledTimes(1);
+                expect(onSuccessMock).toHaveBeenCalled();
+            }));
+            it("reshows an Alert on unsuccessful retry", () => __awaiter(void 0, void 0, void 0, function* () {
+                var _a;
+                const alertSpy = jest.spyOn(Alert, "alert");
+                setup();
+                yield act(wait);
+                const alertActions = alertSpy.mock.calls[0][2];
+                const retryAction = alertActions === null || alertActions === void 0 ? void 0 : alertActions.find(action => action.text === tryAgainLabel);
+                (_a = retryAction === null || retryAction === void 0 ? void 0 : retryAction.onPress) === null || _a === void 0 ? void 0 : _a.call(retryAction);
+                yield act(wait);
+                expect(alertSpy).toHaveBeenCalledTimes(2);
+            }));
+        });
+    });
+    describe("Error Banner", () => {
+        const atlantisContextSpy = jest.spyOn(atlantisContext, "useAtlantisContext");
+        atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: false }));
+        it("renders user errors when provided", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, sendBannerErrors: true }));
+            const expectedErrors = bannerError.messages;
+            expect(getByText(new RegExp(expectedErrors[0]))).toBeTruthy();
+            expect(getByText(new RegExp(expectedErrors[1]))).toBeTruthy();
+        }));
+        it("does not render user errors when not provided", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { queryByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            const expectedErrors = bannerError.messages;
+            expect(queryByText(expectedErrors[0])).toBeNull();
+            expect(queryByText(expectedErrors[1])).toBeNull();
+        }));
+    });
+    describe("Message Banner", () => {
+        it.each([
+            [FormBannerMessageType.NoticeMessage, noticeMessage],
+            [FormBannerMessageType.WarningMessage, warningMessage],
+        ])("renders a %s when provided", (_messageType, message) => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, bannerMessages: [message] }));
+            expect(getByText(message.message)).toBeDefined();
+        }));
+        it("renders multiple messages when provided", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { getByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, bannerMessages: [noticeMessage, warningMessage] }));
+            expect(getByText(noticeMessage.message)).toBeDefined();
+            expect(getByText(warningMessage.message)).toBeDefined();
+        }));
+    });
+    describe("Render footer", () => {
+        it("render a footer when provided", () => {
+            const footerMessage = "Hello, I'm a footer!";
+            const { getByText } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, renderFooter: React.createElement(Text, null, footerMessage) }));
+            expect(getByText(footerMessage)).toBeDefined();
+        });
+    });
+    describe("Safe Area", () => {
+        it("does render a safe area when there's NO saveButtonOffset provided", () => {
+            const { getByTestId } = render(React.createElement(FormTest, { onSubmit: onSubmitMock }));
+            expect(getByTestId("ATL-FormSafeArea")).toBeDefined();
+        });
+        it("does NOT render a safe area when there's a saveButtonOffset is provided", () => {
+            const { queryByTestId } = render(React.createElement(FormTest, { onSubmit: onSubmitMock, saveButtonOffset: 30 }));
+            expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
+        });
+    });
+    describe("Leaving the form", () => {
+        let mockUseConfirmBeforeBack;
+        let mockRemoveLocalCache;
+        const atlantisContextSpy = jest.spyOn(atlantisContext, "useAtlantisContext");
+        beforeEach(() => {
+            mockUseConfirmBeforeBack = jest
+                .fn()
+                .mockReturnValue({ current: jest.fn() });
+            mockRemoveLocalCache = jest.fn();
+            jest
+                .spyOn(require("../Form/context/AtlantisFormContext"), "useAtlantisFormContext")
+                .mockReturnValue({
+                useConfirmBeforeBack: mockUseConfirmBeforeBack,
+                useInternalFormLocalCache: () => ({
+                    setLocalCache: jest.fn(),
+                    removeLocalCache: mockRemoveLocalCache,
+                }),
+                edgeToEdgeEnabled: false,
+            });
+        });
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+        describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is false", () => {
+            it("should NOT pass onAcceptEvent when offline", () => {
+                atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: false }));
+                render(React.createElement(FormTest, { onSubmit: onSubmitMock, UNSAFE_allowDiscardLocalCacheWhenOffline: false, localCacheKey: "testCacheKey" }));
+                expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+                const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+                expect(callArgs.onAcceptEvent).toBeUndefined();
+                expect(callArgs.showLostProgressMessage).toBe(false);
+            });
+            it("should pass onAcceptEvent when online", () => {
+                atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: true }));
+                render(React.createElement(FormTest, { onSubmit: onSubmitMock, UNSAFE_allowDiscardLocalCacheWhenOffline: false, localCacheKey: "testCacheKey" }));
+                expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+                const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+                expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+                expect(callArgs.showLostProgressMessage).toBe(true);
+            });
+        });
+        describe("when UNSAFE_allowDiscardLocalCacheWhenOffline is true", () => {
+            it("should pass onAcceptEvent when offline", () => {
+                atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: false }));
+                render(React.createElement(FormTest, { onSubmit: onSubmitMock, UNSAFE_allowDiscardLocalCacheWhenOffline: true, localCacheKey: "testCacheKey" }));
+                expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+                const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+                expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+                expect(callArgs.showLostProgressMessage).toBe(true);
+            });
+            it("should pass onAcceptEvent when online", () => {
+                atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: true }));
+                render(React.createElement(FormTest, { onSubmit: onSubmitMock, UNSAFE_allowDiscardLocalCacheWhenOffline: true, localCacheKey: "testCacheKey" }));
+                expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+                const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+                expect(callArgs.onAcceptEvent).toBe(mockRemoveLocalCache);
+                expect(callArgs.showLostProgressMessage).toBe(true);
+            });
+        });
+        describe("without localCacheKey", () => {
+            it("should always show lost progress message when no cache key is provided", () => {
+                atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: false }));
+                render(React.createElement(FormTest, { onSubmit: onSubmitMock, UNSAFE_allowDiscardLocalCacheWhenOffline: false }));
+                expect(mockUseConfirmBeforeBack).toHaveBeenCalled();
+                const callArgs = mockUseConfirmBeforeBack.mock.calls[0][0];
+                expect(callArgs.showLostProgressMessage).toBe(true);
+            });
+        });
+    });
+});

package/dist/src/Form/components/FormErrorBanner/FormErrorBanner.test.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { FormErrorBanner } from "./FormErrorBanner";
+import { atlantisContextDefaultValues } from "../../../AtlantisContext";
+import * as atlantisContext from "../../../AtlantisContext/AtlantisContext";
+afterEach(jest.clearAllMocks);
+describe("FormErrorBanner", () => {
+    const atlantisContextSpy = jest.spyOn(atlantisContext, "useAtlantisContext");
+    beforeEach(() => {
+        atlantisContextSpy.mockReturnValue(Object.assign(Object.assign({}, atlantisContextDefaultValues), { isOnline: true }));
+    });
+    const networkError = "An error occurred";
+    const userError = {
+        title: "My error",
+        messages: ["userError1", "userError2"],
+    };
+    const couldNotSavechanges = "Could not save changes";
+    it("should render network error banner when online and network errors exist", () => {
+        const { getByText, queryByText } = render(React.createElement(FormErrorBanner, { networkError: networkError, bannerError: userError }));
+        // Show: Network Error only
+        expect(getByText(couldNotSavechanges)).toBeDefined();
+        expect(queryByText(userError.title)).toBeNull();
+    });
+    it("should render user error banner when online and user errors exist", () => {
+        const { getByText, queryByText } = render(React.createElement(FormErrorBanner, { bannerError: userError }));
+        // Show: User Error only
+        expect(getByText(userError.title)).toBeDefined();
+        expect(getByText(userError.messages[0])).toBeDefined();
+        expect(getByText(userError.messages[1])).toBeDefined();
+        expect(queryByText(couldNotSavechanges)).toBeNull();
+    });
+    it("should render user error banner with just title when online", () => {
+        const userErrorJustTitle = {
+            title: "My error",
+        };
+        const { getByText, queryByText } = render(React.createElement(FormErrorBanner, { bannerError: userErrorJustTitle }));
+        // Show: User Error only
+        expect(getByText(userErrorJustTitle.title)).toBeDefined();
+        expect(queryByText(couldNotSavechanges)).toBeNull();
+    });
+});

package/dist/src/Form/components/FormMessage/FormMessage.test.js

@@ -0,0 +1,73 @@
+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, screen, waitFor, } from "@testing-library/react-native";
+import { FormMessage } from ".";
+describe("FormMessage", () => {
+    it("should render null when there are no message to show", () => {
+        render(React.createElement(FormMessage, null));
+        expect(screen.toJSON()).toMatchInlineSnapshot(`null`);
+    });
+    it("should show the message", () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(FormMessage, null));
+        const description = "🔥";
+        FormMessage.show({ description });
+        yield waitFor(() => {
+            expect(screen.getByText(description)).toBeDefined();
+        });
+    }));
+    it("should close the message", () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(FormMessage, null));
+        const description = "🌚";
+        FormMessage.show({ description });
+        yield waitFor(() => {
+            expect(screen.getByText(description)).toBeDefined();
+        });
+        FormMessage.close();
+        yield waitFor(() => {
+            expect(screen.queryByText(description)).toBeNull();
+        });
+    }));
+    describe("Opening another message through a message", () => {
+        const firstMessage = "I am the first message";
+        const secondMessage = "Second message here";
+        const showMessage = () => FormMessage.show({
+            description: firstMessage,
+            primaryAction: {
+                label: "Click me",
+                onPress: () => FormMessage.show({ description: secondMessage }),
+            },
+        });
+        it("should show the most recent message", () => __awaiter(void 0, void 0, void 0, function* () {
+            render(React.createElement(FormMessage, null));
+            showMessage();
+            yield waitFor(() => {
+                expect(screen.getByText(firstMessage)).toBeDefined();
+            });
+            expect(screen.queryByText(secondMessage)).toBeNull();
+            fireEvent.press(screen.getByLabelText("Click me"));
+            expect(screen.getByText(secondMessage)).toBeDefined();
+            expect(screen.queryByText(firstMessage)).toBeNull();
+        }));
+        it("should close the most recent message", () => __awaiter(void 0, void 0, void 0, function* () {
+            render(React.createElement(FormMessage, null));
+            showMessage();
+            yield waitFor(() => {
+                expect(screen.getByText("Click me")).toBeDefined();
+            });
+            fireEvent.press(screen.getByLabelText("Click me"));
+            FormMessage.close();
+            yield waitFor(() => {
+                expect(screen.getByText(firstMessage)).toBeDefined();
+            });
+            expect(screen.queryByText(secondMessage)).toBeNull();
+        }));
+    });
+});

package/dist/src/Form/components/FormMessageBanner/FormMessageBanner.test.js

@@ -0,0 +1,30 @@
+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 { render } from "@testing-library/react-native";
+import { FormMessageBanner } from "./FormMessageBanner";
+import { FormBannerMessageType } from "../../types";
+const noticeMessage = {
+    messageType: FormBannerMessageType.NoticeMessage,
+    message: "Take note of this information.",
+};
+const warningMessage = {
+    messageType: FormBannerMessageType.WarningMessage,
+    message: "Caution is warranted in this case.",
+};
+describe("FormMessageBanner", () => {
+    it.each([
+        [FormBannerMessageType.NoticeMessage, noticeMessage],
+        [FormBannerMessageType.WarningMessage, warningMessage],
+    ])("should render a %s", (_messageType, message) => __awaiter(void 0, void 0, void 0, function* () {
+        const { getByText } = render(React.createElement(FormMessageBanner, { bannerMessages: [message] }));
+        expect(getByText(message.message)).toBeDefined();
+    }));
+});