@jobber/components-native 0.101.3 → 0.101.4

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.101.3",
+    "version": "0.101.4",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -29,9 +29,9 @@
     ],
     "scripts": {
         "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
-        "build": "npm run build:clean && npm run compile",
-        "bootstrap": "npm run build",
-        "prepack": "npm run build",
+        "build": "pnpm run build:clean && pnpm run compile",
+        "bootstrap": "pnpm run build",
+        "prepack": "pnpm run build",
         "watch": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
         "compile": "tsc -p tsconfig.build.json",
         "build:clean": "rm -rf ./dist",
@@ -52,20 +52,26 @@
         "ts-xor": "^1.1.0"
     },
     "devDependencies": {
+        "@babel/runtime": "^7.29.2",
         "@gorhom/bottom-sheet": "^5.2.8",
+        "@jobber/hooks": "2.19.4",
         "@react-native-community/datetimepicker": "^8.4.5",
         "@react-native/babel-preset": "^0.82.1",
-        "@storybook/addon-a11y": "9.1.19",
-        "@storybook/react": "9.1.19",
-        "@storybook/react-native-web-vite": "9.1.19",
+        "@storybook/addon-a11y": "10.3.5",
+        "@storybook/addon-mcp": "^0.4.2",
+        "@storybook/react-native-web-vite": "10.3.5",
         "@testing-library/react-native": "^13.3.3",
+        "@types/jest": "^29.5.14",
         "@types/lodash.chunk": "^4.2.7",
         "@types/lodash.debounce": "^4.0.7",
         "@types/lodash.identity": "^3.0.7",
+        "@types/node": "^22.19.17",
         "@types/react-native-uuid": "^1.4.0",
         "@types/react-test-renderer": "19.1.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
+        "react": "19.1.1",
+        "react-dom": "19.1.1",
         "react-native": "^0.82.1",
         "react-native-gesture-handler": "^2.29.1",
         "react-native-keyboard-controller": "^1.12.0",
@@ -75,17 +81,19 @@
         "react-native-screens": "^4.18.0",
         "react-native-svg": "^15.1.0",
         "react-native-web": "^0.20.0",
-        "react-test-renderer": "^19.1.1",
-        "storybook": "9.1.19"
+        "react-test-renderer": "19.1.1",
+        "storybook": "10.3.5",
+        "vite": "^8.0.9"
     },
     "peerDependencies": {
         "@babel/core": "^7.4.5",
         "@gorhom/bottom-sheet": "^5.2.8",
         "@jobber/design": "*",
+        "@jobber/hooks": ">=2",
         "@react-native-community/datetimepicker": ">=6.7.0",
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
-        "react": "^19",
+        "react": "^19.1.0",
         "react-intl": "^6 || ^7",
         "react-native": ">=0.79.5",
         "react-native-gesture-handler": ">=2.22.0",
@@ -96,5 +104,5 @@
         "react-native-screens": ">=4.18.0",
         "react-native-svg": ">=12.0.0"
     },
-    "gitHead": "1f03d859cb80ae90c91107efbd8a057a30a7f720"
+    "gitHead": "2306bc5ca1ed0a56871602085cc3c4223b9d08d8"
 }

