@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/InputText/context/InputAccessoriesProvider.test.js

@@ -0,0 +1,71 @@
+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 { fireEvent, render } from "@testing-library/react-native";
+import React, { useContext, useEffect } from "react";
+import { Keyboard, Platform } from "react-native";
+import { InputAccessoriesContext } from "./InputAccessoriesContext";
+import { InputAccessoriesProvider } from "./InputAccessoriesProvider";
+import { InputText } from "../InputText";
+const mockUseFormController = jest.fn();
+jest.mock("../../hooks", () => {
+    return {
+        useFormController: (...args) => mockUseFormController(...args),
+    };
+});
+const actualUseFormController = jest.requireActual("../../hooks").useFormController;
+describe("InputAccessories", () => {
+    beforeEach(() => {
+        Platform.OS = "ios";
+    });
+    afterEach(() => {
+        // restore the spy created with spyOn
+        jest.resetAllMocks();
+    });
+    const inputOneName = "testInput1";
+    const inputTwoName = "testInput2";
+    const mockInputOneFocus = jest.fn();
+    const mockInputTwoFocus = jest.fn();
+    function InputWrapper({ focusedInput }) {
+        const { register, setFocusedInput, unregister } = useContext(InputAccessoriesContext);
+        useEffect(() => {
+            register(inputOneName, () => mockInputOneFocus());
+            register(inputTwoName, () => mockInputTwoFocus());
+            setFocusedInput(focusedInput);
+            return () => {
+                unregister(inputOneName);
+                unregister(inputTwoName);
+                setFocusedInput("");
+            };
+        }, [register, setFocusedInput, unregister, focusedInput]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(InputText, { testID: inputOneName, name: inputOneName, onFocus: mockInputOneFocus, value: "" }),
+            React.createElement(InputText, { testID: inputTwoName, onFocus: mockInputTwoFocus, value: "" })));
+    }
+    function SetupInputAccessoriesTest(focusedInput) {
+        mockUseFormController.mockImplementation(({ name, value, validations }) => {
+            const { field, error } = actualUseFormController({
+                name: name || inputTwoName,
+                value,
+                validations,
+            });
+            return { field, error };
+        });
+        return render(React.createElement(InputWrapper, { focusedInput: focusedInput }), {
+            wrapper: InputAccessoriesProvider,
+        });
+    }
+    it("pressing done dismisses the keyboard", () => __awaiter(void 0, void 0, void 0, function* () {
+        const keyboardDismissSpy = jest.spyOn(Keyboard, "dismiss");
+        const { getByTestId } = SetupInputAccessoriesTest(inputOneName);
+        const doneButton = getByTestId("ATL-InputAccessory-Done");
+        yield fireEvent.press(doneButton);
+        expect(keyboardDismissSpy).toHaveBeenCalled();
+    }));
+});

package/dist/src/InputTime/InputTime.test.js

