@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/Glimmer/Glimmer.test.js

@@ -0,0 +1,61 @@
+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 as renderComponent, } from "@testing-library/react-native";
+import { Animated } from "react-native";
+import { GLIMMER_SHINE_TEST_ID, GLIMMER_TEST_ID, Glimmer } from "./Glimmer";
+let screen;
+function render(...params) {
+    screen = renderComponent(...params);
+    return screen;
+}
+describe("Glimmer", () => {
+    it("renders a Glimmer with default styling", () => {
+        render(React.createElement(Glimmer, null));
+        const element = screen.getByTestId(GLIMMER_TEST_ID);
+        expect(element.props.style).toEqual(expect.arrayContaining([
+            expect.objectContaining({ height: 16 }),
+            expect.objectContaining({ width: "100%" }),
+        ]));
+    });
+    it("renders a Glimmer with custom width", () => {
+        render(React.createElement(Glimmer, { width: 50 }));
+        const element = screen.getByTestId(GLIMMER_TEST_ID);
+        expect(element.props.style).toEqual(expect.arrayContaining([expect.objectContaining({ width: 50 })]));
+    });
+    it("renders a Glimmer with custom percent width", () => {
+        render(React.createElement(Glimmer, { width: "50%" }));
+        const element = screen.getByTestId(GLIMMER_TEST_ID);
+        expect(element.props.style).toEqual(expect.arrayContaining([expect.objectContaining({ width: "50%" })]));
+    });
+    it("renders sets the correct width", () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.useFakeTimers();
+        // Spy on Animated.timing to verify the animation configuration
+        const timingSpy = jest.spyOn(Animated, "timing");
+        render(React.createElement(Glimmer, null));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            fireEvent(screen.getByTestId(GLIMMER_TEST_ID), "onLayout", {
+                nativeEvent: { layout: { width: 300 } },
+            });
+        }));
+        const element = screen.getByTestId(GLIMMER_SHINE_TEST_ID);
+        expect(element.props.style).toEqual(expect.objectContaining({ transform: [{ translateX: -48 }] }));
+        expect(timingSpy).toHaveBeenCalled();
+        // Get the last call to timing
+        const lastCall = timingSpy.mock.calls[timingSpy.mock.calls.length - 1];
+        // The first argument should be the animated value
+        // The second argument should be the config
+        const config = lastCall[1];
+        // Verify animation targets the right end position (300 + 48 = 348)
+        expect(config.toValue).toBe(348);
+        timingSpy.mockRestore();
+        jest.useRealTimers();
+    }));
+});

