@multiplatform.one/forms 7.88.8 → 7.88.9

package/src/fields/Select/SheetPickerRow.spec.tsx

@@ -0,0 +1,101 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { createSheetNavigationStore } from "../../shared/sheetNavigation";
+import type { InlineChoice } from "./InlineChoices";
+import { SheetPickerRow } from "./SheetPickerRow";
+
+const knobProps = {
+  textAccentColor: "$color12",
+  menuRow: { minHeight: 44 },
+  panelPadding: { padding: "$3" },
+  gap: { gap: "$2" },
+  body: { fontFamily: "$body", fontWeight: "400" },
+  borderRadius: { borderRadius: "$3" },
+};
+
+const options: InlineChoice[] = [
+  { value: "us", label: "United States" },
+  { value: "in", label: "India" },
+];
+
+function setup(props: Partial<Parameters<typeof SheetPickerRow>[0]> = {}) {
+  const store = createSheetNavigationStore();
+  const onValueChange = vi.fn();
+  const element = (extra: Partial<Parameters<typeof SheetPickerRow>[0]> = {}) => (
+    <SheetPickerRow
+      store={store}
+      label="Country"
+      options={options}
+      value="in"
+      placeholder="Choose"
+      onValueChange={onValueChange}
+      knobProps={knobProps}
+      markColor="$accent9"
+      {...props}
+      {...extra}
+    />
+  );
+  const view = renderWithProviders(element());
+  const row = () => view.getByTestId("sheet-picker-row");
+  return { ...view, store, onValueChange, row, element };
+}
+
+describe("SheetPickerRow (LC-262)", () => {
+  it("is a labelled button showing the current value, or the placeholder with none", () => {
+    const { row, getByTestId, rerender, element } = setup();
+    expect(row().getAttribute("role")).toBe("button");
+    expect(row().getAttribute("aria-label")).toBe("Country");
+    expect(row().tabIndex).toBe(0);
+    expect(getByTestId("sheet-picker-value").textContent).toBe("India");
+    rerender(element({ value: undefined }));
+    expect(getByTestId("sheet-picker-value").textContent).toBe("Choose");
+  });
+
+  it("pushes its checkmark list onto the sheet's stack on press, Enter and Space", () => {
+    const { row, store } = setup();
+    fireEvent.click(row());
+    expect(store.getPages()).toHaveLength(1);
+    expect(store.getPages()[0].title).toBe("Country");
+    act(() => store.pop());
+    fireEvent.keyDown(row(), { key: "Enter" });
+    expect(store.getPages()).toHaveLength(1);
+    act(() => store.pop());
+    fireEvent.keyDown(row(), { key: " " });
+    expect(store.getPages()).toHaveLength(1);
+    act(() => store.pop());
+    fireEvent.keyDown(row(), { key: "ArrowDown" });
+    expect(store.getPages()).toHaveLength(0);
+  });
+
+  it("chooses from the pushed page and keeps that page current as the value changes", () => {
+    const { row, store, onValueChange, rerender, element } = setup();
+    fireEvent.click(row());
+    const page = renderWithProviders(<>{store.getPages()[0].content}</>);
+    fireEvent.click(page.getAllByRole("radio")[0]);
+    expect(onValueChange).toHaveBeenCalledWith("us");
+    page.unmount();
+    rerender(element({ value: "us" }));
+    const updated = renderWithProviders(<>{store.getPages()[0].content}</>);
+    expect(
+      updated.getAllByRole("radio").map((radio) => radio.getAttribute("aria-checked")),
+    ).toEqual(["true", "false"]);
+  });
+
+  it("does not open while disabled and leaves the tab order", () => {
+    const { row, store } = setup({ disabled: true });
+    expect(row().tabIndex).toBe(-1);
+    expect(row().getAttribute("aria-disabled")).toBe("true");
+    fireEvent.click(row());
+    fireEvent.keyDown(row(), { key: "Enter" });
+    expect(store.getPages()).toHaveLength(0);
+  });
+
+  it("takes its page off the stack when it unmounts", () => {
+    const { row, store, unmount } = setup();
+    fireEvent.click(row());
+    expect(store.getPages()).toHaveLength(1);
+    unmount();
+    expect(store.getPages()).toHaveLength(0);
+  });
+});

