@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/ContentOverlay/computeContentOverlayBehavior.test.js

@@ -0,0 +1,197 @@
+import { computeContentOverlayBehavior } from "./computeContentOverlayBehavior";
+const arbitraryClosedPositionValue = 768;
+const defaultConfig = {
+    fullScreen: false,
+    adjustToContentHeight: false,
+    isDraggable: true,
+    hasOnBeforeExit: false,
+    showDismiss: false,
+};
+const defaultState = {
+    isScreenReaderEnabled: false,
+    position: arbitraryClosedPositionValue,
+};
+function aConfig(overrides = {}) {
+    return Object.assign(Object.assign({}, defaultConfig), overrides);
+}
+function aState(overrides = {}) {
+    return Object.assign(Object.assign({}, defaultState), overrides);
+}
+describe("computeContentOverlayBehavior", () => {
+    describe("initialHeight", () => {
+        it("returns fullScreen when fullScreen=true", () => {
+            const config = aConfig({ fullScreen: true });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.initialHeight).toBe("fullScreen");
+        });
+        it("returns contentHeight when adjustToContentHeight=true", () => {
+            const config = aConfig({ adjustToContentHeight: true });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.initialHeight).toBe("contentHeight");
+        });
+        it("returns contentHeight for default props (legacy case)", () => {
+            const config = aConfig();
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.initialHeight).toBe("contentHeight");
+        });
+        it("returns adjustToContentHeight when adjustToContentHeight=true even if fullScreen=true", () => {
+            const config = aConfig({ fullScreen: true, adjustToContentHeight: true });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.initialHeight).toBe("contentHeight");
+        });
+    });
+    describe("isDraggable", () => {
+        it("returns false when onBeforeExit is present regardless of isDraggable prop", () => {
+            const config = aConfig({ isDraggable: true, hasOnBeforeExit: true });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(false);
+        });
+        it("returns false when onBeforeExit is present and isDraggable is false", () => {
+            const config = aConfig({ isDraggable: false, hasOnBeforeExit: true });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(false);
+        });
+        it("respects isDraggable=true when no onBeforeExit", () => {
+            const config = aConfig({ isDraggable: true, hasOnBeforeExit: false });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(true);
+        });
+        it("respects isDraggable=false when no onBeforeExit", () => {
+            const config = aConfig({ isDraggable: false, hasOnBeforeExit: false });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.isDraggable).toBe(false);
+        });
+    });
+    describe("showDismiss", () => {
+        it("returns true when showDismiss prop is true", () => {
+            const config = aConfig({ showDismiss: true });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(true);
+        });
+        it("returns true when screen reader is enabled", () => {
+            const config = aConfig({ showDismiss: false });
+            const state = aState({ isScreenReaderEnabled: true });
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(true);
+        });
+        it("returns true when fullScreen is true", () => {
+            const config = aConfig({ fullScreen: true, showDismiss: false });
+            const state = aState({ isScreenReaderEnabled: false });
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(true);
+        });
+        it("returns true when dragged to top and not adjustToContentHeight (legacy behavior)", () => {
+            const config = aConfig({
+                adjustToContentHeight: false,
+                showDismiss: false,
+            });
+            const state = aState({ position: 0, isScreenReaderEnabled: false });
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(true);
+        });
+        it("returns false when position is top but adjustToContentHeight is true", () => {
+            const config = aConfig({
+                adjustToContentHeight: true,
+                showDismiss: false,
+            });
+            const state = aState({ position: 0, isScreenReaderEnabled: false });
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(false);
+        });
+        it("returns false when position is initial and no other conditions met", () => {
+            const config = aConfig({
+                showDismiss: false,
+                fullScreen: false,
+                adjustToContentHeight: false,
+            });
+            const state = aState({
+                position: arbitraryClosedPositionValue,
+                isScreenReaderEnabled: false,
+            });
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(false);
+        });
+        it("returns false for default props with default state", () => {
+            const config = aConfig();
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result.showDismiss).toBe(false);
+        });
+    });
+    describe("combined behaviors", () => {
+        it("returns expected behavior for fullScreen overlay", () => {
+            const config = aConfig({
+                fullScreen: true,
+                isDraggable: false,
+                showDismiss: true,
+            });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result).toEqual({
+                initialHeight: "fullScreen",
+                isDraggable: false,
+                showDismiss: true,
+            });
+        });
+        it("returns expected behavior for content-height overlay with adjustToContentHeight", () => {
+            const config = aConfig({
+                adjustToContentHeight: true,
+                showDismiss: true,
+            });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result).toEqual({
+                initialHeight: "contentHeight",
+                isDraggable: true,
+                showDismiss: true,
+            });
+        });
+        it("returns expected behavior for overlay with onBeforeExit (confirmation flow)", () => {
+            const config = aConfig({
+                adjustToContentHeight: true,
+                hasOnBeforeExit: true,
+                isDraggable: true,
+                showDismiss: true,
+            });
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result).toEqual({
+                initialHeight: "contentHeight",
+                isDraggable: false,
+                showDismiss: true,
+            });
+        });
+        it("returns expected behavior for default props (legacy behavior)", () => {
+            const config = aConfig();
+            const state = aState();
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result).toEqual({
+                initialHeight: "contentHeight",
+                isDraggable: true,
+                showDismiss: false,
+            });
+        });
+        it("returns expected behavior for accessibility case where screen reader forces dismiss button", () => {
+            const config = aConfig({
+                adjustToContentHeight: true,
+                showDismiss: false,
+            });
+            const state = aState({ isScreenReaderEnabled: true });
+            const result = computeContentOverlayBehavior(config, state);
+            expect(result).toEqual({
+                initialHeight: "contentHeight",
+                isDraggable: true,
+                showDismiss: true,
+            });
+        });
+    });
+});

