Resizable interview dock with background scroll

apps/fabro-web/app/components/interview-dock.test.tsx

@@ -6,7 +6,12 @@ import {
   QuestionType,
 } from "@qltysh/fabro-api-client";
 
-import { InterviewDock } from "./interview-dock";
+import {
+  InterviewDock,
+  loadDockHeight,
+  clampDockHeight,
+  saveDockHeight,
+} from "./interview-dock";
 import { displayLabel } from "./interview-label";
 import { generatedAxios } from "../lib/api-client";
 
@@ -64,6 +69,24 @@ function makeQuestion(overrides: Partial<ApiQuestion> = {}): ApiQuestion {
 }
 
 describe("InterviewDock", () => {
+  test("renders successfully when localStorage is empty", () => {
+    const storage = new Map<string, string>();
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const tree = render(
+      <InterviewDock runId="run-1" questions={[makeQuestion()]} />,
+    );
+    expect(tree.toJSON()).not.toBeNull();
+    // Should not persist height on initial mount
+    expect(storage.size).toBe(0);
+  });
+
   test("renders question text and stage in the header", () => {
     const tree = render(
       <InterviewDock runId="run-1" questions={[makeQuestion()]} />,
@@ -225,6 +248,31 @@ describe("InterviewDock", () => {
     expect(tree.toJSON()).toBeNull();
   });
 
+  test("notifies parent of height on mount", () => {
+    const storage = new Map<string, string>();
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const heights: string[] = [];
+    const onDockHeightChange = (height: string) => heights.push(height);
+
+    render(
+      <InterviewDock
+        runId="run-1"
+        questions={[makeQuestion()]}
+        onDockHeightChange={onDockHeightChange}
+      />,
+    );
+
+    expect(heights.length).toBe(1);
+    expect(heights[0]).toMatch(/^\d+(?:\.\d+)?(rem|px|vh)$/);
+  });
+
   test("renders the optional context_display section", () => {
     const question = makeQuestion({
       context_display: "Plan:\n1. Deploy\n2. Verify",
@@ -236,6 +284,318 @@ describe("InterviewDock", () => {
     expect(text).toContain("Context from preceding stage");
     expect(text).toContain("1. Deploy");
   });
+
+  test("renders resize handle with correct ARIA attributes", () => {
+    const tree = render(
+      <InterviewDock runId="run-1" questions={[makeQuestion()]} />,
+    );
+    const handles = tree.root.findAllByProps({ role: "separator" });
+    expect(handles).toHaveLength(1);
+    const handle = handles[0];
+    expect(handle.props["aria-orientation"]).toBe("horizontal");
+    expect(handle.props["aria-label"]).toBe("Resize interview dock");
+  });
+
+  test("notifies parent when resize starts", () => {
+    const resizeActiveCalls: boolean[] = [];
+    const tree = render(
+      <InterviewDock
+        runId="run-1"
+        questions={[makeQuestion()]}
+        onResizeActiveChange={(active) => resizeActiveCalls.push(active)}
+      />,
+    );
+    const handle = tree.root.findByProps({ role: "separator" });
+
+    act(() => {
+      handle.props.onPointerDown({
+        preventDefault: () => {},
+        pointerId: 123,
+        clientY: 500,
+        currentTarget: { setPointerCapture: () => {} },
+      });
+    });
+
+    expect(resizeActiveCalls).toEqual([true]);
+  });
+
+  test("resizing upward increases dock height", () => {
+    globalThis.window = {
+      localStorage: {
+        getItem: () => null,
+        setItem: () => {},
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const heightChanges: string[] = [];
+    const tree = render(
+      <InterviewDock
+        runId="run-1"
+        questions={[makeQuestion()]}
+        onDockHeightChange={(height) => heightChanges.push(height)}
+      />,
+    );
+    const handle = tree.root.findByProps({ role: "separator" });
+
+    const initialHeight = parseFloat(heightChanges[0]);
+
+    act(() => {
+      handle.props.onPointerDown({
+        preventDefault: () => {},
+        pointerId: 1,
+        clientY: 500,
+        currentTarget: { setPointerCapture: () => {} },
+      });
+    });
+
+    act(() => {
+      handle.props.onPointerMove({ clientY: 400 });
+    });
+
+    const newHeight = parseFloat(heightChanges[heightChanges.length - 1]);
+    expect(newHeight).toBeGreaterThan(initialHeight);
+  });
+
+  test("resizing respects minimum height", () => {
+    globalThis.window = {
+      localStorage: {
+        getItem: () => null,
+        setItem: () => {},
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const heightChanges: string[] = [];
+    const tree = render(
+      <InterviewDock
+        runId="run-1"
+        questions={[makeQuestion()]}
+        onDockHeightChange={(height) => heightChanges.push(height)}
+      />,
+    );
+    const handle = tree.root.findByProps({ role: "separator" });
+
+    act(() => {
+      handle.props.onPointerDown({
+        preventDefault: () => {},
+        pointerId: 1,
+        clientY: 500,
+        currentTarget: { setPointerCapture: () => {} },
+      });
+    });
+
+    // Try to drag far downward to shrink below minimum
+    act(() => {
+      handle.props.onPointerMove({ clientY: 5000 });
+    });
+
+    // Should be clamped to minimum (12rem = 192px)
+    expect(heightChanges[heightChanges.length - 1]).toBe("192px");
+  });
+
+  test("notifies parent when resize ends", () => {
+    globalThis.window = {
+      localStorage: {
+        getItem: () => null,
+        setItem: () => {},
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const resizeActiveCalls: boolean[] = [];
+    const tree = render(
+      <InterviewDock
+        runId="run-1"
+        questions={[makeQuestion()]}
+        onResizeActiveChange={(active) => resizeActiveCalls.push(active)}
+      />,
+    );
+    const handle = tree.root.findByProps({ role: "separator" });
+
+    act(() => {
+      handle.props.onPointerDown({
+        preventDefault: () => {},
+        pointerId: 123,
+        clientY: 500,
+        currentTarget: { setPointerCapture: () => {} },
+      });
+    });
+
+    act(() => {
+      handle.props.onPointerUp({
+        pointerId: 123,
+        currentTarget: {
+          releasePointerCapture: () => {},
+        },
+      });
+    });
+
+    expect(resizeActiveCalls).toEqual([true, false]);
+  });
+
+  test("notifies parent when resize is cancelled", () => {
+    globalThis.window = {
+      localStorage: {
+        getItem: () => null,
+        setItem: () => {},
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const resizeActiveCalls: boolean[] = [];
+    const tree = render(
+      <InterviewDock
+        runId="run-1"
+        questions={[makeQuestion()]}
+        onResizeActiveChange={(active) => resizeActiveCalls.push(active)}
+      />,
+    );
+    const handle = tree.root.findByProps({ role: "separator" });
+
+    act(() => {
+      handle.props.onPointerDown({
+        preventDefault: () => {},
+        pointerId: 456,
+        clientY: 500,
+        currentTarget: { setPointerCapture: () => {} },
+      });
+    });
+
+    act(() => {
+      handle.props.onPointerCancel({
+        pointerId: 456,
+        currentTarget: {
+          releasePointerCapture: () => {},
+        },
+      });
+    });
+
+    expect(resizeActiveCalls).toEqual([true, false]);
+  });
+});
+
+describe("loadDockHeight", () => {
+  test("returns a valid height when localStorage is empty", () => {
+    const storage = new Map<string, string>();
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const height = loadDockHeight();
+    expect(height).toMatch(/^\d+(?:\.\d+)?(rem|px|vh)$/);
+  });
+
+  test("restores previously saved height", () => {
+    const storage = new Map<string, string>([["fabro.interviewDock.height", "24rem"]]);
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    expect(loadDockHeight()).toBe("24rem");
+  });
+
+  test("ignores invalid stored values", () => {
+    const storage = new Map<string, string>([["fabro.interviewDock.height", "invalid"]]);
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const height = loadDockHeight();
+    expect(height).toMatch(/^\d+(?:\.\d+)?(rem|px|vh)$/);
+  });
+
+  test("clamps stored height that is too small", () => {
+    const storage = new Map<string, string>([["fabro.interviewDock.height", "8rem"]]);
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    expect(loadDockHeight()).toBe("12rem");
+  });
+
+  test("clamps stored height that is too large", () => {
+    const storage = new Map<string, string>([["fabro.interviewDock.height", "90vh"]]);
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    const result = loadDockHeight();
+    expect(result).toBe("80vh");
+  });
+});
+
+describe("saveDockHeight", () => {
+  test("persists height to localStorage", () => {
+    const storage = new Map<string, string>();
+    globalThis.window = {
+      localStorage: {
+        getItem: (key: string) => storage.get(key) ?? null,
+        setItem: (key: string, value: string) => storage.set(key, value),
+      },
+      innerHeight: 1000,
+    } as any;
+
+    saveDockHeight("24rem");
+    expect(storage.get("fabro.interviewDock.height")).toBe("24rem");
+  });
+
+  test("handles localStorage errors gracefully", () => {
+    globalThis.window = {
+      localStorage: {
+        getItem: () => { throw new Error("Quota exceeded"); },
+        setItem: () => { throw new Error("Quota exceeded"); },
+      },
+      innerHeight: 1000,
+    } as any;
+
+    expect(() => saveDockHeight("24rem")).not.toThrow();
+  });
+});
+
+describe("clampDockHeight", () => {
+  test("accepts valid heights within bounds", () => {
+    expect(clampDockHeight("18rem")).toBe("18rem");
+    expect(clampDockHeight("300px")).toBe("300px");
+    expect(clampDockHeight("50vh")).toBe("50vh");
+  });
+
+  test("enforces minimum height", () => {
+    expect(clampDockHeight("8rem")).toBe("12rem");
+    expect(clampDockHeight("100px")).toBe("12rem");
+  });
+
+  test("enforces maximum height", () => {
+    expect(clampDockHeight("90vh")).toBe("80vh");
+  });
+
+  test("rejects invalid height formats", () => {
+    const result = clampDockHeight("invalid");
+    expect(result).toMatch(/^\d+(?:\.\d+)?(rem|px|vh)$/);
+
+    expect(clampDockHeight("")).toMatch(/^\d+(?:\.\d+)?(rem|px|vh)$/);
+    expect(clampDockHeight("100")).toMatch(/^\d+(?:\.\d+)?(rem|px|vh)$/);
+  });
 });
 
 describe("displayLabel", () => {