@weasel-js/labkit 1.5.1 → 1.6.0

package/src/controls/ControlPanel.test.tsx

@@ -187,7 +187,11 @@ describe('<ControlPanel> schema', () => {
       [],
     );
     render(
-      <ControlPanel schema={schema} config={{ showGrid: true, snap: false }} setConfig={setConfig} />,
+      <ControlPanel
+        schema={schema}
+        config={{ showGrid: true, snap: false }}
+        setConfig={setConfig}
+      />,
     );
     expect(screen.getByRole('checkbox', { name: 'Show grid' })).toBeInTheDocument();
     const sw = screen.getByRole('switch', { name: 'Snap' });
@@ -478,7 +482,27 @@ describe('<ControlPanel> format', () => {
         setConfig={vi.fn()}
       />,
     );
-    expect(screen.getByDisplayValue('2.0M')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('2.00M')).toBeInTheDocument();
+  });
+});
+
+describe('<ControlPanel> group descriptions', () => {
+  it('draws a named group’s describe() above its rows', () => {
+    const schema = resolveConfigSchema(
+      f.schema({
+        grid: f
+          .group({ cellSize: f.number(20) })
+          .label('Grid')
+          .describe('How the background lattice is spaced.'),
+      }),
+      [],
+    );
+    render(
+      <ControlPanel schema={schema} config={{ grid: { cellSize: 20 } }} setConfig={vi.fn()} />,
+    );
+    const note = screen.getByText('How the background lattice is spaced.');
+    const field = screen.getByLabelText('Cell size');
+    expect(note.compareDocumentPosition(field) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
   });
 });
 
@@ -675,7 +699,7 @@ describe('<ControlPanel> nested groups', () => {
 });
 
 describe('<ControlPanel> auto', () => {
-  it('renders a pin dot whether or not it was given a set of auto paths', () => {
+  it('renders a label toggle whether or not it was given a set of auto paths', () => {
     render(
       <ControlPanel
         schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
@@ -708,7 +732,7 @@ describe('<ControlPanel> auto', () => {
     expect(setConfig).toHaveBeenCalledWith('gap', 12);
   });
 
-  it("reads the resolver for an auto row's readout", () => {
+  it('reads out the bare word, resolver or not', () => {
     render(
       <ControlPanel
         schema={resolveConfigSchema(
@@ -725,19 +749,8 @@ describe('<ControlPanel> auto', () => {
         setConfig={() => {}}
       />,
     );
-    expect(screen.getByText('auto · 18')).toBeInTheDocument();
-  });
-
-  it('reads "auto" alone for a path with no resolver', () => {
-    render(
-      <ControlPanel
-        schema={resolveConfigSchema(f.schema({ cols: f.number(3).range(0, 8) }), [])}
-        config={{ cols: 3 }}
-        auto={new Set(['cols'])}
-        setConfig={() => {}}
-      />,
-    );
     expect(screen.getByText('auto')).toBeInTheDocument();
+    expect(screen.queryByText(/auto · /)).toBeNull();
   });
 
   it('writes the sentinel when the dot turns a row auto', async () => {
@@ -794,11 +807,11 @@ describe('<ControlPanel> auto', () => {
     expect(screen.queryByRole('button', { name: /Seed/ })).toBeNull();
   });
 
-  it('reports what the instrument reads when a resolver depends on another auto path', () => {
+  it('draws what the instrument reads when a resolver depends on another auto path', () => {
     // `width` is auto with no resolver, so the instrument sees `undefined` and
     // `gap` resolves from that. Re-running gap's resolver against the raw
-    // config would instead read the pinned 640 and report a number nobody got.
-    render(
+    // config would instead read the pinned 640 and draw a number nobody got.
+    const { container } = render(
       <ControlPanel
         schema={resolveConfigSchema(
           f.schema({
@@ -806,7 +819,7 @@ describe('<ControlPanel> auto', () => {
             gap: f
               .number(12)
               .range(0, 48)
-              .auto((c) => (c.width === undefined ? -1 : (c.width as number) / 64)),
+              .auto((c) => (c.width === undefined ? 5 : (c.width as number) / 64)),
           }),
           [],
         )}
@@ -815,27 +828,7 @@ describe('<ControlPanel> auto', () => {
         setConfig={() => {}}
       />,
     );
-    expect(screen.getByText('auto · -1')).toBeInTheDocument();
-    expect(screen.queryByText('auto · 10')).toBeNull();
-  });
-
-  it('does not repeat a resolved value the control itself already shows', () => {
-    render(
-      <ControlPanel
-        schema={resolveConfigSchema(
-          f.schema({ caption: f.string('typed').auto(() => 'eight across') }),
-          [],
-        )}
-        config={{ caption: 'typed' }}
-        auto={new Set(['caption'])}
-        setConfig={() => {}}
-      />,
-    );
-    // The field below the readout is already showing it, and the readout slot
-    // is one narrow column — a long string wraps it onto two lines.
-    expect(screen.getByText('auto')).toBeInTheDocument();
-    expect(screen.queryByText(/auto · /)).toBeNull();
-    expect(screen.getByDisplayValue('eight across')).toBeInTheDocument();
+    expect(container.querySelector('input[type=range]')).toHaveValue('5');
   });
 
   it('draws an auto control at the resolved value, not the value underneath it', () => {
@@ -881,7 +874,7 @@ describe('<ControlPanel> auto', () => {
   });
 
   // Every kind, because the panel wraps some rows before rendering them and a
-  // wrapper that drops the auto props leaves that kind silently unghosted.
+  // wrapper that drops the auto props leaves that kind silently pinned.
   it.each([
     ['number', f.number(3).range(0, 8)],
     ['slider', f.number(3).range(0, 8).slider()],
@@ -890,7 +883,7 @@ describe('<ControlPanel> auto', () => {
     ['radio', f.enum('a', ['a', 'b']).radio()],
     ['string', f.string('hi')],
     ['color', f.color('#3a86ff')],
-  ])('marks a %s row auto and gives it a dot and a path', (_kind, node) => {
+  ])('marks a %s row auto and gives it a label toggle', (_kind, node) => {
     const { container } = render(
       <ControlPanel
         schema={resolveConfigSchema(f.schema({ thing: node.label('Thing') }), [])}
@@ -899,76 +892,11 @@ describe('<ControlPanel> auto', () => {
         setConfig={() => {}}
       />,
     );
-    const row = container.querySelector('[data-auto-path="thing"]');
-    expect(row).not.toBeNull();
-    expect(row?.className).toMatch(/rowAuto/);
+    expect(container.querySelector('[class*=rowAuto]')).not.toBeNull();
     expect(screen.getByRole('button', { name: 'Pin Thing' })).toBeInTheDocument();
   });
 });
 
-describe('<ControlPanel> shift-click', () => {
-  const panel = (props = {}) =>
-    render(
-      <ControlPanel
-        schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
-        config={{ gap: 12 }}
-        auto={new Set()}
-        setConfig={() => {}}
-        {...props}
-      />,
-    );
-
-  it('toggles a row on shift-pointerdown and suppresses the control it landed on', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({ setConfig });
-    const track = container.querySelector('input[type=range]') as HTMLInputElement;
-    const ev = new PointerEvent('pointerdown', { bubbles: true, cancelable: true, shiftKey: true });
-    track.dispatchEvent(ev);
-
-    expect(setConfig).toHaveBeenCalledWith('gap', auto);
-    // A PROXY, not the real claim. jsdom synthesizes neither a label's click
-    // retargeting nor a range input's drag, so "the slider did not move" cannot
-    // fail here. What is assertable is that the default was suppressed; the
-    // browser half is covered by the story.
-    expect(ev.defaultPrevented).toBe(true);
-  });
-
-  it('leaves an ordinary pointerdown alone', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({ setConfig });
-    container
-      .querySelector('input[type=range]')
-      ?.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));
-    expect(setConfig).not.toHaveBeenCalled();
-  });
-
-  it('ignores shift-pointerdown on a manual row', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({
-      schema: resolveConfigSchema(f.schema({ seed: f.number(1).manual().range(0, 8) }), []),
-      config: { seed: 1 },
-      setConfig,
-    });
-    container
-      .querySelector('input')
-      ?.dispatchEvent(
-        new PointerEvent('pointerdown', { bubbles: true, cancelable: true, shiftKey: true }),
-      );
-    expect(setConfig).not.toHaveBeenCalled();
-  });
-
-  it('pins a shift-clicked auto row back at its stored value', () => {
-    const setConfig = vi.fn();
-    const { container } = panel({ config: { gap: 24 }, auto: new Set(['gap']), setConfig });
-    container
-      .querySelector('input[type=range]')
-      ?.dispatchEvent(
-        new PointerEvent('pointerdown', { bubbles: true, cancelable: true, shiftKey: true }),
-      );
-    expect(setConfig).toHaveBeenCalledWith('gap', 24);
-  });
-});
-
 describe('<ControlPanel> pair', () => {
   const paired = () =>
     resolveConfigSchema(
@@ -986,9 +914,13 @@ describe('<ControlPanel> pair', () => {
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
     expect(within(row).getByLabelText('X')).toHaveValue(10);
     expect(within(row).getByLabelText('Y')).toHaveValue(20);
-    // The pair names the row, so neither leaf's own name is drawn beside it.
-    expect(screen.queryByText('X')).toBeNull();
-    expect(screen.queryByText('Y')).toBeNull();
+  });
+
+  it('captions each cell of a pair with its own name, so a paired switch is not left unnamed', () => {
+    render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
+    const row = screen.getByText('Offset').closest('div') as HTMLElement;
+    expect(within(row).getByText('X')).toHaveClass('lk-pair-label');
+    expect(within(row).getByText('Y')).toHaveClass('lk-pair-label');
   });
 
   it('writes each cell of a paired row to its own path', () => {
@@ -998,6 +930,23 @@ describe('<ControlPanel> pair', () => {
     expect(setConfig).toHaveBeenCalledWith('y', 30);
   });
 
+  it('keeps a segmented leaf segmented when it shares a row, and gives that row the width', () => {
+    const schema = resolveConfigSchema(
+      f.schema({
+        camera: f.enum<'2d' | '3d'>('3d', ['2d', '3d']).radio().label('').pair('Camera'),
+        hold: f.boolean(true).toggle().label('Hold front').pair('Camera'),
+      }),
+      [],
+    );
+    render(
+      <ControlPanel schema={schema} config={{ camera: '3d', hold: true }} setConfig={vi.fn()} />,
+    );
+    const row = screen.getByText('Camera').closest('div') as HTMLElement;
+    expect(within(row).getByRole('radio', { name: '2d' })).toBeInTheDocument();
+    expect(within(row).queryByRole('combobox')).toBeNull();
+    expect(row.className).toMatch(/span/);
+  });
+
   it('leaves an unpaired sibling on its own row', () => {
     render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
     const row = screen.getByText('Offset').closest('div') as HTMLElement;
@@ -1121,3 +1070,24 @@ describe('<ControlPanel> color alpha', () => {
     expect(screen.queryByLabelText('Tint opacity')).toBeNull();
   });
 });
+
+describe('<ControlPanel> title, stance and tone', () => {
+  const fields: ConfigField[] = [{ key: 'on', label: 'On', type: 'checkbox', default: true }];
+
+  it('renders the bare list when given none of them', () => {
+    const { container } = render(<ControlPanel fields={fields} config={{ on: true }} setConfig={vi.fn()} />);
+    expect(container.firstElementChild?.classList.contains('lk-control-panel')).toBe(true);
+    expect(container.querySelector('[data-stance], h2')).toBeNull();
+  });
+
+  it('wraps its rows in a panel carrying them when asked', () => {
+    const { container } = render(
+      <ControlPanel title="View" stance="scope" tone={1} fields={fields} config={{ on: true }} setConfig={vi.fn()} />,
+    );
+    const panel = container.firstElementChild as HTMLElement;
+    expect(panel.dataset.stance).toBe('scope');
+    expect(panel.dataset.tone).toBe('1');
+    expect(screen.getByRole('heading', { name: 'View' })).toBeTruthy();
+    expect(panel.querySelector('.lk-control-panel')).not.toBeNull();
+  });
+});