package/dist/src/ContentOverlay/hooks/useBottomSheetModalBackHandler.test.js

@@ -0,0 +1,62 @@
+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 { act, renderHook } from "@testing-library/react-native";
+import { BackHandler } from "react-native";
+import { useBottomSheetModalBackHandler } from "./useBottomSheetModalBackHandler";
+describe("useBottomSheetModalBackHandler", () => {
+    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 onCloseController = jest.fn();
+        const { result } = renderHook(() => useBottomSheetModalBackHandler(onCloseController));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(0);
+        }));
+        expect(mockAddEventListener).toHaveBeenCalledWith("hardwareBackPress", expect.any(Function));
+    }));
+    it("should call onCloseController when back button is pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onCloseController = jest.fn();
+        const { result } = renderHook(() => useBottomSheetModalBackHandler(onCloseController));
+        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(onCloseController).toHaveBeenCalled();
+        expect(returnValue).toBe(true);
+    }));
+    it("should remove listener when sheet is dismissed", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onCloseController = jest.fn();
+        const { result } = renderHook(() => useBottomSheetModalBackHandler(onCloseController));
+        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 onCloseController = jest.fn();
+        const { result } = renderHook(() => useBottomSheetModalBackHandler(onCloseController));
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleSheetPositionChange(-1);
+        }));
+        expect(mockAddEventListener).not.toHaveBeenCalled();
+    }));
+});

package/dist/src/ContentOverlay/hooks/useKeyboardVisibility.test.js

@@ -0,0 +1,41 @@
+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 { act, renderHook } from "@testing-library/react-native";
+import { DeviceEventEmitter } from "react-native";
+import { useKeyboardVisibility } from "./useKeyboardVisibility";
+const keyboardEvent = {
+    endCoordinates: { height: 350, screenX: 120, screenY: 120, width: 200 },
+};
+describe("when the user is typing", () => {
+    it("sets the isKeyboardVisible to true", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useKeyboardVisibility());
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
+        }));
+        expect(result.current.isKeyboardVisible).toBe(true);
+    }));
+    it("the keyboardDidShow event emits the keyboard height", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const { result } = renderHook(() => useKeyboardVisibility());
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            DeviceEventEmitter.emit("keyboardDidShow", keyboardEvent);
+        }));
+        expect(result.current.keyboardHeight).toBe((_a = keyboardEvent.endCoordinates) === null || _a === void 0 ? void 0 : _a.height);
+    }));
+});
+describe("when the user not typing", () => {
+    it("sets the isKeyboardVisible to false", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useKeyboardVisibility());
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            DeviceEventEmitter.emit("keyboardDidHide");
+        }));
+        expect(result.current.isKeyboardVisible).toBe(false);
+    }));
+});

package/dist/src/ContentOverlay/hooks/useViewLayoutHeight.test.js

