@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/Banner/Banner.test.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Banner } from ".";
+import { Text } from "../Text";
+import { TextList } from "../TextList";
+describe("Banner", () => {
+    describe("Type", () => {
+        it("renders an error Banner", () => {
+            const { getByText, getByTestId } = render(React.createElement(Banner, { type: "error", text: "An error happened" }));
+            const icon = getByTestId("ATL-Banner-Icon");
+            expect(getByText("An error happened")).toBeDefined();
+            expect(icon.props.children.props.name).toBe("alert");
+        });
+        it("renders a warning Banner", () => {
+            const { getByText, getByTestId } = render(React.createElement(Banner, { type: "warning", text: "Here is a warning" }));
+            const icon = getByTestId("ATL-Banner-Icon");
+            expect(getByText("Here is a warning")).toBeDefined();
+            expect(icon.props.children.props.name).toBe("help");
+        });
+        it("renders a notice Banner", () => {
+            const { getByText, getByTestId } = render(React.createElement(Banner, { type: "notice", text: "Notice me" }));
+            const icon = getByTestId("ATL-Banner-Icon");
+            expect(getByText("Notice me")).toBeDefined();
+            expect(icon.props.children.props.name).toBe("starburst");
+        });
+        it("renders a success Banner", () => {
+            const { getByText, getByTestId } = render(React.createElement(Banner, { type: "success" },
+                React.createElement(Text, null, "Your import is complete")));
+            const icon = getByTestId("ATL-Banner-Icon");
+            expect(getByText("Your import is complete")).toBeDefined();
+            expect(icon.props.children.props.name).toBe("checkmark");
+        });
+    });
+    describe("Children", () => {
+        describe("should flow", () => {
+            it("renders using RNText when there is a text prop", () => {
+                const { getByText, queryByTestId } = render(React.createElement(Banner, { type: "notice", text: "Notice me" }));
+                expect(getByText("Notice me")).toBeDefined();
+                expect(queryByTestId("ATL-Banner-RNText")).toBeDefined();
+            });
+            it("renders using RNText when there is a Text element", () => {
+                const { getByText, queryByTestId } = render(React.createElement(Banner, { type: "notice" },
+                    React.createElement(Text, null, "Notice me")));
+                expect(getByText("Notice me")).toBeDefined();
+                expect(queryByTestId("ATL-Banner-RNText")).toBeDefined();
+            });
+        });
+        describe("should stack", () => {
+            it("renders using View when there is a details prop", () => {
+                const { getByText, queryByTestId } = render(React.createElement(Banner, { type: "notice", details: ["details"] }));
+                expect(getByText("details")).toBeDefined();
+                expect(queryByTestId("ATL-View-Container")).toBeDefined();
+            });
+            it("renders using View when there is more than one child", () => {
+                const { getByText, queryByTestId } = render(React.createElement(Banner, { type: "notice" },
+                    React.createElement(Text, null, "Notice me"),
+                    React.createElement(TextList, { items: ["Detail One", "Detail Two", "Detail Three"] })));
+                expect(getByText("Notice me")).toBeDefined();
+                expect(getByText("Detail Three")).toBeDefined();
+                expect(queryByTestId("ATL-View-Container")).toBeDefined();
+            });
+            it("renders using View when there is a details prop and a text prop", () => {
+                const { getByText, queryByTestId } = render(React.createElement(Banner, { type: "notice", text: "Notice me", details: ["details"] }));
+                expect(getByText("Notice me")).toBeDefined();
+                expect(getByText("details")).toBeDefined();
+                expect(queryByTestId("ATL-View-Container")).toBeDefined();
+            });
+            it("renders using View when there are text and details props, as well as a child", () => {
+                const { getByText, queryByTestId } = render(React.createElement(Banner, { type: "notice", text: "Notice me", details: ["details"] },
+                    React.createElement(Text, null, "I am a text child!")));
+                expect(getByText("Notice me")).toBeDefined();
+                expect(getByText("I am a text child!")).toBeDefined();
+                expect(queryByTestId("ATL-View-Container")).toBeDefined();
+            });
+        });
+        it("should render multiple details when using the details prop", () => {
+            const tree = render(React.createElement(Banner, { type: "error", text: "You are disconnected", details: ["details", "etc"] }));
+            expect(tree.getByText("details")).toBeDefined();
+            expect(tree.getByText("etc")).toBeDefined();
+        });
+        it("should render multiple details when using the TextList component", () => {
+            const tree = render(React.createElement(Banner, { type: "error", text: "You are disconnected" },
+                React.createElement(TextList, { items: ["details", "etc"] })));
+            expect(tree.getByText("details")).toBeDefined();
+            expect(tree.getByText("etc")).toBeDefined();
+        });
+        it("should render a Typography bar when there is an action prop but no details", () => {
+            const { getByText } = render(React.createElement(Banner, { type: "error", text: "You are disconnected", action: { label: "Reconnect", onPress: jest.fn() } }));
+            expect(getByText("Reconnect")).toBeDefined();
+            expect(getByText("|")).toBeDefined();
+        });
+        it("should not render a Typography bar when there are action and details props", () => {
+            const { getByText, queryByText } = render(React.createElement(Banner, { type: "error", text: "You are disconnected", details: ["details"], action: { label: "Reconnect", onPress: jest.fn() } }));
+            expect(getByText("Reconnect")).toBeDefined();
+            expect(queryByText("|")).toBeNull();
+        });
+    });
+});

