@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/Typography/Typography.test.js

@@ -0,0 +1,225 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { I18nManager } from "react-native";
+import { Typography } from "./Typography";
+it("renders text with no additional props", () => {
+    const typography = render(React.createElement(Typography, null, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with regular style", () => {
+    const typography = render(React.createElement(Typography, { fontStyle: "regular" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with bold style", () => {
+    const typography = render(React.createElement(Typography, { fontWeight: "bold" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with italic style", () => {
+    const typography = render(React.createElement(Typography, { fontStyle: "italic" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with bold weight and italic style", () => {
+    const typography = render(React.createElement(Typography, { fontStyle: "italic", fontWeight: "bold" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with bold style and display as fontFamily", () => {
+    const typography = render(React.createElement(Typography, { fontFamily: "display", fontWeight: "bold" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with extraBold weight and display as fontFamily", () => {
+    const typography = render(React.createElement(Typography, { fontFamily: "display", fontWeight: "extraBold" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with black style and display as fontFamily", () => {
+    const typography = render(React.createElement(Typography, { fontFamily: "display", fontWeight: "black" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with uppercase transform", () => {
+    const typography = render(React.createElement(Typography, { transform: "uppercase" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with lowercase transform", () => {
+    const typography = render(React.createElement(Typography, { transform: "lowercase" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("supports nested children and applies transform only to string children", () => {
+    const typography = render(React.createElement(Typography, { transform: "uppercase" },
+        "before ",
+        React.createElement(Typography, { fontWeight: "bold" }, "Inner"),
+        " after"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("allows child Typography to control its own transform", () => {
+    const view = render(React.createElement(Typography, { transform: "uppercase" },
+        "before ",
+        React.createElement(Typography, { fontWeight: "bold", transform: "lowercase" }, "Inner"),
+        " after")).toJSON();
+    expect(view).toMatchSnapshot();
+});
+it("supports multi-level nesting across Typography and Text", () => {
+    const view = render(React.createElement(Typography, { transform: "uppercase" },
+        "level1 ",
+        React.createElement(Typography, null,
+            "and ",
+            React.createElement(Typography, { transform: "lowercase" }, "INNER")),
+        " end")).toJSON();
+    expect(view).toMatchSnapshot();
+});
+it("applies transform to parent strings only", () => {
+    const { getByText } = render(React.createElement(Typography, { transform: "uppercase" },
+        "test ",
+        React.createElement(Typography, null, "inner")));
+    expect(getByText(/TEST/)).toBeDefined();
+    expect(getByText("inner")).toBeDefined();
+});
+it("allows child transform to override parent transform", () => {
+    const { getByText } = render(React.createElement(Typography, { transform: "uppercase" },
+        "before ",
+        React.createElement(Typography, { transform: "lowercase" }, "INNER"),
+        " after"));
+    expect(getByText(/BEFORE/)).toBeDefined();
+    expect(getByText("inner")).toBeDefined();
+    expect(getByText(/AFTER/)).toBeDefined();
+});
+it("renders text with white color", () => {
+    const typography = render(React.createElement(Typography, { color: "white" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with green color", () => {
+    const typography = render(React.createElement(Typography, { color: "green" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with semantic color", () => {
+    const typography = render(React.createElement(Typography, { color: "inactiveOnSurface" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with default color", () => {
+    const typography = render(React.createElement(Typography, { color: "default" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with center align", () => {
+    const typography = render(React.createElement(Typography, { align: "center" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text respecting the text direction", () => {
+    I18nManager.isRTL = true;
+    const typography = render(React.createElement(Typography, null, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+    I18nManager.isRTL = false;
+});
+it("renders text with small size", () => {
+    const typography = render(React.createElement(Typography, { size: "small" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with large size", () => {
+    const typography = render(React.createElement(Typography, { size: "large" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with default size", () => {
+    const typography = render(React.createElement(Typography, { size: "default" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with multiple properties", () => {
+    const typography = render(React.createElement(Typography, { fontWeight: "bold", size: "large", color: "white" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with line height override", () => {
+    const typography = render(React.createElement(Typography, { lineHeight: "jumbo" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with letter spacing", () => {
+    const typography = render(React.createElement(Typography, { letterSpacing: "loose" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with reverseTheme true with reversible color", () => {
+    const typography = render(React.createElement(Typography, { reverseTheme: true, color: "success" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with reverseTheme false with reversible color", () => {
+    const typography = render(React.createElement(Typography, { reverseTheme: false, color: "success" }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with adjustsFontSizeToFit set to true", () => {
+    const typography = render(React.createElement(Typography, { adjustsFontSizeToFit: true, maxLines: "single" }, "Test Text that happens to be longer than the rest of the text. This just keeps going on and on. maxLines being set will make this work its magic"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text accessibilityRole", () => {
+    const typography = render(React.createElement(Typography, { accessibilityRole: "text" }, "Test Text"));
+    expect(typography.getByRole("text")).toBeDefined();
+});
+it("renders header accessibilityRole", () => {
+    const typography = render(React.createElement(Typography, { accessibilityRole: "header" }, "Test Text"));
+    expect(typography.getByRole("header")).toBeDefined();
+});
+it("renders text using the maxLines is also passed", () => {
+    const typography = render(React.createElement(Typography, { maxLines: "small" }, "Test Text that happens to be longer than the rest of the text. This just keeps going on and on. maxLines being set will make this work its magic"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text with strikethough styling", () => {
+    const typography = render(React.createElement(Typography, { strikeThrough: true }, "Test Text"));
+    expect(typography.toJSON()).toMatchSnapshot();
+});
+it("renders text that is inaccessible", () => {
+    const typography = render(React.createElement(Typography, { hideFromScreenReader: true }, "Test Text"));
+    expect(typography.root.props).toEqual(expect.objectContaining({
+        accessible: false,
+        accessibilityRole: "none",
+        importantForAccessibility: "no-hide-descendants",
+    }));
+});
+it("applies custom UNSAFE_style to text", () => {
+    const customStyle = { color: "red", fontSize: 20 };
+    const typography = render(React.createElement(Typography, { UNSAFE_style: { textStyle: customStyle } }, "Test Text"));
+    const textElement = typography.getByText("Test Text");
+    expect(textElement.props.style).toEqual(expect.arrayContaining([expect.objectContaining(customStyle)]));
+});
+describe("underline", () => {
+    it.each(["solid", "double", "dotted", "dashed"])("renders text with %s underline", underlineStyle => {
+        const typography = render(React.createElement(Typography, { underline: underlineStyle }, "Test Text"));
+        expect(typography.toJSON()).toMatchSnapshot();
+    });
+});
+describe("onTextLayout", () => {
+    it("calls onTextLayout callback when text layout event occurs", () => {
+        const onTextLayoutMock = jest.fn();
+        const { getByRole } = render(React.createElement(Typography, { onTextLayout: onTextLayoutMock }, "Test Text"));
+        const textElement = getByRole("text");
+        const mockEvent = {
+            nativeEvent: {
+                lines: [
+                    {
+                        text: "Test Text",
+                        x: 0,
+                        y: 0,
+                        width: 100,
+                        height: 20,
+                        ascender: 15,
+                        descender: -5,
+                        capHeight: 14,
+                        xHeight: 10,
+                    },
+                ],
+            },
+        };
+        fireEvent(textElement, "onTextLayout", mockEvent);
+        expect(onTextLayoutMock).toHaveBeenCalledTimes(1);
+        expect(onTextLayoutMock).toHaveBeenCalledWith(mockEvent);
+    });
+});
+describe("TypographyGestureDetector", () => {
+    it("wraps text with TypographyGestureDetector by default (collapsable=false)", () => {
+        const { getByRole } = render(React.createElement(Typography, null, "Test Text"));
+        const textElement = getByRole("text");
+        expect(textElement.props.collapsable).toBe(false);
+    });
+    it("wraps text with TypographyGestureDetector (collapsable=false) when selectable=true", () => {
+        const { getByRole } = render(React.createElement(Typography, { selectable: true }, "Test Text"));
+        const textElement = getByRole("text");
+        expect(textElement.props.collapsable).toBe(false);
+    });
+    it("does not wrap text with TypographyGestureDetector when selectable=false", () => {
+        const { getByRole } = render(React.createElement(Typography, { selectable: false }, "Test Text"));
+        const textElement = getByRole("text");
+        expect(textElement.props.collapsable).toBeUndefined();
+    });
+});

package/dist/src/hooks/useAtlantisI18n/useAtlantisI18n.test.js

@@ -0,0 +1,103 @@
+import { renderHook } from "@testing-library/react-native";
+import { useAtlantisI18n } from ".";
+import en from "./locales/en.json";
+import es from "./locales/es.json";
+import * as context from "../../AtlantisContext";
+jest.mock("../../AtlantisContext", () => (Object.assign({ 
+    // need to mark this as a module so that we can spy on it
+    __esModule: true }, jest.requireActual("../../AtlantisContext"))));
+const spy = jest.spyOn(context, "useAtlantisContext");
+const testDate = new Date("2020-01-01T00:00:00.000Z");
+const dateAfterSpringForward = new Date("2020-04-10T00:00:00.000Z");
+beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(testDate);
+});
+describe("useAtlantisI18n", () => {
+    it("should return english by default", () => {
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.t("cancel")).toBe("Cancel");
+    });
+    it("should interpolate the strings wrapped in {}", () => {
+        const { result } = renderHook(useAtlantisI18n);
+        expect(result.current.t("FormatFile.preview", { item: "🔱" })).toBe("Preview 🔱");
+    });
+    describe("Español", () => {
+        it("should return español", () => {
+            spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { locale: "es" }));
+            const { result } = renderHook(useAtlantisI18n);
+            expect(result.current.t("cancel")).toBe("Cancelar");
+        });
+    });
+    describe("Unsupported language", () => {
+        it("should return the english translation", () => {
+            spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { locale: "fr" }));
+            const { result } = renderHook(useAtlantisI18n);
+            expect(result.current.t("cancel")).toBe("Cancel");
+        });
+    });
+    describe("Translation files", () => {
+        it("should have the same keys for en and es", () => {
+            expect(Object.keys(en)).toEqual(Object.keys(es));
+        });
+    });
+    describe("formatDate", () => {
+        it("should return the formatted date", () => {
+            const { result } = renderHook(useAtlantisI18n);
+            expect(result.current.formatDate(testDate)).toBe("Jan 1, 2020");
+        });
+        it("should return the date formatted for es", () => {
+            spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { locale: "es" }));
+            const { result } = renderHook(useAtlantisI18n);
+            expect(result.current.formatDate(testDate)).toBe("1 ene 2020");
+        });
+        describe("Timezone", () => {
+            it.each([
+                ["America/New_York", "Dec 31, 2019"],
+                ["America/Chicago", "Dec 31, 2019"],
+                ["America/Denver", "Dec 31, 2019"],
+                ["Europe/London", "Jan 1, 2020"],
+                ["Australia/Sydney", "Jan 1, 2020"],
+            ])("should return the %s time", (timeZone, expected) => {
+                spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { timeZone }));
+                const { result } = renderHook(useAtlantisI18n);
+                expect(result.current.formatDate(testDate)).toBe(expected);
+            });
+        });
+    });
+    describe("formatTime", () => {
+        it("should return the formatted time", () => {
+            const { result } = renderHook(useAtlantisI18n);
+            expect(result.current.formatTime(testDate)).toBe("12:00 AM");
+        });
+        it("should return the date formatted for es", () => {
+            spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { locale: "es" }));
+            const { result } = renderHook(useAtlantisI18n);
+            expect(result.current.formatTime(testDate)).toBe("00:00");
+        });
+        describe("Timezone", () => {
+            it.each([
+                ["America/New_York", "7:00 PM"],
+                ["America/Chicago", "6:00 PM"],
+                ["America/Denver", "5:00 PM"],
+                ["Europe/London", "12:00 AM"],
+                ["Australia/Sydney", "11:00 AM"],
+            ])("should return the %s zoned time", (timeZone, expected) => {
+                spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { timeZone }));
+                const { result } = renderHook(useAtlantisI18n);
+                expect(result.current.formatTime(testDate)).toBe(expected);
+            });
+            it.each([
+                ["America/New_York", "8:00 PM"],
+                ["America/Chicago", "7:00 PM"],
+                ["America/Denver", "6:00 PM"],
+                ["Europe/London", "1:00 AM"],
+                ["Australia/Sydney", "10:00 AM"],
+            ])("should return the %s spring zoned time", (timeZone, expected) => {
+                spy.mockReturnValueOnce(Object.assign(Object.assign({}, context.atlantisContextDefaultValues), { timeZone }));
+                const { result } = renderHook(useAtlantisI18n);
+                expect(result.current.formatTime(dateAfterSpringForward)).toBe(expected);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,83 @@
+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 * as fs from "fs/promises";
+import * as allExports from "../../index";
+jest.mock("../../AutoLink/clipboard", () => {
+    return {
+        copyTextToClipboard: jest.fn(),
+    };
+});
+describe("meta", () => {
+    // If this test fails, please update meta.json accordingly.
+    it("verifies that the meta.json file is up to date", () => __awaiter(void 0, void 0, void 0, function* () {
+        const meta = yield fs.readFile(`${__dirname}/meta.json`, "utf-8");
+        const allNames = findComponentNamesDeep(allExports);
+        allNames.sort();
+        expect(JSON.parse(meta)).toStrictEqual({
+            exportedComponents: allNames,
+        });
+    }));
+});
+// NOTE: Keep this in sync with components/src/utils/meta/meta.test.tsx
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isComponent(name, value) {
+    const isFirstLetterUppercase = /^[A-Z]/.test(name);
+    const isFunctionComponent = typeof value === "function";
+    return isFirstLetterUppercase && isFunctionComponent;
+}
+// NOTE: Keep this in sync with components/src/utils/meta/meta.test.tsx
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isContext(value) {
+    return (value &&
+        typeof value === "object" &&
+        Object.prototype.hasOwnProperty.call(value, "Provider") &&
+        Object.prototype.hasOwnProperty.call(value, "Consumer"));
+}
+// NOTE: Keep this in sync with components/src/utils/meta/meta.test.tsx
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isForwardedRef(name, value) {
+    const isFirstLetterUppercase = /^[A-Z]/.test(name);
+    return (isFirstLetterUppercase &&
+        value &&
+        typeof value === "object" &&
+        typeof value.render === "function");
+}
+// NOTE: Keep this in sync with components/src/utils/meta/meta.test.tsx
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isMemoizedComponent(name, value) {
+    const isFirstLetterUppercase = /^[A-Z]/.test(name);
+    return (isFirstLetterUppercase &&
+        value &&
+        typeof value === "object" &&
+        typeof value.$$typeof === "symbol" &&
+        value.$$typeof.toString() === "Symbol(react.memo)" &&
+        typeof value.type === "function");
+}
+// NOTE: Keep this in sync with components/src/utils/meta/meta.test.tsx
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function findComponentNamesDeep(objectOrFunction, name) {
+    const entries = [...Object.entries(objectOrFunction)];
+    return entries.reduce((allNames, [k, v]) => {
+        if (isContext(v)) {
+            allNames.push(`${k}.Provider`, `${k}.Consumer`);
+        }
+        else if (isForwardedRef(k, v) || isMemoizedComponent(k, v)) {
+            const thisName = name ? `${name}.${k}` : k;
+            allNames.push(thisName);
+        }
+        else if (isComponent(k, v)) {
+            const thisName = name ? `${name}.${k}` : k;
+            allNames.push(thisName);
+            const childComponents = findComponentNamesDeep(v, k);
+            allNames.push(...childComponents);
+        }
+        return allNames;
+    }, []);
+}

package/dist/tsconfig.build.json

@@ -3,5 +3,9 @@
     "compilerOptions": {
         // Exclude "@jobber/hooks" from paths to avoid building hooks from src
         "paths": {}
-    }
+    },
+    "exclude": [
+        "*.test.*",
+        "**/*.stories.tsx"
+    ]
 }