@weasel-js/labkit 1.5.0 → 1.5.2

package/src/controls/ControlPanel.test.tsx

@@ -1,7 +1,10 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { TOOL_PREF_KINDS, type ToolPrefKind } from '@weasel-js/core';
 import type { PrefLeaf } from '@weasel-js/ui';
+import { useState } from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
+import { auto } from '../config/auto';
 import { f } from '../config/builder';
 import { resolveConfigSchema } from '../config/resolve';
 import type { ResolvedConfig } from '../config/types';
@@ -68,9 +71,12 @@ describe('<ControlPanel> select', () => {
       },
     ];
     render(<ControlPanel fields={fields} config={{ wave: 'sine' }} setConfig={setConfig} />);
-    const sel = screen.getByLabelText('Wave') as HTMLSelectElement;
-    expect(sel.tagName).toBe('SELECT');
-    fireEvent.change(sel, { target: { value: 'square' } });
+    const trigger = screen.getByRole('button', { name: 'Sine Wave' });
+    expect(trigger).toHaveTextContent('Sine');
+    act(() => {
+      fireEvent.click(trigger);
+    });
+    fireEvent.click(within(screen.getByRole('listbox')).getByRole('option', { name: 'Square' }));
     expect(setConfig).toHaveBeenCalledWith('wave', 'square');
   });
 });
@@ -174,6 +180,22 @@ describe('<ControlPanel> schema', () => {
     expect(setConfig).toHaveBeenCalledWith('showGrid', false);
   });
 
