@jobber/components-native 0.105.4 → 0.106.0

package/dist/src/primitives/Select/SelectPrimitive.test.js

@@ -0,0 +1,243 @@
+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 { render, screen, userEvent, within, } from "@testing-library/react-native";
+import { SelectPrimitive } from "./SelectPrimitive";
+import { tokens } from "../../utils/design";
+import { PortalHostWrapper } from "../../utils/test";
+import { Icon } from "../../Icon";
+const user = userEvent.setup();
+beforeAll(() => {
+    var _a;
+    const MockNativeMethods = require("react-native/jest/MockNativeMethods");
+    const mockedMethods = (_a = MockNativeMethods.default) !== null && _a !== void 0 ? _a : MockNativeMethods;
+    mockedMethods.measure.mockImplementation((callback) => {
+        callback(0, 0, 320, 48, 20, 100);
+    });
+});
+function renderSelect({ defaultValue, onOpenChange, disabled, invalid, testID, triggerRef, } = {}) {
+    return render(React.createElement(SelectPrimitive.Root, { defaultValue: defaultValue, onOpenChange: onOpenChange, disabled: disabled },
+        React.createElement(SelectPrimitive.Trigger, { ref: triggerRef, testID: testID, invalid: invalid },
+            React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" }))));
+}
+describe("SelectPrimitive.Trigger", () => {
+    it("renders with the default testID", () => {
+        renderSelect();
+        expect(screen.getByTestId("ATL-Select-Trigger")).toBeDefined();
+    });
+    it("namespaces a provided testID", () => {
+        renderSelect({ testID: "city" });
+        expect(screen.getByTestId("ATL-city-Select-Trigger")).toBeDefined();
+        expect(screen.queryByTestId("ATL-Select-Trigger")).toBeNull();
+    });
+    it("fires onOpenChange and applies open styling when pressed", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onOpenChange = jest.fn();
+        renderSelect({ onOpenChange });
+        const trigger = screen.getByTestId("ATL-Select-Trigger");
+        expect(trigger).toHaveStyle({
+            borderColor: tokens["color-border--interactive"],
+        });
+        yield user.press(trigger);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
+        expect(trigger).toHaveStyle({
+            borderColor: tokens["color-interactive--subtle"],
+            borderWidth: tokens["border-thick"],
+        });
+    }));
+    it("does not open when disabled", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onOpenChange = jest.fn();
+        renderSelect({ onOpenChange, disabled: true });
+        yield user.press(screen.getByTestId("ATL-Select-Trigger"));
+        expect(onOpenChange).not.toHaveBeenCalled();
+    }));
+    it("applies disabled styling: subtle fill and disabled value text", () => {
+        renderSelect({ disabled: true });
+        expect(screen.getByTestId("ATL-Select-Trigger")).toHaveStyle({
+            backgroundColor: tokens["color-disabled--secondary"],
+        });
+        expect(screen.getByText("Select an option")).toHaveStyle({
+            color: tokens["color-disabled"],
+        });
+    });
+    it("applies critical border styling when invalid", () => {
+        renderSelect({ invalid: true });
+        expect(screen.getByTestId("ATL-Select-Trigger")).toHaveStyle({
+            borderColor: tokens["color-critical"],
+        });
+    });
+    it("exposes a combobox role and conveys disabled to the accessibility state", () => {
+        renderSelect({ disabled: true });
+        const trigger = screen.getByRole("combobox");
+        expect(trigger.props.accessibilityState).toMatchObject({ disabled: true });
+    });
+    it("announces the selected option as the trigger's accessibility value", () => {
+        renderSelect({ defaultValue: { value: "tor", label: "Toronto" } });
+        const trigger = screen.getByTestId("ATL-Select-Trigger");
+        expect(trigger.props.accessibilityValue).toEqual({ text: "Toronto" });
+    });
+});
+describe("SelectPrimitive.Trigger ref", () => {
+    it("forwards a ref exposing the trigger with open/close", () => {
+        var _a, _b;
+        const triggerRef = React.createRef();
+        renderSelect({ triggerRef });
+        expect(triggerRef.current).not.toBeNull();
+        expect(typeof ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.open)).toBe("function");
+        expect(typeof ((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.close)).toBe("function");
+    });
+});
+const CITIES = [
+    { value: "tor", label: "Toronto" },
+    { value: "van", label: "Vancouver" },
+    { value: "edm", label: "Edmonton" },
+];
+function renderSelectWithContent({ defaultValue, onValueChange, closeOnPress, disabledItem, } = {}) {
+    return render(React.createElement(SelectPrimitive.Root, { defaultValue: defaultValue, onValueChange: onValueChange },
+        React.createElement(SelectPrimitive.Trigger, null,
+            React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+        React.createElement(SelectPrimitive.Portal, null,
+            React.createElement(SelectPrimitive.Overlay, null),
+            React.createElement(SelectPrimitive.Content, null,
+                React.createElement(SelectPrimitive.Viewport, null,
+                    React.createElement(SelectPrimitive.Group, null,
+                        React.createElement(SelectPrimitive.Label, null, "Cities"),
+                        CITIES.map(city => (React.createElement(SelectPrimitive.Item, { key: city.value, value: city.value, label: city.label, closeOnPress: closeOnPress, disabled: disabledItem === city.value },
+                            React.createElement(SelectPrimitive.ItemText, { disabled: disabledItem === city.value }),
+                            React.createElement(SelectPrimitive.ItemIndicator, null,
+                                React.createElement(Icon, { name: "checkmark" })))))),
+                    React.createElement(SelectPrimitive.Separator, null))))), { wrapper: PortalHostWrapper });
+}
+function openSelect() {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield user.press(screen.getByTestId("ATL-Select-Trigger"));
+    });
+}
+describe("SelectPrimitive.Content", () => {
+    it("renders nothing until the trigger opens it", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderSelectWithContent();
+        expect(screen.queryByText("Toronto")).toBeNull();
+        yield openSelect();
+        expect(screen.getByText("Toronto")).toBeDefined();
+        expect(screen.getByText("Vancouver")).toBeDefined();
+        expect(screen.getByText("Cities")).toBeDefined();
+    }));
+    it("dismisses when tapping outside (overlay), without selecting", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onValueChange = jest.fn();
+        renderSelectWithContent({ onValueChange });
+        yield openSelect();
+        yield user.press(screen.getByTestId("ATL-Select-Overlay"));
+        expect(screen.queryByText("Toronto")).toBeNull();
+        expect(onValueChange).not.toHaveBeenCalled();
+    }));
+});
+describe("SelectPrimitive.Item", () => {
+    it("selects the option, emits { value, label }, and closes", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onValueChange = jest.fn();
+        renderSelectWithContent({ onValueChange });
+        yield openSelect();
+        yield user.press(screen.getByText("Vancouver"));
+        expect(onValueChange).toHaveBeenCalledWith({
+            value: "van",
+            label: "Vancouver",
+        });
+        // Dropdown closed; trigger now shows the selection.
+        expect(screen.queryByText("Cities")).toBeNull();
+        expect(screen.getByText("Vancouver")).toBeDefined();
+    }));
+    it("passes closeOnPress through — dropdown stays open when false", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onValueChange = jest.fn();
+        renderSelectWithContent({ onValueChange, closeOnPress: false });
+        yield openSelect();
+        yield user.press(screen.getByText("Vancouver"));
+        expect(onValueChange).toHaveBeenCalled();
+        expect(screen.getByText("Cities")).toBeDefined();
+    }));
+    it("does not select a disabled option", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onValueChange = jest.fn();
+        renderSelectWithContent({ onValueChange, disabledItem: "van" });
+        yield openSelect();
+        yield user.press(screen.getByText("Vancouver"));
+        expect(onValueChange).not.toHaveBeenCalled();
+    }));
+    it("greys a disabled option's text when ItemText is told it is disabled", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderSelectWithContent({ disabledItem: "van" });
+        yield openSelect();
+        expect(screen.getByText("Vancouver")).toHaveStyle({
+            color: tokens["color-disabled"],
+        });
+        expect(screen.getByText("Toronto")).toHaveStyle({
+            color: tokens["color-text"],
+        });
+    }));
+    it("shows the checkmark indicator only on the selected option", () => __awaiter(void 0, void 0, void 0, function* () {
+        renderSelectWithContent({
+            defaultValue: { value: "tor", label: "Toronto" },
+        });
+        yield openSelect();
+        // One checkmark icon in the dropdown (the selected row's indicator).
+        expect(screen.getAllByTestId("checkmark")).toHaveLength(1);
+    }));
+    it("renders whatever marker is composed into ItemIndicator on the selected row", () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(SelectPrimitive.Root, { defaultValue: { value: "tor", label: "Toronto" } },
+            React.createElement(SelectPrimitive.Trigger, null,
+                React.createElement(SelectPrimitive.Value, { placeholder: "Select an option" })),
+            React.createElement(SelectPrimitive.Portal, null,
+                React.createElement(SelectPrimitive.Overlay, null),
+                React.createElement(SelectPrimitive.Content, null,
+                    React.createElement(SelectPrimitive.Viewport, null,
+                        React.createElement(SelectPrimitive.Item, { value: "tor", label: "Toronto" },
+                            React.createElement(SelectPrimitive.ItemText, null),
+                            React.createElement(SelectPrimitive.ItemIndicator, null,
+                                React.createElement(Icon, { name: "person" }))))))), { wrapper: PortalHostWrapper });
+        yield openSelect();
+        expect(screen.getByTestId("person")).toBeDefined();
+        expect(screen.queryByTestId("checkmark")).toBeNull();
+    }));
+    it("conveys option role plus selected and disabled states to assistive tech", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        renderSelectWithContent({
+            defaultValue: { value: "tor", label: "Toronto" },
+            disabledItem: "van",
+        });
+        yield openSelect();
+        const options = screen.getAllByRole("option");
+        const optionWith = (label) => options.find(option => within(option).queryByText(label));
+        expect((_a = optionWith("Toronto")) === null || _a === void 0 ? void 0 : _a.props.accessibilityState).toMatchObject({
+            checked: true,
+        });
+        expect((_b = optionWith("Vancouver")) === null || _b === void 0 ? void 0 : _b.props.accessibilityState).toMatchObject({
+            disabled: true,
+        });
+    }));
+});
+describe("SelectPrimitive.Value", () => {
+    it("shows the placeholder with subdued styling when nothing is selected", () => {
+        renderSelect();
+        const placeholder = screen.getByText("Select an option");
+        expect(placeholder).toHaveStyle({
+            color: tokens["color-text--secondary"],
+        });
+    });
+    it("shows the selected option's label", () => {
+        renderSelect({ defaultValue: { value: "tor", label: "Toronto" } });
+        const value = screen.getByText("Toronto");
+        expect(value).toHaveStyle({ color: tokens["color-text"] });
+        expect(screen.queryByText("Select an option")).toBeNull();
+    });
+    it("greys the value when the field is disabled (set on Root)", () => {
+        renderSelect({
+            disabled: true,
+            defaultValue: { value: "tor", label: "Toronto" },
+        });
+        expect(screen.getByText("Toronto")).toHaveStyle({
+            color: tokens["color-disabled"],
+        });
+    });
+});

package/dist/src/primitives/Select/index.js

@@ -0,0 +1 @@
+export { SelectPrimitive } from "./SelectPrimitive";

package/dist/src/primitives/Select/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/primitives/index.js

@@ -2,3 +2,5 @@
  * This file exports styled components-native primitives.
  */
 export * from "./HelperText";
+export * from "./Portal";
+export * from "./Select";

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { PortalHost } from "@rn-primitives/portal";
+/**
+ * Test wrapper that mounts a `PortalHost` so portal-based overlays (e.g. the
+ * Select dropdown) render: `render(ui, { wrapper: PortalHostWrapper })`.
+ */
+export function PortalHostWrapper({ children }) {
+    return (React.createElement(React.Fragment, null,
+        children,
+        React.createElement(PortalHost, null)));
+}

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

@@ -1 +1,2 @@
 export { MockSafeAreaProvider } from "./MockSafeAreaProvider";
+export { PortalHostWrapper } from "./PortalHostWrapper";