@@ -0,0 +1,199 @@
+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 { InputTime } from "./InputTime";
+import * as atlantisContext from "../AtlantisContext/AtlantisContext";
+import { Button } from "../Button";
+const keyboardDismissSpy = jest.spyOn(Keyboard, "dismiss");
+afterEach(() => {
+    jest.spyOn(atlantisContext, "useAtlantisContext").mockRestore();
+});
+describe("Visuals", () => {
+    const placeholder = "Start time";
+    const expectedTime = "11:00 AM";
+    const value = new Date(2022, 2, 2, 11, 0);
+    const handleChange = jest.fn();
+    const setup = (showIcon = true) => render(React.createElement(InputTime, { placeholder: placeholder, value: value, onChange: handleChange, showIcon: showIcon }));
+    it("should show a timer prefix icon", () => {
+        const screen = setup();
+        const timerIcon = screen.getByTestId("timer");
+        expect(timerIcon).toBeDefined();
+        expect(timerIcon.type).toBe("RNSVGSvgView");
+    });
+    it("should not show a timer icon if showIcon is false", () => {
+        const screen = setup(false);
+        const timerIcon = screen.queryByTestId("timer");
+        expect(timerIcon).toBeNull();
+    });
+    it("should show a formatted time", () => {
+        const screen = setup();
+        expect(screen.getByText(expectedTime, { 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", () => {
+    const handleChange = jest.fn();
+    it("should show a formatted time", () => {
+        const expectedTime = "11:00 AM";
+        const value = new Date(2022, 2, 2, 11, 0).toISOString();
+        const screen = render(React.createElement(InputTime, { value: value, onChange: handleChange }));
+        expect(screen.getByText(expectedTime, { includeHiddenElements: true })).toBeDefined();
+    });
+});
+describe("With emptyValueLabel", () => {
+    const handleChange = jest.fn();
+    it("should show the emptyValueLabel when there's no value", () => {
+        const label = "Unscheduled";
+        const screen = render(React.createElement(InputTime, { name: "test", emptyValueLabel: label }));
+        expect(screen.getByText(label, { includeHiddenElements: true })).toBeDefined();
+        expect(screen.queryByLabelText("Clear input", { includeHiddenElements: true })).toBeNull();
+    });
+    it("should not show the emptyValueLabel when there's a value", () => {
+        const label = "Unscheduled";
+        const screen = render(React.createElement(InputTime, { emptyValueLabel: label, value: new Date(), onChange: handleChange }));
+        expect(screen.queryByText(label)).toBeNull();
+        expect(screen.getByLabelText("Clear input")).toBeDefined();
+    });
+});
+// eslint-disable-next-line max-statements
+describe("Time picker", () => {
+    const placeholder = "Tap me";
+    const handleChange = jest.fn();
+    const getType = jest.fn().mockReturnValue(undefined);
+    function renderTimePicker(value) {
+        const screen = render(React.createElement(InputTime, { placeholder: placeholder, onChange: handleChange, value: value, type: getType() }));
+        fireEvent.press(screen.getByLabelText(placeholder));
+        expect(screen.getByTestId("inputTime-Picker")).toBeDefined();
+        return screen;
+    }
+    it("should not show a time picker", () => {
+        const screen = render(React.createElement(InputTime, { name: "test" }));
+        expect(screen.queryByTestId("inputTime-Picker")).toBeNull();
+    });
+    it("should fire the onChange with the current value after canceling a time selection", () => {
+        const value = new Date();
+        const screen = renderTimePicker(value);
+        fireEvent.press(screen.getByLabelText("Cancel"));
+        expect(handleChange).toHaveBeenCalledWith(value);
+    });
+    it("should fire the onChange after confirming a time selection", () => {
+        const screen = renderTimePicker();
+        fireEvent.press(screen.getByLabelText("Confirm"));
+        expect(handleChange).toHaveBeenCalledWith(expect.any(Date));
+    });
+    it("should dismiss the keyboard when the time picker is opened", () => {
+        renderTimePicker();
+        expect(keyboardDismissSpy).toHaveBeenCalled();
+    });
+    it("should be a time picker", () => {
+        const screen = renderTimePicker();
+        expect(screen.getByTestId("inputTime-Picker").props.mode).toBe("time");
+    });
+    describe("Locale", () => {
+        it("should be set to 12 hours", () => {
+            const screen = renderTimePicker();
+            expect(screen.getByTestId("inputTime-Picker").props.locale).toBe("en_US");
+        });
+        it("should be set to 24 hours", () => {
+            jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { timeZone: "UTC", timeFormat: "HH:mm" }));
+            const screen = renderTimePicker();
+            expect(screen.getByTestId("inputTime-Picker").props.locale).toBe("en_GB");
+        });
+    });
+    it("should set the minute interval to 5 by default", () => {
+        const screen = renderTimePicker();
+        expect(screen.getByTestId("inputTime-Picker").props.minuteInterval).toBe(5);
+    });
+    it("should set the minute interval to 5 when the type is scheduling", () => {
+        getType.mockReturnValueOnce("scheduling");
+        const screen = renderTimePicker();
+        expect(screen.getByTestId("inputTime-Picker").props.minuteInterval).toBe(5);
+    });
+    it("should set the minute interval to 1 when the type is granular", () => {
+        getType.mockReturnValueOnce("granular");
+        const screen = renderTimePicker();
+        expect(screen.getByTestId("inputTime-Picker").props.minuteInterval).toBe(1);
+    });
+});
+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 = "timePicker";
+    const expectedTime = "11:00 AM";
+    const value = new Date(2022, 2, 2, 11, 0);
+    const handleChange = jest.fn();
+    const setup = () => render(React.createElement(SimpleFormWithProvider, { defaultValues: { [pickerName]: value } },
+        React.createElement(InputTime, { 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(expectedTime, { includeHiddenElements: true })).toBeDefined();
+    }));
+    it("should update the value", () => __awaiter(void 0, void 0, void 0, function* () {
+        const screen = setup();
+        fireEvent.press(screen.getByText(expectedTime, { includeHiddenElements: true }));
+        const expectedNewTime = "10:00 AM";
+        fireEvent(screen.getByTestId("inputTime-Picker"), "onConfirm", new Date(2022, 2, 2, 10, 0));
+        expect(screen.getByText(expectedNewTime, { includeHiddenElements: true })).toBeDefined();
+    }));
+    it("should show the required message", () => __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.getByText(requiredError, { includeHiddenElements: true })).toBeDefined();
+        });
+    }));
+    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("Timezone conversion", () => {
+    const placeholder = "Start time";
+    const value = new Date(2022, 2, 2, 11, 0);
+    const handleChange = jest.fn();
+    const setup = () => render(React.createElement(InputTime, { placeholder: placeholder, value: value, onChange: handleChange }));
+    it("should display the time in the account timezone", () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { timeZone: "America/Los_Angeles" }));
+        const screen = setup();
+        const expectedTimezonedTime = "3:00 AM";
+        expect(screen.getByText(expectedTimezonedTime, { includeHiddenElements: true })).toBeDefined();
+    }));
+    it("should have the correct offset on the time picker", () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.spyOn(atlantisContext, "useAtlantisContext").mockReturnValue(Object.assign(Object.assign({}, atlantisContext.atlantisContextDefaultValues), { timeZone: "America/Los_Angeles" }));
+        const screen = setup();
+        fireEvent.press(screen.getByLabelText(placeholder));
+        expect(screen.getByTestId("inputTime-Picker").props.timeZoneOffsetInMinutes).toBe(-8 * 60);
+    }));
+});