package/dist/src/BottomSheet/BottomSheet.test.js

@@ -0,0 +1,105 @@
+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, { createRef } from "react";
+import { act, render, userEvent, waitFor } from "@testing-library/react-native";
+import { AccessibilityInfo, View } from "react-native";
+import { BottomSheet } from ".";
+import { waitForUntestableRender } from "../utils/test/wait";
+import { Text } from "../Text";
+jest.unmock("../hooks/useIsScreenReaderEnabled");
+const ref = createRef();
+const mockOnClose = jest.fn();
+const mockOnOpen = jest.fn();
+function setup({ heading, showCancel, loading, }) {
+    return render(React.createElement(BottomSheet, { ref: ref, heading: heading, showCancel: showCancel, loading: loading, onClose: mockOnClose, onOpen: mockOnOpen },
+        React.createElement(View, null,
+            React.createElement(Text, null, "BottomSheet"))));
+}
+it("renders a BottomSheet", () => __awaiter(void 0, void 0, void 0, function* () {
+    const { findByText } = setup({});
+    yield waitForUntestableRender("Wait for AccessibilityInfo.isScreenReaderEnabled to resolve");
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+    }));
+    expect(yield findByText("BottomSheet")).toBeDefined();
+}));
+it("renders a BottomSheet with a header", () => __awaiter(void 0, void 0, void 0, function* () {
+    const header = "Hello this is header";
+    const { findByText } = setup({ heading: header });
+    yield waitForUntestableRender("Wait for AccessibilityInfo.isScreenReaderEnabled to resolve");
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+    }));
+    expect(yield findByText(header)).toBeDefined();
+}));
+it("BottomSheet can be closed with the cancel action", () => __awaiter(void 0, void 0, void 0, function* () {
+    const { findByLabelText, queryByText } = setup({ showCancel: true });
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+    }));
+    const cancelButton = yield findByLabelText("Cancel");
+    yield userEvent.press(cancelButton);
+    yield waitFor(() => {
+        expect(queryByText("BottomSheet")).toBeNull();
+    });
+}));
+describe("when loading is provided and true", () => {
+    it("hides the cancel action", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { queryByText } = setup({ showCancel: true, loading: true });
+        yield waitForUntestableRender("Wait for AccessibilityInfo.isScreenReaderEnabled to resolve");
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+        }));
+        expect(queryByText("Cancel")).toBeNull();
+    }));
+});
+it("calls onClose when BottomSheet is closed", () => __awaiter(void 0, void 0, void 0, function* () {
+    setup({});
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+        (_b = ref.current) === null || _b === void 0 ? void 0 : _b.close();
+    }));
+    yield waitFor(() => {
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
+}));
+it("calls onOpen when BottomSheet is opened", () => __awaiter(void 0, void 0, void 0, function* () {
+    setup({});
+    yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+    }));
+    yield waitFor(() => {
+        expect(mockOnOpen).toHaveBeenCalledTimes(1);
+    });
+}));
+describe("when there is a screen reader enabled", () => {
+    it("should always show the cancel action", () => __awaiter(void 0, void 0, void 0, function* () {
+        jest
+            .spyOn(AccessibilityInfo, "isScreenReaderEnabled")
+            .mockImplementation(() => Promise.resolve(true));
+        const { findByLabelText, queryByText } = setup({});
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.open();
+        }));
+        const cancelButton = yield findByLabelText("Cancel");
+        expect(cancelButton).toBeDefined();
+        yield userEvent.press(cancelButton);
+        yield waitFor(() => {
+            expect(queryByText("BottomSheet")).toBeNull();
+        });
+    }));
+});

