@blotch/dolan 22.2.3 → 22.2.4

package/dist/ui/components/scatter-chart/scatter-chart.test.ts

@@ -1,3 +1,9 @@
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { createChartRuntime } from '@tanstack/charts/runtime';
 import type {
   ChartDefinition,
@@ -5,7 +11,8 @@ import type {
   SceneNode,
 } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { scatterChartDefinition } from './scatter-chart';
+import type { XYDatum } from '../chart/chart-presets';
+import { UiScatterChart, scatterChartDefinition } from './scatter-chart';
 
 const data = [
   { x: 150, y: 50 },
@@ -65,3 +72,69 @@ describe('scatterChartDefinition', () => {
     expect(scene.scales['x']!.domain).toEqual([150, 170]);
   });
 });
+
+@Component({
+  imports: [UiScatterChart],
+  template: `
+    <ui-scatter-chart
+      [data]="data"
+      [width]="300"
+      [radius]="radius()"
+      (pointTap)="tapped.push($event)"
+    />
+  `,
+})
+class ScatterChartHost {
+  readonly data = data;
+  readonly radius = signal(7);
+  /** Every `pointTap`, in order. */
+  readonly tapped: XYDatum[] = [];
+}
+
+/**
+ * The SVG the chart's marks layer draws.
+ */
+const marksSvg = (container: Element) =>
+  container.querySelectorAll('svg')[1]!.getAttribute('content')!;
+
+/**
+ * Where the chart drew each dot, and how big.
+ */
+const dotsDrawn = (container: Element) =>
+  [
+    ...marksSvg(container).matchAll(
+      /<circle cx="([\d.-]+)" cy="([\d.-]+)" r="([\d.-]+)"/g,
+    ),
+  ].map(([, x, y, r]) => ({ x: Number(x), y: Number(y), r: Number(r) }));
+
+/**
+ * Touches a spot of the chart and lifts the finger right there: a tap.
+ */
+const tap = async (container: Element, at: { x: number; y: number }) => {
+  const root = container.querySelector('[accessibility-label]')!;
+  fireEvent.touchstart(root, { touches: [at] });
+  fireEvent.touchend(root, { touches: [at] });
+  await waitForUpdate();
+};
+
+describe('UiScatterChart', () => {
+  it('draws a dot per datum with its inputs', async () => {
+    const { componentRef, container } = await render(ScatterChartHost);
+    expect(dotsDrawn(container).map((dot) => dot.r)).toEqual([7, 7, 7]);
+
+    (componentRef.instance as ScatterChartHost).radius.set(3);
+    await waitForUpdate();
+    expect(dotsDrawn(container).map((dot) => dot.r)).toEqual([3, 3, 3]);
+  });
+
+  it("emits a tapped point's datum, and nothing for a tap off the points", async () => {
+    const { componentRef, container } = await render(ScatterChartHost);
+    const host = componentRef.instance as ScatterChartHost;
+    const last = dotsDrawn(container)[2]!;
+    await tap(container, { x: last.x, y: last.y });
+    expect(host.tapped).toEqual([data[2]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([data[2]]);
+  });
+});

package/dist/ui/components/scroll-area/scroll-area.test.ts

@@ -1,75 +1,111 @@
-import { Component } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { describe, expect, it, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
 import { UiScrollArea } from './scroll-area';
 
 @Component({
   imports: [UiScrollArea, LYNX_ELEMENTS],
-  template: `<ui-scroll-area><text>Body</text></ui-scroll-area>`,
+  template: `
+    <ui-scroll-area
+      [orientation]="orientation()"
+      [height]="height()"
+      [bounces]="bounces()"
+      [scrollBar]="scrollBar()"
+      [nestedScroll]="nestedScroll()"
+      class="bg-card"
+      contentClass="gap-2"
+      (scrolledToStart)="reached.push('start')"
+      (scrolledToEnd)="reached.push('end')"
+    >
+      <text>Body</text>
+    </ui-scroll-area>
+  `,
 })
-class ScrollAreaHost {}
+class ScrollAreaHost {
+  readonly orientation = signal<'vertical' | 'horizontal'>('vertical');
+  readonly height = signal('');
+  readonly bounces = signal(true);
+  readonly scrollBar = signal(true);
+  readonly nestedScroll = signal(false);
+  readonly reached: string[] = [];
+}
+
+const renderScrollArea = async () => {
+  const result = await render(ScrollAreaHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as ScrollAreaHost,
+    scrollView: () => result.container.querySelector('scroll-view')!,
+    /** The view inside the scroll view that lays out the content. */
+    content: () => result.getByText('Body').parentElement!,
+  };
+};
 
 /**
  * The values each boolean reached Lynx with, through `__SetAttribute`.
  */
 const watchAttributes = () => {
-  const mainThread = (
-    globalThis as unknown as {
-      lynxTestingEnv: { mainThread: { globalThis: Record<string, unknown> } };
-    }
-  ).lynxTestingEnv.mainThread.globalThis;
-  const setAttribute = vi.spyOn(mainThread, '__SetAttribute' as never);
+  const setAttribute = vi.spyOn(lynxMainThread(), '__SetAttribute');
   return {
     last: (name: string): unknown =>
-      (setAttribute.mock.calls as unknown[][])
-        .filter((call) => call[1] === name)
-        .at(-1)?.[2],
+      setAttribute.mock.calls.filter((call) => call[1] === name).at(-1)?.[2],
     restore: () => setAttribute.mockRestore(),
   };
 };
 
 describe('UiScrollArea', () => {
-  it('renders projected content in the scroll view', async () => {
-    const { getByText } = await render(ScrollAreaHost);
-    expect(getByText('Body')).toBeTruthy();
+  it('renders projected content in a vertical scroll view', async () => {
+    const { scrollView, content } = await renderScrollArea();
+    expect(scrollView().getAttribute('scroll-orientation')).toBe('vertical');
+    expect(scrollView().classList).toContain('bg-card');
+    expect(content().classList).toContain('flex-col');
+    expect(content().classList).toContain('gap-2');
   });
 
-  it('emits an explicit height when the height input is set', async () => {
-    const { componentRef, container } = await render(UiScrollArea);
-    setInputSignal((componentRef.instance as UiScrollArea).height, '250px');
+  it('gives the scroll view an explicit height, which it needs to scroll', async () => {
+    const { host, scrollView } = await renderScrollArea();
+    expect(scrollView().getAttribute('style') ?? '').not.toContain('height');
+
+    host.height.set('250px');
     await waitForUpdate();
-    const scroll = container.querySelector('scroll-view');
-    expect(scroll?.getAttribute('style')).toContain('height: 250px');
+    expect(scrollView().getAttribute('style')).toContain('height: 250px');
   });
 
-  it('flips the content layout for horizontal orientation', async () => {
-    const { componentRef, container } = await render(UiScrollArea);
-    setInputSignal(
-      (componentRef.instance as UiScrollArea).orientation,
-      'horizontal',
-    );
+  it('lays the content out in a row when horizontal', async () => {
+    const { host, scrollView, content } = await renderScrollArea();
+    host.orientation.set('horizontal');
     await waitForUpdate();
-    // The inner content wrapper picks up flex-row for the horizontal branch.
-    const rowEl = container.querySelector('.flex-row');
-    expect(rowEl).toBeTruthy();
+    expect(scrollView().getAttribute('scroll-orientation')).toBe('horizontal');
+    expect(content().classList).toContain('flex-row');
   });
 
   it('hands Lynx real booleans, so the defaults that are on can be turned off', async () => {
     // A false used to remove the attribute, which leaves Lynx's default: on.
     const attributes = watchAttributes();
-    const { componentRef } = await render(UiScrollArea);
-    const inst = componentRef.instance as UiScrollArea;
+    const { host } = await renderScrollArea();
     expect(attributes.last('bounces')).toBe(true);
     expect(attributes.last('scroll-bar-enable')).toBe(true);
-    setInputSignal(inst.bounces, false);
-    setInputSignal(inst.scrollBar, false);
-    setInputSignal(inst.nestedScroll, true);
+
+    host.bounces.set(false);
+    host.scrollBar.set(false);
+    host.nestedScroll.set(true);
     await waitForUpdate();
     expect(attributes.last('bounces')).toBe(false);
     expect(attributes.last('scroll-bar-enable')).toBe(false);
     expect(attributes.last('enable-nested-scroll')).toBe(true);
     attributes.restore();
   });
+
+  it('emits when scrolled to the start or the end', async () => {
+    const { host, scrollView } = await renderScrollArea();
+    fireEvent.scrolltolower(scrollView());
+    fireEvent.scrolltoupper(scrollView());
+    expect(host.reached).toEqual(['end', 'start']);
+  });
 });

package/dist/ui/components/select/select.test.ts

@@ -1,107 +1,167 @@
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+  within,
+} from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it, vi } from 'vitest';
 import { UiSelect, UiSelectItem } from './select';
 
+@Component({
+  imports: [UiSelect, UiSelectItem, LYNX_ELEMENTS],
+  template: `
+    <ui-select
+      #select
+      [(value)]="value"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      class="w-48"
+      (changed)="changed($event)"
+    >
+      <ui-select-item value="apple" label="Apple" />
+      <ui-select-item value="pear" label="Pear" class="font-bold" />
+    </ui-select>
+    <text class="open-from-code" (bindtap)="select.open()">Choose</text>
+  `,
+})
+class SelectHost {
+  readonly value = signal('');
+  readonly placeholder = signal('Pick a fruit');
+  readonly disabled = signal(false);
+  readonly changed = vi.fn((_value: string) => {});
+}
+
+const renderSelect = async () => {
+  const result = await render(SelectHost);
+  const { container } = result;
+  const overlay = container.querySelector<HTMLElement>('overlay')!;
+  return {
+    ...result,
+    host: result.componentRef.instance as SelectHost,
+    overlay,
+    trigger: container.querySelector('.border-input')!,
+    triggerText: () => container.querySelector('.border-input text')!,
+    // An item's tappable row, found by its label in the sheet.
+    item: (label: string) => within(overlay).getByText(label).parentElement!,
+  };
+};
+
+/**
+ * Waits out the sheet's open sequence: the overlay shows on one tick, and the
+ * panel slides in on the next.
+ */
+const waitForOpen = async () => {
+  for (let i = 0; i < 3; i++) await waitForUpdate();
+};
+
+/**
+ * Waits for the sheet's close sequence to finish: the panel slides out, then
+ * the overlay hides. Polled rather than timed, since the sequence only starts
+ * on the update after the sheet is told to close.
+ */
+const waitForClose = (overlay: Element) =>
+  vi.waitFor(() => expect(overlay.getAttribute('visible')).toBe('false'));
+
 describe('UiSelect', () => {
-  it('renders the trigger for the current selection', async () => {
-    const { container } = await render(UiSelect);
-    expect(container).toBeTruthy();
+  it('shows the placeholder, muted, until a value is chosen', async () => {
+    const { triggerText, trigger } = await renderSelect();
+    expect(triggerText().textContent).toBe('Pick a fruit');
+    expect(triggerText().classList).toContain('text-muted-foreground');
+    expect(trigger.classList).toContain('w-48');
   });
 
-  it('displays the placeholder when no value is selected', async () => {
-    const { componentRef, container } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    setInputSignal(inst.placeholder, 'Choose...');
+  it("shows the chosen item's label", async () => {
+    const { host, triggerText } = await renderSelect();
+    host.value.set('pear');
     await waitForUpdate();
-    expect(container.textContent).toContain('Choose...');
+    expect(triggerText().textContent).toBe('Pear');
+    expect(triggerText().classList).toContain('text-foreground');
   });
 
-  it('displays the raw value when no matching item is projected', async () => {
-    // Covers the `item?.label() ?? val` fallback path.
-    const { componentRef, container } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    inst.value.set('unknown');
+  it('shows a value that no item has as it is', async () => {
+    const { host, triggerText } = await renderSelect();
+    host.value.set('kiwi');
     await waitForUpdate();
-    expect(container.textContent).toContain('unknown');
+    expect(triggerText().textContent).toBe('kiwi');
   });
 
-  it('select() updates the model, emits `changed`, and closes the sheet', async () => {
-    const { componentRef } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    inst.open();
-    const emitted: string[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-    inst.select('b');
-    expect(inst.value()).toBe('b');
-    expect(emitted).toEqual(['b']);
+  it('opens its list when the trigger is tapped, and closes it from the sheet', async () => {
+    const { overlay, trigger } = await renderSelect();
+    expect(overlay.getAttribute('visible')).toBe('false');
+
+    fireEvent.tap(trigger);
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('true');
+
+    // Tapping the backdrop closes the sheet, which the select keeps track of:
+    // the next tap on the trigger opens it again.
+    fireEvent.tap(overlay.querySelector('view')!);
+    await waitForClose(overlay);
+    expect(overlay.getAttribute('visible')).toBe('false');
+    fireEvent.tap(trigger);
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('true');
   });
 
-  it('toggle() flips the sheet open/closed', async () => {
-    const { componentRef } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    inst.toggle();
-    inst.toggle();
-    // No throw; the internal `sheetOpen` signal is protected — verify indirectly
-    // by ensuring subsequent open()/close() calls still work.
-    inst.open();
-    inst.close();
-    expect(inst.value()).toBe('');
+  it('closes its list when the trigger is tapped again', async () => {
+    const { overlay, trigger } = await renderSelect();
+    fireEvent.tap(trigger);
+    await waitForOpen();
+    fireEvent.tap(trigger);
+    await waitForClose(overlay);
+    expect(overlay.getAttribute('visible')).toBe('false');
   });
 
-  it('toggle() / open() are no-ops when disabled', async () => {
-    const { componentRef } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    setInputSignal(inst.disabled, true);
-    await waitForUpdate();
-    // No throw and no exception paths — early-return branch is exercised.
-    inst.toggle();
-    inst.open();
-    inst.close();
-    expect(inst.value()).toBe('');
+  it('opens from code with open()', async () => {
+    const { overlay, getByText } = await renderSelect();
+    fireEvent.tap(getByText('Choose'));
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('true');
   });
 
-  it('trigger dims when the select is disabled', async () => {
-    const { componentRef, container } = await render(UiSelect);
-    const inst = componentRef.instance as UiSelect;
-    setInputSignal(inst.disabled, true);
+  it("dims and doesn't open while disabled", async () => {
+    const { host, overlay, trigger, getByText } = await renderSelect();
+    host.disabled.set(true);
     await waitForUpdate();
-    const trigger = container.querySelector('view');
-    expect(trigger?.getAttribute('class')).toContain('opacity-50');
+    expect(trigger.classList).toContain('opacity-50');
+
+    fireEvent.tap(trigger);
+    fireEvent.tap(getByText('Choose'));
+    await waitForOpen();
+    expect(overlay.getAttribute('visible')).toBe('false');
   });
 });
 
 describe('UiSelectItem', () => {
-  it('onTap delegates to the parent select', async () => {
-    const parentResult = await render(UiSelect);
-    const parent = parentResult.componentRef.instance as UiSelect;
-
-    const itemResult = await render(UiSelectItem, {
-      providers: [{ provide: UiSelect, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiSelectItem;
-    setInputSignal(item.itemValue, 'x');
-    setInputSignal(item.label, 'X');
-    await waitForUpdate();
+  it('chooses its value when tapped, and closes the list', async () => {
+    const { host, overlay, trigger, triggerText, item } = await renderSelect();
+    fireEvent.tap(trigger);
+    await waitForOpen();
 
-    (item as unknown as { onTap: () => void }).onTap();
-    expect(parent.value()).toBe('x');
+    fireEvent.tap(item('Apple'));
+    expect(host.value()).toBe('apple');
+    expect(host.changed).toHaveBeenCalledWith('apple');
+    await waitForUpdate();
+    expect(triggerText().textContent).toBe('Apple');
+    await waitForClose(overlay);
+    expect(overlay.getAttribute('visible')).toBe('false');
   });
 
-  it('highlights the selected item via bg-accent', async () => {
-    const parentResult = await render(UiSelect);
-    const parent = parentResult.componentRef.instance as UiSelect;
-    parent.value.set('x');
-
-    const itemResult = await render(UiSelectItem, {
-      providers: [{ provide: UiSelect, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiSelectItem;
-    setInputSignal(item.itemValue, 'x');
-    setInputSignal(item.label, 'X');
+  it('marks the chosen item with a highlight and a check', async () => {
+    const { host, item } = await renderSelect();
+    host.value.set('pear');
     await waitForUpdate();
+    expect(item('Pear').classList).toContain('bg-accent');
+    expect(item('Pear').querySelector('svg')).not.toBeNull();
+    expect(item('Apple').classList).not.toContain('bg-accent');
+    expect(item('Apple').querySelector('svg')).toBeNull();
+  });
 
-    const view = itemResult.container.querySelector('view');
-    expect(view?.getAttribute('class')).toContain('bg-accent');
+  it("adds the class to the item's own", async () => {
+    const { item } = await renderSelect();
+    expect(item('Pear').classList).toContain('font-bold');
+    expect(item('Pear').classList).toContain('px-4');
   });
 });

package/dist/ui/components/select/select.ts

@@ -3,7 +3,6 @@ import {
   ViewEncapsulation,
   computed,
   contentChildren,
-  forwardRef,
   inject,
   input,
   model,
@@ -18,17 +17,28 @@ import { cn } from '../../utils/cn';
 const CHEVRON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
 const CHECK_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
 
+/**
+ * `UiSelectItem`, for `contentChildren()`. A call rather than the class
+ * itself: for a class, Angular's test build keeps an arrow function that
+ * nothing calls, which an app's coverage report would show as uncovered.
+ */
+const selectItem = () => UiSelectItem;
+
 @Component({
   selector: 'ui-select',
   standalone: true,
   imports: [LYNX_ELEMENTS, UiBottomSheet],
   encapsulation: ViewEncapsulation.None,
+  // `sheetOpen` is bound both ways by hand rather than with `[(open)]`: for a
+  // two-way binding Angular also compiles a fallback that assigns the field,
+  // which never runs for a signal and so shows as an uncovered branch in an
+  // app's coverage report.
   template: `
     <view [class]="triggerClass()" (bindtap)="toggle()">
       <text [class]="valueTextClass()">{{ displayText() }}</text>
       <svg [attr.content]="chevronSvg" style="width: 16px; height: 16px;" />
     </view>
-    <ui-bottom-sheet [(open)]="sheetOpen">
+    <ui-bottom-sheet [open]="sheetOpen()" (openChange)="sheetOpen.set($event)">
       <scroll-view scroll-orientation="vertical" style="max-height: 300px;">
         <view class="flex-col pb-4 flex">
           <ng-content />
@@ -47,21 +57,17 @@ export class UiSelect {
 
   protected readonly chevronSvg = CHEVRON_SVG;
 
-  // Drives the shared bottom-sheet's `open` model via `[(open)]`. All the
-  // overlay/animation/drag behavior lives in ui-bottom-sheet; select only
-  // decides when the sheet is open.
+  // Drives the shared bottom-sheet's `open` model. All the overlay/animation/
+  // drag behavior lives in ui-bottom-sheet; select only decides when the sheet
+  // is open.
   protected readonly sheetOpen = signal(false);
 
-  // `forwardRef` is required because UiSelectItem is defined later in this
-  // file — without it, the reference would be `undefined` at class-definition
-  // time and contentChildren would silently query nothing.
-  /* v8 ignore next 1 -- forwardRef lambda; JIT+jsdom doesn't wire required child inputs */
-  readonly itemRefs = contentChildren(forwardRef(() => UiSelectItem));
+  // The projected items, so the trigger can show the chosen one's label.
+  readonly itemRefs = contentChildren(selectItem());
 
   protected readonly displayText = computed(() => {
     const val = this.value();
     if (!val) return this.placeholder();
-    /* v8 ignore next 1 -- .find predicate: unreachable when no content-projected items */
     const item = this.itemRefs().find((i) => i.itemValue() === val);
     return item?.label() ?? val;
   });

package/dist/ui/components/separator/separator.test.ts

@@ -1,26 +1,27 @@
+import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { UiSeparator } from './separator';
 
+@Component({
+  imports: [UiSeparator],
+  template: `<ui-separator [orientation]="orientation()" class="my-2" />`,
+})
+class SeparatorHost {
+  readonly orientation = signal<'horizontal' | 'vertical'>('horizontal');
+}
+
 describe('UiSeparator', () => {
-  it('renders horizontally (default)', async () => {
-    const { componentRef } = await render(UiSeparator);
-    // The class binding lands on the host element, which is the component's
-    // location.nativeElement (a real DOM node representing the ui-separator
-    // host). Read the class directly from that node.
-    const host = componentRef.location.nativeElement as HTMLElement;
-    expect(host.getAttribute('class')).toContain('h-px');
-  });
+  it('draws a horizontal line by default, and a vertical one when asked', async () => {
+    const { componentRef, container } = await render(SeparatorHost);
+    // The classes are on the host element, the separator's only element.
+    const line = container.querySelector('.bg-border')!;
+    expect(line.classList).toContain('h-px');
+    expect(line.classList).toContain('my-2');
 
-  it('renders vertically when the orientation input is flipped', async () => {
-    const { componentRef } = await render(UiSeparator);
-    setInputSignal(
-      (componentRef.instance as UiSeparator).orientation,
-      'vertical',
-    );
+    (componentRef.instance as SeparatorHost).orientation.set('vertical');
     await waitForUpdate();
-    const host = componentRef.location.nativeElement as HTMLElement;
-    expect(host.getAttribute('class')).toContain('w-px');
+    expect(line.classList).toContain('w-px');
+    expect(line.classList).not.toContain('h-px');
   });
 });