package/dist/src/InputTime/utils/utils.test.js

@@ -0,0 +1,32 @@
+import { set } from "date-fns";
+import { getTimeZoneOffsetInMinutes, roundUpToNearestMinutes } from ".";
+describe("roundUpToNearestMinutes", () => {
+    it.each([
+        [15, { hours: 1, minutes: 28, expectedMinutes: 30 }],
+        [15, { hours: 2, minutes: 3, expectedMinutes: 15 }],
+        [30, { hours: 11, minutes: 2, expectedMinutes: 30 }],
+        [30, { hours: 11, minutes: 32, expectedHours: 12, expectedMinutes: 0 }],
+        [60, { hours: 11, minutes: 59, expectedHours: 12, expectedMinutes: 0 }],
+        [60, { hours: 10, minutes: 1, expectedHours: 11, expectedMinutes: 0 }],
+    ])("should round up the time to the nearest %s mins", (increment, { hours, minutes, expectedMinutes, expectedHours }) => {
+        const timeToUpdate = set(new Date(2022, 5, 27), { hours, minutes });
+        const time = roundUpToNearestMinutes(timeToUpdate, increment);
+        expect(time.getHours()).toBe(expectedHours || hours);
+        expect(time.getMinutes()).toBe(expectedMinutes);
+    });
+});
+describe("getTimeZoneOffsetInMinutes", () => {
+    const DSTDate = new Date(2022, 6, 5);
+    const nonDSTDate = new Date(2022, 10, 7);
+    it.each([
+        ["America/Edmonton", -6, DSTDate],
+        ["America/Edmonton", -7, nonDSTDate],
+        ["Africa/Johannesburg", 2, DSTDate],
+        ["America/Los_Angeles", -7, DSTDate],
+        ["Asia/Manila", 8, DSTDate],
+        ["Asia/Manila", 8, nonDSTDate],
+    ])("should convert %s to the correct timezone offset for %s", (timezone, expectedOffset, date) => {
+        const timeZoneOffset = getTimeZoneOffsetInMinutes(timezone, date);
+        expect(timeZoneOffset).toBe(expectedOffset * 60);
+    });
+});

