@jobber/components-native 0.101.3 → 0.101.4

package/dist/src/InputFieldWrapper/InputFieldWrapper.test.js

@@ -0,0 +1,279 @@
+import React from "react";
+import { fireEvent, render, renderHook, screen, } from "@testing-library/react-native";
+import { Text } from "react-native";
+import { InputFieldWrapper, useCommonInputStyles } from ".";
+import { useStyles } from "./InputFieldWrapper.style";
+import { INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID, INPUT_FIELD_WRAPPER_SPINNER_TEST_ID, } from "./InputFieldWrapper";
+import { useTypographyStyles } from "../Typography";
+const mockLabel = { label: "$" };
+let styles;
+let commonInputStyles;
+let typographyStyles;
+beforeAll(() => {
+    const stylesHook = renderHook(() => useStyles());
+    const commonInputStylesHook = renderHook(() => useCommonInputStyles());
+    const typographyStylesHook = renderHook(() => useTypographyStyles());
+    styles = stylesHook.result.current;
+    commonInputStyles = commonInputStylesHook.result.current;
+    typographyStyles = typographyStylesHook.result.current;
+});
+function renderInputFieldWrapper(props) {
+    return render(React.createElement(InputFieldWrapper, Object.assign({}, props),
+        React.createElement(Text, null, "Test")));
+}
+function renderWithPrefixLabel(hasValue) {
+    return renderInputFieldWrapper({ prefix: mockLabel, hasValue });
+}
+function renderWithSuffixLabel(hasValue) {
+    return renderInputFieldWrapper({ suffix: mockLabel, hasValue });
+}
+const clearInput = "Clear input";
+// eslint-disable-next-line max-statements
+describe("InputFieldWrapper", () => {
+    it("renders an invalid InputFieldWrapper", () => {
+        const { getByTestId } = renderInputFieldWrapper({ invalid: true });
+        expect(getByTestId("ATL-InputFieldWrapper").props.style).toContainEqual(styles.inputInvalid);
+    });
+    it("renders an invalid InputFieldWrapper with non-empty string", () => {
+        const invalid = "invalid string test";
+        const { getByText, getByTestId } = renderInputFieldWrapper({
+            invalid,
+        });
+        expect(getByTestId("ATL-InputFieldWrapper").props.style).toContainEqual(styles.inputInvalid);
+        expect(getByText(invalid, { includeHiddenElements: true })).toBeDefined();
+    });
+    it("renders a valid InputFieldWrapper with empty string", () => {
+        const { getByTestId } = renderInputFieldWrapper({ invalid: "" });
+        expect(getByTestId("ATL-InputFieldWrapper").props.style).not.toContainEqual(styles.inputInvalid);
+    });
+    it("renders a disabled InputFieldWrapper", () => {
+        const { getByTestId } = renderInputFieldWrapper({ disabled: true });
+        expect(getByTestId("ATL-InputFieldWrapper").props.style).toContainEqual({
+            backgroundColor: "hsl(0, 0%, 93%)",
+        });
+    });
+    it("renders a InputFieldWrapper with placeholder", () => {
+        const placeholder = "test";
+        const { getByText } = renderInputFieldWrapper({ placeholder });
+        expect(getByText(placeholder, { includeHiddenElements: true })).toBeTruthy();
+    });
+    it("renders a prefix icon when specified", () => {
+        const { getByTestId } = renderInputFieldWrapper({
+            prefix: { icon: "invoice" },
+        });
+        expect(getByTestId("invoice")).toBeDefined();
+    });
+    it("renders a suffix icon when specified", () => {
+        const { getByTestId } = renderInputFieldWrapper({
+            suffix: { icon: "invoice" },
+        });
+        expect(getByTestId("invoice")).toBeDefined();
+    });
+    describe("when hasValue", () => {
+        it("renders a prefix label", () => {
+            const { getByText } = renderWithPrefixLabel(true);
+            expect(getByText(mockLabel.label)).toBeDefined();
+        });
+        it("renders a suffix label", () => {
+            const { getByText } = renderWithSuffixLabel(true);
+            expect(getByText(mockLabel.label)).toBeDefined();
+        });
+    });
+    describe("when not hasValue", () => {
+        it("does not render a prefix label", () => {
+            const { queryByText } = renderWithPrefixLabel(false);
+            expect(queryByText(mockLabel.label)).toBeNull();
+        });
+        it("does not render a suffix label", () => {
+            const { queryByText } = renderWithSuffixLabel(false);
+            expect(queryByText(mockLabel.label)).toBeNull();
+        });
+    });
+    describe("ClearAction", () => {
+        it("renders the Clear Action Button when showClearAction is true", () => {
+            const { getByLabelText } = renderInputFieldWrapper({
+                showClearAction: true,
+            });
+            expect(getByLabelText(clearInput)).toBeDefined();
+        });
+        it("does not render the Clear Action Button when showClearAction is false", () => {
+            const { queryByLabelText } = renderInputFieldWrapper({
+                showClearAction: false,
+            });
+            expect(queryByLabelText(clearInput)).toBeNull();
+        });
+        it("calls onClear when the Clear Action button is pressed", () => {
+            const onClear = jest.fn();
+            const { getByLabelText } = renderInputFieldWrapper({
+                showClearAction: true,
+                onClear: onClear,
+            });
+            fireEvent(getByLabelText(clearInput), "press");
+            expect(onClear).toHaveBeenCalled();
+        });
+    });
+    describe("Custom Styling", () => {
+        it("has the default container styling when no style override is provided", () => {
+            const { getByTestId } = renderInputFieldWrapper({});
+            const container = getByTestId("ATL-InputFieldWrapper");
+            expect(container.props.style).toContainEqual(Object.assign(Object.assign({}, commonInputStyles.container), { flexDirection: "column" }));
+        });
+        it("shows the container style override when provided", () => {
+            const styleOverride = {
+                container: {
+                    backgroundColor: "purple",
+                    width: "50%",
+                },
+            };
+            const { getByTestId } = renderInputFieldWrapper({
+                styleOverride,
+            });
+            const container = getByTestId("ATL-InputFieldWrapper");
+            const flattenedStyle = container.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle.backgroundColor).toEqual(styleOverride.container.backgroundColor);
+            expect(flattenedStyle.width).toEqual(styleOverride.container.width);
+            expect(flattenedStyle.borderColor).toEqual(commonInputStyles.container.borderColor);
+            expect(flattenedStyle.marginVertical).toEqual(commonInputStyles.container.marginVertical);
+        });
+        it("has the default placeholder styling when no style override is provided", () => {
+            const placeholderText = "myplaceholder";
+            const { getByText } = renderInputFieldWrapper({
+                placeholder: placeholderText,
+                focused: true,
+            });
+            const placeholder = getByText(placeholderText, {
+                includeHiddenElements: true,
+            });
+            expect(placeholder.props.style).toContainEqual(typographyStyles.subdued);
+            expect(placeholder.props.style).toContainEqual(typographyStyles.defaultSize);
+        });
+        it("shows the placeholder style override when provided", () => {
+            const placeholderText = "myplaceholder";
+            const styleOverride = {
+                placeholderText: {
+                    color: "purple",
+                    fontSize: 30,
+                },
+            };
+            const { getByText } = renderInputFieldWrapper({
+                placeholder: placeholderText,
+                styleOverride,
+            });
+            const placeholder = getByText(placeholderText, {
+                includeHiddenElements: true,
+            });
+            const flattenedStyle = placeholder.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle.color).toEqual(styleOverride.placeholderText.color);
+            expect(flattenedStyle.fontSize).toEqual(styleOverride.placeholderText.fontSize);
+        });
+    });
+    describe("Toolbar", () => {
+        it("renders a toolbar on focused", () => {
+            const { getByText } = renderInputFieldWrapper({
+                focused: true,
+                toolbar: React.createElement(Text, null, "I am a tool"),
+            });
+            expect(getByText("I am a tool")).toBeDefined();
+        });
+        it("does not render a toolbar when not focused", () => {
+            const { queryByText } = renderInputFieldWrapper({
+                focused: false,
+                toolbar: React.createElement(Text, null, "I am a tool"),
+            });
+            expect(queryByText("I am a tool")).toBeNull();
+        });
+        it("does not render a toolbar when focused and toolbar is not provided", () => {
+            const { getByText, queryByText, rerender } = renderInputFieldWrapper({
+                focused: true,
+                toolbar: React.createElement(Text, null, "I am a tool"),
+            });
+            expect(getByText("I am a tool")).toBeDefined();
+            rerender(React.createElement(InputFieldWrapper, { focused: true },
+                React.createElement(Text, null, "Test")));
+            expect(queryByText("I am a tool")).toBeNull();
+        });
+        it("renders a toolbar when toolbarVisibility is always", () => {
+            const { getByText } = renderInputFieldWrapper({
+                focused: false,
+                toolbar: React.createElement(Text, null, "I am a tool"),
+                toolbarVisibility: "always",
+            });
+            expect(getByText("I am a tool")).toBeDefined();
+        });
+    });
+    describe("Loading state", () => {
+        it("does not render any loading indicators", () => {
+            const { queryByTestId } = renderInputFieldWrapper({});
+            expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
+            expect(queryByTestId(INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID)).toBeNull();
+        });
+        it("renders a loading spinner by default when loading is true and loadingType is not set", () => {
+            const { getByTestId, queryByTestId } = renderInputFieldWrapper({
+                loading: true,
+            });
+            expect(getByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeDefined();
+            expect(queryByTestId(INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID)).toBeNull();
+        });
+        it("renders a glimmer when loading is true and loadingType is glimmer", () => {
+            const { getByTestId, queryByTestId } = renderInputFieldWrapper({
+                loading: true,
+                loadingType: "glimmer",
+            });
+            expect(getByTestId(INPUT_FIELD_WRAPPER_GLIMMERS_TEST_ID)).toBeDefined();
+            expect(queryByTestId(INPUT_FIELD_WRAPPER_SPINNER_TEST_ID)).toBeNull();
+        });
+    });
+    describe("placeholderMode", () => {
+        it("renders the placeholder in its normal position", () => {
+            renderInputFieldWrapper({
+                placeholder: "placeholder",
+                placeholderMode: "normal",
+            });
+            const placeholder = screen.getByText("placeholder", {
+                includeHiddenElements: true,
+            });
+            expect(placeholder).toBeDefined();
+            expect(placeholder.props.style).toContainEqual(typographyStyles.defaultSize);
+        });
+        it("renders the placeholder in its mini label position", () => {
+            renderInputFieldWrapper({
+                placeholder: "placeholder",
+                placeholderMode: "mini",
+            });
+            const placeholder = screen.getByText("placeholder", {
+                includeHiddenElements: true,
+            });
+            expect(placeholder).toBeDefined();
+            expect(placeholder.props.style).toContainEqual(typographyStyles.smallSize);
+        });
+        it("does not render the placeholder", () => {
+            renderInputFieldWrapper({
+                placeholder: "placeholder",
+                placeholderMode: "hidden",
+            });
+            expect(screen.queryByText("placeholder", {
+                includeHiddenElements: true,
+            })).toBeNull();
+        });
+    });
+    describe("multiline", () => {
+        it("applies maxWidth of 90% when multiline is true", () => {
+            const { getByTestId } = renderInputFieldWrapper({ multiline: true });
+            const container = getByTestId("ATL-InputFieldWrapper");
+            const flattenedStyle = container.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle.maxWidth).toEqual("90%");
+        });
+        it("does not apply maxWidth when multiline is false", () => {
+            const { getByTestId } = renderInputFieldWrapper({ multiline: false });
+            const container = getByTestId("ATL-InputFieldWrapper");
+            const flattenedStyle = container.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle.maxWidth).toBeUndefined();
+        });
+        it("does not apply maxWidth when multiline is not provided", () => {
+            const { getByTestId } = renderInputFieldWrapper({});
+            const container = getByTestId("ATL-InputFieldWrapper");
+            const flattenedStyle = container.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle.maxWidth).toBeUndefined();
+        });
+    });
+});