package/dist/src/BottomSheet/components/BottomSheetOption/BottomSheetOption.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { BottomSheetOption } from "./BottomSheetOption";
+describe("BottomSheetOption component", () => {
+    it("renders", () => {
+        const mockNavigate = jest.fn();
+        const iconName = "camera";
+        const optionLabel = "Take photo";
+        const { getByTestId, getByText } = render(React.createElement(BottomSheetOption, { onPress: mockNavigate, icon: iconName, text: optionLabel }));
+        expect(getByTestId(iconName)).toBeDefined();
+        expect(getByText(optionLabel)).toBeDefined();
+    });
+    it("responds to presses", () => {
+        const mockNavigate = jest.fn();
+        const tree = render(React.createElement(BottomSheetOption, { onPress: mockNavigate, icon: "camera", text: "Take photo" }));
+        fireEvent.press(tree.getByLabelText("Take photo"));
+        expect(mockNavigate).toHaveBeenCalled();
+    });
+});

package/dist/src/BottomSheet/hooks/useBottomSheetBackHandler.test.js

@@ -0,0 +1,68 @@
+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 { createRef } from "react";
+import { act, renderHook } from "@testing-library/react-native";
+import { BackHandler } from "react-native";
+import { useBottomSheetBackHandler } from "./useBottomSheetBackHandler";
+describe("useBottomSheetBackHandler", () => {
+    let mockRemove;
+    let mockAddEventListener;
+    beforeEach(() => {
+        mockRemove = jest.fn();
+        mockAddEventListener = jest.spyOn(BackHandler, "addEventListener");
+        mockAddEventListener.mockReturnValue({ remove: mockRemove });
+    });
+    afterEach(() => {
+        mockAddEventListener.mockRestore();
+    });
+    it("should register BackHandler listener when sheet becomes visible", () => __awaiter(void 0, void 0, void 0, function* () {
+        const bottomSheetRef = createRef();
+        const { result } = renderHook(() => useBottomSheetBackHandler(bottomSheetRef));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(0);
+        }));
+        expect(mockAddEventListener).toHaveBeenCalledWith("hardwareBackPress", expect.any(Function));
+    }));
+    it("should call dismiss() when back button is pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+        const mockDismiss = jest.fn();
+        const bottomSheetRef = {
+            current: {
+                dismiss: mockDismiss,
+            },
+        };
+        const { result } = renderHook(() => useBottomSheetBackHandler(bottomSheetRef));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(0);
+        }));
+        const registeredCallback = mockAddEventListener.mock.calls[0][1];
+        const returnValue = registeredCallback();
+        expect(mockDismiss).toHaveBeenCalled();
+        expect(returnValue).toBe(true);
+    }));
+    it("should remove listener when sheet is dismissed", () => __awaiter(void 0, void 0, void 0, function* () {
+        const bottomSheetRef = createRef();
+        const { result } = renderHook(() => useBottomSheetBackHandler(bottomSheetRef));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(0);
+        }));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(-1);
+        }));
+        expect(mockRemove).toHaveBeenCalled();
+    }));
+    it("should not register listener when index is negative", () => __awaiter(void 0, void 0, void 0, function* () {
+        const bottomSheetRef = createRef();
+        const { result } = renderHook(() => useBottomSheetBackHandler(bottomSheetRef));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(-1);
+        }));
+        expect(mockAddEventListener).not.toHaveBeenCalled();
+    }));
+});