+  it('draws a switch for a toggle() leaf and a checkbox for a plain one', () => {
+    const setConfig = vi.fn();
+    const schema = resolveConfigSchema(
+      f.schema({ showGrid: f.boolean(true), snap: f.boolean(true).toggle() }),
+      [],
+    );
+    render(
+      <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' });
+    expect(sw).toBeInTheDocument();
+    fireEvent.click(sw);
+    expect(setConfig).toHaveBeenCalledWith('snap', true);
+  });
+
   it('picks a slider for a bounded number and an input for an open one', () => {
     const schema = resolveConfigSchema(
       f.schema({ a: f.number(5).range(0, 10), b: f.number(5) }),
@@ -460,6 +482,64 @@ describe('<ControlPanel> format', () => {
   });
 });
 
+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();
+  });
+});
+
+describe('<ControlPanel> section layout', () => {
+  const schema = resolveConfigSchema(
+    f.schema({
+      seed: f.number(0).section('Advanced'),
+      mode: f
+        .enum('a', [
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ])
+        .label('Mode')
+        .section('Globals', { layout: 'inline', pack: 'one-up' }),
+      font: f
+        .enum('x', [{ value: 'x', label: 'X' }])
+        .label('Font')
+        .section('Globals'),
+    }),
+    [],
+  );
+  const config = { seed: 0, mode: 'a', font: 'x' };
+  // The row class comes through the CSS-module proxy, so this proves which layout the row asked for, not a rule.
+  const rowOf = (label: string) => screen.getByText(label).closest('label') as HTMLElement;
+
+  it('lays out every row in a section the way the section asks, and leaves other sections alone', () => {
+    render(<ControlPanel schema={schema} config={config} setConfig={vi.fn()} />);
+    expect(rowOf('Mode').className).toMatch(/rowInline/);
+    expect(rowOf('Font').className).toMatch(/rowInline/);
+    expect(rowOf('Seed').className).not.toMatch(/rowInline/);
+  });
+
+  it('carries a section’s layout into its resolved spec', () => {
+    expect(schema.sections.find((section) => section.label === 'Globals')).toMatchObject({
+      layout: 'inline',
+      pack: 'one-up',
+    });
+    expect(schema.sections.find((section) => section.label === 'Advanced')).not.toHaveProperty(
+      'layout',
+    );
+  });
+});
+
 describe('<ControlPanel> collapsible sections', () => {
   const schema = resolveConfigSchema(
     f.schema({ showGrid: f.boolean(true), seed: f.number(0).section('Advanced') }),
@@ -611,3 +691,376 @@ describe('<ControlPanel> nested groups', () => {
     expect(screen.getByText('size:44')).toBeInTheDocument();
   });
 });
+
+describe('<ControlPanel> auto', () => {
+  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) }), [])}
+        config={{ gap: 12 }}
+        setConfig={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Pin Gap' })).toBeInTheDocument();
+  });
+
+  it('hands a custom renderer the auto state and a working toggle', async () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
+        config={{ gap: 12 }}
+        auto={new Set(['gap'])}
+        setConfig={setConfig}
+        renderers={{
+          gap: (ctx) => (
+            <button type="button" onClick={() => ctx.setAuto(false)}>
+              {ctx.auto ? 'is auto' : 'is pinned'}
+            </button>
+          ),
+        }}
+      />,
+    );
+    const control = screen.getByRole('button', { name: 'is auto' });
+    await userEvent.click(control);
+    expect(setConfig).toHaveBeenCalledWith('gap', 12);
+  });
+
+  it('reads out the bare word, resolver or not', () => {
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(
+          f.schema({
+            gap: f
+              .number(12)
+              .auto(() => 18)
+              .range(0, 48),
+          }),
+          [],
+        )}
+        config={{ gap: 12 }}
+        auto={new Set(['gap'])}
+        setConfig={() => {}}
+      />,
+    );
+    expect(screen.getByText('auto')).toBeInTheDocument();
+    expect(screen.queryByText(/auto · /)).toBeNull();
+  });
+
+  it('writes the sentinel when the dot turns a row auto', async () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
+        config={{ gap: 12 }}
+        auto={new Set()}
+        setConfig={setConfig}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Gap/ }));
+    expect(setConfig).toHaveBeenCalledWith('gap', auto);
+  });
+
+  it('keeps the sentinel out of a config it is not given an auto set for', async () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
+        config={{ gap: 12 }}
+        setConfig={setConfig}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Gap/ }));
+    expect(setConfig).not.toHaveBeenCalled();
+    expect(screen.getByText('auto')).toBeInTheDocument();
+  });
+
+  it('writes the pinned value back when the dot un-autos a row', async () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ gap: f.number(12).range(0, 48) }), [])}
+        config={{ gap: 24 }}
+        auto={new Set(['gap'])}
+        setConfig={setConfig}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Gap/ }));
+    expect(setConfig).toHaveBeenCalledWith('gap', 24);
+  });
+
+  it('gives a manual row no dot', () => {
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ seed: f.number(1).manual().range(0, 8) }), [])}
+        config={{ seed: 1 }}
+        auto={new Set()}
+        setConfig={() => {}}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /Seed/ })).toBeNull();
+  });
+
+  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 draw a number nobody got.
+    const { container } = render(
+      <ControlPanel
+        schema={resolveConfigSchema(
+          f.schema({
+            width: f.number(640),
+            gap: f
+              .number(12)
+              .range(0, 48)
+              .auto((c) => (c.width === undefined ? 5 : (c.width as number) / 64)),
+          }),
+          [],
+        )}
+        config={{ width: 640, gap: 12 }}
+        auto={new Set(['width', 'gap'])}
+        setConfig={() => {}}
+      />,
+    );
+    expect(container.querySelector('input[type=range]')).toHaveValue('5');
+  });
+
+  it('draws an auto control at the resolved value, not the value underneath it', () => {
+    const { container } = render(
+      <ControlPanel
+        schema={resolveConfigSchema(
+          f.schema({
+            gap: f
+              .number(12)
+              .range(0, 48)
+              .auto(() => 18),
+          }),
+          [],
+        )}
+        config={{ gap: 12 }}
+        auto={new Set(['gap'])}
+        setConfig={() => {}}
+      />,
+    );
+    expect(container.querySelector('input[type=range]')).toHaveValue('18');
+  });
+
+  it('pins at the value it was drawing, not the stale one underneath', async () => {
+    const setConfig = vi.fn();
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(
+          f.schema({
+            gap: f
+              .number(12)
+              .range(0, 48)
+              .auto(() => 18),
+          }),
+          [],
+        )}
+        config={{ gap: 12 }}
+        auto={new Set(['gap'])}
+        setConfig={setConfig}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Pin Gap' }));
+    expect(setConfig).toHaveBeenCalledWith('gap', 18);
+  });
+
+  // Every kind, because the panel wraps some rows before rendering them and a
+  // 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()],
+    ['boolean', f.boolean(true)],
+    ['enum', f.enum('a', ['a', 'b'])],
+    ['radio', f.enum('a', ['a', 'b']).radio()],
+    ['string', f.string('hi')],
+    ['color', f.color('#3a86ff')],
+  ])('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') }), [])}
+        config={{ thing: node.default }}
+        auto={new Set(['thing'])}
+        setConfig={() => {}}
+      />,
+    );
+    expect(container.querySelector('[class*=rowAuto]')).not.toBeNull();
+    expect(screen.getByRole('button', { name: 'Pin Thing' })).toBeInTheDocument();
+  });
+});
+
+describe('<ControlPanel> pair', () => {
+  const paired = () =>
+    resolveConfigSchema(
+      f.schema({
+        x: f.number(10).label('X').pair('Offset'),
+        y: f.number(20).label('Y').pair('Offset'),
+        scale: f.number(1).label('Scale'),
+      }),
+      [],
+    );
+  const config = { x: 10, y: 20, scale: 1 };
+
+  it('draws two leaves sharing a pair id as one row named by the pair', () => {
+    render(<ControlPanel schema={paired()} config={config} setConfig={vi.fn()} />);
+    const row = screen.getByText('Offset').closest('div') as HTMLElement;
+    expect(within(row).getByLabelText('X')).toHaveValue(10);
+    expect(within(row).getByLabelText('Y')).toHaveValue(20);
+  });
+
+  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', () => {
+    const setConfig = vi.fn();
+    render(<ControlPanel schema={paired()} config={config} setConfig={setConfig} />);
+    fireEvent.change(screen.getByLabelText('Y'), { target: { value: '30' } });
+    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;
+    expect(within(row).queryByLabelText('Scale')).toBeNull();
+    expect(screen.getByLabelText('Scale')).toHaveValue(1);
+  });
+});
+
+describe('<ControlPanel> unit', () => {
+  const degrees = {
+    toDisplay: (stored: number) => (stored * 180) / Math.PI,
+    fromDisplay: (shown: number) => (shown * Math.PI) / 180,
+    suffix: '°',
+  };
+  const angle = (node: ReturnType<typeof f.number>, stored: number, setConfig = vi.fn()) => {
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ angle: node.label('Angle') }), [])}
+        config={{ angle: stored }}
+        setConfig={setConfig}
+      />,
+    );
+    return setConfig;
+  };
+
+  it('shows a radians-backed number in its display unit', () => {
+    angle(f.number(0).input().unit(degrees), Math.PI / 2);
+    expect((screen.getByLabelText('Angle') as HTMLInputElement).value).toBe('90');
+  });
+
+  it('stores a typed display value back in the canonical unit', () => {
+    const setConfig = angle(f.number(0).input().unit(degrees), Math.PI / 2);
+    fireEvent.change(screen.getByLabelText('Angle'), { target: { value: '45' } });
+    expect(setConfig.mock.calls[0][0]).toBe('angle');
+    expect(setConfig.mock.calls[0][1] as number).toBeCloseTo(Math.PI / 4, 10);
+  });
+
+  it('round-trips a value edited away and back', () => {
+    // Live config, because the corruption this guards against only shows on
+    // the second edit: what the field stores has to read back as what it showed.
+    function Live() {
+      const [config, setConfig] = useState<Record<string, unknown>>({ angle: Math.PI / 2 });
+      return (
+        <ControlPanel
+          schema={resolveConfigSchema(
+            f.schema({ angle: f.number(0).input().unit(degrees).label('Angle') }),
+            [],
+          )}
+          config={config}
+          setConfig={(path, value) => setConfig((prev) => ({ ...prev, [path]: value }))}
+        />
+      );
+    }
+    render(<Live />);
+    const field = () => screen.getByLabelText('Angle') as HTMLInputElement;
+    expect(field().value).toBe('90');
+    fireEvent.change(field(), { target: { value: '45' } });
+    expect(field().value).toBe('45');
+    fireEvent.change(field(), { target: { value: '90' } });
+    expect(field().value).toBe('90');
+  });
+
+  it('converts a slider’s bounds into the display unit', () => {
+    angle(f.number(0).range(0, Math.PI).unit(degrees), Math.PI / 2);
+    const slider = screen.getByRole('slider') as HTMLInputElement;
+    expect(slider.min).toBe('0');
+    expect(slider.max).toBe('180');
+    expect(slider.value).toBe('90');
+  });
+
+  it('clamps a typed value against the bounds in display space', () => {
+    // 100 is inside 0..180 degrees and outside 0..π radians, so clamping
+    // against the stored bounds would cut a legal angle down to π.
+    const setConfig = angle(f.number(0).range(0, Math.PI).input().unit(degrees), Math.PI / 2);
+    fireEvent.change(screen.getByLabelText('Angle'), { target: { value: '100' } });
+    expect(setConfig.mock.calls[0][1] as number).toBeCloseTo((100 * Math.PI) / 180, 10);
+  });
+});
+
+describe('<ControlPanel> color alpha', () => {
+  const panel = (setConfig = vi.fn(), stored = '#336699cc') => {
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(
+          f.schema({ tint: f.color('#000000ff').alpha().label('Tint') }),
+          [],
+        )}
+        config={{ tint: stored }}
+        setConfig={setConfig}
+      />,
+    );
+    return setConfig;
+  };
+
+  it('splits the stored hex into a swatch and an alpha track', () => {
+    panel();
+    expect((screen.getByLabelText('Tint') as HTMLInputElement).value).toBe('#336699');
+    expect((screen.getByLabelText('Tint opacity') as HTMLInputElement).value).toBe('0.8');
+  });
+
+  it('keeps the stored alpha when the swatch moves', () => {
+    const setConfig = panel();
+    fireEvent.change(screen.getByLabelText('Tint'), { target: { value: '#00ff00' } });
+    expect(setConfig).toHaveBeenCalledWith('tint', '#00ff00cc');
+  });
+
+  it('keeps the stored color when the alpha track moves', () => {
+    const setConfig = panel();
+    fireEvent.change(screen.getByLabelText('Tint opacity'), { target: { value: '0.5' } });
+    expect(setConfig).toHaveBeenCalledWith('tint', '#33669980');
+  });
+
+  it('leaves a color leaf without alpha as a bare swatch', () => {
+    render(
+      <ControlPanel
+        schema={resolveConfigSchema(f.schema({ tint: f.color('#336699').label('Tint') }), [])}
+        config={{ tint: '#336699' }}
+        setConfig={vi.fn()}
+      />,
+    );
+    expect(screen.queryByLabelText('Tint opacity')).toBeNull();
+  });
+});