package/dist/src/InputFieldWrapper/components/ClearAction/ClearAction.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { ClearAction } from "./ClearAction";
+it("should call the handler", () => {
+    const pressHandler = jest.fn();
+    const { getByLabelText } = render(React.createElement(ClearAction, { onPress: pressHandler }));
+    fireEvent.press(getByLabelText("Clear input"));
+    expect(pressHandler).toHaveBeenCalled();
+});

package/dist/src/InputFieldWrapper/components/Prefix/Prefix.test.js

@@ -0,0 +1,130 @@
+import React from "react";
+import { render, renderHook, screen } from "@testing-library/react-native";
+import { Path } from "react-native-svg";
+import { PrefixIcon, PrefixLabel, prefixIconTestId, prefixLabelTestId, } from "./Prefix";
+import { useTypographyStyles } from "../../../Typography";
+import { useStyles } from "../../InputFieldWrapper.style";
+import { tokens } from "../../../utils/design";
+const mockLabel = "$";
+let styles;
+let typographyStyles;
+beforeAll(() => {
+    const stylesHook = renderHook(() => useStyles());
+    const typographyStylesHook = renderHook(() => useTypographyStyles());
+    styles = stylesHook.result.current;
+    typographyStyles = typographyStylesHook.result.current;
+});
+function setupLabel({ disabled = false, focused = false, miniLabelActive = false, inputInvalid = false, label = mockLabel, styleOverride, }) {
+    return render(React.createElement(PrefixLabel, { disabled: disabled, focused: focused, miniLabelActive: miniLabelActive, inputInvalid: inputInvalid, label: label, styleOverride: styleOverride }));
+}
+function setupIcon({ disabled = false, focused = false, inputInvalid = false, icon = "invoice", }) {
+    return render(React.createElement(PrefixIcon, { disabled: disabled, focused: focused, inputInvalid: inputInvalid, icon: icon }));
+}
+describe("Prefix", () => {
+    it("renders a prefix label when specified", () => {
+        const { getByText } = setupLabel({});
+        expect(getByText(mockLabel)).toBeDefined();
+    });
+    it("renders a prefix icon when specified", () => {
+        const { getByTestId } = setupIcon({});
+        expect(getByTestId("invoice")).toBeDefined();
+    });
+    describe("updates the styles when focused", () => {
+        it("for the label", () => {
+            const tree = setupLabel({
+                focused: true,
+            });
+            const expectedStyle = Object.assign(Object.assign({}, styles.fieldAffix), styles.inputFocused);
+            const prefixLabel = tree.getByTestId(prefixLabelTestId);
+            const flattenedStyle = prefixLabel.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle).toEqual(expectedStyle);
+        });
+        it("for the icon", () => {
+            const tree = setupIcon({
+                focused: true,
+            });
+            const expectedStyle = Object.assign(Object.assign({}, styles.fieldAffix), styles.inputFocused);
+            const icon = tree.getByTestId(prefixIconTestId);
+            const flattenedStyle = icon.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle).toEqual(expectedStyle);
+        });
+    });
+    describe("updates the styles when input is invalid", () => {
+        it("for the label", () => {
+            const tree = setupLabel({
+                inputInvalid: true,
+            });
+            const expectedStyle = Object.assign(Object.assign({}, styles.fieldAffix), styles.inputInvalid);
+            const prefixLabel = tree.getByTestId(prefixLabelTestId);
+            const flattenedStyle = prefixLabel.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle).toEqual(expectedStyle);
+        });
+        it("for the icon", () => {
+            const tree = setupIcon({
+                inputInvalid: true,
+            });
+            const expectedStyle = Object.assign(Object.assign({}, styles.fieldAffix), styles.inputInvalid);
+            const prefixIcon = tree.getByTestId(prefixIconTestId);
+            const flattenedStyle = prefixIcon.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            expect(flattenedStyle).toEqual(expectedStyle);
+        });
+    });
+    it("updates the position of the label when a value is entered", () => {
+        const tree = setupLabel({
+            miniLabelActive: true,
+        });
+        const prefixLabel = tree.getByTestId(prefixLabelTestId);
+        const labelWrapper = prefixLabel.children[0];
+        const expectedStyle = [styles.prefixLabel, styles.fieldAffixMiniLabel];
+        expect(labelWrapper.props.style).toEqual(expectedStyle);
+    });
+    describe("when disabled", () => {
+        it("updates the label", () => {
+            const tree = setupLabel({
+                disabled: true,
+            });
+            const prefixLabel = tree.getByText(mockLabel);
+            const expectedStyle = [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.disabled,
+                typographyStyles.startAlign,
+                typographyStyles.defaultSize,
+                typographyStyles.baseLetterSpacing,
+            ];
+            expect(prefixLabel.props.style).toEqual(expectedStyle);
+        });
+        it("updates the icon", () => {
+            setupIcon({
+                disabled: true,
+            });
+            const icon = screen.getByTestId("invoice");
+            const path = icon.findByType(Path);
+            expect(path.props.fill).toEqual(tokens["color-disabled"]);
+        });
+    });
+    describe("Custom Label Style", () => {
+        it("uses default styling when style override not used", () => {
+            const { getByText } = setupLabel({});
+            const prefix = getByText(mockLabel);
+            const expectedStyle = [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.base,
+                typographyStyles.startAlign,
+                typographyStyles.defaultSize,
+                typographyStyles.baseLetterSpacing,
+            ];
+            expect(prefix.props.style).toEqual(expectedStyle);
+        });
+        it("uses style override for label when provided", () => {
+            const styleOverride = {
+                fontSize: 50,
+                color: "purple",
+            };
+            const { getByText } = setupLabel({ styleOverride });
+            const prefix = getByText(mockLabel);
+            const flattenedStyle = prefix.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            const expectedStyle = Object.assign(Object.assign(Object.assign({}, styleOverride), typographyStyles.baseRegularRegular), { lineHeight: typographyStyles.defaultSize.lineHeight });
+            expect(flattenedStyle).toEqual(expectedStyle);
+        });
+    });
+});