package/dist/src/ActionItem/ActionItem.test.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ActionItem } from "./ActionItem";
+import { Button } from "../Button";
+import { Text } from "../Text";
+describe("ActionItem", () => {
+    const pressHandler = jest.fn();
+    const defaultActionIcon = "longArrowRight";
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+    it("should call onPress when ActionItem is pressed", () => {
+        const text = "Get out of my swamp";
+        const { getByText } = render(React.createElement(ActionItem, { onPress: pressHandler },
+            React.createElement(Text, null, text)));
+        fireEvent.press(getByText(text));
+        expect(pressHandler).toHaveBeenCalled();
+    });
+    it("should should display title when provided", () => {
+        const title = "Profitttt 💰";
+        const { getByText } = render(React.createElement(ActionItem, { title: title }));
+        expect(getByText(title)).toBeDefined();
+    });
+    it("should display icon when provided", () => {
+        const iconName = "calendar";
+        const { getByTestId } = render(React.createElement(ActionItem, { onPress: pressHandler, icon: iconName }));
+        expect(getByTestId(iconName)).toBeDefined();
+    });
+    describe("Action Icon", () => {
+        it("should display default action icon when custom action icon is not provided", () => {
+            const { getByTestId } = render(React.createElement(ActionItem, { onPress: pressHandler }));
+            expect(getByTestId(defaultActionIcon)).toBeDefined();
+        });
+        it("should display custom action icon when provided", () => {
+            const iconName = "calendar";
+            const { getByTestId, queryByTestId } = render(React.createElement(ActionItem, { onPress: pressHandler, actionIcon: iconName }));
+            expect(getByTestId(iconName)).toBeDefined();
+            expect(queryByTestId(defaultActionIcon)).toBeFalsy();
+        });
+        it("should not display action icon when onPress does not exist", () => {
+            const { queryByTestId } = render(React.createElement(ActionItem, { title: "Some title" }));
+            expect(queryByTestId(defaultActionIcon)).toBeFalsy();
+        });
+        it("should display longArrowRight icon when edit name is used", () => {
+            const iconName = "edit";
+            const { getByTestId } = render(React.createElement(ActionItem, { onPress: pressHandler, actionIcon: iconName }));
+            expect(getByTestId(defaultActionIcon)).toBeDefined();
+        });
+        it("should display actual edit icon when editpencil name is used", () => {
+            const iconName = "editpencil";
+            const { getByTestId } = render(React.createElement(ActionItem, { onPress: pressHandler, actionIcon: iconName }));
+            expect(getByTestId("edit")).toBeDefined();
+        });
+    });
+    describe("When child has onPress event", () => {
+        const childPressHandler = jest.fn();
+        beforeEach(() => {
+            childPressHandler.mockClear();
+        });
+        it("should only call child onPress when child is pressed", () => {
+            const buttonLabel = "I am button label";
+            const text = "Some other text chillin";
+            const { getByText } = render(React.createElement(ActionItem, { onPress: pressHandler },
+                React.createElement(Button, { label: buttonLabel, onPress: childPressHandler }),
+                React.createElement(Text, null, text)));
+            fireEvent.press(getByText(buttonLabel));
+            expect(childPressHandler).toHaveBeenCalledTimes(1);
+            expect(pressHandler).toHaveBeenCalledTimes(0);
+        });
+        it("should only call parent onPress when the rest of Parent is pressed", () => {
+            const buttonLabel = "I am button label";
+            const text = "Some other text chillin";
+            const { getByText } = render(React.createElement(ActionItem, { onPress: pressHandler },
+                React.createElement(Button, { label: buttonLabel, onPress: childPressHandler }),
+                React.createElement(Text, null, text)));
+            fireEvent.press(getByText(text));
+            expect(pressHandler).toHaveBeenCalledTimes(1);
+            expect(childPressHandler).toHaveBeenCalledTimes(0);
+        });
+    });
+});

package/dist/src/ActionItem/ActionItemGroup.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ActionItemGroup } from "./ActionItemGroup";
+import { Text } from "../Text";
+describe("ActionItemGroup", () => {
+    const dividerTestId = "Divider";
+    describe("Separate By Dividers", () => {
+        it("should display dividers between children", () => {
+            const text = "Get out of my swamp";
+            const { queryAllByTestId } = render(React.createElement(ActionItemGroup, null,
+                React.createElement(Text, null, text),
+                React.createElement(Text, null, text),
+                React.createElement(Text, null, text)));
+            const dividers = queryAllByTestId(dividerTestId);
+            expect(dividers).toHaveLength(2);
+        });
+        it("should not display divider when only 1 child", () => {
+            const text = "Get out of my swamp";
+            const { queryByTestId } = render(React.createElement(ActionItemGroup, null,
+                React.createElement(Text, null, text)));
+            const dividers = queryByTestId(dividerTestId);
+            expect(dividers).toBeFalsy();
+        });
+    });
+});