package/dist/src/ProgressBar/ProgressBar.test.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { render, screen } from "@testing-library/react-native";
+import { ProgressBar } from ".";
+const defaultSetupProps = {
+    total: 0,
+    current: 0,
+    inProgress: 0,
+    loading: false,
+};
+function renderProgressBarComponent({ total, current, inProgress, }) {
+    return render(React.createElement(ProgressBar, { total: total, current: current, inProgress: inProgress }));
+}
+it("renders blue inProgress bar when 1 or more jobs is in progress", () => {
+    const bar = renderProgressBarComponent(Object.assign(Object.assign({}, defaultSetupProps), { inProgress: 1 })).toJSON();
+    expect(bar).toMatchSnapshot();
+});
+it("renders green CompletedProgress bar when 1 or more jobs is completed", () => {
+    const current = 1;
+    const bar = renderProgressBarComponent(Object.assign(Object.assign({}, defaultSetupProps), { current: current, total: 2 }));
+    expect(bar).toMatchSnapshot();
+    expect(bar.getByLabelText("1 of 2 complete")).toBeDefined();
+});
+describe("with stepped variation", () => {
+    beforeEach(() => {
+        render(React.createElement(ProgressBar, { total: 4, current: 2, inProgress: 1, variation: "stepped" }));
+    });
+    it("renders the correct number of completed steps", () => {
+        const completedSteps = screen.getAllByTestId("progress-step-completed");
+        expect(completedSteps).toHaveLength(2);
+    });
+    it("renders the correct number of incomplete steps", () => {
+        const inCompleteSteps = screen.getAllByTestId("progress-step-incomplete");
+        expect(inCompleteSteps).toHaveLength(1);
+    });
+    it("renders the correct number of inProgress steps", () => {
+        const stepElements = screen.getAllByTestId("progress-step-in-progress");
+        expect(stepElements).toHaveLength(1);
+    });
+});
+describe("ProgressBar (native) - UNSAFE_style", () => {
+    it("applies UNSAFE_style.container to the outer wrapper", () => {
+        const containerStyle = { padding: 12, backgroundColor: "papayawhip" };
+        render(React.createElement(ProgressBar, { total: 100, current: 40, UNSAFE_style: { container: containerStyle } }));
+        const progressBar = screen.getByRole("progressbar");
+        expect(progressBar.props.style).toEqual(expect.objectContaining(containerStyle));
+    });
+    it("applies UNSAFE_style.progressBarContainer and track in progress variation", () => {
+        const progressBarContainer = { height: 22, borderRadius: 10 };
+        const track = { backgroundColor: "#eee" };
+        render(React.createElement(ProgressBar, { total: 100, current: 30, UNSAFE_style: {
+                progressBarContainer,
+                track,
+            } }));
+        const progressContainer = screen.getByTestId("progressbar-container");
+        expect(progressContainer.props.style).toEqual(expect.arrayContaining([expect.objectContaining(progressBarContainer)]));
+        const trackView = screen.getByTestId("progressbar-track");
+        expect(trackView.props.style).toEqual(expect.arrayContaining([expect.objectContaining(track)]));
+    });
+    it("applies UNSAFE_style.inProgressFill and fill in progress variation", () => {
+        const inProgressFill = { backgroundColor: "#f59e0b" };
+        const fill = { backgroundColor: "#10b981" };
+        render(React.createElement(ProgressBar, { total: 100, current: 30, inProgress: 10, UNSAFE_style: {
+                inProgressFill,
+                fill,
+            } }));
+        const inProgressView = screen.getByTestId("progressbar-inprogress");
+        const fillView = screen.getByTestId("progressbar-fill");
+        expect(inProgressView.props.style).toEqual(expect.arrayContaining([expect.objectContaining(inProgressFill)]));
+        expect(fillView.props.style).toEqual(expect.arrayContaining([expect.objectContaining(fill)]));
+    });
+    it("applies UNSAFE_style.progressBarContainer and step in stepped variation", () => {
+        const progressBarContainer = { height: 12 };
+        const step = { backgroundColor: "#d1d5db" };
+        render(React.createElement(ProgressBar, { variation: "stepped", total: 4, current: 2, inProgress: 1, UNSAFE_style: { progressBarContainer, step } }));
+        const steppedContainer = screen.getByTestId("progressbar-container");
+        expect(steppedContainer.props.style).toEqual(expect.arrayContaining([expect.objectContaining(progressBarContainer)]));
+        // Steps are rendered with testIDs depending on state; collect all steps by known IDs
+        const stepNodes = [
+            ...screen.getAllByTestId("progress-step-completed"),
+            ...screen.getAllByTestId("progress-step-in-progress"),
+            ...screen.getAllByTestId("progress-step-incomplete"),
+        ];
+        // At least one step should exist and contain the custom style
+        expect(stepNodes.length).toBeGreaterThan(0);
+        stepNodes.forEach(node => {
+            expect(node.props.style).toEqual(expect.arrayContaining([expect.objectContaining(step)]));
+        });
+    });
+});