package/dist/src/Heading/Heading.test.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Heading } from "./Heading";
+import { Text } from "../Text";
+describe("when Heading called with text as the only prop", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, null, "Default Heading")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with reverseTheme", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { reverseTheme: true }, "Reverse Theme Heading")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with title variation", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { level: "title" }, "Title Heading")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with Subtitle variation", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { level: "subtitle" }, "Subtitle")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with sub-heading variation", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { level: "subHeading" }, "Sub-Heading")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with sub-heading variation and text-color", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { level: "subHeading", variation: "subdued" }, "Sub-Heading")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with an alignment", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { align: "end" }, "Text Aligned Right")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading called with maxLines", () => {
+    it("should match snapshot", () => {
+        const view = render(React.createElement(Heading, { maxLines: "single" }, "Text Aligned Right")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});
+describe("when Heading contains nested inline text", () => {
+    it("renders nested Text within Heading", () => {
+        const view = render(React.createElement(Heading, null,
+            "Heading before ",
+            React.createElement(Text, { emphasis: "strong" }, "Inner"),
+            " after")).toJSON();
+        expect(view).toMatchSnapshot();
+    });
+});

package/dist/src/Icon/Icon.test.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Icon } from ".";
+it("renders home icon", () => {
+    const tree = render(React.createElement(Icon, { name: "home" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("renders apple icon", () => {
+    const tree = render(React.createElement(Icon, { name: "apple" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("renders large arrowDown icon", () => {
+    const tree = render(React.createElement(Icon, { name: "arrowDown", size: "large" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("renders thumbsDown icon", () => {
+    const tree = render(React.createElement(Icon, { name: "thumbsDown" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("renders small more icon", () => {
+    const tree = render(React.createElement(Icon, { name: "more", size: "small" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("renders star icon with custom color", () => {
+    const tree = render(React.createElement(Icon, { name: "star", customColor: "#f33323" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("renders quote icon with themed color", () => {
+    // The intention is to make sure the color prop can be applied to an icon with a built-in default color
+    const tree = render(React.createElement(Icon, { name: "quote", color: "brand" })).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+it("applies testID prop to svg element", () => {
+    const { getByTestId } = render(React.createElement(Icon, { name: "home", testID: "home-icon" }));
+    expect(getByTestId("home-icon")).toBeDefined();
+});
+it("applies name prop as testID when testID prop is not provided", () => {
+    const { getByTestId } = render(React.createElement(Icon, { name: "home" }));
+    expect(getByTestId("home")).toBeDefined();
+});

package/dist/src/IconButton/IconButton.test.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { IconButton } from "./IconButton";
+import { Text } from "../Text";
+describe("IconButton", () => {
+    it("renders an IconButton", () => {
+        const pressHandler = jest.fn();
+        const { getByTestId } = render(React.createElement(IconButton, { onPress: pressHandler, name: "job", accessibilityLabel: "Job Button", testID: "JobButton" }));
+        expect(getByTestId("JobButton")).toBeDefined();
+    });
+    it("should call the onPress", () => {
+        const pressHandler = jest.fn();
+        const { getByLabelText } = render(React.createElement(IconButton, { onPress: pressHandler, name: "job", accessibilityLabel: "Job Button" }));
+        fireEvent.press(getByLabelText("Job Button"));
+        expect(pressHandler).toHaveBeenCalled();
+    });
+    it("should render badge component", () => {
+        const pressHandler = jest.fn();
+        const badge = React.createElement(Text, null, "Hi");
+        const { getByText } = render(React.createElement(IconButton, { onPress: pressHandler, name: "job", badge: badge, accessibilityLabel: "Job Button" }));
+        expect(getByText("Hi")).toBeDefined();
+    });
+    it("should render IconButton with custom color", () => {
+        const pressHandler = jest.fn();
+        const { getByLabelText } = render(React.createElement(IconButton, { onPress: pressHandler, name: "job", customColor: "#f33323", accessibilityLabel: "Job Button" }));
+        const iconBtnColorProp = getByLabelText("Job Button").findByProps({
+            customColor: "#f33323",
+        }).props.customColor;
+        expect(iconBtnColorProp).toEqual("#f33323");
+    });
+    it("should expose testID", () => {
+        const pressHandler = jest.fn();
+        const testID = "JobButton";
+        const { getByTestId } = render(React.createElement(IconButton, { onPress: pressHandler, name: "job", accessibilityLabel: "Job Button", testID: testID }));
+        fireEvent.press(getByTestId(testID));
+        expect(pressHandler).toHaveBeenCalled();
+    });
+});

package/dist/src/InputCurrency/InputCurrency.test.js

@@ -0,0 +1,106 @@
+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 { InputCurrency } from "./InputCurrency";
+import { AtlantisContext, atlantisContextDefaultValues, } from "../AtlantisContext";
+const mockCurrencySymbol = "£";
+const atlantisContext = Object.assign(Object.assign({}, atlantisContextDefaultValues), { currencySymbol: mockCurrencySymbol, timeFormat: "p", timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, isOnline: true, onLogError: err => {
+        return err;
+    }, floatSeparators: { group: ",", decimal: "." } });
+const placeHolder = "Price";
+describe.each([{ includeATLContext: true }, { includeATLContext: false }])("Has AtlantisContext: $includeATLContext", ({ includeATLContext }) => {
+    function setup({ showCurrencySymbol, name, }) {
+        if (includeATLContext) {
+            return render(React.createElement(AtlantisContext.Provider, { value: atlantisContext },
+                React.createElement(InputCurrency, { placeholder: placeHolder, name: name, showCurrencySymbol: showCurrencySymbol })));
+        }
+        else {
+            return render(React.createElement(InputCurrency, { placeholder: placeHolder, name: name, showCurrencySymbol: showCurrencySymbol }));
+        }
+    }
+    it("renders with currency symbol when the value is input", () => {
+        const { getByText, getByLabelText } = setup({
+            name: "sample",
+        });
+        const value = 123.459119;
+        const expectedCurrencySymbol = includeATLContext
+            ? mockCurrencySymbol
+            : "$";
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        expect(getByText(expectedCurrencySymbol)).toBeDefined();
+    });
+    it("renders without currency symbol", () => {
+        const { queryByText, getByLabelText } = setup({
+            name: "sample",
+            showCurrencySymbol: false,
+        });
+        const value = 123.459119;
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        expect(queryByText(mockCurrencySymbol)).toBeNull();
+    });
+    it("displays a maximum 5 decimal places", () => __awaiter(void 0, void 0, void 0, function* () {
+        const value = 123.459119;
+        const { getByLabelText, getByDisplayValue } = setup({
+            name: "sample",
+        });
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        yield waitFor(() => {
+            expect(getByDisplayValue("123.45912")).toBeDefined();
+        });
+    }));
+    it("displays a minimum of 2 decimal places", () => __awaiter(void 0, void 0, void 0, function* () {
+        const value = 123.11;
+        const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        yield waitFor(() => {
+            expect(getByDisplayValue("123.11")).toBeDefined();
+        });
+    }));
+    it("displays a negative value", () => __awaiter(void 0, void 0, void 0, function* () {
+        const value = -509.543;
+        const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        yield waitFor(() => {
+            expect(getByDisplayValue(`${value}`)).toBeDefined();
+        });
+    }));
+    it("internationalizes the display Value in the input", () => __awaiter(void 0, void 0, void 0, function* () {
+        const value = 5098.543;
+        const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        yield waitFor(() => {
+            expect(getByDisplayValue("5,098.543")).toBeDefined();
+        });
+    }));
+    it("limits the whole number integer to 10 whole integers by default", () => __awaiter(void 0, void 0, void 0, function* () {
+        const value = 12345678998;
+        const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        yield waitFor(() => {
+            expect(getByDisplayValue("1,234,567,899")).toBeDefined();
+        });
+    }));
+    it("rounds the decimal point if there are more decimal numbers than the maxDecimalCount", () => __awaiter(void 0, void 0, void 0, function* () {
+        const value = 123456.789988;
+        const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+        fireEvent.changeText(getByLabelText(placeHolder), `${value}`);
+        yield waitFor(() => {
+            expect(getByDisplayValue("123,456.78999")).toBeDefined();
+        });
+    }));
+    it("displays 0 on blur if there is no inputted value or the field.value is undefined", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { getByLabelText, getByDisplayValue } = setup({ name: "sample" });
+        fireEvent(getByLabelText("Price"), "blur");
+        yield waitFor(() => {
+            expect(getByDisplayValue("0")).toBeDefined();
+        });
+    }));
+});

package/dist/src/InputDate/InputDate.test.js

@@ -0,0 +1,184 @@
+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 { Keyboard } from "react-native";
+import { InputDate } from "./InputDate";
+import { Button } from "../Button";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+const keyboardDismissSpy = jest.spyOn(Keyboard, "dismiss");
+describe("InputDate", () => {
+    describe("Visuals", () => {
+        const placeholder = "Start time";
+        const expectedDate = "May 30, 2022";
+        const value = new Date(2022, 4, 30);
+        const handleChange = jest.fn();
+        const setup = () => render(React.createElement(InputDate, { placeholder: placeholder, value: value, onChange: handleChange }));
+        it("should show a calendar prefix icon", () => {
+            const screen = setup();
+            const calendarIcon = screen.getByTestId("calendar");
+            expect(calendarIcon).toBeDefined();
+            expect(calendarIcon.type).toBe("RNSVGSvgView");
+        });
+        it("should show a formatted date", () => {
+            const screen = setup();
+            expect(screen.getByText(expectedDate, { includeHiddenElements: true })).toBeDefined();
+        });
+        it("should be clearable when there's a value", () => {
+            const screen = setup();
+            const clearAction = screen.getByLabelText("Clear input");
+            expect(clearAction).toBeDefined();
+            fireEvent.press(clearAction);
+            expect(handleChange).toHaveBeenCalledWith(undefined);
+        });
+    });
+    describe("String value", () => {
+        it("should show a formatted date", () => {
+            const expectedDate = "May 31, 2022";
+            const value = new Date(2022, 4, 31).toISOString();
+            const screen = render(React.createElement(InputDate, { value: value, onChange: jest.fn() }));
+            expect(screen.getByText(expectedDate, { includeHiddenElements: true })).toBeDefined();
+        });
+    });
+    describe("With emptyValueLabel", () => {
+        it("should show the emptyValueLabel when there's no value", () => {
+            const label = "Unscheduled";
+            const screen = render(React.createElement(InputDate, { name: "test", emptyValueLabel: label }));
+            expect(screen.getByText(label, { includeHiddenElements: true })).toBeDefined();
+            expect(screen.queryByLabelText("Clear input")).toBeNull();
+        });
+        it("should not show the emptyValueLabel when there's a value", () => {
+            const label = "Unscheduled";
+            const screen = render(React.createElement(InputDate, { emptyValueLabel: label, value: new Date(), onChange: jest.fn() }));
+            expect(screen.queryByText(label)).toBeNull();
+            expect(screen.getByLabelText("Clear input")).toBeDefined();
+        });
+    });
+    describe("with a defaultValue", () => {
+        it("renders the supplied value", () => {
+            const { getByText } = render(React.createElement(InputDate, { name: "test", defaultValue: new Date("2022-01-17") }));
+            expect(getByText("Jan 17, 2022", { includeHiddenElements: true })).toBeDefined();
+        });
+    });
+    describe("Date picker", () => {
+        const placeholder = "Tap me";
+        const handleChange = jest.fn();
+        function renderDatePicker() {
+            const screen = render(React.createElement(InputDate, { placeholder: placeholder, value: undefined, onChange: handleChange }));
+            fireEvent.press(screen.getByLabelText(placeholder));
+            expect(screen.getByTestId("inputDate-datePicker")).toBeDefined();
+            return screen;
+        }
+        it("should not show a date picker", () => {
+            const screen = render(React.createElement(InputDate, { name: "test" }));
+            expect(screen.queryByTestId("inputDate-datePicker")).toBeNull();
+        });
+        it("should fire the onChange with the current value after canceling a date selection", () => {
+            const screen = renderDatePicker();
+            fireEvent.press(screen.getByLabelText("Cancel"));
+            expect(handleChange).toHaveBeenCalledWith(undefined);
+        });
+        it("should fire the onChange after confirming a date selection", () => {
+            const screen = renderDatePicker();
+            fireEvent.press(screen.getByLabelText("Confirm"));
+            expect(handleChange).toHaveBeenCalledWith(expect.any(Date));
+        });
+        it("should dismiss the keyboard when the date picker is opened", () => {
+            renderDatePicker();
+            expect(keyboardDismissSpy).toHaveBeenCalled();
+        });
+    });
+    const mockOnSubmit = jest.fn();
+    const saveButtonText = "Submit";
+    const requiredError = "This is required";
+    function SimpleFormWithProvider({ children, defaultValues, }) {
+        const formMethods = useForm({
+            reValidateMode: "onChange",
+            defaultValues,
+            mode: "onTouched",
+        });
+        return (React.createElement(FormProvider, Object.assign({}, formMethods),
+            children,
+            React.createElement(Button, { onPress: formMethods.handleSubmit(values => mockOnSubmit(values)), label: saveButtonText, accessibilityLabel: saveButtonText })));
+    }
+    describe("Form controlled", () => {
+        const pickerName = "datePicker";
+        const expectedDate = "May 29, 2022";
+        const value = new Date(2022, 4, 29);
+        const handleChange = jest.fn();
+        const setup = () => render(React.createElement(SimpleFormWithProvider, { defaultValues: { [pickerName]: value } },
+            React.createElement(InputDate, { name: pickerName, onChange: handleChange, validations: { required: requiredError } })));
+        it("should show the initial value", () => __awaiter(void 0, void 0, void 0, function* () {
+            const screen = setup();
+            expect(screen.getByText(expectedDate, {
+                includeHiddenElements: true,
+            })).toBeDefined();
+        }));
+        it("should update the value", () => __awaiter(void 0, void 0, void 0, function* () {
+            const screen = yield setup();
+            fireEvent.press(screen.getByText(expectedDate, { includeHiddenElements: true }));
+            const expectedNewDate = "Jun 17, 2022";
+            const newSelectedDate = new Date(2022, 5, 17);
+            fireEvent(screen.getByTestId("inputDate-datePicker"), "onConfirm", newSelectedDate);
+            expect(screen.getByText(expectedNewDate, { includeHiddenElements: true })).toBeDefined();
+            expect(handleChange).toHaveBeenCalledWith(newSelectedDate);
+        }));
+        it("should show the client side validation error", () => __awaiter(void 0, void 0, void 0, function* () {
+            const screen = setup();
+            const clearAction = screen.getByLabelText("Clear input");
+            expect(clearAction).toBeDefined();
+            fireEvent.press(clearAction);
+            yield waitFor(() => {
+                expect(screen.getAllByText(requiredError, { includeHiddenElements: true })).toHaveLength(1);
+            });
+        }));
+        it("should clear the input with null value when it is in a form", () => __awaiter(void 0, void 0, void 0, function* () {
+            const screen = setup();
+            const clearAction = screen.getByLabelText("Clear input");
+            expect(clearAction).toBeDefined();
+            fireEvent.press(clearAction);
+            expect(handleChange).toHaveBeenCalledWith(null);
+        }));
+    });
+    describe("dateFormat pattern", () => {
+        afterEach(() => {
+            jest.spyOn(atlantisContext, "useAtlantisContext").mockRestore();
+        });
+        it("should display MM/DD/YYYY when dateFormat is 'P'", () => {
+            jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { dateFormat: "P" }));
+            const expectedDate = "05/24/2023";
+            const value = new Date(2023, 4, 24).toISOString();
+            const screen = render(React.createElement(InputDate, { value: value, onChange: jest.fn() }));
+            expect(screen.getByText(expectedDate, { includeHiddenElements: true })).toBeDefined();
+        });
+        it("should display mmmm d, yyyy when dateFormat is 'PP'", () => {
+            jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { dateFormat: "PP" }));
+            const expectedDate = "Feb 20, 2023";
+            const value = new Date(2023, 1, 20).toISOString();
+            const screen = render(React.createElement(InputDate, { value: value, onChange: jest.fn() }));
+            expect(screen.getByText(expectedDate, { includeHiddenElements: true })).toBeDefined();
+        });
+        it("should display mmmmm d, yyyy when dateFormat is 'PPP'", () => {
+            jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { dateFormat: "PPP" }));
+            const expectedDate = "July 7th, 2023";
+            const value = new Date(2023, 6, 7).toISOString();
+            const screen = render(React.createElement(InputDate, { value: value, onChange: jest.fn() }));
+            expect(screen.getByText(expectedDate, { includeHiddenElements: true })).toBeDefined();
+        });
+        it("should display dddd, mmmmm d, yyyy when dateFormat is 'PPPP'", () => {
+            jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { dateFormat: "PPPP" }));
+            const expectedDate = "Thursday, June 22nd, 2023";
+            const value = new Date(2023, 5, 22).toISOString();
+            const screen = render(React.createElement(InputDate, { value: value, onChange: jest.fn() }));
+            expect(screen.getByText(expectedDate, { includeHiddenElements: true })).toBeDefined();
+        });
+    });
+});

package/dist/src/InputEmail/InputEmail.test.js

@@ -0,0 +1,27 @@
+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 { InputEmail } from ".";
+it("renders an InputEmail", () => {
+    const value = "test@test.com";
+    const { getByDisplayValue } = render(React.createElement(InputEmail, { value: value }));
+    expect(getByDisplayValue(value)).toBeTruthy();
+});
+it("displays the validtion message when an invalid email is entered", () => __awaiter(void 0, void 0, void 0, function* () {
+    const a11yLabel = "InputEmailTest";
+    const { getByText, getByLabelText } = render(React.createElement(InputEmail, { value: "notanemail", accessibilityLabel: a11yLabel }));
+    yield waitFor(() => {
+        fireEvent(getByLabelText(a11yLabel), "blur");
+    });
+    expect(getByText("Enter a valid email address (email@example.com)", {
+        includeHiddenElements: true,
+    })).toBeDefined();
+}));