package/dist/src/ActionItem/components/ActionItemContainer.test.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ActionItemContainer } from "./ActionItemContainer";
+import { Text } from "../../Text";
+describe("ActionItemContainer", () => {
+    const testID = "actionItemContainer";
+    const text = "some text";
+    it("should render a pressable header", () => {
+        const handlePress = jest.fn();
+        const { getByTestId } = render(React.createElement(ActionItemContainer, { onPress: handlePress, testID: testID },
+            React.createElement(Text, null, text)));
+        const container = getByTestId(testID);
+        expect(container.props.accessibilityRole).toBe("button");
+        fireEvent.press(container);
+        expect(handlePress).toHaveBeenCalled();
+    });
+    it("should render an un-pressable header", () => {
+        const { getByTestId } = render(React.createElement(ActionItemContainer, { testID: testID },
+            React.createElement(Text, null, text)));
+        const container = getByTestId(testID);
+        expect(container.props.accessibilityRole).not.toBe("button");
+        expect(container.props.onPress).toBeUndefined();
+    });
+});

package/dist/src/ActionLabel/ActionLabel.test.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ActionLabel } from "./ActionLabel";
+import { tokens } from "../utils/design";
+const defaultStyles = {
+    fontFamily: "inter-semibold",
+    color: tokens["color-interactive"],
+    textAlign: "center",
+    fontSize: tokens["typography--fontSize-base"],
+    lineHeight: tokens["typography--lineHeight-tight"],
+    letterSpacing: tokens["typography--letterSpacing-base"],
+};
+describe("ActionLabel", () => {
+    it("renders the default action label", () => {
+        const text = "Default Action Label";
+        const { getByText } = render(React.createElement(ActionLabel, null, text));
+        const el = getByText(text);
+        expect(el).toBeDefined();
+        expect(getStyleObject(el)).toMatchObject(defaultStyles);
+    });
+    describe("Variations", () => {
+        it("renders a destructive variation", () => {
+            const text = "Destructive Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { variation: "destructive" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { color: tokens["color-destructive"] }));
+        });
+        it("renders a learning variation", () => {
+            const text = "Learning Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { variation: "learning" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { color: tokens["color-informative"] }));
+        });
+        it("renders an interactiveSubtle variation", () => {
+            const text = "Interactive Subtle Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { variation: "interactiveSubtle" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { color: tokens["color-interactive--subtle"] }));
+        });
+        it("still supports the deprecated subtle variation", () => {
+            const text = "Subtle Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { variation: "subtle" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { color: tokens["color-interactive--subtle"] }));
+        });
+        it("renders an onPrimary variation", () => {
+            const text = "onPrimary Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { variation: "onPrimary" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { color: tokens["color-surface"] }));
+        });
+    });
+    describe("when action label is disabled", () => {
+        it("renders text with disabled color, overriding variation", () => {
+            const text = "Disabled Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { disabled: true, variation: "destructive" }, text));
+            const styles = getStyleObject(getByText(text));
+            expect(styles).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { color: tokens["color-disabled"] }));
+            expect(styles).not.toHaveProperty("color", tokens["color-destructive"]);
+        });
+    });
+    describe("when action label is aligned", () => {
+        it("renders text with left alignment", () => {
+            const text = "Left Aligned Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { align: "start" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { textAlign: "left" }));
+        });
+        it("renders text with right alignment", () => {
+            const text = "Right Aligned Action Label";
+            const { getByText } = render(React.createElement(ActionLabel, { align: "end" }, text));
+            expect(getStyleObject(getByText(text))).toMatchObject(Object.assign(Object.assign({}, defaultStyles), { textAlign: "right" }));
+        });
+    });
+    it("supports nested inline content", () => {
+        const { Text } = require("../Text");
+        const { getByText, toJSON } = render(React.createElement(ActionLabel, null,
+            "Before ",
+            React.createElement(Text, { variation: "interactive" }, "Inner"),
+            " After"));
+        expect(getByText("Inner")).toBeDefined();
+        expect(toJSON()).toMatchSnapshot();
+    });
+});
+function getStyleObject(el) {
+    return el.props.style.reduce((mergedStyles, additionalStyles) => (Object.assign(Object.assign({}, mergedStyles), additionalStyles)), {});
+}

