@blotch/dolan 22.2.3 → 22.2.4

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

@@ -1,7 +1,11 @@
-import { Component } from '@angular/core';
-import { render } 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 } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import {
   UiSheet,
   UiSheetDescription,
@@ -11,7 +15,6 @@ import {
 } from './sheet';
 
 @Component({
-  standalone: true,
   imports: [
     UiSheet,
     UiSheetHeader,
@@ -21,24 +24,74 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-sheet [(open)]="open">
-      <ui-sheet-header>
-        <ui-sheet-title>Title</ui-sheet-title>
-        <ui-sheet-description>Body</ui-sheet-description>
+    <ui-sheet [(open)]="open" class="gap-4" (closed)="closed()">
+      <ui-sheet-header class="items-center">
+        <ui-sheet-title class="text-xl">Title</ui-sheet-title>
+        <ui-sheet-description class="italic">Body</ui-sheet-description>
       </ui-sheet-header>
-      <ui-sheet-footer><text>Buttons</text></ui-sheet-footer>
+      <ui-sheet-footer class="flex-row"><text>Buttons</text></ui-sheet-footer>
     </ui-sheet>
   `,
 })
 class SheetHost {
-  open = true;
+  readonly open = signal(false);
+  readonly closed = vi.fn();
 }
 
+const renderSheet = async () => {
+  const result = await render(SheetHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as SheetHost,
+    overlay: result.container.querySelector('overlay')!,
+    backdrop: result.container.querySelector('overlay > view')!,
+  };
+};
+
+/**
+ * Opens the sheet and waits out its open sequence: the overlay shows on one
+ * tick, and the panel slides in on the next.
+ */
+const openSheet = async (host: SheetHost) => {
+  host.open.set(true);
+  for (let i = 0; i < 3; i++) await waitForUpdate();
+};
+
 describe('UiSheet', () => {
   it('renders header, title, description, and footer', async () => {
-    const { getByText } = await render(SheetHost);
+    const { getByText } = await renderSheet();
     expect(getByText('Title')).toBeTruthy();
     expect(getByText('Body')).toBeTruthy();
     expect(getByText('Buttons')).toBeTruthy();
   });
+
+  it("merges each part's class with its own", async () => {
+    const { container, getByText } = await renderSheet();
+    // The sheet's class goes on the padded content wrapper, not the panel.
+    expect(container.querySelector('.px-6')?.classList).toContain('gap-4');
+    expect(container.querySelector('.mb-4')?.classList).toContain(
+      'items-center',
+    );
+    expect(getByText('Title').classList).toContain('text-xl');
+    expect(getByText('Title').classList).toContain('font-semibold');
+    expect(getByText('Body').classList).toContain('italic');
+    expect(getByText('Body').classList).toContain('text-muted-foreground');
+    expect(container.querySelector('.pt-4')?.classList).toContain('flex-row');
+  });
+
+  it('opens with `open`, and reports a dismissal through it and `closed`', async () => {
+    const { host, overlay, backdrop } = await renderSheet();
+    expect(overlay.getAttribute('visible')).toBe('false');
+
+    await openSheet(host);
+    expect(overlay.getAttribute('visible')).toBe('true');
+
+    fireEvent.tap(backdrop);
+    expect(host.open()).toBe(false);
+    // Once the panel has slid out, the overlay hides and `closed` fires.
+    await vi.waitFor(() => expect(host.closed).toHaveBeenCalled());
+    await waitForUpdate();
+    expect(overlay.getAttribute('visible')).toBe('false');
+    expect(host.closed).toHaveBeenCalledOnce();
+  });
 });

package/dist/ui/components/sheet/sheet.ts

@@ -26,8 +26,16 @@ import { cn } from '../../utils/cn';
   standalone: true,
   imports: [LYNX_ELEMENTS, UiBottomSheet],
   encapsulation: ViewEncapsulation.None,
+  // `open` 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: `
-    <ui-bottom-sheet [(open)]="open" (closed)="closed.emit()">
+    <ui-bottom-sheet
+      [open]="open()"
+      (openChange)="open.set($event)"
+      (closed)="closed.emit()"
+    >
       <view [class]="contentClass()">
         <ng-content />
       </view>

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

@@ -1,13 +1,30 @@
+import { Component } from '@angular/core';
 import { render } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
 import { UiSkeleton } from './skeleton';
 
+@Component({
+  imports: [UiSkeleton],
+  template: `<ui-skeleton class="h-4 w-32" />`,
+})
+class SkeletonHost {}
+
 describe('UiSkeleton', () => {
-  it('renders and starts the pulse animation', async () => {
-    // The `effect()` schedules pulse(el) once the view child resolves — just
-    // asserting no throw covers the effect body, host template, and computed
-    // class binding in a single mount.
-    const { container } = await render(UiSkeleton);
-    expect(container).toBeTruthy();
+  it('renders a muted placeholder with the given class', async () => {
+    const { container } = await render(SkeletonHost);
+    const skeleton = container.querySelector('.bg-muted');
+    expect(skeleton?.classList).toContain('h-4');
+    expect(skeleton?.classList).toContain('w-32');
+  });
+
+  it('pulses', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { container } = await render(SkeletonHost);
+    expect(animate).toHaveBeenCalledWith(
+      container.querySelector('.bg-muted'),
+      expect.any(Array),
+    );
+    animate.mockRestore();
   });
 });

package/dist/ui/components/skeleton/skeleton.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
-import { type AnimationHandle, pulse } from '../../utils/animate';
+import { pulse } from '../../utils/animate';
 import { cn } from '../../utils/cn';
 
 @Component({
@@ -22,22 +22,16 @@ import { cn } from '../../utils/cn';
 export class UiSkeleton {
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly skeletonRef = viewChild<ElementRef>('skeleton');
-  #pulseAnim?: AnimationHandle;
+  readonly skeletonRef = viewChild.required<ElementRef>('skeleton');
 
-  constructor() {
-    // Start the pulse animation once the element is available
-    effect(() => {
-      const el = this.skeletonRef()?.nativeElement;
-      // pulse() calls el.animate() which is inert in jsdom — coverage
-      // for the pulsing loop is exercised on-device.
-      /* v8 ignore start */
-      if (!el) return;
-      this.#pulseAnim?.cancel();
-      this.#pulseAnim = pulse(el);
-      /* v8 ignore stop */
-    });
-  }
+  /**
+   * Pulses the skeleton. 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 pulsing = effect(() => {
+    pulse(this.skeletonRef().nativeElement);
+  });
 
   protected readonly skeletonClass = computed(() =>
     cn('rounded-md bg-muted', this.userClass()),

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

@@ -1,66 +1,84 @@
+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 { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
 import { ICON_LIGHT_COLORS } from '../icon/icon-theme';
 import { UiSpinner } from './spinner';
 
+@Component({
+  imports: [UiSpinner],
+  template: `
+    <ui-spinner [size]="size()" [color]="color()" [class]="className()" />
+  `,
+})
+class SpinnerHost {
+  readonly size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = signal<string | undefined>(undefined);
+  readonly className = signal('');
+}
+
+const renderSpinner = async () => {
+  const result = await render(SpinnerHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as SpinnerHost,
+    // The spinner's own view: the one that holds the svg.
+    spinner: () => result.container.querySelector('svg')!.parentElement!,
+    svgContent: () =>
+      result.container.querySelector('svg')!.getAttribute('content'),
+  };
+};
+
 describe('UiSpinner', () => {
-  it('renders the SVG at the default size', async () => {
-    const { container } = await render(UiSpinner);
-    expect(container).toBeTruthy();
-    // The default size is 'md' → sizeStyle should render at 24px.
-    const view = container.querySelector('view');
-    expect(view?.getAttribute('style')).toContain('24px');
+  it('renders the loader at the default size', async () => {
+    const { spinner } = await renderSpinner();
+    expect(spinner().getAttribute('style')).toContain('width: 24px');
+    expect(spinner().getAttribute('style')).toContain('height: 24px');
   });
 
-  it('substitutes currentColor when the color input is set', async () => {
-    const { container, componentRef } = await render(UiSpinner);
-    setInputSignal((componentRef.instance as UiSpinner).color, 'rgb(0, 0, 0)');
-    // Flush CD so the computed re-runs and the `content` attribute updates.
-    await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('content')).toContain('rgb(0, 0, 0)');
-    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+  it('resizes for each supported size', async () => {
+    const { host, spinner } = await renderSpinner();
+    for (const [size, px] of [
+      ['xs', 16],
+      ['sm', 20],
+      ['md', 24],
+      ['lg', 32],
+    ] as const) {
+      host.size.set(size);
+      await waitForUpdate();
+      expect(spinner().getAttribute('style')).toContain(`width: ${px}px`);
+    }
   });
 
   it("draws in the theme's foreground when no color is set", async () => {
-    const { container } = await render(UiSpinner);
-    const content = container.querySelector('svg')?.getAttribute('content');
-    expect(content).toContain(ICON_LIGHT_COLORS['foreground']);
-    expect(content).not.toContain('currentColor');
+    // Lynx's SVG parser reads neither `currentColor` nor CSS variables.
+    const { svgContent } = await renderSpinner();
+    expect(svgContent()).toContain(ICON_LIGHT_COLORS['foreground']);
+    expect(svgContent()).not.toContain('currentColor');
   });
 
-  it('resolves a theme token color', async () => {
-    const { container, componentRef } = await render(UiSpinner);
-    setInputSignal(
-      (componentRef.instance as UiSpinner).color,
-      'var(--primary-foreground)',
-    );
+  it('draws in a literal color or a theme token', async () => {
+    const { host, svgContent } = await renderSpinner();
+    host.color.set('rgb(0, 0, 0)');
     await waitForUpdate();
-    expect(container.querySelector('svg')?.getAttribute('content')).toContain(
-      ICON_LIGHT_COLORS['primary-foreground'],
-    );
+    expect(svgContent()).toContain('rgb(0, 0, 0)');
+
+    host.color.set('var(--primary-foreground)');
+    await waitForUpdate();
+    expect(svgContent()).toContain(ICON_LIGHT_COLORS['primary-foreground']);
   });
 
-  it('applies the class input to the spinner', async () => {
-    const { container, componentRef } = await render(UiSpinner);
-    setInputSignal((componentRef.instance as UiSpinner).userClass, 'ml-2');
+  it('takes the class input', async () => {
+    const { host, spinner } = await renderSpinner();
+    host.className.set('ml-2');
     await waitForUpdate();
-    expect(container.querySelector('view')?.getAttribute('class')).toBe('ml-2');
+    expect(spinner().getAttribute('class')).toBe('ml-2');
   });
 
-  it('resizes for each supported size', async () => {
-    const { componentRef, container } = await render(UiSpinner);
-    for (const [size, px] of [
-      ['xs', 16],
-      ['sm', 20],
-      ['md', 24],
-      ['lg', 32],
-    ] as const) {
-      setInputSignal((componentRef.instance as UiSpinner).size, size);
-      await waitForUpdate();
-      const view = container.querySelector('view');
-      expect(view?.getAttribute('style')).toContain(`${px}px`);
-    }
+  it('turns continuously', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { spinner } = await renderSpinner();
+    expect(animate).toHaveBeenCalledWith(spinner(), expect.any(Array));
+    animate.mockRestore();
   });
 });

package/dist/ui/components/spinner/spinner.ts

@@ -43,26 +43,23 @@ export class UiSpinner {
 
   readonly #resolveColor = injectIconColor();
 
-  readonly spinnerRef = viewChild<ElementRef>('spinner');
+  readonly spinnerRef = viewChild.required<ElementRef>('spinner');
 
-  constructor() {
-    effect(() => {
-      const el = this.spinnerRef()?.nativeElement;
-      // el.animate() is inert in jsdom (see animate.ts's transitionTransform
-      // rationale). The continuous rotation is exercised on-device.
-      /* v8 ignore start */
-      if (!el) return;
-      el.animate(
-        [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
-        {
-          duration: 1600,
-          iterations: Infinity,
-          easing: 'linear',
-        },
-      );
-      /* v8 ignore stop */
-    });
-  }
+  /**
+   * Turns the spinner for as long as it's shown. 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 rotation = effect(() => {
+    this.spinnerRef().nativeElement.animate(
+      [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+      {
+        duration: 1600,
+        iterations: Infinity,
+        easing: 'linear',
+      },
+    );
+  });
 
   // Lynx SVG elements don't inherit the CSS `color` property into their stroke
   // attributes, so we substitute the literal `currentColor` in the SVG string

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

@@ -1,63 +1,133 @@
-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 { UiSwitch } from './switch';
 
+@Component({
+  imports: [UiSwitch],
+  template: `
+    <ui-switch
+      [(checked)]="checked"
+      [disabled]="disabled()"
+      class="ml-2"
+      (changed)="changes.push($event)"
+    />
+  `,
+})
+class SwitchHost {
+  readonly checked = signal(false);
+  readonly disabled = signal(false);
+  readonly changes: boolean[] = [];
+}
+
+const renderSwitch = async () => {
+  const result = await render(SwitchHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as SwitchHost,
+    track: () => result.container.querySelector('.flex-row')!,
+    thumb: () => result.container.querySelector('.bg-background')!,
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling one. */
+const CANCEL = 3;
+
 describe('UiSwitch', () => {
-  it('renders in the off position by default', async () => {
-    const { container } = await render(UiSwitch);
-    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('toggle() flips checked and emits `changed`', async () => {
-    const { componentRef } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    const emitted: boolean[] = [];
-    inst.changed.subscribe((v) => emitted.push(v));
-
-    inst.toggle();
-    expect(inst.checked()).toBe(true);
-    inst.toggle();
-    expect(inst.checked()).toBe(false);
-    expect(emitted).toEqual([true, false]);
+  it('renders off, with the thumb at the left and the given class', async () => {
+    const { track, thumb } = await renderSwitch();
+    expect(track().classList).toContain('bg-input');
+    expect(track().classList).toContain('ml-2');
+    expect(thumb().getAttribute('style')).toContain('translateX(2px)');
   });
 
-  it('toggle() is a no-op when disabled', async () => {
-    const { componentRef } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    setInputSignal(inst.disabled, true);
-    const listener = vi.fn();
-    inst.changed.subscribe(listener);
+  it('turns on and off on tap, emitting `changed`', async () => {
+    const { host, track, thumb } = await renderSwitch();
 
-    inst.toggle();
-    expect(inst.checked()).toBe(false);
-    expect(listener).not.toHaveBeenCalled();
+    fireEvent.tap(track());
+    await waitForUpdate();
+    expect(host.checked()).toBe(true);
+    expect(track().classList).toContain('bg-primary');
+    expect(thumb().getAttribute('style')).toContain('translateX(22px)');
+
+    fireEvent.tap(track());
+    await waitForUpdate();
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([true, false]);
   });
 
-  it('positions the thumb differently in ON vs OFF state', async () => {
-    const { componentRef, container } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    let thumb = container.querySelectorAll('view')[1];
-    expect(thumb?.getAttribute('style')).toContain('translateX(2px)');
+  it('springs the thumb across the track, squishing it halfway', async () => {
+    const { track, thumb } = await renderSwitch();
 
-    inst.checked.set(true);
+    fireEvent.tap(track());
+    expect(animate).toHaveBeenCalledWith(thumb(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'translateX(2px) scale(1)' },
+        { transform: 'translateX(12px) scale(1.1)' },
+        { transform: 'translateX(22px) scale(1)' },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+
+    // Turning it back off cuts the first spring short and springs it back.
+    fireEvent.tap(track());
+    expect(animate).toHaveBeenCalledWith(thumb(), [CANCEL, expect.any(String)]);
+    expect(animate).toHaveBeenLastCalledWith(thumb(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'translateX(22px) scale(1)' },
+        { transform: 'translateX(12px) scale(1.1)' },
+        { transform: 'translateX(2px) scale(1)' },
+      ],
+      expect.objectContaining({ fill: 'forwards' }),
+    ]);
+  });
+
+  it('follows its checked binding', async () => {
+    const { host, thumb } = await renderSwitch();
+    host.checked.set(true);
     await waitForUpdate();
-    thumb = container.querySelectorAll('view')[1];
-    expect(thumb?.getAttribute('style')).toContain('translateX(22px)');
+    expect(thumb().getAttribute('style')).toContain('translateX(22px)');
   });
 
-  it('applies opacity-50 when disabled and includes a user class', async () => {
-    // Covers the disabled=true branch of trackClass() (line 62) and the
-    // userClass() concatenation. Without a render + detectChanges cycle the
-    // computed never runs with disabled=true and the branch stays uncovered.
-    const { componentRef, container } = await render(UiSwitch);
-    const inst = componentRef.instance as UiSwitch;
-    setInputSignal(inst.disabled, true);
-    setInputSignal(inst.userClass, 'custom-cls');
+  it('dims and ignores taps while disabled', async () => {
+    const { host, track } = await renderSwitch();
+    host.disabled.set(true);
+    await waitForUpdate();
+    expect(track().classList).toContain('opacity-50');
+
+    fireEvent.tap(track());
     await waitForUpdate();
-    const track = container.querySelectorAll('view')[0];
-    const cls = track?.getAttribute('class') ?? '';
-    expect(cls).toContain('opacity-50');
-    expect(cls).toContain('custom-cls');
+    expect(host.checked()).toBe(false);
+    expect(host.changes).toEqual([]);
+    expect(animate).not.toHaveBeenCalled();
   });
 });

package/dist/ui/components/switch/switch.ts

@@ -52,7 +52,8 @@ export class UiSwitch {
 
   readonly changed = output<boolean>();
 
-  readonly thumbRef = viewChild<ElementRef>('thumb');
+  /** The thumb is always in the template, so toggle() can always slide it. */
+  readonly thumbRef = viewChild.required<ElementRef>('thumb');
   #activeAnimation?: AnimationHandle;
 
   protected readonly trackClass = computed(() =>
@@ -76,21 +77,15 @@ export class UiSwitch {
   toggle(): void {
     if (this.disabled()) return;
 
-    const thumb = this.thumbRef()?.nativeElement;
+    const thumb = this.thumbRef().nativeElement;
     const wasChecked = this.checked();
     const next = !wasChecked;
 
-    // springTranslateX calls thumb.animate() which is inert in jsdom (see
-    // animate.ts). The spring physics of the thumb is exercised on-device.
-    /* v8 ignore start */
-    if (thumb) {
-      this.#activeAnimation?.cancel();
-      const from = wasChecked ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
-      const to = next ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
-      // Spring translate with squish effect at midpoint
-      this.#activeAnimation = springTranslateX(thumb, from, to);
-    }
-    /* v8 ignore stop */
+    this.#activeAnimation?.cancel();
+    const from = wasChecked ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
+    const to = next ? THUMB_OFFSET_ON : THUMB_OFFSET_OFF;
+    // Spring translate with squish effect at midpoint
+    this.#activeAnimation = springTranslateX(thumb, from, to);
 
     this.checked.set(next);
     this.changed.emit(next);

package/dist/ui/components/tab-bar/index.ts

@@ -0,0 +1 @@
+export { UiTabBar, UiTabBarItem } from './tab-bar';