@blotch/dolan 22.2.3 → 22.2.4

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

@@ -1,69 +1,113 @@
-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 { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
 import { UiAvatar } from './avatar';
 
+type AvatarSize = 'default' | 'sm' | 'lg' | 'xl' | '2xl';
+
 @Component({
-  standalone: true,
-  imports: [UiAvatar, LYNX_ELEMENTS],
-  template: `<ui-avatar [src]="src" [fallback]="fallback" />`,
+  imports: [UiAvatar],
+  template: `
+    <ui-avatar [src]="src()" fallback="AB" [size]="size()" class="border" />
+  `,
 })
 class AvatarHost {
-  src = '';
-  fallback = 'AB';
+  readonly src = signal('');
+  readonly size = signal<AvatarSize>('default');
 }
 
+const renderAvatar = async (src = '') => {
+  const result = await render(AvatarHost);
+  const host = result.componentRef.instance as AvatarHost;
+  host.src.set(src);
+  await waitForUpdate();
+  return {
+    ...result,
+    host,
+    avatar: () => result.container.querySelector('.overflow-hidden')!,
+    image: () => result.container.querySelector('image'),
+    /** The pulsing placeholder over the image while it loads. */
+    skeleton: () => result.container.querySelector('.inset-0'),
+    initials: () => result.queryByText('AB'),
+  };
+};
+
 describe('UiAvatar', () => {
-  it('renders the fallback branch when src is empty', async () => {
-    const { container } = await render(AvatarHost);
-    expect(container).toBeTruthy();
+  it('shows the initials in a muted circle without an image', async () => {
+    const { avatar, image, initials } = await renderAvatar();
+    expect(image()).toBeNull();
+    expect(initials()?.parentElement?.classList).toContain('bg-muted');
+    expect(avatar().classList).toContain('border');
   });
 
-  it('renders without a src (default fallback path)', async () => {
-    const { container } = await render(UiAvatar);
-    expect(container).toBeTruthy();
+  it('covers the image with a placeholder while it loads', async () => {
+    const { image, skeleton, initials } = await renderAvatar(
+      'https://example.com/avatar.png',
+    );
+    expect(image()?.getAttribute('src')).toBe('https://example.com/avatar.png');
+    expect(skeleton()).not.toBeNull();
+    expect(initials()).toBeNull();
   });
 
-  it('renders the image branch when src is programmatically set', async () => {
-    // JIT template bindings are inert against input(); drive src directly so
-    // the @if(src()) branch fires and the image + skeleton render.
-    const { componentRef, container } = await render(UiAvatar);
-    setInputSignal(
-      (componentRef.instance as UiAvatar).src,
+  it('reveals the image once it loads', async () => {
+    const { image, skeleton, initials } = await renderAvatar(
       'https://example.com/avatar.png',
     );
+    fireLynxEvent(image()!, 'load');
     await waitForUpdate();
-    expect(container.querySelector('image')).toBeTruthy();
+    expect(skeleton()).toBeNull();
+    expect(image()).not.toBeNull();
+
+    // Lynx can dispatch `load` again as the placeholder's animation stops:
+    // the avatar stays as it is.
+    fireLynxEvent(image()!, 'load');
+    await waitForUpdate();
+    expect(skeleton()).toBeNull();
+    expect(image()).not.toBeNull();
+    expect(initials()).toBeNull();
   });
 
-  it('keeps the image load / error handlers idempotent', async () => {
-    // Directly invoke the protected handlers via the instance to cover the
-    // re-entrancy latches — Lynx's on-device behavior re-dispatches the load
-    // event when the skeleton animation tears down.
-    const { componentRef } = await render(UiAvatar);
-    const inst = componentRef.instance as unknown as {
-      onImageLoad: () => void;
-      onImageError: () => void;
-      loaded: () => boolean;
-      errored: () => boolean;
-    };
-    inst.onImageLoad();
-    inst.onImageLoad(); // second call is a no-op (loaded latch)
-    expect(inst.loaded()).toBe(true);
+  it('falls back to the initials when the image fails to load', async () => {
+    const { image, skeleton, initials } = await renderAvatar(
+      'https://example.com/missing.png',
+    );
+    // Lynx can dispatch the event again before the avatar updates, as the
+    // placeholder's animation stops: the second one changes nothing.
+    fireLynxEvent(image()!, 'error', { detail: { errMsg: 'Not found' } });
+    fireLynxEvent(image()!, 'error', { detail: { errMsg: 'Not found' } });
+    await waitForUpdate();
+    expect(image()).toBeNull();
+    expect(skeleton()).toBeNull();
+    expect(initials()).not.toBeNull();
+  });
 
-    inst.onImageError();
-    inst.onImageError(); // second call is a no-op (errored latch)
-    expect(inst.errored()).toBe(true);
+  it.each<[AvatarSize, string, string]>([
+    ['sm', 'h-8', 'text-sm'],
+    ['default', 'h-10', 'text-sm'],
+    ['lg', 'h-14', 'text-lg'],
+    ['xl', 'h-20', 'text-2xl'],
+    ['2xl', 'h-28', 'text-3xl'],
+  ])('sizes a %s avatar and its initials', async (size, height, text) => {
+    const { host, avatar, initials } = await renderAvatar();
+    host.size.set(size);
+    await waitForUpdate();
+    expect(avatar().classList).toContain(height);
+    expect(initials()?.classList).toContain(text);
   });
 
-  it('applies size-specific classes for each supported size', async () => {
-    const { componentRef, container } = await render(UiAvatar);
-    for (const size of ['sm', 'default', 'lg', 'xl', '2xl'] as const) {
-      setInputSignal((componentRef.instance as UiAvatar).size, size);
-      await waitForUpdate();
-      expect(container).toBeTruthy();
-    }
+  it.each<[AvatarSize, string]>([
+    ['sm', 'h-8'],
+    ['default', 'h-10'],
+    ['lg', 'h-14'],
+    ['xl', 'h-20'],
+    ['2xl', 'h-28'],
+  ])('sizes the image of a %s avatar', async (size, height) => {
+    const { host, image } = await renderAvatar(
+      'https://example.com/avatar.png',
+    );
+    host.size.set(size);
+    await waitForUpdate();
+    expect(image()?.classList).toContain(height);
   });
 });

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

@@ -1,25 +1,30 @@
-import { render } from '@blotch/angular-lynx-testing-library';
-import { Component } from '@angular/core';
-import { describe, expect, it } from 'vitest';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
-import { UiBadge, badgeVariants } from './badge';
+import { Component, signal } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
+import { type BadgeVariant, UiBadge, badgeVariants } from './badge';
 
-/**
- * Host wrappers project content and bind inputs the way real app templates do.
- * Required-input components would need this; UiBadge has none but the pattern
- * keeps content projection (<ng-content>) exercised.
- */
 @Component({
-  standalone: true,
-  imports: [UiBadge, LYNX_ELEMENTS],
-  template: `<ui-badge [variant]="variant" [animated]="false"
-    >Status</ui-badge
-  >`,
+  imports: [UiBadge],
+  template: `
+    <ui-badge [variant]="variant()" [animated]="animated()" class="ml-1">
+      Status
+    </ui-badge>
+  `,
 })
 class BadgeHost {
-  variant: 'default' | 'secondary' | 'destructive' | 'outline' = 'default';
+  readonly variant = signal<BadgeVariant>('default');
+  readonly animated = signal(true);
 }
 
+/**
+ * The keyframes of the animations started on `element`.
+ */
+const keyframesOn = (calls: [Element, unknown[]][], element: Element) =>
+  calls
+    .filter(([target, [operation]]) => target === element && operation === 0)
+    .map(([, args]) => args[2]);
+
 describe('badgeVariants', () => {
   it('returns default variant classes', () => {
     expect(badgeVariants()).toContain('bg-primary');
@@ -35,15 +40,44 @@ describe('badgeVariants', () => {
 });
 
 describe('UiBadge', () => {
-  it('renders projected content', async () => {
+  it('renders its label in the variant colors', async () => {
+    const { componentRef, getByText } = await render(BadgeHost);
+    const label = getByText('Status');
+    expect(label.classList).toContain('text-primary-foreground');
+    expect(label.parentElement?.classList).toContain('bg-primary');
+    expect(label.parentElement?.classList).toContain('ml-1');
+
+    (componentRef.instance as BadgeHost).variant.set('outline');
+    await waitForUpdate();
+    expect(label.classList).toContain('text-foreground');
+    expect(label.parentElement?.classList).toContain('border-border');
+  });
+
+  it('pops in on first render', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
     const { getByText } = await render(BadgeHost);
-    expect(getByText('Status')).toBeTruthy();
+    const badge = getByText('Status').parentElement!;
+    expect(keyframesOn(animate.mock.calls, badge)).toEqual([
+      [
+        { transform: 'scale(0.6)', opacity: 0 },
+        { transform: 'scale(1)', opacity: 1 },
+      ],
+    ]);
+    animate.mockRestore();
   });
 
-  it('runs the pop-in animation when animated is true', async () => {
-    const { getByText } = await render(UiBadge);
-    // With no host binding, animated defaults to true → effect runs popIn on the
-    // container. Just assert it renders without throwing.
-    expect(getByText).toBeTruthy();
+  it("doesn't animate when animated is off", async () => {
+    @Component({
+      imports: [UiBadge],
+      template: `<ui-badge [animated]="false">Status</ui-badge>`,
+    })
+    class StillBadgeHost {}
+
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { getByText } = await render(StillBadgeHost);
+    expect(
+      keyframesOn(animate.mock.calls, getByText('Status').parentElement!),
+    ).toEqual([]);
+    animate.mockRestore();
   });
 });

package/dist/ui/components/badge/badge.ts

@@ -71,21 +71,19 @@ export class UiBadge {
   readonly animated = input(true);
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly containerRef = viewChild.required<ElementRef>('container');
 
-  constructor() {
-    effect(() => {
-      const el = this.containerRef()?.nativeElement;
-      // popIn calls el.animate() which is inert in jsdom (the offscreen web
-      // renderer path — see animate.ts's transitionTransform comment). The
-      // effect's rendering-adjacent work is not exercisable from a JIT test,
-      // so ignore the animation branch for coverage.
-      /* v8 ignore next 3 */
-      if (el && this.animated()) {
-        popIn(el, { duration: 200 });
-      }
-    });
-  }
+  /**
+   * Pops the badge in on first render, unless `animated` is off. 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 entrance = effect(() => {
+    if (this.animated()) {
+      popIn(this.containerRef().nativeElement, { duration: 200 });
+    }
+  });
 
   protected readonly containerClass = computed(() =>
     cn(badgeVariants({ variant: this.variant() }), this.userClass()),

package/dist/ui/components/bar-chart/bar-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,7 @@ import type {
   SceneRect,
 } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { barChartDefinition } from './bar-chart';
+import { type BarDatum, UiBarChart, barChartDefinition } from './bar-chart';
 
 /**
  * Every bar in a definition's scene.
@@ -95,3 +101,78 @@ describe('barChartDefinition', () => {
     expect(found.map((bar) => bar.style?.fill)).toEqual(['red', 'blue', 'red']);
   });
 });
+
+@Component({
+  imports: [UiBarChart],
+  template: `
+    <ui-bar-chart
+      [data]="data"
+      [width]="300"
+      [color]="color()"
+      [radius]="4"
+      (barTap)="tapped.push($event)"
+    />
+  `,
+})
+class BarChartHost {
+  readonly data: readonly BarDatum[] = [
+    { x: 'Mon', y: 5 },
+    { x: 'Tue', y: 8 },
+  ];
+  readonly color = signal('red');
+  /** Every `barTap`, in order. */
+  readonly tapped: BarDatum[] = [];
+}
+
+/**
+ * The SVG the chart's marks layer draws.
+ */
+const marksSvg = (container: Element) =>
+  container.querySelectorAll('svg')[1]!.getAttribute('content')!;
+
+/**
+ * The middle of each bar the chart drew.
+ */
+const barsDrawn = (container: Element) =>
+  [
+    ...marksSvg(container).matchAll(
+      /<rect x="([\d.-]+)" y="([\d.-]+)" width="([\d.-]+)" height="([\d.-]+)"[^>]*fill=/g,
+    ),
+  ].map(([, x, y, width, height]) => ({
+    x: Number(x) + Number(width) / 2,
+    y: Number(y) + Number(height) / 2,
+  }));
+
+/**
+ * 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('UiBarChart', () => {
+  it('draws a bar per datum with its inputs', async () => {
+    const { componentRef, container, getByText } = await render(BarChartHost);
+    expect(barsDrawn(container)).toHaveLength(2);
+    expect(marksSvg(container)).toContain('fill="red"');
+    expect(marksSvg(container)).toContain('rx="4"');
+    expect(getByText('Mon')).toBeTruthy();
+
+    (componentRef.instance as BarChartHost).color.set('blue');
+    await waitForUpdate();
+    expect(marksSvg(container)).toContain('fill="blue"');
+  });
+
+  it("emits a tapped bar's datum, and nothing for a tap off the bars", async () => {
+    const { componentRef, container } = await render(BarChartHost);
+    const host = componentRef.instance as BarChartHost;
+    await tap(container, barsDrawn(container)[1]!);
+    expect(host.tapped).toEqual([host.data[1]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([host.data[1]]);
+  });
+});