package/dist/src/InputFieldWrapper/components/Suffix/Suffix.test.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { render, renderHook } from "@testing-library/react-native";
+import { SuffixIcon, SuffixLabel } from "./Suffix";
+import { useTypographyStyles } from "../../../Typography";
+const mockLabel = "$";
+function setupLabel({ disabled = false, focused = false, miniLabelActive = false, inputInvalid = false, label = mockLabel, styleOverride, }) {
+    return render(React.createElement(SuffixLabel, { disabled: disabled, focused: focused, miniLabelActive: miniLabelActive, inputInvalid: inputInvalid, label: label, styleOverride: styleOverride }));
+}
+function setupIcon({ disabled = false, focused = false, inputInvalid = false, icon = "invoice", }) {
+    return render(React.createElement(SuffixIcon, { disabled: disabled, focused: focused, inputInvalid: inputInvalid, icon: icon }));
+}
+let typographyStyles;
+beforeAll(() => {
+    const typographyStylesHook = renderHook(() => useTypographyStyles());
+    typographyStyles = typographyStylesHook.result.current;
+});
+describe("Suffix", () => {
+    it("renders a suffix label when specified", () => {
+        const { getByText } = setupLabel({});
+        expect(getByText(mockLabel)).toBeDefined();
+    });
+    it("renders a suffix icon when specified", () => {
+        const { getByTestId } = setupIcon({});
+        expect(getByTestId("invoice")).toBeDefined();
+    });
+    describe("Custom Label Style", () => {
+        it("uses default styling when no style override is provided", () => {
+            const { getByText } = setupLabel({});
+            const suffix = getByText(mockLabel);
+            const expectedStyle = [
+                typographyStyles.baseRegularRegular,
+                typographyStyles.base,
+                typographyStyles.startAlign,
+                typographyStyles.defaultSize,
+                typographyStyles.baseLetterSpacing,
+            ];
+            expect(suffix.props.style).toEqual(expectedStyle);
+        });
+        it("uses style override for label when provided", () => {
+            const styleOverride = {
+                fontSize: 50,
+                color: "purple",
+            };
+            const { getByText } = setupLabel({ styleOverride });
+            const suffix = getByText(mockLabel);
+            const flattenedStyle = suffix.props.style.reduce((style, additionalStyles) => (Object.assign(Object.assign({}, style), additionalStyles)), {});
+            const expectedStyle = Object.assign(Object.assign(Object.assign({}, typographyStyles.baseRegularRegular), { lineHeight: typographyStyles.defaultSize.lineHeight }), styleOverride);
+            expect(flattenedStyle).toEqual(expectedStyle);
+        });
+    });
+});