package/dist/src/ActivityIndicator/ActivityIndicator.test.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { ActivityIndicator } from "./index";
+import { tokens } from "../utils/design";
+const testId = "ActivityIndicator";
+describe("ActivityIndicator", () => {
+    it("renders with the default color when no props are provided", () => {
+        const { getByTestId } = render(React.createElement(ActivityIndicator, null));
+        expect(getByTestId(testId).props.color).toBe(tokens["color-greyBlue"]);
+    });
+    it("renders with a custom color", () => {
+        const color = "red";
+        const { getByTestId } = render(React.createElement(ActivityIndicator, { color: color }));
+        expect(getByTestId(testId).props.color).toBe(color);
+    });
+    it("renders with large size", () => {
+        const size = "large";
+        const color = "red";
+        const { getByTestId } = render(React.createElement(ActivityIndicator, { color: color, size: size }));
+        expect(getByTestId(testId).props.size).toBe(size);
+        expect(getByTestId(testId).props.color).toBe(color);
+    });
+});

package/dist/src/AtlantisContext/AtlantisContext.test.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
+import { AtlantisContext, atlantisContextDefaultValues, useAtlantisContext, } from "./AtlantisContext";
+const providerValues = {
+    dateFormat: "MM/DD/YYYY",
+    timeFormat: "hh:mm a",
+    timeZone: "America/Edmonton",
+    locale: "en",
+    isOnline: false,
+    onLogError: _ => {
+        return;
+    },
+    floatSeparators: { decimal: ".", group: "," },
+    currencySymbol: "€",
+    headerHeight: 50,
+    setHeaderHeight: _ => {
+        return;
+    },
+};
+describe("AtlantisContext", () => {
+    describe("No Provider", () => {
+        it("should get the default values", () => {
+            const { result } = renderHook(() => useAtlantisContext());
+            expect(result.current).toMatchObject(atlantisContextDefaultValues);
+        });
+    });
+    describe("With Provider", () => {
+        it("should get the provider values", () => {
+            const { result } = renderHook(() => useAtlantisContext(), {
+                wrapper: ({ children }) => (React.createElement(AtlantisContext.Provider, { value: providerValues }, children)),
+            });
+            expect(result.current).toMatchObject(providerValues);
+        });
+    });
+});

package/dist/src/AtlantisThemeContext/AtlantisThemeContext.test.js