package/dist/src/Button/Button.test.js

@@ -0,0 +1,228 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
+import { Button } from ".";
+import { baseButtonHeight, smallButtonHeight } from "./Button.style";
+import { tokens } from "../utils/design";
+function getIconAndTextColorFromRender({ type = "primary", variation = "work", }) {
+    const pressHandler = jest.fn();
+    const text = "🌚 I am the text 🌚";
+    const iconName = "cog";
+    const { getByTestId, getByRole } = render(React.createElement(Button, { onPress: pressHandler, label: text, icon: iconName, type: type, variation: variation }));
+    const iconColor = getByTestId(iconName).findByType(Path).props.fill;
+    const textColor = getByRole("text").props.style.find((style) => style.color).color;
+    return { iconColor, textColor };
+}
+function renderButton(element) {
+    const instance = render(element);
+    const button = instance.getByLabelText(element.props.label);
+    expect(button).toBeDefined();
+    expect(instance.getByText(element.props.label)).toBeDefined();
+    const buttonStyleEl = button.children[0];
+    const buttonStyle = buttonStyleEl.props.style.flat().reduce((mergedStyles, additionalStyles) => (Object.assign(Object.assign({}, mergedStyles), additionalStyles)), {});
+    return Object.assign(Object.assign({}, instance), { button, buttonStyle });
+}
+describe("Button", () => {
+    it("renders the default primary button", () => {
+        const { button, buttonStyle } = renderButton(React.createElement(Button, { label: "Foo", onPress: jest.fn() }));
+        expect(button.props.accessibilityRole).toBe("button");
+        expect(buttonStyle).toMatchObject({
+            backgroundColor: tokens["color-interactive"],
+            borderColor: tokens["color-interactive"],
+        });
+    });
+    it.each([
+        ["work", { bgColor: tokens["color-interactive"] }],
+        [
+            "cancel",
+            {
+                bgColor: tokens["color-white"],
+                borderColor: tokens["color-border"],
+            },
+        ],
+        ["destructive", { bgColor: tokens["color-destructive"] }],
+        ["learning", { bgColor: tokens["color-interactive--subtle"] }],
+    ])("renders a %s Button", (variation, { bgColor, borderColor }) => {
+        const { buttonStyle } = renderButton(React.createElement(Button, { label: variation, variation: variation, onPress: jest.fn() }));
+        expect(buttonStyle).toMatchObject({
+            backgroundColor: bgColor,
+            borderColor: borderColor || bgColor,
+        });
+    });
+    it.each([
+        ["primary", { bgColor: tokens["color-interactive"] }],
+        [
+            "secondary",
+            {
+                bgColor: tokens["color-white"],
+                borderColor: tokens["color-border"],
+            },
+        ],
+        [
+            "tertiary",
+            { bgColor: tokens["color-surface"], borderColor: "transparent" },
+        ],
+    ])("renders a %s Button", (type, { bgColor, borderColor }) => {
+        const { buttonStyle } = renderButton(React.createElement(Button, { label: type, type: type, onPress: jest.fn() }));
+        expect(buttonStyle).toMatchObject({
+            backgroundColor: bgColor,
+            borderColor: borderColor || bgColor,
+        });
+    });
+    it.each([
+        [
+            "small",
+            {
+                minHeight: smallButtonHeight,
+            },
+        ],
+        [
+            "base",
+            {
+                minHeight: baseButtonHeight,
+            },
+        ],
+    ])("renders a %s Button", (size, { minHeight }) => {
+        const { buttonStyle } = renderButton(React.createElement(Button, { label: "Button Size", size: size }));
+        expect(buttonStyle).toMatchObject({
+            minHeight,
+        });
+    });
+    it("renders a disabled Button", () => {
+        const { button, buttonStyle } = renderButton(React.createElement(Button, { label: "Can't touch this", disabled: true, onPress: jest.fn() }));
+        expect(button.props.accessibilityState).toHaveProperty("disabled", true);
+        expect(buttonStyle).toMatchObject({
+            backgroundColor: tokens["color-disabled--secondary"],
+            borderColor: tokens["color-disabled--secondary"],
+        });
+    });
+    it("renders a non-fullWidth Button", () => {
+        const expectedValue = { alignSelf: "stretch" };
+        const { button, rerender } = renderButton(React.createElement(Button, { label: "Thicc", onPress: jest.fn() }));
+        expect(button.props.style).toContainEqual(expectedValue);
+        rerender(React.createElement(Button, { label: "Thicc", fullWidth: false, onPress: jest.fn() }));
+        expect(button.props.style).not.toContainEqual(expectedValue);
+    });
+    it("should call the onPress handler", () => {
+        const pressHandler = jest.fn();
+        const text = "🌚 I am the text 🌚";
+        const a11yLabel = "A button";
+        const { getByLabelText } = render(React.createElement(Button, { onPress: pressHandler, label: text, accessibilityLabel: a11yLabel }));
+        fireEvent.press(getByLabelText(a11yLabel));
+        expect(pressHandler).toHaveBeenCalled();
+    });
+    describe("accessibilityLabel", () => {
+        it("uses accessibilityLabel if specified", () => {
+            const pressHandler = jest.fn();
+            const text = "🌚 I am the text 🌚";
+            const a11yLabel = "A button";
+            const { getByLabelText } = render(React.createElement(Button, { onPress: pressHandler, label: text, accessibilityLabel: a11yLabel }));
+            expect(getByLabelText(a11yLabel)).toBeTruthy();
+        });
+        it("uses label if unspecified", () => {
+            const pressHandler = jest.fn();
+            const text = "🌚 I am the text 🌚";
+            const { getByLabelText } = render(React.createElement(Button, { onPress: pressHandler, label: text }));
+            expect(getByLabelText(text)).toBeTruthy();
+        });
+    });
+    describe("if an icon is passed in", () => {
+        it("renders an icon Button with same color as the Button text", () => {
+            const { iconColor, textColor } = getIconAndTextColorFromRender({});
+            expect(iconColor).toBe(tokens["color-white"]);
+            expect(textColor).toBe(iconColor);
+        });
+        it("renders the learning variation and secondary type with icon and label with the same color", () => {
+            const { iconColor, textColor } = getIconAndTextColorFromRender({
+                variation: "learning",
+                type: "secondary",
+            });
+            expect(iconColor).toBe(tokens["color-interactive--subtle"]);
+            expect(textColor).toBe(iconColor);
+        });
+        it("renders the destructive variation and secondary type with icon and label with the same color", () => {
+            const { iconColor, textColor } = getIconAndTextColorFromRender({
+                variation: "destructive",
+                type: "secondary",
+            });
+            expect(iconColor).toBe(tokens["color-destructive"]);
+            expect(textColor).toBe(iconColor);
+        });
+        it("renders the cancel variation and tertiary type with icon and label with the same color", () => {
+            const { iconColor, textColor } = getIconAndTextColorFromRender({
+                variation: "cancel",
+                type: "tertiary",
+            });
+            expect(iconColor).toBe(tokens["color-interactive--subtle"]);
+            expect(textColor).toBe(iconColor);
+        });
+        it("renders an icon Button if only an icon is passed", () => {
+            const pressHandler = jest.fn();
+            const icon = "cog";
+            const accessibilityLabel = "cog";
+            const { getByLabelText } = render(React.createElement(Button, { onPress: pressHandler, icon: icon, accessibilityLabel: accessibilityLabel }));
+            expect(getByLabelText(icon)).toBeDefined();
+        });
+    });
+    describe("Loading", () => {
+        const label = "I am loading";
+        it("does render a loading state", () => {
+            const { getByTestId, getByRole } = render(React.createElement(Button, { label: label, onPress: jest.fn, loading: true }));
+            expect(getByTestId("loadingImage")).toBeDefined();
+            expect(getByRole("button", { busy: true })).toBeDefined();
+        });
+        it("doesn't render a loading state", () => {
+            const { queryByTestId, queryByRole, rerender } = render(React.createElement(Button, { label: label, onPress: jest.fn, loading: false }));
+            expect(queryByTestId("loadingImage")).toBeNull();
+            expect(queryByRole("button", { busy: true })).toBeNull();
+            rerender(React.createElement(Button, { label: "I am loading", onPress: jest.fn }));
+            expect(queryByTestId("loadingImage")).toBeNull();
+            expect(queryByRole("button", { busy: true })).toBeNull();
+        });
+        it("should not allow press events", () => {
+            const handlePress = jest.fn();
+            const setup = (loading) => (React.createElement(Button, { label: label, onPress: handlePress, loading: loading }));
+            const { getByLabelText, rerender } = render(setup(true));
+            fireEvent.press(getByLabelText(label));
+            expect(handlePress).not.toHaveBeenCalled();
+            // Sanity check that it's not a false positive
+            rerender(setup());
+            fireEvent.press(getByLabelText(label));
+            expect(handlePress).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe("UNSAFE_style", () => {
+        it("should apply the container style override", () => {
+            const containerStyle = {
+                backgroundColor: "red",
+                borderColor: tokens["color-base-red--500"],
+            };
+            const { buttonStyle } = renderButton(React.createElement(Button, { label: "Override", onPress: jest.fn(), UNSAFE_style: { container: containerStyle } }));
+            expect(buttonStyle).toMatchObject(containerStyle);
+        });
+        it("should apply the contentContainer style override to labels", () => {
+            const contentContainerStyle = { padding: 10 };
+            const { getByTestId } = renderButton(React.createElement(Button, { label: "Override", onPress: jest.fn(), UNSAFE_style: { contentContainer: contentContainerStyle } }));
+            const contentContainer = getByTestId("contentContainer");
+            expect(contentContainer.props.style).toContainEqual(contentContainerStyle);
+        });
+        it("should apply the contentContainer style override to icons", () => {
+            const contentContainerStyle = { padding: 10 };
+            const { getByTestId } = renderButton(React.createElement(Button, { label: "Cog", icon: "cog", onPress: jest.fn(), UNSAFE_style: { contentContainer: contentContainerStyle } }));
+            const contentContainer = getByTestId("contentContainer");
+            expect(contentContainer.props.style).toContainEqual(contentContainerStyle);
+        });
+        it("should apply the iconContainer style override", () => {
+            const iconContainerStyle = { margin: 5 };
+            const { getByTestId } = renderButton(React.createElement(Button, { label: "Cog", icon: "cog", onPress: jest.fn(), UNSAFE_style: { iconContainer: iconContainerStyle } }));
+            const iconContainer = getByTestId("iconContainer");
+            expect(iconContainer.props.style).toContainEqual(iconContainerStyle);
+        });
+        it("should apply the actionLabelContainer style override", () => {
+            const actionLabelContainerStyle = { margin: 5 };
+            const { getByTestId } = renderButton(React.createElement(Button, { label: "Override", onPress: jest.fn(), UNSAFE_style: { actionLabelContainer: actionLabelContainerStyle } }));
+            const actionLabelContainer = getByTestId("actionLabelContainer");
+            expect(actionLabelContainer.props.style).toContainEqual(actionLabelContainerStyle);
+        });
+    });
+});

package/dist/src/Button/components/InternalButtonLoading/InternalButtonLoading.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { InternalButtonLoading, darkPattern, lightPattern, } from "./InternalButtonLoading";
+describe("Loading pattern", () => {
+    it.each([
+        [lightPattern, "primary", "work"],
+        [lightPattern, "primary", "destructive"],
+        [lightPattern, "primary", "learning"],
+        [darkPattern, "primary", "cancel"],
+        [darkPattern, "secondary", "cancel"],
+        [darkPattern, "secondary", "work"],
+        [darkPattern, "secondary", "destructive"],
+        [darkPattern, "secondary", "learning"],
+        [darkPattern, "tertiary", "cancel"],
+        [darkPattern, "tertiary", "work"],
+        [darkPattern, "tertiary", "destructive"],
+        [darkPattern, "tertiary", "learning"],
+    ])("should render a %s pattern on %s %s combination", (pattern, type, variation) => {
+        const { getByTestId } = render(React.createElement(InternalButtonLoading, { type: type, variation: variation }));
+        const component = getByTestId("loadingImage");
+        expect(component.props.source).toMatchObject({
+            uri: expect.stringContaining(pattern),
+        });
+    });
+});