@multiplatform.one/components 7.10.0 → 7.15.0

package/src/SheetModal/SheetModal.detentLayout.spec.tsx

@@ -0,0 +1,173 @@
+/**
+ * MPO-68 / MPO-299: what the native sheet lays out at a settled detent.
+ *
+ * The iOS simulator run on 965825866 dragged a sheet to a lower detent: it
+ * kept its full height and slid it below the screen, or under the keyboard,
+ * so the tail of a list inside it was unreachable.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Animated, PanResponder, type PanResponderCallbacks } from "react-native";
+import { Text } from "tamagui";
+import { resolveSheetDetents } from "./detents";
+import type { SheetModalProps } from "./index";
+import { SheetModal } from "./index.native";
+
+const keyboard = vi.hoisted(() => ({ inset: 0 }));
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+vi.mock("../shared/useKeyboardInset", () => ({ useKeyboardInset: () => keyboard.inset }));
+
+let pan: PanResponderCallbacks;
+let springs: Array<{ toValue: number; done?: (result: { finished: boolean }) => void }>;
+
+beforeEach(() => {
+  keyboard.inset = 0;
+  springs = [];
+  vi.spyOn(PanResponder, "create").mockImplementation((config) => {
+    pan = config;
+    return { panHandlers: {} } as never;
+  });
+  vi.spyOn(Animated, "spring").mockImplementation((_value, config) => ({
+    start: (done) => {
+      springs.push({ toValue: config.toValue as number, done });
+    },
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+  vi.spyOn(Animated, "timing").mockImplementation(() => ({
+    start: (done) => done?.({ finished: true }),
+    stop: vi.fn(),
+    reset: vi.fn(),
+  }));
+});
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function px(value: string) {
+  return Number.parseFloat(value);
+}
+
+function open(props: Partial<SheetModalProps> = {}) {
+  const view = renderWithProviders(
+    <SheetModal open onOpenChange={() => {}} scrollable {...props}>
+      <Text>row</Text>
+    </SheetModal>,
+  );
+  const frame = view.getByTestId("sheet-modal-frame");
+  const full = px(frame.style.maxHeight);
+  return { view, frame, full };
+}
+
+/** react-native-web keeps the onLayout handler on the node; call it the way a device layout would. */
+function layout(element: HTMLElement, height: number) {
+  const handler = (element as unknown as Record<string, (event: unknown) => void>)
+    .__reactLayoutHandler;
+  act(() => handler({ nativeEvent: { layout: { x: 0, y: 0, width: 390, height } } }));
+}
+
+function drag(dy: number) {
+  act(() => {
+    pan.onPanResponderGrant?.({} as never, {} as never);
+    pan.onPanResponderMove?.({} as never, { dy } as never);
+    pan.onPanResponderRelease?.({} as never, { dy, vy: 0 } as never);
+  });
+}
+
+function settle() {
+  const last = springs[springs.length - 1];
+  act(() => last.done?.({ finished: true }));
+  return last;
+}
+
+describe("a native sheet at rest on a lower detent", () => {
+  it("is laid out at the detent height, not slid down at full height", () => {
+    const { frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    expect(lower).toBeLessThan(full);
+    drag(full - lower);
+    expect(settle().toValue).toBe(full - lower);
+    expect(px(frame.style.maxHeight)).toBe(lower);
+    expect(frame.style.transform).toContain("translateY(0px)");
+  });
+
+  it("gives a filled body the detent as its definite height", () => {
+    const { frame, full } = open({ fill: true });
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    expect(px(frame.style.height)).toBe(lower);
+    expect(px(frame.style.maxHeight)).toBe(lower);
+  });
+
+  it("ends above the keyboard when the keyboard is up", () => {
+    keyboard.inset = 300;
+    const { frame, full } = open();
+    expect(frame.parentElement?.style.paddingBottom).toBe("300px");
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    expect(px(frame.style.maxHeight)).toBe(lower);
+    expect(frame.style.transform).toContain("translateY(0px)");
+  });
+
+  it("grows back to full height under a still top edge when a drag picks it up", () => {
+    const { frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    act(() => pan.onPanResponderGrant?.({} as never, {} as never));
+    expect(px(frame.style.maxHeight)).toBe(full);
+    expect(frame.style.transform).toContain(`translateY(${full - lower}px)`);
+    act(() => pan.onPanResponderRelease?.({} as never, { dy: -(full - lower), vy: 0 } as never));
+    expect(settle().toValue).toBe(0);
+    expect(px(frame.style.maxHeight)).toBe(full);
+  });
+
+  it("keeps its top edge when the keyboard moved the max height under it", () => {
+    const { view, frame, full } = open();
+    layout(frame, full);
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    keyboard.inset = 300;
+    view.rerender(
+      <SheetModal open onOpenChange={() => {}} scrollable>
+        <Text>row</Text>
+      </SheetModal>,
+    );
+    const lifted = 844 - 300 - 48;
+    expect(px(frame.style.maxHeight)).toBe(Math.min(lifted, lower));
+    act(() => pan.onPanResponderGrant?.({} as never, {} as never));
+    expect(px(frame.style.maxHeight)).toBe(lifted);
+    expect(frame.style.transform).toContain(`translateY(${lifted - lower}px)`);
+  });
+
+  it("keeps the drag when a scroll inside the sheet asks for the touch", () => {
+    open();
+    expect(pan.onPanResponderTerminationRequest?.({} as never, {} as never)).toBe(false);
+  });
+
+  it("forgets the rest height when the sheet closes and opens again", () => {
+    const { view, frame, full } = open();
+    const [, lower] = resolveSheetDetents({ travel: full, scrollable: true });
+    drag(full - lower);
+    settle();
+    const sheet = (next: boolean) => (
+      <SheetModal open={next} onOpenChange={() => {}} scrollable>
+        <Text>row</Text>
+      </SheetModal>
+    );
+    view.rerender(sheet(false));
+    view.rerender(sheet(true));
+    expect(px(frame.style.maxHeight)).toBe(full);
+  });
+});

package/src/SheetModal/SheetModal.fill.spec.tsx

@@ -0,0 +1,147 @@
+/**
+ * MPO-299 phase 2 — the `fill` sizing contract.
+ *
+ * Phase 1 measured the failure on device: a consumer-owned flexible body
+ * inside the native sheet was delivered height 0, so a viewport that mounts
+ * on its measurement mounted nothing, while a sibling with a declared 240pt
+ * height got the space it asked for. `fill` opts into the sheet's existing
+ * keyboard-aware cap as a DEFINITE height and opens every link between the
+ * frame and the body, so the owned viewport has something to bootstrap from.
+ *
+ * These are composition checks, not Yoga geometry: happy-dom lays nothing
+ * out. A missing intermediate link has to fail here, because opening only
+ * the outer frame reproduces the measured zero. Device acceptance is the
+ * parent's, on a real run.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { SheetModal as WebSheetModal, type SheetModalProps } from "./index";
+import { SheetModal as NativeSheetModal } from "./index.native";
+
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  ActionSheetIOS: undefined,
+  Modal: ({ children }: { children: import("react").ReactNode }) => children,
+}));
+
+afterEach(cleanup);
+
+/** Tamagui emits atomic classes; `flex: 1` is grow+shrink+basis together. */
+const flexOne = ["_fg-1", "_fs-1", "_fb-0px"];
+const minZero = "_mih-0px";
+
+function classes(element: HTMLElement) {
+  return element.className.split(/\s+/);
+}
+
+function renderNative(props: Partial<SheetModalProps> = {}) {
+  return renderWithProviders(
+    <NativeSheetModal open onOpenChange={() => {}} header={<Text>Move to project</Text>} {...props}>
+      <Text>row</Text>
+    </NativeSheetModal>,
+  );
+}
+
+describe("native fill allocates the sheet body", () => {
+  it("turns the existing cap into a definite frame height only when filling", () => {
+    const filled = renderNative({ fill: true }).getByTestId("sheet-modal-frame");
+    expect(filled.style.height).not.toBe("");
+    expect(filled.style.height).toBe(filled.style.maxHeight);
+    cleanup();
+    const intrinsic = renderNative().getByTestId("sheet-modal-frame");
+    expect(intrinsic.style.height).toBe("");
+    expect(intrinsic.style.maxHeight).not.toBe("");
+  });
+
+  it("opens every link between the frame and the body, not just the outer one", () => {
+    const view = renderNative({ fill: true });
+    for (const id of ["sheet-modal-surface", "sheet-modal-content"]) {
+      const link = classes(view.getByTestId(id));
+      expect(link, `${id} grows`).toEqual(expect.arrayContaining(flexOne));
+      expect(link, `${id} can collapse`).toContain(minZero);
+    }
+    const body = view.getByTestId("sheet-modal-body");
+    expect(body.style.flexGrow).toBe("1");
+    expect(body.style.minHeight).toBe("0px");
+  });
+
+  it("leaves the default branch intrinsic, and false is the same as absent", () => {
+    for (const props of [{}, { fill: false }]) {
+      const view = renderNative(props);
+      expect(view.queryByTestId("sheet-modal-body")).toBeNull();
+      expect(classes(view.getByTestId("sheet-modal-surface"))).not.toContain("_fg-1");
+      expect(classes(view.getByTestId("sheet-modal-content"))).not.toContain("_fg-1");
+      cleanup();
+    }
+  });
+
+  it("keeps the grabber and header out of the flexible body", () => {
+    const view = renderNative({ fill: true });
+    const body = view.getByTestId("sheet-modal-body");
+    const grabber = view.getByTestId("sheet-modal-grabber");
+    expect(grabber.style.flexShrink).toBe("0");
+    expect(body.contains(grabber)).toBe(false);
+    const header = view.getByText("Move to project");
+    expect(body.contains(header)).toBe(false);
+    expect(view.getByTestId("sheet-modal-content").contains(body)).toBe(true);
+  });
+
+  it("adds no scroll owner when the consumer keeps scrolling, and exactly one when it does not", () => {
+    expect(renderNative({ fill: true }).queryAllByTestId("sheet-modal-scroll")).toHaveLength(0);
+    cleanup();
+    const scrollers = renderNative({ fill: true, scrollable: true }).getAllByTestId(
+      "sheet-modal-scroll",
+    );
+    expect(scrollers).toHaveLength(1);
+    expect(scrollers[0].style.flexGrow).toBe("1");
+  });
+
+  it("keeps the content-sized scroller on the default branch", () => {
+    const scroller = renderNative({ scrollable: true }).getByTestId("sheet-modal-scroll");
+    expect(scroller.style.flexGrow).toBe("0");
+  });
+});
+
+/*
+ * Web already gets a definite percent height from the Sheet's snap point, so
+ * fill only has to open the body chain inside it. tamagui renders the sheet
+ * through a portal AND inline, so every query here is plural on purpose.
+ */
+function renderWeb(props: Partial<SheetModalProps> = {}) {
+  return renderWithProviders(
+    <WebSheetModal open onOpenChange={() => {}} header={<Text>Move to project</Text>} {...props}>
+      <Text>row</Text>
+    </WebSheetModal>,
+  );
+}
+
+describe("web fill opens the body inside the snapped frame", () => {
+  it("mounts a growing body slot only when filling", () => {
+    const filled = renderWeb({ fill: true }).getAllByTestId("sheet-modal-body");
+    expect(filled.length).toBeGreaterThan(0);
+    for (const slot of filled) {
+      expect(classes(slot)).toEqual(expect.arrayContaining(flexOne));
+      expect(classes(slot)).toContain(minZero);
+    }
+    cleanup();
+    expect(renderWeb().queryAllByTestId("sheet-modal-body")).toHaveLength(0);
+  });
+
+  it("hands the body slot to the sheet scroller when the sheet owns scrolling", () => {
+    const view = renderWeb({ fill: true, scrollable: true });
+    const bodies = view.getAllByTestId("sheet-modal-body");
+    const scrollers = view.getAllByTestId("sheet-modal-scroll");
+    expect(scrollers.length).toBe(bodies.length);
+    for (const body of bodies) {
+      expect(body.querySelectorAll('[data-testid="sheet-modal-scroll"]')).toHaveLength(1);
+    }
+  });
+
+  it("keeps one scroll owner and no body slot on the default branch", () => {
+    const view = renderWeb({ scrollable: true });
+    expect(view.queryAllByTestId("sheet-modal-body")).toHaveLength(0);
+    expect(view.getAllByTestId("sheet-modal-scroll").length).toBeGreaterThan(0);
+  });
+});

package/src/SheetModal/SheetModal.ownedBody.spec.tsx

@@ -0,0 +1,200 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+import * as stories from "./SheetModal.stories";
+
+const hosts = vi.hoisted(() => ({
+  props: new Map<string, Record<string, any>>(),
+  measurements: [] as Array<{ id: string; callback: (...bounds: number[]) => void }>,
+}));
+vi.mock("@multiplatform.one/components", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/components")>();
+  const React = await import("react");
+  function observed(Component: any) {
+    return React.forwardRef((props: Record<string, any>, ref) => {
+      if (props.testID) hosts.props.set(props.testID, props);
+      React.useImperativeHandle(ref, () => {
+        const host = {
+          measureInWindow: (callback: (...bounds: number[]) => void) => {
+            hosts.measurements.push({ id: props.testID, callback });
+          },
+        };
+        return { ...host, getNativeScrollRef: () => host };
+      });
+      return (
+        <Component
+          {...props}
+          onLayout={undefined}
+          onContentSizeChange={undefined}
+          onScroll={undefined}
+        />
+      );
+    });
+  }
+  return {
+    ...actual,
+    YStack: observed(actual.YStack),
+    ScrollView: observed(actual.ScrollView),
+    SheetModal: (props: any) => {
+      hosts.props.set("public-sheet-modal", props);
+      return props.open ? (
+        <>
+          {props.header}
+          {props.children}
+        </>
+      ) : null;
+    },
+  };
+});
+afterEach(() => {
+  cleanup();
+  hosts.props.clear();
+  hosts.measurements = [];
+});
+function sheetProps() {
+  return hosts.props.get("public-sheet-modal")!;
+}
+function renderStory(name: "OwnedMeasuredViewport" | "OwnedScrollView") {
+  const story = (stories as Record<string, any>)[name];
+  expect(story, `${name} is a registered story`).toBeDefined();
+  return renderWithProviders(<>{story.render(story.args ?? {}, {})}</>);
+}
+function layout(id: string, height: number) {
+  act(() =>
+    hosts.props.get(id)!.onLayout({ nativeEvent: { layout: { x: 0, y: 44, width: 300, height } } }),
+  );
+}
+function readings(view: ReturnType<typeof renderStory>) {
+  return JSON.parse(view.getByTestId("owned-sheet-readings").textContent!);
+}
+it("keeps the measured subject unmeasured until a delivered layout and distinguishes zero", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(readings(view).viewportLayout).toBe("unmeasured");
+  expect(hosts.props.get("owned-sheet-frame")!.height).toBeUndefined();
+  expect(view.queryByText("Record 60")).toBeNull();
+  layout("owned-sheet-viewport", 0);
+  expect(readings(view).viewportLayout.height).toBe(0);
+  expect(view.queryByText("Record 60")).toBeNull();
+  layout("owned-sheet-viewport", 187.5);
+  expect(readings(view).viewportLayout.height).toBe(187.5);
+  expect(view.getByText("Record 60")).toBeDefined();
+});
+it("provides a named fixed control without treating its declared height as a measurement", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open 240pt control"));
+  expect(hosts.props.get("owned-sheet-frame")!.height).toBe(240);
+  expect(readings(view).mode).toBe("control-240");
+  expect(readings(view).frameLayout).toBe("unmeasured");
+  layout("owned-sheet-viewport", 192);
+  expect(view.getByText("Record 60")).toBeDefined();
+  expect(hosts.props.get("owned-sheet-scroll")).toBeDefined();
+});
+it("mounts the owned scroller without a measurement gate and records delivered content and offset", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(view.getByText("Record 60")).toBeDefined();
+  expect(view.getAllByText(/^Record \d+$/)).toHaveLength(60);
+  expect(readings(view).offset).toBe("unmeasured");
+  const scroll = hosts.props.get("owned-sheet-scroll")!;
+  act(() => {
+    scroll.onContentSizeChange(300, 2500.5);
+    scroll.onScroll({ nativeEvent: { contentOffset: { x: 0, y: 123.25 } } });
+  });
+  expect(readings(view).content).toEqual({ width: 300, height: 2500.5 });
+  expect(readings(view).offset).toEqual({ x: 0, y: 123.25 });
+  fireEvent.click(view.getByText("Activate Record 60"));
+  expect(readings(view).tailPresses).toBe(1);
+});
+it("records public window-bound callbacks and rejects callbacks from a closed presentation", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject"));
+  fireEvent.click(view.getByText("Measure bounds"));
+  const pending = [...hosts.measurements];
+  const frame = pending.find((item) => item.id === "owned-sheet-frame")!;
+  expect(frame).toBeDefined();
+  expect(pending.some((item) => item.id === "owned-sheet-scroll")).toBe(true);
+  act(() => frame.callback(18, 300, 354, 240));
+  expect(readings(view).frameWindow).toEqual({ x: 18, y: 300, width: 354, height: 240 });
+  const viewport = pending.find((item) => item.id === "owned-sheet-viewport")!;
+  fireEvent.click(view.getByText("Close fixture"));
+  fireEvent.click(view.getByText("Open 240pt control"));
+  act(() => viewport.callback(18, 344, 354, 196));
+  expect(readings(view).viewportWindow).toBe("unmeasured");
+  expect(readings(view).frameWindow).toBe("unmeasured");
+});
+it("reports invalid readings rather than converting them to zero", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject"));
+  layout("owned-sheet-viewport", Number.NaN);
+  expect(readings(view).viewportLayout).toBe("invalid");
+  expect(readings(view).sheetFrameWindow).toBe("unavailable: SheetModal has no public frame ref");
+});
+
+it("keeps an absent measured scroller unavailable and ignores superseded samples", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open flex subject"));
+  fireEvent.click(view.getByText("Measure bounds"));
+  expect(readings(view).scrollWindow).toBe("unavailable");
+  expect(readings(view).tailWindow).toBe("unavailable");
+  expect(readings(view).frameWindow).toBe("unmeasured");
+  const old = hosts.measurements.find((item) => item.id === "owned-sheet-frame")!;
+  hosts.measurements = [];
+  fireEvent.click(view.getByText("Measure bounds"));
+  expect(readings(view).sample).toBe(2);
+  act(() => old.callback(18, 300, 354, 240));
+  expect(readings(view).frameWindow).toBe("unmeasured");
+  const current = hosts.measurements.find((item) => item.id === "owned-sheet-frame")!;
+  act(() => current.callback(18, 780, 354, 0));
+  expect(readings(view).frameWindow).toEqual({ x: 18, y: 780, width: 354, height: 0 });
+});
+
+it("retains the closed presentation readings and resets actual tail presses on reopening", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open 240pt control"));
+  layout("owned-sheet-viewport", 192);
+  fireEvent.click(view.getByText("Activate Record 60"));
+  fireEvent.click(view.getByText("Close fixture"));
+  layout("owned-sheet-viewport", 0);
+  expect(readings(view).viewportLayout.height).toBe(192);
+  expect(readings(view).tailPresses).toBe(1);
+  expect(readings(view).presentation).toBe(1);
+  expect(readings(view).open).toBe(false);
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(readings(view).viewportLayout).toBe("unmeasured");
+  expect(readings(view).tailPresses).toBe(0);
+  expect(readings(view).presentation).toBe(2);
+  expect(view.getAllByText("Generic detail 1 for this record.")).toHaveLength(60);
+  expect(view.getAllByText("Generic detail 4 for this record.")).toHaveLength(15);
+});
+
+it("hands the chosen fill value to the real public sheet rather than inferring it", () => {
+  const view = renderStory("OwnedMeasuredViewport");
+  fireEvent.click(view.getByText("Open flex subject"));
+  expect(sheetProps().fill).toBe(false);
+  expect(readings(view).fill).toBe(false);
+  fireEvent.click(view.getByText("Close fixture"));
+  fireEvent.click(view.getByText("Open flex subject (fill)"));
+  expect(sheetProps().fill).toBe(true);
+  expect(readings(view).fill).toBe(true);
+  expect(readings(view).mode).toBe("subject");
+  // The fixed control is a diagnostic, not the height contract: it never
+  // asks the sheet to allocate.
+  fireEvent.click(view.getByText("Close fixture"));
+  fireEvent.click(view.getByText("Open 240pt control"));
+  expect(sheetProps().fill).toBe(false);
+});
+
+it("measures the owned toolbar so the parent can subtract it from the body", () => {
+  const view = renderStory("OwnedScrollView");
+  fireEvent.click(view.getByText("Open flex subject (fill)"));
+  expect(readings(view).toolbarLayout).toBe("unmeasured");
+  layout("owned-sheet-toolbar", 44.5);
+  layout("owned-sheet-frame", 400);
+  layout("owned-sheet-viewport", 355.5);
+  const captured = readings(view);
+  expect(captured.toolbarLayout.height).toBe(44.5);
+  expect(captured.frameLayout.height - captured.toolbarLayout.height).toBe(
+    captured.viewportLayout.height,
+  );
+});