@@ -0,0 +1,65 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from "react";
+import { act, renderHook } from "@testing-library/react-native";
+import { darkTokens, iosTokens } from "@jobber/design";
+import merge from "lodash/merge";
+import { AtlantisThemeContextProvider, useAtlantisTheme, } from "./AtlantisThemeContext";
+const expectedDarkTokens = merge({}, iosTokens, darkTokens);
+const expectedLightTokens = iosTokens;
+function Wrapper({ children, dangerouslyOverrideTheme, }) {
+    return (React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+}
+function WrapperWithOverride({ children, dangerouslyOverrideTheme, }) {
+    return (React.createElement(Wrapper, null,
+        React.createElement(AtlantisThemeContextProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children)));
+}
+describe("ThemeContext", () => {
+    it("defaults to the light theme", () => {
+        const { result } = renderHook(useAtlantisTheme, {
+            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
+        });
+        expect(result.current.theme).toBe("light");
+        expect(result.current.tokens).toEqual(expectedLightTokens);
+    });
+    it("updates the theme and tokens", () => __awaiter(void 0, void 0, void 0, function* () {
+        const { result } = renderHook(useAtlantisTheme, {
+            wrapper: (props) => (React.createElement(Wrapper, Object.assign({}, props))),
+        });
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
+        expect(result.current.theme).toBe("dark");
+        expect(result.current.tokens).toEqual(expectedDarkTokens);
+        yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("light"); }));
+        expect(result.current.theme).toBe("light");
+        expect(result.current.tokens).toEqual(expectedLightTokens);
+    }));
+    describe("when theme is forced for provider", () => {
+        it("ignores updates to the global theme", () => __awaiter(void 0, void 0, void 0, function* () {
+            const { result } = renderHook(useAtlantisTheme, {
+                wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: "light" }))),
+            });
+            // Update the global theme
+            yield act(() => __awaiter(void 0, void 0, void 0, function* () { return result.current.setTheme("dark"); }));
+            // This hook shouldn't be affected by it because it's set to the light theme
+            expect(result.current.theme).toBe("light");
+            expect(result.current.tokens).toEqual(expectedLightTokens);
+        }));
+        it.each([
+            { defaultTheme: "light", expectedTokens: expectedLightTokens },
+            { defaultTheme: "dark", expectedTokens: expectedDarkTokens },
+        ])("provides the dangerouslyOverrideTheme $defaultTheme tokens", ({ defaultTheme, expectedTokens }) => {
+            const { result } = renderHook(useAtlantisTheme, {
+                wrapper: (props) => (React.createElement(WrapperWithOverride, Object.assign({}, props, { dangerouslyOverrideTheme: defaultTheme }))),
+            });
+            expect(result.current.theme).toBe(defaultTheme);
+            expect(result.current.tokens).toEqual(expectedTokens);
+        });
+    });
+});

package/dist/src/AtlantisThemeContext/buildThemedStyles.test.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { renderHook } from "@testing-library/react-native";
+import { buildThemedStyles } from "./buildThemedStyles";
+import { AtlantisThemeContextProvider } from "./AtlantisThemeContext";
+describe("buildThemedStyles", () => {
+    const wrapper = ({ children }) => (React.createElement(AtlantisThemeContextProvider, null, children));
+    it("creates styles using theme tokens", () => {
+        const useTestStyles = buildThemedStyles(tokens => ({
+            container: {
+                backgroundColor: tokens["color-surface"],
+                padding: tokens["space-base"],
+            },
+        }));
+        const { result } = renderHook(() => useTestStyles(), { wrapper });
+        expect(result.current).toEqual({
+            container: {
+                backgroundColor: expect.any(String),
+                padding: expect.any(Number),
+            },
+        });
+    });
+    it("memoizes styles and only updates when tokens change", () => {
+        const styleFactory = jest.fn(tokens => ({
+            container: {
+                backgroundColor: tokens["color-surface"],
+            },
+        }));
+        const useTestStyles = buildThemedStyles(styleFactory);
+        const { result, rerender } = renderHook(() => useTestStyles(), { wrapper });
+        // Initial render should call styleFactory
+        expect(styleFactory).toHaveBeenCalledTimes(1);
+        const initialResult = result.current;
+        // Rerender without token changes should not call styleFactory again
+        rerender({ wrapper });
+        expect(styleFactory).toHaveBeenCalledTimes(1);
+        expect(result.current).toBe(initialResult);
+    });
+    it("handles empty style objects", () => {
+        const useTestStyles = buildThemedStyles(() => ({}));
+        const { result } = renderHook(() => useTestStyles(), { wrapper });
+        expect(result.current).toEqual({});
+    });
+});

package/dist/src/AutoLink/AutoLink.test.js