package/src/shared/sheetNavigation.spec.tsx

@@ -0,0 +1,105 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  createSheetNavigationStore,
+  SheetNavigationProvider,
+  useSheetNavigation,
+  useSheetPageOpen,
+  useSheetPages,
+  type SheetNavigationStore,
+  type SheetPage,
+} from "./sheetNavigation";
+
+const page = (id: string, title = id): SheetPage => ({ id, title, content: title });
+const ids = (store: SheetNavigationStore) => store.getPages().map((p) => p.id);
+
+afterEach(cleanup);
+
+describe("sheet navigation store (LC-262)", () => {
+  it("pushes pages oldest first, and a repeat push moves that page to the top", () => {
+    const store = createSheetNavigationStore();
+    store.push(page("country"));
+    store.push(page("region"));
+    store.push(page("country", "Country again"));
+    expect(ids(store)).toEqual(["region", "country"]);
+    expect(store.getPages()[1].title).toBe("Country again");
+    expect(store.has("region")).toBe(true);
+    expect(store.has("city")).toBe(false);
+  });
+
+  it("updates a page in place and ignores an update for one not on the stack", () => {
+    const store = createSheetNavigationStore();
+    store.push(page("a"));
+    store.push(page("b"));
+    const listener = vi.fn();
+    store.subscribe(listener);
+    store.update(page("a", "A2"));
+    expect(store.getPages().map((p) => p.title)).toEqual(["A2", "b"]);
+    store.update(page("missing"));
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+
+  it("removes a page by id, pops the top, and notifies only on a real change", () => {
+    const store = createSheetNavigationStore();
+    const listener = vi.fn();
+    const stop = store.subscribe(listener);
+    store.pop();
+    store.remove("nothing");
+    expect(listener).not.toHaveBeenCalled();
+    store.push(page("a"));
+    store.push(page("b"));
+    store.push(page("c"));
+    store.remove("b");
+    expect(ids(store)).toEqual(["a", "c"]);
+    store.pop();
+    expect(ids(store)).toEqual(["a"]);
+    expect(listener).toHaveBeenCalledTimes(5);
+    stop();
+    store.pop();
+    expect(listener).toHaveBeenCalledTimes(5);
+    expect(ids(store)).toEqual([]);
+  });
+});
+
+describe("sheet navigation hooks", () => {
+  function Probe({
+    id,
+    out,
+  }: {
+    id: string;
+    out: { store?: unknown; pages?: unknown; open?: boolean };
+  }) {
+    const store = useSheetNavigation();
+    out.store = store;
+    out.pages = useSheetPages(store);
+    out.open = useSheetPageOpen(store, id);
+    return null;
+  }
+
+  it("reads nothing outside a sheet", () => {
+    const out: { store?: unknown; pages?: unknown; open?: boolean } = {};
+    render(<Probe id="a" out={out} />);
+    expect(out.store).toBeUndefined();
+    expect(out.pages).toEqual([]);
+    expect(out.open).toBe(false);
+  });
+
+  it("follows the sheet's stack as pages come and go", () => {
+    const store = createSheetNavigationStore();
+    const out: { store?: unknown; pages?: SheetPage[]; open?: boolean } = {};
+    render(
+      <SheetNavigationProvider value={store}>
+        <Probe id="a" out={out as never} />
+      </SheetNavigationProvider>,
+    );
+    expect(out.store).toBe(store);
+    expect(out.open).toBe(false);
+    act(() => store.push(page("a")));
+    expect(out.open).toBe(true);
+    expect(out.pages?.map((p) => p.id)).toEqual(["a"]);
+    act(() => store.push(page("b")));
+    expect(out.pages?.map((p) => p.id)).toEqual(["a", "b"]);
+    act(() => store.remove("a"));
+    expect(out.open).toBe(false);
+  });
+});