@blotch/dolan 22.2.3 → 22.2.4

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

@@ -1,71 +1,127 @@
-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 {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import { UiProgress } from './progress';
 
 @Component({
-  standalone: true,
-  imports: [UiProgress, LYNX_ELEMENTS],
-  template: `<ui-progress [value]="value" [indeterminate]="indeterminate" />`,
+  imports: [UiProgress],
+  template: `
+    <ui-progress
+      [value]="value()"
+      [max]="max()"
+      [indeterminate]="indeterminate()"
+      class="h-3"
+    />
+  `,
 })
 class ProgressHost {
-  value = 40;
-  indeterminate = false;
+  readonly value = signal(40);
+  readonly max = signal(100);
+  readonly indeterminate = signal(false);
 }
 
+const renderProgress = async () => {
+  const result = await render(ProgressHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as ProgressHost,
+    track: () => result.container.querySelector('.bg-muted')!,
+    fill: () => result.container.querySelector('.bg-primary')!,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+
 describe('UiProgress', () => {
-  it('renders at the given value', async () => {
-    const { container } = await render(ProgressHost);
-    expect(container).toBeTruthy();
+  // 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('renders indeterminate mode without throwing', async () => {
-    @Component({
-      standalone: true,
-      imports: [UiProgress, LYNX_ELEMENTS],
-      template: `<ui-progress [indeterminate]="true" />`,
-    })
-    class IndeterminateHost {}
-    const { container } = await render(IndeterminateHost);
-    expect(container).toBeTruthy();
+  it('fills the track by the value out of max', async () => {
+    const { fill, track } = await renderProgress();
+    expect(fill().getAttribute('style')).toContain('width: 40%');
+    expect(track().classList).toContain('h-3');
   });
 
-  it('scales the fill width by the value/max ratio', async () => {
-    // JIT template bindings are inert against input(); drive the signals so
-    // the percent/fillStyle computed signals actually run.
-    const { componentRef, container } = await render(UiProgress);
-    setInputSignal((componentRef.instance as UiProgress).value, 25);
-    setInputSignal((componentRef.instance as UiProgress).max, 100);
+  it('keeps the fill between 0% and 100%', async () => {
+    const { host, fill } = await renderProgress();
+    host.value.set(500);
+    await waitForUpdate();
+    expect(fill().getAttribute('style')).toContain('width: 100%');
+
+    host.value.set(-5);
+    await waitForUpdate();
+    expect(fill().getAttribute('style')).toContain('width: 0%');
+
+    // A max of 0 would divide by zero.
+    host.value.set(50);
+    host.max.set(0);
     await waitForUpdate();
-    const fill = container.querySelectorAll('view')[1];
-    expect(fill?.getAttribute('style')).toContain('width: 25%');
+    expect(fill().getAttribute('style')).toContain('width: 0%');
   });
 
-  it('clamps the fill to 100% when the value exceeds max', async () => {
-    const { componentRef, container } = await render(UiProgress);
-    setInputSignal((componentRef.instance as UiProgress).value, 500);
-    setInputSignal((componentRef.instance as UiProgress).max, 100);
+  it("doesn't animate the first value, then animates each change", async () => {
+    const { host, fill } = await renderProgress();
+    expect(animate).not.toHaveBeenCalled();
+
+    host.value.set(80);
     await waitForUpdate();
-    const fill = container.querySelectorAll('view')[1];
-    expect(fill?.getAttribute('style')).toContain('width: 100%');
+    expect(animate).toHaveBeenCalledWith(fill(), [
+      START,
+      expect.any(String),
+      [{ width: '40%' }, { width: '80%' }],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
   });
 
-  it('clamps the fill to 0% when max is zero (division safety)', async () => {
-    const { componentRef, container } = await render(UiProgress);
-    setInputSignal((componentRef.instance as UiProgress).value, 50);
-    setInputSignal((componentRef.instance as UiProgress).max, 0);
+  it('slides a 40% fill across the track while indeterminate', async () => {
+    const { host, fill } = await renderProgress();
+    host.value.set(60);
+    await waitForUpdate();
+    animate.mockClear();
+
+    host.indeterminate.set(true);
     await waitForUpdate();
-    const fill = container.querySelectorAll('view')[1];
-    expect(fill?.getAttribute('style')).toContain('width: 0%');
+    expect(fill().getAttribute('style')).toContain('width: 40%');
+    expect(animate).toHaveBeenCalledWith(fill(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'translateX(-100%)', width: '40%' },
+        { transform: 'translateX(250%)', width: '40%' },
+      ],
+      expect.objectContaining({ iterations: Infinity }),
+    ]);
   });
 
-  it('uses the fixed 40% fill width when indeterminate is true', async () => {
-    const { componentRef, container } = await render(UiProgress);
-    setInputSignal((componentRef.instance as UiProgress).indeterminate, true);
+  it("returns to the value without animating when it hasn't changed", async () => {
+    const { host, fill } = await renderProgress();
+    host.indeterminate.set(true);
+    await waitForUpdate();
+    animate.mockClear();
+
+    host.indeterminate.set(false);
     await waitForUpdate();
-    const fill = container.querySelectorAll('view')[1];
-    expect(fill?.getAttribute('style')).toContain('width: 40%');
+    expect(fill().getAttribute('style')).toContain('width: 40%');
+    // Only the sliding animation is canceled; nothing new starts.
+    expect(
+      animate.mock.calls.map(([, [operation]]) => operation),
+    ).not.toContain(START);
   });
 });

package/dist/ui/components/progress/progress.ts

@@ -32,65 +32,63 @@ export class UiProgress {
   readonly indeterminate = input(false);
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly fillRef = viewChild<ElementRef>('fill');
+  readonly fillRef = viewChild.required<ElementRef>('fill');
   #fillAnim?: AnimationHandle;
   #indeterminateAnim?: AnimationHandle;
   #previousPercent: number | null = null;
 
-  constructor() {
-    effect(() => {
-      const el = this.fillRef()?.nativeElement;
-      // el.animate() is inert in jsdom. Determinate and indeterminate paths
-      // are exercised on-device; the effect's animation branch cannot be
-      // meaningfully verified from a unit test.
-      /* v8 ignore start */
-      if (!el) return;
-
-      // Handle indeterminate mode with infinite sliding animation.
-      // The fill element is 40% of the track width. `translateX` percentages
-      // are relative to the element's OWN width, so:
-      //   translateX(-100%) = left edge at -40% of track = starts off-screen left
-      //   translateX(250%)  = left edge at +100% of track = exits off-screen right
-      // 250% is the minimum that pushes the 40%-wide fill fully past the right edge.
-      if (this.indeterminate()) {
-        this.#fillAnim?.cancel();
-        this.#indeterminateAnim?.cancel();
-        this.#indeterminateAnim = el.animate(
-          [
-            { transform: 'translateX(-100%)', width: '40%' },
-            { transform: 'translateX(250%)', width: '40%' },
-          ],
-          {
-            duration: 1200,
-            easing: EASING.standard,
-            iterations: Infinity,
-          },
-        );
-        return;
-      }
-
-      // Determinate mode — animate width changes smoothly.
-      // `#previousPercent === null` skips the very first effect run so
-      // the bar doesn't animate from 0% → initial value on mount.
-      // The equality guard prevents redundant animations if the effect
-      // re-runs without an actual percent change.
-      this.#indeterminateAnim?.cancel();
-      const percent = this.percent();
-      if (this.#previousPercent === null) {
-        this.#previousPercent = percent;
-        return;
-      }
-      if (percent === this.#previousPercent) return;
+  /**
+   * Slides the fill while indeterminate, and animates its width as the value
+   * changes. 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 fillAnimation = effect(() => {
+    const el = this.fillRef().nativeElement;
 
+    // Handle indeterminate mode with infinite sliding animation.
+    // The fill element is 40% of the track width. `translateX` percentages
+    // are relative to the element's OWN width, so:
+    //   translateX(-100%) = left edge at -40% of track = starts off-screen left
+    //   translateX(250%)  = left edge at +100% of track = exits off-screen right
+    // 250% is the minimum that pushes the 40%-wide fill fully past the right edge.
+    if (this.indeterminate()) {
       this.#fillAnim?.cancel();
-      this.#fillAnim = el.animate(
-        [{ width: `${this.#previousPercent}%` }, { width: `${percent}%` }],
-        { duration: DURATION.slow, easing: EASING.standard, fill: 'forwards' },
+      this.#indeterminateAnim?.cancel();
+      this.#indeterminateAnim = el.animate(
+        [
+          { transform: 'translateX(-100%)', width: '40%' },
+          { transform: 'translateX(250%)', width: '40%' },
+        ],
+        {
+          duration: 1200,
+          easing: EASING.standard,
+          iterations: Infinity,
+        },
       );
+      return;
+    }
+
+    // Determinate mode — animate width changes smoothly.
+    // `#previousPercent === null` skips the very first effect run so
+    // the bar doesn't animate from 0% → initial value on mount.
+    // The equality guard skips the animation when the effect re-runs without
+    // a percent change: leaving indeterminate mode at the same value.
+    this.#indeterminateAnim?.cancel();
+    const percent = this.percent();
+    if (this.#previousPercent === null) {
       this.#previousPercent = percent;
-      /* v8 ignore stop */
-    });
-  }
+      return;
+    }
+    if (percent === this.#previousPercent) return;
+
+    this.#fillAnim?.cancel();
+    this.#fillAnim = el.animate(
+      [{ width: `${this.#previousPercent}%` }, { width: `${percent}%` }],
+      { duration: DURATION.slow, easing: EASING.standard, fill: 'forwards' },
+    );
+    this.#previousPercent = percent;
+  });
 
   protected readonly percent = computed(() => {
     const m = this.max();
@@ -100,9 +98,9 @@ export class UiProgress {
 
   protected readonly trackClass = computed(() =>
     cn(
-      // bg-muted (solid, theme-aware) instead of bg-primary/20: opacity
-      // modifiers on semantic colors don't work on Lynx (colors are opaque
-      // rgba values with no separable channels).
+      // bg-muted (solid, theme-aware) instead of bg-primary/20: a modifier
+      // needs the theme's --primary-rgb, and in a theme copied before it
+      // existed the track would disappear.
       'h-2 w-full rounded-full bg-muted overflow-hidden',
       this.userClass(),
     ),

package/dist/ui/components/radio-group/radio-group.test.ts

@@ -1,115 +1,160 @@
 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, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+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 { UiRadioGroup, UiRadioGroupItem } from './radio-group';
 
 @Component({
-  standalone: true,
-  imports: [UiRadioGroup, UiRadioGroupItem, LYNX_ELEMENTS],
+  imports: [UiRadioGroup, UiRadioGroupItem],
   template: `
-    <ui-radio-group [(value)]="value">
-      <ui-radio-group-item value="a">A</ui-radio-group-item>
-      <ui-radio-group-item value="b">B</ui-radio-group-item>
+    <ui-radio-group
+      [(value)]="value"
+      [disabled]="disabled()"
+      class="mt-2"
+      (changed)="changes.push($event)"
+    >
+      <ui-radio-group-item value="a" class="pl-1">Apple</ui-radio-group-item>
+      <ui-radio-group-item value="b">Banana</ui-radio-group-item>
     </ui-radio-group>
   `,
 })
 class RadioGroupHost {
-  value = 'a';
+  readonly value = signal('a');
+  readonly disabled = signal(false);
+  readonly changes: string[] = [];
 }
 
+const renderGroup = async () => {
+  const result = await render(RadioGroupHost);
+  /**
+   * An item's row, which takes the tap: its label's parent.
+   */
+  const item = (label: string) => result.getByText(label).parentElement!;
+  /**
+   * An item's dot, inside the circle that's the row's first child.
+   */
+  const dot = (label: string) =>
+    item(label).firstElementChild!.firstElementChild!;
+  return {
+    ...result,
+    host: result.componentRef.instance as RadioGroupHost,
+    item,
+    dot,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling one. */
+const CANCEL = 3;
+
 describe('UiRadioGroup', () => {
-  it('renders each radio item', async () => {
-    const { getByText } = await render(RadioGroupHost);
-    expect(getByText('A')).toBeTruthy();
-    expect(getByText('B')).toBeTruthy();
+  // 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('select() updates the model and emits `changed`', async () => {
-    const { componentRef } = await render(UiRadioGroup);
-    const inst = componentRef.instance as UiRadioGroup;
-    const emitted: string[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-    inst.select('a');
-    expect(inst.value()).toBe('a');
-    inst.select('b');
-    expect(inst.value()).toBe('b');
-    expect(emitted).toEqual(['a', 'b']);
+  it('renders each item with its label and class', async () => {
+    const { container, item } = await renderGroup();
+    expect(container.querySelector('.flex-col')?.classList).toContain('mt-2');
+    expect(item('Apple').classList).toContain('pl-1');
+    expect(item('Banana').classList).toContain('h-11');
   });
 
-  it('select() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiRadioGroup);
-    const inst = componentRef.instance as UiRadioGroup;
-    setInputSignal(inst.disabled, true);
-    const emitted = vi.fn();
-    inst.changed.subscribe(emitted);
-    inst.select('x');
-    expect(inst.value()).toBe('');
-    expect(emitted).not.toHaveBeenCalled();
+  it('shows the dot of the selected item only', async () => {
+    const { dot } = await renderGroup();
+    expect(dot('Apple').getAttribute('style')).toContain('opacity: 1');
+    expect(dot('Banana').getAttribute('style')).toContain('opacity: 0');
   });
-});
-
-describe('UiRadioGroupItem', () => {
-  it('select() delegates to the parent group', async () => {
-    const parentResult = await render(UiRadioGroup);
-    const parent = parentResult.componentRef.instance as UiRadioGroup;
 
-    const itemResult = await render(UiRadioGroupItem, {
-      providers: [{ provide: UiRadioGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiRadioGroupItem;
-    setInputSignal(item.itemValue, 'a');
+  it('selects the tapped item, updating the value and emitting `changed`', async () => {
+    const { host, item, dot } = await renderGroup();
+    fireEvent.tap(item('Banana'));
     await waitForUpdate();
-
-    item.select();
-    expect(parent.value()).toBe('a');
+    expect(host.value()).toBe('b');
+    expect(host.changes).toEqual(['b']);
+    expect(dot('Banana').getAttribute('style')).toContain('opacity: 1');
+    expect(dot('Apple').getAttribute('style')).toContain('opacity: 0');
   });
 
-  it('select() is a no-op when the parent group is disabled', async () => {
-    const parentResult = await render(UiRadioGroup);
-    const parent = parentResult.componentRef.instance as UiRadioGroup;
-    setInputSignal(parent.disabled, true);
+  it("doesn't animate the dot on mount, then pops it in and out as the selection changes", async () => {
+    const { host, dot } = await renderGroup();
+    // A pre-selected item shows its dot without animating it in.
+    expect(animate).not.toHaveBeenCalled();
 
-    const itemResult = await render(UiRadioGroupItem, {
-      providers: [{ provide: UiRadioGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiRadioGroupItem;
-    setInputSignal(item.itemValue, 'a');
+    host.value.set('b');
     await waitForUpdate();
+    // The new selection's dot pops in from a smaller scale...
+    expect(animate).toHaveBeenCalledWith(dot('Banana'), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(0.6)', opacity: 0 },
+        { transform: 'scale(1)', opacity: 1 },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+    // ...and the old one pops out.
+    expect(animate).toHaveBeenCalledWith(dot('Apple'), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(1)', opacity: 1 },
+        { transform: 'scale(0.8)', opacity: 0 },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
 
-    item.select();
-    expect(parent.value()).toBe('');
+    // Selecting it again cuts its pop-out short.
+    host.value.set('a');
+    await waitForUpdate();
+    expect(animate).toHaveBeenCalledWith(dot('Apple'), [
+      CANCEL,
+      expect.any(String),
+    ]);
   });
 
-  it('effect runs the popIn / popOut animation on selection change', async () => {
-    // The effect skips the first run (initial mount) then swaps between popIn
-    // (select) and popOut (deselect). Exercise both branches by toggling the
-    // parent's value across two mounted items.
-    // JIT + jsdom does not populate the `#dot` viewChild query, so
-    // monkey-patch dotRef with a signal returning a fake ElementRef so the
-    // `if (!el || previousSelected === undefined)` guard doesn't short-circuit.
-    const parentResult = await render(UiRadioGroup);
-    const parent = parentResult.componentRef.instance as UiRadioGroup;
-
-    const itemResult = await render(UiRadioGroupItem, {
-      providers: [{ provide: UiRadioGroup, useValue: parent }],
-    });
-    const item = itemResult.componentRef.instance as UiRadioGroupItem;
-    setInputSignal(item.itemValue, 'a');
-    const view = itemResult.container.querySelector('view') as Element;
-    (item as unknown as { dotRef: unknown }).dotRef = signal({
-      nativeElement: view,
-    });
+  it('ignores taps while disabled, and dims its items', async () => {
+    const { host, item } = await renderGroup();
+    host.disabled.set(true);
     await waitForUpdate();
+    expect(item('Apple').classList).toContain('opacity-50');
 
-    // Effect first run initializes `#previousSelected`, then returns.
-    // Select => popIn branch.
-    parent.value.set('a');
+    fireEvent.tap(item('Banana'));
     await waitForUpdate();
-    // Deselect => popOut branch.
-    parent.value.set('b');
+    expect(host.value()).toBe('a');
+    expect(host.changes).toEqual([]);
+  });
+
+  it("can't be selected through its own select() while disabled", async () => {
+    // An item checks the group first, but select() is public: a caller that
+    // goes straight to the group gets the same rule.
+    const { componentRef } = await render(UiRadioGroup);
+    componentRef.setInput('disabled', true);
     await waitForUpdate();
-    expect(parent.value()).toBe('b');
+    const group = componentRef.instance as UiRadioGroup;
+    const changed = vi.fn();
+    group.changed.subscribe(changed);
+
+    group.select('b');
+    expect(group.value()).toBe('');
+    expect(changed).not.toHaveBeenCalled();
   });
 });

package/dist/ui/components/radio-group/radio-group.ts

@@ -70,36 +70,36 @@ export class UiRadioGroupItem {
   readonly itemValue = input.required<string>({ alias: 'value' });
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly dotRef = viewChild<ElementRef>('dot');
+  readonly dotRef = viewChild.required<ElementRef>('dot');
   #dotAnim?: AnimationHandle;
-  #previousSelected?: boolean;
+  #mounted = false;
 
   protected readonly isSelected = computed(
     () => this.#group.value() === this.itemValue(),
   );
 
-  constructor() {
-    // Same guard pattern as UiCheckbox: `#previousSelected === undefined` skips
-    // the first run so a pre-selected item doesn't animate in on mount.
-    // The equality guard prevents duplicate animations if the effect re-runs.
-    effect(() => {
-      const selected = this.isSelected();
-      const el = this.dotRef()?.nativeElement;
-      if (!el || this.#previousSelected === undefined) {
-        this.#previousSelected = selected;
-        return;
-      }
-      // Defensive early return: with only `isSelected()` as a reactive input,
-      // Angular's computed equality dedupes same-value emissions so the effect
-      // never re-runs with an unchanged `selected`. Kept for safety on-device.
-      /* v8 ignore next 1 */
-      if (selected === this.#previousSelected) return;
-      this.#previousSelected = selected;
-
-      this.#dotAnim?.cancel();
-      this.#dotAnim = selected ? popIn(el) : popOut(el);
-    });
-  }
+  /**
+   * Pops the dot in when the item is selected and out when it's deselected.
+   * 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.
+   *
+   * The first run is the mount, skipped so a pre-selected item doesn't
+   * animate in. Every later run is a change of selection: `isSelected` is a
+   * computed, which only notifies when its value changes, and the dot is
+   * always in the template, so its query never changes.
+   */
+  protected readonly dotAnimation = effect(() => {
+    const selected = this.isSelected();
+    const el = this.dotRef().nativeElement;
+    if (!this.#mounted) {
+      this.#mounted = true;
+      return;
+    }
+
+    this.#dotAnim?.cancel();
+    this.#dotAnim = selected ? popIn(el) : popOut(el);
+  });
 
   protected readonly itemClass = computed(() =>
     cn(