@@ -0,0 +1,133 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Linking } from "react-native";
+import { copyTextToClipboard } from "./clipboard";
+import { AutoLink } from "./AutoLink";
+const mockOpenUrl = jest.spyOn(Linking, "openURL").mockImplementation();
+jest.mock("./clipboard", () => {
+    return {
+        copyTextToClipboard: jest.fn(),
+    };
+});
+describe("AutoLink", () => {
+    beforeEach(() => {
+        mockOpenUrl.mockClear();
+    });
+    describe("Urls", () => {
+        it("should find and link url amongst other text", () => {
+            const linkText = "getjobber.com";
+            const nonLinkText = "The best website is ";
+            const { getByText } = render(React.createElement(AutoLink, null, `${nonLinkText}${linkText}`));
+            fireEvent.press(getByText(linkText));
+            expect(mockOpenUrl).toHaveBeenCalledWith(`http://${linkText}`);
+        });
+        it("should find and link a url without other text around it", () => {
+            const linkText = "getjobber.com";
+            const { getByText } = render(React.createElement(AutoLink, null, linkText));
+            fireEvent.press(getByText(linkText));
+            expect(mockOpenUrl).toHaveBeenCalled();
+        });
+        it("should copy link onLongPress", () => {
+            const linkText = "getjobber.com";
+            const nonLinkText = "The best website is ";
+            const { getByText } = render(React.createElement(AutoLink, null, `${nonLinkText}${linkText}`));
+            fireEvent(getByText(linkText), "onLongPress");
+            const expectedToastConfig = {
+                message: "URL copied",
+                bottomTabsVisible: true,
+            };
+            expect(copyTextToClipboard).toHaveBeenCalledWith(`http://${linkText}`, expectedToastConfig);
+            expect(mockOpenUrl).not.toHaveBeenCalled();
+        });
+        it("should skip linking url if linkUrls is false", () => {
+            const linkText = "getjobber.com";
+            const nonLinkText = "The best website is ";
+            const { getByText } = render(React.createElement(AutoLink, { urls: false }, `${nonLinkText}${linkText}`));
+            fireEvent.press(getByText(RegExp(linkText, "i")));
+            expect(mockOpenUrl).not.toHaveBeenCalled();
+        });
+    });
+    describe("Emails", () => {
+        it("should find and link emails in text", () => {
+            const nonEmailText = "The best email is ";
+            const emailText = "test@example.com";
+            const { getByText } = render(React.createElement(AutoLink, null, `${nonEmailText}${emailText}`));
+            fireEvent.press(getByText(emailText));
+            expect(mockOpenUrl).toHaveBeenCalledWith(`mailto:${encodeURIComponent(emailText)}`);
+        });
+        it("should find and link an email without other text around it", () => {
+            const emailText = "test@example.com";
+            const { getByText } = render(React.createElement(AutoLink, null, emailText));
+            fireEvent.press(getByText(emailText));
+            expect(mockOpenUrl).toHaveBeenCalledWith(`mailto:${encodeURIComponent(emailText)}`);
+        });
+        it("should copy email onLongPress", () => {
+            const nonEmailText = "The best email is ";
+            const emailText = "test@example.com";
+            const { getByText } = render(React.createElement(AutoLink, null, `${nonEmailText}${emailText}`));
+            fireEvent(getByText(emailText), "onLongPress");
+            const expectedToastConfig = {
+                message: "Email copied",
+                bottomTabsVisible: true,
+            };
+            expect(copyTextToClipboard).toHaveBeenCalledWith(emailText, expectedToastConfig);
+            expect(mockOpenUrl).not.toHaveBeenCalled();
+        });
+        it("should skip linking email if linkEmails is false", () => {
+            const nonEmailText = "The best email is ";
+            const emailText = "test@example.com";
+            const { getByText } = render(React.createElement(AutoLink, { email: false }, `${nonEmailText}${emailText}`));
+            fireEvent.press(getByText(RegExp(emailText, "i")));
+            expect(mockOpenUrl).not.toHaveBeenCalled();
+        });
+    });
+    describe("Phone Numbers", () => {
+        it("should find and link phone numbers in text", () => {
+            const nonPhoneText = "The best phone number is ";
+            const phoneText = "902-555-5555";
+            const { getByText } = render(React.createElement(AutoLink, null, `${nonPhoneText}${phoneText}`));
+            const expectedPhone = phoneText.replace(/-/g, "");
+            fireEvent.press(getByText(phoneText));
+            expect(mockOpenUrl).toHaveBeenCalledWith(`tel:${expectedPhone}`);
+        });
+        it("should find and link a phone number without other text around it", () => {
+            const phoneText = "902-555-5555";
+            const { getByText } = render(React.createElement(AutoLink, null, phoneText));
+            const expectedPhone = phoneText.replace(/-/g, "");
+            fireEvent.press(getByText(phoneText));
+            expect(mockOpenUrl).toHaveBeenCalledWith(`tel:${expectedPhone}`);
+        });
+        it("should copy phone number onLongPress", () => {
+            const nonPhoneText = "The best phone number is ";
+            const phoneText = "902-555-5555";
+            const { getByText } = render(React.createElement(AutoLink, null, `${nonPhoneText}${phoneText}`));
+            fireEvent(getByText(phoneText), "onLongPress");
+            const expectedToastConfig = {
+                message: "Phone number copied",
+                bottomTabsVisible: true,
+            };
+            expect(copyTextToClipboard).toHaveBeenCalledWith(phoneText.replace(/-/g, ""), expectedToastConfig);
+            expect(mockOpenUrl).not.toHaveBeenCalled();
+        });
+        it("should skip linking phone number if linkPhones is false", () => {
+            const nonPhoneText = "The best phone number is ";
+            const phoneText = "902-555-5555";
+            const { getByText } = render(React.createElement(AutoLink, { phone: false }, `${nonPhoneText}${phoneText}`));
+            fireEvent.press(getByText(RegExp(phoneText, "i")));
+            expect(mockOpenUrl).not.toHaveBeenCalled();
+        });
+    });
+    it("should properly link a combination of urls, emails and phone numbers", () => {
+        const phoneText = "902-555-5555";
+        const emailText = "test@example.com";
+        const urlText = "getjobber.com";
+        const { getByText } = render(React.createElement(AutoLink, null, `${phoneText} ${emailText} ${urlText}`));
+        const expectedPhone = phoneText.replace(/-/g, "");
+        fireEvent.press(getByText(phoneText));
+        expect(mockOpenUrl).toHaveBeenCalledWith(`tel:${expectedPhone}`);
+        fireEvent.press(getByText(emailText));
+        expect(mockOpenUrl).toHaveBeenCalledWith(`mailto:${encodeURIComponent(emailText)}`);
+        fireEvent.press(getByText(urlText));
+        expect(mockOpenUrl).toHaveBeenCalledWith(`http://${urlText}`);
+    });
+});

package/dist/src/AutoLink/components/Link/Link.test.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Link } from "./Link";
+describe("Link", () => {
+    const textLink = "getjobber.com";
+    const mockPress = jest.fn();
+    it("should call the onPress callback", () => {
+        const { getAllByText } = render(React.createElement(Link, { onPress: mockPress }, textLink));
+        fireEvent.press(getAllByText("getjobber.com")[0]);
+        expect(mockPress).toHaveBeenCalled();
+    });
+    it("should call the longPress callback", () => {
+        const mockLongPress = jest.fn();
+        const { getAllByText } = render(React.createElement(Link, { onPress: mockPress, onLongPress: mockLongPress }, textLink));
+        fireEvent(getAllByText(textLink)[0], "onLongPress");
+        expect(mockLongPress).toHaveBeenCalled();
+    });
+});