@@ -0,0 +1,62 @@
+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 { act, renderHook } from "@testing-library/react-native";
+import { useViewLayoutHeight } from "./useViewLayoutHeight";
+describe("useViewLayoutHeight", () => {
+    it("should return initial values", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(() => useViewLayoutHeight());
+        expect(result.current.height).toBe(0);
+        expect(result.current.heightKnown).toBe(false);
+        expect(typeof result.current.handleLayout).toBe("function");
+    }));
+    it("should handle layout change event", () => __awaiter(void 0, void 0, void 0, function* () {
+        const expectedHeight = 100;
+        const layoutChangeEvent = {
+            nativeEvent: {
+                layout: {
+                    height: expectedHeight,
+                    width: 100,
+                    x: 0,
+                    y: 0,
+                },
+            },
+            currentTarget: 0,
+            target: 0,
+            bubbles: false,
+            cancelable: false,
+            defaultPrevented: false,
+            eventPhase: 0,
+            isTrusted: false,
+            preventDefault: function () {
+                throw new Error("Function not implemented.");
+            },
+            isDefaultPrevented: function () {
+                throw new Error("Function not implemented.");
+            },
+            stopPropagation: function () {
+                throw new Error("Function not implemented.");
+            },
+            isPropagationStopped: function () {
+                throw new Error("Function not implemented.");
+            },
+            persist: function () {
+                throw new Error("Function not implemented.");
+            },
+            timeStamp: 0,
+            type: "",
+        };
+        const { result } = renderHook(() => useViewLayoutHeight());
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () {
+            result.current.handleLayout(layoutChangeEvent);
+        }));
+        expect(result.current.height).toBe(expectedHeight);
+        expect(result.current.heightKnown).toBe(true);
+    }));
+});

package/dist/src/Disclosure/Disclosure.test.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { Disclosure } from ".";
+import { Text } from "../Text";
+jest.mock("react-native-svg", () => {
+    return Object.assign(Object.assign({ __esModule: true }, jest.requireActual("react-native-svg")), { Path: "Path", default: "SVGMock" });
+});
+function fireLayoutEvent(disclosureContent) {
+    fireEvent(disclosureContent, "onLayout", {
+        nativeEvent: {
+            layout: {
+                height: 100,
+            },
+        },
+    });
+}
+describe("Disclosure", () => {
+    const defaultProps = {
+        header: React.createElement(Text, null, "This is the header"),
+        content: React.createElement(Text, null, "This is the content"),
+        onToggle: jest.fn(),
+    };
+    it("renders a Disclosure with a header and a content when open is true", () => {
+        render(React.createElement(Disclosure, { header: React.createElement(Text, null, "This is the header"), content: React.createElement(Text, null, "This is the content"), open: true, isEmpty: false, onToggle: () => {
+                return;
+            } }));
+        expect(screen.getByText("This is the header")).toBeTruthy();
+        const content = screen.getByTestId("content");
+        fireLayoutEvent(content);
+        expect(screen.getByText("This is the content")).toBeTruthy();
+        expect(screen.getByTestId("arrowUp")).toBeTruthy();
+    });
+    it("renders a Disclosure with a header and with a content of size 0 when open is false", () => {
+        render(React.createElement(Disclosure, { header: React.createElement(Text, null, "This is the header"), content: React.createElement(Text, null, "This is the content"), open: false, isEmpty: false, onToggle: () => {
+                return;
+            } }));
+        expect(screen.getByText("This is the header")).toBeTruthy();
+        const content = screen.getByTestId("content");
+        fireLayoutEvent(content);
+        expect(screen.getByText("This is the content")).toBeTruthy();
+        expect(screen.getByTestId("arrowUp")).toBeTruthy();
+    });
+    it("should not render the caret when the Disclosure is empty", () => {
+        render(React.createElement(Disclosure, { header: React.createElement(Text, null, "This is the header"), content: React.createElement(Text, null, "This is the content"), open: false, isEmpty: true, onToggle: () => {
+                return;
+            } }));
+        expect(screen.getByText("This is the header")).toBeTruthy();
+        expect(screen.queryByTestId("arrowUp")).toBeNull();
+    });
+    it("calls onToggle when header is pressed", () => {
+        const onToggleMock = jest.fn();
+        const { getByText } = render(React.createElement(Disclosure, Object.assign({}, defaultProps, { onToggle: onToggleMock, open: false, isEmpty: false })));
+        const headerText = getByText("This is the header");
+        fireEvent.press(headerText);
+        expect(onToggleMock).toHaveBeenCalledTimes(1);
+    });
+    it("does not call onToggle when header is pressed and isEmpty is true", () => {
+        const onToggleMock = jest.fn();
+        const { getByText } = render(React.createElement(Disclosure, Object.assign({}, defaultProps, { onToggle: onToggleMock, open: false, isEmpty: true })));
+        const headerText = getByText("This is the header");
+        fireEvent.press(headerText);
+        expect(onToggleMock).not.toHaveBeenCalled();
+    });
+});

