@blotch/dolan 22.2.3 → 22.2.5

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

@@ -1,8 +1,6 @@
 import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { UiIcon } from './icon';
 import {
   ICON_DARK_COLORS,
@@ -13,84 +11,97 @@ import {
 import { ICONS, type IconName } from './icons';
 
 @Component({
-  imports: [UiIcon, LYNX_ELEMENTS],
-  template: `<ui-icon [name]="name" [size]="size" [color]="color" />`,
+  imports: [UiIcon],
+  template: `
+    <ui-icon
+      [name]="name()"
+      [size]="size()"
+      [color]="color()"
+      [class]="className()"
+    />
+  `,
 })
 class IconHost {
-  name: IconName = 'check';
-  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-  color?: string;
+  readonly name = signal<IconName>('check');
+  readonly size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = signal<string | undefined>(undefined);
+  readonly className = signal('');
 }
 
+const renderIcon = async (providers: Parameters<typeof render>[1] = {}) => {
+  const result = await render(IconHost, providers);
+  return {
+    ...result,
+    host: result.componentRef.instance as IconHost,
+    svg: () => result.container.querySelector('svg')!,
+  };
+};
+
 describe('UiIcon', () => {
-  it('renders the requested icon at default size', async () => {
-    const { container } = await render(IconHost);
-    expect(container).toBeTruthy();
+  it('draws the named icon at the default size', async () => {
+    const { svg } = await renderIcon();
+    expect(svg().getAttribute('style')).toContain('24px');
+    expect(svg().getAttribute('content')).toContain('<svg');
+  });
+
+  it('draws another icon when the name changes', async () => {
+    const { host, svg } = await renderIcon();
+    const check = svg().getAttribute('content');
+    host.name.set('x');
+    await waitForUpdate();
+    expect(svg().getAttribute('content')).not.toBe(check);
   });
 
   it('applies the size input to the width/height style', async () => {
-    // JIT template bindings are inert against `input()` — drive the signals
-    // directly so sizeStyle and svgContent both re-run.
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    setInputSignal((componentRef.instance as UiIcon).size, 'xs');
+    const { host, svg } = await renderIcon();
+    host.size.set('xs');
     await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('style')).toContain('16px');
+    expect(svg().getAttribute('style')).toContain('16px');
   });
 
   it('substitutes currentColor with the color input value', async () => {
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    setInputSignal((componentRef.instance as UiIcon).color, 'rgb(255, 0, 0)');
+    // Lynx's SVG parser reads neither `currentColor` nor CSS variables.
+    const { host, svg } = await renderIcon();
+    host.color.set('rgb(255, 0, 0)');
     await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('content')).toContain('rgb(255, 0, 0)');
-    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+    expect(svg().getAttribute('content')).toContain('rgb(255, 0, 0)');
+    expect(svg().getAttribute('content')).not.toContain('currentColor');
   });
 
   it("draws in the light theme's foreground when no color is set", async () => {
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    await waitForUpdate();
-    const content = container.querySelector('svg')?.getAttribute('content');
+    const { svg } = await renderIcon();
+    const content = svg().getAttribute('content');
     expect(content).toContain(ICON_LIGHT_COLORS['foreground']);
     expect(content).not.toContain('currentColor');
   });
 
   it('resolves a theme token against the active color scheme', async () => {
-    const { componentRef, container } = await render(UiIcon, {
+    const { host, svg } = await renderIcon({
       providers: [provideIconTheme({ colorScheme: 'dark' })],
     });
-    const icon = componentRef.instance as UiIcon;
-    setInputSignal(icon.name, 'check' as IconName);
-    setInputSignal(icon.color, 'var(--primary)');
+    host.color.set('var(--primary)');
     await waitForUpdate();
-    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
+    expect(svg().getAttribute('content')).toContain(
       ICON_DARK_COLORS['primary'],
     );
   });
 
   it("takes its container's color when it sets none", async () => {
-    const { componentRef, container } = await render(UiIcon, {
+    const { svg } = await renderIcon({
       providers: [
         { provide: UI_ICON_COLOR, useValue: signal('var(--destructive)') },
       ],
     });
-    setInputSignal((componentRef.instance as UiIcon).name, 'x' as IconName);
-    await waitForUpdate();
-    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
+    expect(svg().getAttribute('content')).toContain(
       ICON_LIGHT_COLORS['destructive'],
     );
   });
 
   it('applies the class input to the svg', async () => {
-    const { componentRef, container } = await render(UiIcon);
-    const icon = componentRef.instance as UiIcon;
-    setInputSignal(icon.name, 'check' as IconName);
-    setInputSignal(icon.userClass, 'mr-2');
+    const { host, svg } = await renderIcon();
+    host.className.set('mr-2');
     await waitForUpdate();
-    expect(container.querySelector('svg')?.getAttribute('class')).toBe('mr-2');
+    expect(svg().getAttribute('class')).toBe('mr-2');
   });
 });
 

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

@@ -1,111 +1,203 @@
-import { signal } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { Component, signal } from '@angular/core';
+import {
+  fireEvent,
+  render,
+  waitForUpdate,
+} from '@blotch/angular-lynx-testing-library';
+import {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import { UiInput } from './input';
 
-describe('UiInput', () => {
-  it('renders with default configuration', async () => {
-    const { container } = await render(UiInput);
-    expect(container).toBeTruthy();
-  });
+@Component({
+  imports: [UiInput],
+  template: `
+    <ui-input
+      [(value)]="email"
+      [label]="label()"
+      placeholder="you@example.com"
+      type="email"
+      [helperText]="helperText()"
+      [error]="error()"
+      [disabled]="disabled()"
+      class="w-full"
+      (changed)="changes.push($event)"
+      (focused)="events.push('focused')"
+      (blurred)="events.push('blurred')"
+    />
+  `,
+})
+class InputHost {
+  readonly email = signal('');
+  readonly label = signal('');
+  readonly helperText = signal('');
+  readonly error = signal('');
+  readonly disabled = signal(false);
+  readonly changes: string[] = [];
+  readonly events: string[] = [];
+}
+
+const renderInput = async () => {
+  const result = await render(InputHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as InputHost,
+    field: () => result.container.querySelector('input')!,
+    // The field's own column; the host element renders as a view too.
+    column: () => result.container.querySelector('.flex-col')!,
+    wrapper: () => result.container.querySelector('.bg-muted')!,
+    // The layer that draws the focus ring around the field.
+    ring: () => result.container.querySelector('.absolute') as HTMLElement,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling an animation. */
+const CANCEL = 3;
 
-  it('onInput() updates the model and emits `changed`', async () => {
-    const { componentRef } = await render(UiInput);
-    const inst = componentRef.instance as unknown as UiInput & {
-      onInput: (e: { detail: { value: string } }) => void;
-    };
-    const emitted: string[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-    inst.onInput({ detail: { value: 'hello' } });
-    expect(inst.value()).toBe('hello');
-    expect(emitted).toEqual(['hello']);
+describe('UiInput', () => {
+  // Watched per test: the testing library resets the main thread after each.
+  let animate: MockInstance<LynxMainThread['__ElementAnimate']>;
+  beforeEach(() => {
+    animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
   });
+  afterEach(() => animate.mockRestore());
 
-  it('onInput() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiInput);
-    const inst = componentRef.instance as unknown as UiInput & {
-      onInput: (e: { detail: { value: string } }) => void;
-    };
-    setInputSignal(inst.disabled, true);
-    const emitted = vi.fn();
-    inst.changed.subscribe(emitted);
-    inst.onInput({ detail: { value: 'blocked' } });
-    expect(inst.value()).toBe('');
-    expect(emitted).not.toHaveBeenCalled();
+  it('renders a native input with its placeholder and type, and no label', async () => {
+    const { field, column, queryByText } = await renderInput();
+    expect(field().getAttribute('placeholder')).toBe('you@example.com');
+    expect(field().getAttribute('type')).toBe('email');
+    expect(column().classList).toContain('w-full');
+    expect(queryByText('you@example.com')).toBeNull();
   });
 
-  it('onFocus() flips the focused state and emits `focused`', async () => {
-    const { componentRef, container } = await render(UiInput);
-    const inst = componentRef.instance as unknown as UiInput & {
-      onFocus: () => void;
-    };
-    const emitted = vi.fn();
-    inst.focused.subscribe(emitted);
-    inst.onFocus();
+  it('shows its label', async () => {
+    const { host, getByText } = await renderInput();
+    host.label.set('Email');
     await waitForUpdate();
-    expect(emitted).toHaveBeenCalledTimes(1);
-    // Focus turns the overlay opacity to 1 via ringVisible().
-    const overlay = container.querySelector('[style*="box-shadow"]');
-    expect(overlay?.getAttribute('style')).toContain('opacity');
+    expect(getByText('Email').classList).toContain('font-medium');
   });
 
-  it('onBlur() clears focused state and emits `blurred`', async () => {
-    const { componentRef } = await render(UiInput);
-    const inst = componentRef.instance as unknown as UiInput & {
-      onFocus: () => void;
-      onBlur: () => void;
-    };
-    const emitted = vi.fn();
-    inst.blurred.subscribe(emitted);
-    inst.onFocus();
-    inst.onBlur();
-    expect(emitted).toHaveBeenCalledTimes(1);
+  it('updates `value` and emits `changed` as the user types', async () => {
+    const { host, field } = await renderInput();
+    // Lynx puts the typed text in the event's detail, not on its target.
+    fireEvent.input(field(), { detail: { value: 'jane@' } });
+    fireEvent.input(field(), { detail: { value: 'jane@example.com' } });
+    expect(host.email()).toBe('jane@example.com');
+    expect(host.changes).toEqual(['jane@', 'jane@example.com']);
   });
 
-  it('error input triggers the shake animation via effect', async () => {
-    // The effect reads error() + containerRef.nativeElement and calls shake().
-    // Setting error to a non-empty value while it was empty exercises the branch.
-    // JIT + jsdom doesn't populate template-ref viewChild queries, so we
-    // monkey-patch containerRef with a signal returning a fake ElementRef so the
-    // effect's `el` check passes and the shake path runs.
-    const { componentRef, container } = await render(UiInput);
-    const inst = componentRef.instance as UiInput;
-    const view = container.querySelector('view') as Element;
-    (inst as unknown as { containerRef: unknown }).containerRef = signal({
-      nativeElement: view,
-    });
-    setInputSignal(inst.error, 'Required');
-    await waitForUpdate();
+  it("dims and ignores typing while it's disabled", async () => {
+    const { host, field, wrapper } = await renderInput();
+    host.disabled.set(true);
     await waitForUpdate();
-    // The error text should render and the destructive ring shadow should apply.
-    expect(container.textContent).toContain('Required');
+    expect(wrapper().classList).toContain('opacity-50');
+
+    fireEvent.input(field(), { detail: { value: 'blocked' } });
+    expect(host.email()).toBe('');
+    expect(host.changes).toEqual([]);
+  });
 
-    // Re-trigger the shake (previous error cleared → then set) so `#shakeAnim`
-    // is set once and canceled the next time — covers both branches of `?.`.
-    setInputSignal(inst.error, '');
+  it('disables the native input only while disabled', async () => {
+    // Lynx treats any `disabled` value, even false, as disabled, so the
+    // attribute has to go rather than be set to false.
+    const setAttribute = vi.spyOn(lynxMainThread(), '__SetAttribute');
+    const { host, field } = await renderInput();
+    expect(setAttribute).not.toHaveBeenCalledWith(
+      field(),
+      'disabled',
+      expect.anything(),
+    );
+
+    host.disabled.set(true);
     await waitForUpdate();
+    expect(setAttribute).toHaveBeenLastCalledWith(field(), 'disabled', 'true');
+    setAttribute.mockRestore();
+  });
+
+  it('shows a focus ring while focused, and emits `focused` and `blurred`', async () => {
+    const { host, field, ring } = await renderInput();
+    expect(ring().style.getPropertyValue('opacity')).toBe('0');
+
+    fireEvent.focus(field());
     await waitForUpdate();
-    setInputSignal(inst.error, 'Required again');
+    expect(ring().style.getPropertyValue('opacity')).toBe('1');
+    expect(ring().style.getPropertyValue('box-shadow')).toContain(
+      'var(--ring)',
+    );
+
+    fireEvent.blur(field());
     await waitForUpdate();
+    expect(ring().style.getPropertyValue('opacity')).toBe('0');
+    expect(host.events).toEqual(['focused', 'blurred']);
+  });
+
+  it('shows its helper text', async () => {
+    const { host, getByText } = await renderInput();
+    host.helperText.set("We'll never share it.");
     await waitForUpdate();
-    expect(container.textContent).toContain('Required again');
+    expect(getByText("We'll never share it.").classList).toContain(
+      'text-muted-foreground',
+    );
   });
 
-  it('renders helper text when no error is present', async () => {
-    const { componentRef, container } = await render(UiInput);
-    const inst = componentRef.instance as UiInput;
-    setInputSignal(inst.helperText, 'Enter your name');
+  it('shows an error in place of the helper text, with a destructive ring', async () => {
+    const { host, ring, getByText, queryByText } = await renderInput();
+    host.helperText.set("We'll never share it.");
+    host.error.set('Enter a valid email');
     await waitForUpdate();
-    expect(container.textContent).toContain('Enter your name');
+    expect(getByText('Enter a valid email').classList).toContain(
+      'text-destructive',
+    );
+    expect(queryByText("We'll never share it.")).toBeNull();
+    // An invalid field keeps its ring even when it isn't focused.
+    expect(ring().style.getPropertyValue('opacity')).toBe('1');
+    expect(ring().style.getPropertyValue('box-shadow')).toContain(
+      'var(--destructive)',
+    );
   });
 
-  it('renders the label when provided', async () => {
-    const { componentRef, container } = await render(UiInput);
-    const inst = componentRef.instance as UiInput;
-    setInputSignal(inst.label, 'Name');
+  it('shakes when an error appears, but not when it only changes', async () => {
+    const { host, column } = await renderInput();
+    const shakes = () =>
+      animate.mock.calls.filter(([, [action]]) => action === START);
+    expect(shakes()).toEqual([]);
+
+    host.error.set('Required');
+    await waitForUpdate();
+    expect(animate).toHaveBeenCalledWith(column(), [
+      START,
+      expect.any(String),
+      expect.arrayContaining([{ transform: 'translateX(-4px)' }]),
+      expect.anything(),
+    ]);
+    expect(shakes()).toHaveLength(1);
+
+    host.error.set('Enter a valid email');
     await waitForUpdate();
-    expect(container.textContent).toContain('Name');
+    expect(shakes()).toHaveLength(1);
+
+    // Once fixed, the next error shakes again, replacing the last shake.
+    host.error.set('');
+    await waitForUpdate();
+    host.error.set('Required');
+    await waitForUpdate();
+    expect(shakes()).toHaveLength(2);
+    expect(animate).toHaveBeenCalledWith(column(), [
+      CANCEL,
+      expect.any(String),
+    ]);
   });
 
   it('makes the wrapper a stacking context so the field scrolls with it', async () => {
@@ -113,22 +205,7 @@ describe('UiInput', () => {
     // when an ancestor inside the scroll content is a stacking context. Without
     // z-0 on the wrapper, the native field (and its placeholder) stays fixed on
     // screen while the page scrolls.
-    const { container } = await render(UiInput);
-    const wrapper = container.querySelector(
-      '[class*="rounded-xl"][class*="bg-muted"]',
-    );
-    expect(wrapper?.getAttribute('class')?.split(/\s+/)).toContain('z-0');
-  });
-
-  it('applies the disabled dim class when disabled', async () => {
-    // Covers the true branch of `disabled() && 'opacity-50'` in inputWrapperClass.
-    const { componentRef, container } = await render(UiInput);
-    const inst = componentRef.instance as UiInput;
-    setInputSignal(inst.disabled, true);
-    await waitForUpdate();
-    const wrapper = container.querySelector(
-      '[class*="rounded-xl"][class*="bg-muted"]',
-    );
-    expect(wrapper?.getAttribute('class')).toContain('opacity-50');
+    const { wrapper } = await renderInput();
+    expect(wrapper().classList).toContain('z-0');
   });
 });

package/dist/ui/components/input/input.ts

@@ -2,6 +2,7 @@ import {
   type ElementRef,
   Component,
   ViewEncapsulation,
+  booleanAttribute,
   computed,
   effect,
   input,
@@ -90,7 +91,7 @@ export class UiInput implements FormValueControl<string> {
   readonly type = input<string>('text');
   readonly helperText = input<string>('');
   readonly error = input<string>('');
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   readonly changed = output<string>();
@@ -102,18 +103,21 @@ export class UiInput implements FormValueControl<string> {
   #shakeAnim?: AnimationHandle;
   #previousError = '';
 
-  constructor() {
-    // Shake the input when an error appears (transition from no-error to error)
-    effect(() => {
-      const err = this.error();
-      const el = this.containerRef()?.nativeElement;
-      if (err && !this.#previousError && el) {
-        this.#shakeAnim?.cancel();
-        this.#shakeAnim = shake(el);
-      }
-      this.#previousError = err;
-    });
-  }
+  /**
+   * Shakes the field when an error appears (a change from no error to one). A
+   * field rather than a constructor: Angular's test build keeps a function for
+   * a constructor that nothing calls, which an app's coverage report would show
+   * as uncovered.
+   */
+  protected readonly shakeOnError = effect(() => {
+    const err = this.error();
+    const el = this.containerRef()?.nativeElement;
+    if (err && !this.#previousError && el) {
+      this.#shakeAnim?.cancel();
+      this.#shakeAnim = shake(el);
+    }
+    this.#previousError = err;
+  });
 
   protected readonly containerClass = computed(() =>
     cn('flex-col gap-1.5 flex', this.userClass()),

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

@@ -1,38 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { UiLabel } from './label';
 
 @Component({
-  standalone: true,
-  imports: [UiLabel, LYNX_ELEMENTS],
-  template: `<ui-label>{{ label }}</ui-label>`,
+  imports: [UiLabel],
+  template: `<ui-label [disabled]="disabled()">Name</ui-label>`,
 })
 class LabelHost {
-  label = 'Name';
+  readonly disabled = signal(false);
 }
 
 describe('UiLabel', () => {
-  it('renders projected text', async () => {
-    const { getByText } = await render(LabelHost);
-    expect(getByText('Name')).toBeTruthy();
-  });
-
-  it('renders standalone with no host wrapper (default disabled=false)', async () => {
-    const { container } = await render(UiLabel);
-    const textEl = container.querySelector('text');
-    expect(textEl?.getAttribute('class')).toContain('font-medium');
-  });
+  it('renders its text, dimmed while disabled', async () => {
+    const { componentRef, getByText } = await render(LabelHost);
+    const label = getByText('Name');
+    expect(label.classList).toContain('font-medium');
+    expect(label.classList).not.toContain('opacity-50');
 
-  it('applies opacity when disabled flips to true', async () => {
-    // JIT template bindings don't wire signal inputs — drive the input
-    // directly to exercise the `disabled() && 'opacity-50'` truthy branch.
-    const { componentRef, container } = await render(UiLabel);
-    setInputSignal((componentRef.instance as UiLabel).disabled, true);
+    (componentRef.instance as LabelHost).disabled.set(true);
     await waitForUpdate();
-    const textEl = container.querySelector('text');
-    expect(textEl?.getAttribute('class')).toContain('opacity-50');
+    expect(label.classList).toContain('opacity-50');
   });
 });

package/dist/ui/components/label/label.ts

@@ -1,4 +1,10 @@
-import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  booleanAttribute,
+  computed,
+  input,
+} from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
 import { cn } from '../../utils/cn';
@@ -11,7 +17,7 @@ import { cn } from '../../utils/cn';
   template: `<text [class]="labelClass()"><ng-content /></text>`,
 })
 export class UiLabel {
-  readonly disabled = input(false);
+  readonly disabled = input(false, { transform: booleanAttribute });
   readonly userClass = input<string>('', { alias: 'class' });
 
   protected readonly labelClass = computed(() =>