package/src/SheetModal/SheetModal.stories.spec.tsx

@@ -10,9 +10,16 @@
  * open state is.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { cleanup, screen } from "@testing-library/react";
+import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
-import meta, { Default, OpenOnMount, Scrollable, TallDetent } from "./SheetModal.stories";
+import meta, {
+  Default,
+  OpenOnMount,
+  OwnedMeasuredViewport,
+  OwnedScrollView,
+  Scrollable,
+  TallDetent,
+} from "./SheetModal.stories";
 
 afterEach(cleanup);
 
@@ -51,4 +58,18 @@ describe("SheetModal stories", () => {
     expect(screen.getAllByText("Project 1").length).toBeGreaterThan(0);
     expect(screen.getAllByText("Project 30").length).toBeGreaterThan(0);
   });
+
+  it.each([OwnedMeasuredViewport, OwnedScrollView])(
+    "mounts the public owned fixture and its control",
+    (story) => {
+      renderWithProviders(<>{story.render?.({} as never, {} as never)}</>);
+      expect(screen.getByText("Open flex subject")).toBeDefined();
+      fireEvent.click(screen.getByText("Open 240pt control"));
+      expect(screen.getAllByText("Measure bounds").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Close fixture").length).toBeGreaterThan(0);
+      expect(JSON.parse(screen.getByTestId("owned-sheet-readings").textContent!).mode).toBe(
+        "control-240",
+      );
+    },
+  );
 });