package/dist/src/Divider/Divider.test.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { render, renderHook } from "@testing-library/react-native";
+import { Divider } from "./Divider";
+import { useHorizontalStyles } from "./DividerHorizontal.style";
+import { useVerticalStyles } from "./DividerVertical.style";
+const dividerTestId = "Divider";
+let horizontalStyles;
+let verticalStyles;
+beforeAll(() => {
+    horizontalStyles = renderHook(() => useHorizontalStyles()).result.current;
+    verticalStyles = renderHook(() => useVerticalStyles()).result.current;
+});
+describe("Divider", () => {
+    it("uses the given testID", () => {
+        const dividerTestID = "divider-test";
+        const { getByTestId } = render(React.createElement(Divider, { testID: dividerTestID }));
+        expect(getByTestId(dividerTestID)).toBeDefined();
+    });
+    describe("Horizontal", () => {
+        it("renders a default Divider", () => {
+            const { getByTestId } = render(React.createElement(Divider, null));
+            const dividerStyle = getByTestId(dividerTestId).props.style;
+            expect(dividerStyle).toContainEqual(horizontalStyles.base);
+            expect(dividerStyle).not.toContainEqual(horizontalStyles.large);
+            expect(dividerStyle).not.toContainEqual(horizontalStyles.largest);
+        });
+        it("renders a large Divider", () => {
+            const { getByTestId } = render(React.createElement(Divider, { size: "large" }));
+            const dividerStyle = getByTestId(dividerTestId).props.style;
+            expect(dividerStyle).toContainEqual(horizontalStyles.base);
+            expect(dividerStyle).toContainEqual(horizontalStyles.large);
+            expect(dividerStyle).not.toContainEqual(horizontalStyles.largest);
+        });
+        it("renders a largest Divider", () => {
+            const { getByTestId } = render(React.createElement(Divider, { size: "largest" }));
+            const dividerStyle = getByTestId(dividerTestId).props.style;
+            expect(dividerStyle).toContainEqual(horizontalStyles.base);
+            expect(dividerStyle).not.toContainEqual(horizontalStyles.large);
+            expect(dividerStyle).toContainEqual(horizontalStyles.largest);
+        });
+    });
+    describe("Vertical", () => {
+        it("renders a default Divider", () => {
+            const { getByTestId } = render(React.createElement(Divider, { direction: "vertical" }));
+            const dividerStyle = getByTestId(dividerTestId).props.style;
+            expect(dividerStyle).toContainEqual(verticalStyles.base);
+            expect(dividerStyle).not.toContainEqual(verticalStyles.large);
+            expect(dividerStyle).not.toContainEqual(verticalStyles.largest);
+        });
+        it("renders a large Divider", () => {
+            const { getByTestId } = render(React.createElement(Divider, { direction: "vertical", size: "large" }));
+            const dividerStyle = getByTestId(dividerTestId).props.style;
+            expect(dividerStyle).toContainEqual(verticalStyles.base);
+            expect(dividerStyle).toContainEqual(verticalStyles.large);
+            expect(dividerStyle).not.toContainEqual(verticalStyles.largest);
+        });
+        it("renders a largest Divider", () => {
+            const { getByTestId } = render(React.createElement(Divider, { direction: "vertical", size: "largest" }));
+            const dividerStyle = getByTestId(dividerTestId).props.style;
+            expect(dividerStyle).toContainEqual(verticalStyles.base);
+            expect(dividerStyle).not.toContainEqual(verticalStyles.large);
+            expect(dividerStyle).toContainEqual(verticalStyles.largest);
+        });
+    });
+});