package/dist/src/Select/Select.test.js

@@ -0,0 +1,183 @@
+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 } from "@testing-library/react-native";
+import { tokens } from "@jobber/design";
+import { AccessibilityInfo } from "react-native";
+import { Option, Select } from ".";
+import { SelectInternalPicker } from "./components/SelectInternalPicker";
+const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
+const onChange = jest.fn();
+beforeEach(() => {
+    A11yInfoSpy.mockImplementation(() => Promise.resolve(false));
+});
+afterEach(() => {
+    jest.resetAllMocks();
+});
+const defaultPlaceholder = "Select an option";
+describe("Select", () => {
+    it("renders a Select", () => {
+        const component = render(React.createElement(Select, { onChange: onChange },
+            React.createElement(Option, { value: "one" }, "one"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(component.getByTestId("arrowDown")).toBeDefined();
+        expect(component.getByText(defaultPlaceholder, {
+            includeHiddenElements: true,
+        })).toBeDefined();
+    });
+    it("renders a Select with a label", () => {
+        const label = "Press me";
+        const { getByText } = render(React.createElement(Select, { onChange: onChange, label: label },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByText(label, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a Select with a placeholder", () => {
+        const placeholder = "I am a placeholder";
+        const { getByText } = render(React.createElement(Select, { onChange: onChange, placeholder: placeholder },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByText(placeholder, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a Select with assistive text", () => {
+        const assistiveText = "You need to pick something";
+        const { getByText } = render(React.createElement(Select, { onChange: onChange, assistiveText: assistiveText },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByText(assistiveText, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a disabled Select", () => {
+        const labelText = "labelText";
+        const { getByText } = render(React.createElement(Select, { label: labelText, onChange: onChange, disabled: true },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+            color: tokens["color-disabled"],
+        });
+    });
+    it("renders a Select with a value provided", () => {
+        const expectedValue = "That should be me";
+        const { getByText } = render(React.createElement(Select, { onChange: onChange, value: "2" },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, expectedValue)));
+        expect(getByText(expectedValue, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a Select with a defaultValue provided", () => {
+        const expectedValue = "It's the 3rd value";
+        const { getByText } = render(React.createElement(Select, { onChange: onChange, defaultValue: "3" },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2"),
+            React.createElement(Option, { value: "3" }, expectedValue)));
+        expect(getByText(expectedValue, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a Select with custom testID", () => {
+        const testID = "testID";
+        const { getByTestId } = render(React.createElement(Select, { onChange: onChange, testID: testID },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByTestId(`ATL-${testID}-Select`)).toBeDefined();
+    });
+    it("renders an accessibilityLabel if provided", () => {
+        const { getByLabelText } = render(React.createElement(Select, { onChange: onChange, label: "label", accessibilityLabel: "accessibilityLabel" },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByLabelText("accessibilityLabel")).toBeTruthy();
+    });
+    it("fires the onChange callback", () => {
+        const { getByTestId } = render(React.createElement(Select, { onChange: onChange, value: "2" },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        const select = getByTestId("ATL-Select").findByType(SelectInternalPicker);
+        expect(select).toBeTruthy();
+        fireEvent(select, "onChange", "1");
+        expect(onChange).toHaveBeenCalledWith("1");
+    });
+});
+describe("when Select is invalid", () => {
+    const labelText = "labelText";
+    it("renders an invalid Select", () => {
+        const { getByText } = render(React.createElement(Select, { onChange: onChange, invalid: true, label: labelText },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+            color: tokens["color-critical"],
+        });
+    });
+    it("renders an invalid Select with placeholder", () => {
+        const placeholder = "Place me in the holder";
+        const { getByText } = render(React.createElement(Select, { label: labelText, onChange: onChange, invalid: true, placeholder: placeholder },
+            React.createElement(Option, { value: "1" }, "1"),
+            React.createElement(Option, { value: "2" }, "2")));
+        expect(getByText(placeholder, { includeHiddenElements: true })).toBeDefined();
+        expect(getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+            color: tokens["color-critical"],
+        });
+    });
+});
+describe("when validations are passed to the component", () => {
+    describe("validations fail", () => {
+        let tree;
+        const labelText = "labelText";
+        const errorMsg = "Too short";
+        beforeEach(() => {
+            tree = render(React.createElement(Select, { label: labelText, onChange: onChange, value: "Watermelon", validations: {
+                    minLength: { value: 60, message: errorMsg },
+                } },
+                React.createElement(Option, { value: "Apple" }, "Apple"),
+                React.createElement(Option, { value: "Watermelon" }, "Watermelon")));
+        });
+        it("renders the error message when there is an error", () => __awaiter(void 0, void 0, void 0, function* () {
+            const select = tree
+                .getByTestId("ATL-Select")
+                .findByType(SelectInternalPicker);
+            fireEvent(select, "onChange", "Apple");
+            expect(yield tree.findByText(errorMsg, { includeHiddenElements: true })).toBeTruthy();
+        }));
+        it("shows the invalid colours", () => __awaiter(void 0, void 0, void 0, function* () {
+            const select = tree
+                .getByTestId("ATL-Select")
+                .findByType(SelectInternalPicker);
+            fireEvent(select, "onChange", "Apple");
+            expect((yield tree.findByText(labelText, { includeHiddenElements: true }))
+                .props.style).toContainEqual({
+                color: tokens["color-critical"],
+            });
+        }));
+    });
+    describe("validations passes", () => {
+        let tree;
+        const labelText = "labelText";
+        const errorMsg = "Not too short";
+        beforeEach(() => {
+            tree = render(React.createElement(Select, { label: labelText, onChange: onChange, value: "Watermelon", validations: {
+                    minLength: { value: 4, message: errorMsg },
+                } },
+                React.createElement(Option, { value: "Apple" }, "Apple"),
+                React.createElement(Option, { value: "Watermelon" }, "Watermelon")));
+        });
+        it("does not render any error messages", () => {
+            const select = tree
+                .getByTestId("ATL-Select")
+                .findByType(SelectInternalPicker);
+            expect(select).toBeTruthy();
+            fireEvent(select, "onChange", "Apple");
+            expect(tree.queryByText(errorMsg)).toBeNull();
+        });
+        it("has non-critical colours", () => {
+            const select = tree
+                .getByTestId("ATL-Select")
+                .findByType(SelectInternalPicker);
+            fireEvent(select, "onChange", "Apple");
+            expect(tree.getByText(labelText, { includeHiddenElements: true }).props.style).toContainEqual({
+                color: tokens["color-text--secondary"],
+            });
+        });
+    });
+});

package/dist/src/Select/components/SelectDefaultPicker/SelectDefaultPicker.test.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { SelectDefaultPicker } from "./SelectDefaultPicker";
+import { Text } from "../../../Text";
+const A11yInfoSpy = jest.spyOn(AccessibilityInfo, "isScreenReaderEnabled");
+const handleChange = jest.fn();
+function MockPicker() {
+    return React.createElement("MockPicker");
+}
+const MockPickerItem = () => React.createElement(React.Fragment, null);
+jest.mock("@react-native-picker/picker", () => ({ Picker: MockPicker }));
+MockPicker.Item = MockPickerItem;
+beforeEach(() => {
+    A11yInfoSpy.mockImplementation(() => Promise.resolve(false));
+});
+afterEach(() => {
+    jest.resetAllMocks();
+});
+const childText = "Click me";
+function setup() {
+    return render(React.createElement(View, { testID: "SelectDefaultPicker" },
+        React.createElement(SelectDefaultPicker, { onChange: handleChange, options: [
+                { value: "1", label: "First option" },
+                { value: "2", label: "Second option" },
+            ] },
+            React.createElement(Text, null, childText))));
+}
+describe("SelectDefaultPicker", () => {
+    it("opens the picker", () => {
+        const screen = setup();
+        fireEvent.press(screen.getByText(childText));
+        expect(screen.getByTestId("SelectDefaultPicker").findByType(MockPicker)).toBeDefined();
+    });
+    it("closes the picker", () => {
+        const screen = setup();
+        fireEvent.press(screen.getByText(childText));
+        fireEvent.press(screen.getByText("Done"));
+        expect(screen.getByTestId("SelectDefaultPicker").findAllByType(MockPicker)).toEqual([]);
+    });
+    it("fires the onChange", () => {
+        const screen = setup();
+        fireEvent.press(screen.getByText(childText));
+        const menu = screen
+            .getByTestId("SelectDefaultPicker")
+            .findByType(MockPicker);
+        expect(menu).toBeDefined();
+        fireEvent(menu, "onValueChange", "2");
+        expect(handleChange).toHaveBeenCalledWith("2");
+    });
+});