package/dist/src/EmptyState/EmptyState.test.js

@@ -0,0 +1,82 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
+import { EmptyState } from "./EmptyState";
+const primaryOnPress = jest.fn();
+const secondaryOnPress = jest.fn();
+const defaultProps = {
+    icon: "home",
+    title: "Title",
+    description: "Description",
+    primaryAction: {
+        label: "Click Me",
+        onPress: primaryOnPress,
+    },
+    secondaryAction: {
+        label: "Don't Forget About Me",
+        onPress: secondaryOnPress,
+    },
+};
+const component = (overrideProps) => {
+    const props = Object.assign(Object.assign({}, defaultProps), overrideProps);
+    render(React.createElement(EmptyState, Object.assign({}, props)));
+};
+describe("EmptyState", () => {
+    it("renders the title", () => {
+        component();
+        expect(screen.getByText(defaultProps.title)).toBeDefined();
+    });
+    it("renders the description", () => {
+        component();
+        expect(screen.getByText(defaultProps.description)).toBeDefined();
+    });
+    it("renders the icon with default color and large size", () => {
+        component();
+        const icon = screen.getByTestId(defaultProps.icon);
+        const path = icon.findByType(Path);
+        expect(path.props.fill).toBe("hsl(197, 90%, 12%)");
+        expect(icon.props.style).toEqual(expect.arrayContaining([
+            expect.objectContaining({
+                width: 32,
+                height: 32,
+            }),
+        ]));
+    });
+    it("renders the correct icon color when specified", () => __awaiter(void 0, void 0, void 0, function* () {
+        component({ iconColor: "warning" });
+        const icon = screen.getByTestId(defaultProps.icon);
+        const pathElement = icon.findByType(Path);
+        expect(pathElement.props.fill).toBe("hsl(51, 64%, 49%)");
+    }));
+    it("renders the primary action and allows users to interact with it by clicking", () => {
+        component();
+        const button = screen.getByLabelText(defaultProps.primaryAction.label);
+        expect(button).toBeDefined();
+        fireEvent.press(button);
+        expect(primaryOnPress).toHaveBeenCalledTimes(1);
+    });
+    it("renders the secondary action and allows users to interact with it by clicking", () => {
+        component();
+        const button = screen.getByLabelText(defaultProps.secondaryAction.label);
+        expect(button).toBeDefined();
+        fireEvent.press(button);
+        expect(secondaryOnPress).toHaveBeenCalledTimes(1);
+    });
+    it("does render buttons if neither primary nor secondary action is passed in", () => {
+        component({
+            description: "No buttons",
+            primaryAction: undefined,
+            secondaryAction: undefined,
+        });
+        expect(screen.queryAllByRole("button")).toHaveLength(0);
+    });
+});

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.test.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ErrorMessageWrapper } from "./ErrorMessageWrapper";
+import { Text } from "../Text";
+describe("ErrorMessageWrapper", () => {
+    it("should show the child, an error message, and an icon", () => {
+        const errorMessage = "This is an error message";
+        const childText = "Howdy";
+        const screen = render(React.createElement(ErrorMessageWrapper, { message: errorMessage },
+            React.createElement(Text, null, childText)));
+        expect(screen.getByText(childText)).toBeDefined();
+        expect(screen.getByText(errorMessage, { includeHiddenElements: true })).toBeDefined();
+        expect(screen.getByTestId("alert")).toBeDefined();
+    });
+    it("should show the child, but not an error message and an icon", () => {
+        const errorMessage = "This is an error message part 2";
+        const childText = "I'm still here";
+        const screen = render(React.createElement(ErrorMessageWrapper, { message: errorMessage },
+            React.createElement(Text, null, childText)));
+        expect(screen.getByText(childText)).toBeDefined();
+        expect(screen.getByText(errorMessage, { includeHiddenElements: true })).toBeDefined();
+        expect(screen.getByTestId("alert")).toBeDefined();
+        screen.rerender(React.createElement(ErrorMessageWrapper, null,
+            React.createElement(Text, null, childText)));
+        expect(screen.getByText(childText)).toBeDefined();
+        expect(screen.queryByText(errorMessage)).toBeNull();
+        expect(screen.queryByTestId("alert")).toBeNull();
+    });
+});