@blotch/dolan 22.2.3 → 22.2.4

package/dist/ui/components/alert-dialog/alert-dialog.test.ts

@@ -1,9 +1,24 @@
-import { Component, signal } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { Component, signal, viewChild } 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 {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
 import { DURATION } from '../../utils/animate';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import {
   UiAlertDialog,
   UiAlertDialogDescription,
@@ -22,167 +37,219 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-alert-dialog [(open)]="open">
-      <ui-alert-dialog-header>
-        <ui-alert-dialog-title>Sure?</ui-alert-dialog-title>
-        <ui-alert-dialog-description>Cannot undo</ui-alert-dialog-description>
-      </ui-alert-dialog-header>
-      <ui-alert-dialog-footer><text>Buttons</text></ui-alert-dialog-footer>
-    </ui-alert-dialog>
+    @if (shown()) {
+      <ui-alert-dialog
+        [(open)]="open"
+        class="max-w-sm"
+        (closed)="closes.set(closes() + 1)"
+      >
+        <ui-alert-dialog-header class="gap-2">
+          <ui-alert-dialog-title class="text-xl">Sure?</ui-alert-dialog-title>
+          <ui-alert-dialog-description class="italic">
+            Cannot undo
+          </ui-alert-dialog-description>
+        </ui-alert-dialog-header>
+        <ui-alert-dialog-footer class="justify-start">
+          <text>Buttons</text>
+        </ui-alert-dialog-footer>
+      </ui-alert-dialog>
+    }
   `,
 })
 class AlertDialogHost {
-  open = true;
+  readonly open = signal(false);
+  // Takes the alert dialog out of the tree, as an `@if` or a route change
+  // would.
+  readonly shown = signal(true);
+  readonly closes = signal(0);
+  readonly dialog = viewChild.required(UiAlertDialog);
 }
 
-describe('UiAlertDialog', () => {
-  it('stops its close timers when it is destroyed while closing', async () => {
-    const warn = vi.spyOn(console, 'warn');
-    const { componentRef, unmount } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    inst.open.set(true);
-    for (let i = 0; i < 5; i++) await waitForUpdate();
-    inst.open.set(false);
-    await waitForUpdate();
-    // Destroyed during the close animation, as an `@if` around the alert dialog
-    // would do. Its close timer (DURATION.normal + 20) used to fire anyway
-    // and emit `closed` from the destroyed output.
-    unmount();
-    await new Promise((r) => setTimeout(r, DURATION.normal + 50));
-    const warnings = warn.mock.calls.map(([message]) => String(message));
-    warn.mockRestore();
-    expect(warnings.filter((message) => message.includes('NG0953'))).toEqual(
-      [],
-    );
-  });
+const renderAlertDialog = async () => {
+  const result = await render(AlertDialogHost);
+  const panel = () =>
+    result.container.querySelector('[accessibility-exclusive-focus]')!;
+  return {
+    ...result,
+    host: result.componentRef.instance as AlertDialogHost,
+    overlay: () => result.container.querySelector('overlay')!,
+    panel,
+    backdrop: () => panel().parentElement!,
+  };
+};
+
+/**
+ * Waits for the alert dialog's open or close sequence, which runs on timers, then
+ * renders what it changed.
+ */
+const after = async (ms: number) => {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+  await waitForUpdate();
+};
+
+/**
+ * Long enough for the open sequence, including the panel's 30ms stagger. The
+ * sequence is chained timers, and on Windows each can fire up to a clock
+ * tick (about 16ms) late, so 50ms was too short on CI's Windows runner.
+ */
+const OPENED = 150;
+/** Long enough for the close animation and the hide after it, as above. */
+const CLOSED = DURATION.normal + 150;
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+/** `__ElementAnimate`'s first argument for canceling an animation. */
+const CANCEL = 3;
 
-  it('moves a screen reader into the panel and keeps it there while open', async () => {
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    const panel = container.querySelector(
-      '[accessibility-exclusive-focus]',
-    ) as Element & { invoke?: unknown };
-    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('false');
-    const invoke = vi.fn();
-    panel.invoke = invoke;
-    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
-      nativeElement: panel,
-    });
-    (inst as unknown as { panelRef: unknown }).panelRef = signal({
-      nativeElement: panel,
-    });
-    inst.open.set(true);
-    for (let i = 0; i < 5; i++) await waitForUpdate();
-    expect(invoke).toHaveBeenCalledWith('requestAccessibilityFocus');
-    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('true');
+describe('UiAlertDialog', () => {
+  // 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 header, title, description, and footer', async () => {
-    const { getByText } = await render(AlertDialogHost);
+  it('renders each part with its projected content', async () => {
+    const { getByText } = await renderAlertDialog();
     expect(getByText('Sure?')).toBeTruthy();
     expect(getByText('Cannot undo')).toBeTruthy();
     expect(getByText('Buttons')).toBeTruthy();
   });
 
-  it('panel tap is a no-op (catchtap stops bubbling)', async () => {
-    const { componentRef } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    expect(() =>
-      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
-    ).not.toThrow();
+  it("merges each part's class with its own, the given class winning", async () => {
+    const { container, getByText, panel } = await renderAlertDialog();
+    expect(panel().classList).toContain('bg-background');
+    expect(panel().classList).toContain('max-w-sm');
+    expect(getByText('Sure?').classList).toContain('font-semibold');
+    expect(getByText('Sure?').classList).toContain('text-xl');
+    expect(getByText('Cannot undo').classList).toContain('text-sm');
+    expect(getByText('Cannot undo').classList).toContain('italic');
+    // Each part's own view, not its host element, which keeps the bare class.
+    const header = container.querySelector('.flex-col.gap-2');
+    expect(header?.classList).not.toContain('gap-1.5');
+    const footer = container.querySelector('.pt-4');
+    expect(footer?.classList).toContain('justify-start');
+    expect(footer?.classList).not.toContain('justify-end');
   });
 
-  it('open effect: showing then hiding runs the animate-in/out lifecycles', async () => {
-    // Monkey-patch backdrop/panel refs so #animateIn / #animateOut execute in
-    // full instead of bailing on !backdrop || !panel.
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    const view = container.querySelector('view') as Element;
-    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
-      nativeElement: view,
-    });
-    (inst as unknown as { panelRef: unknown }).panelRef = signal({
-      nativeElement: view,
-    });
-
-    inst.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    await waitForUpdate();
-
-    inst.open.set(false);
-    await new Promise((r) => setTimeout(r, 320));
-    await waitForUpdate();
-    expect(inst.open()).toBe(false);
+  it('stays hidden until it is opened', async () => {
+    const { host, overlay, panel } = await renderAlertDialog();
+    await after(CLOSED);
+    expect(overlay().getAttribute('style')).toContain('display: none');
+    expect(panel().getAttribute('accessibility-exclusive-focus')).toBe('false');
+    expect(animate).not.toHaveBeenCalled();
+    // Starting closed isn't closing: `closed` waits for a real close.
+    expect(host.closes()).toBe(0);
   });
 
-  it('open effect bails when backdrop/panel refs are undefined', async () => {
-    // Covers the early-return branches in #animateIn / #animateOut.
-    const { componentRef } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    const closed = vi.fn();
-    inst.closed.subscribe(closed);
-    inst.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    inst.open.set(false);
-    await waitForUpdate();
-    // Wait out the close sequence, so #animateOut runs (and bails) while the
-    // component is still alive. Destroying it clears the sequence's timers.
-    await new Promise((r) => setTimeout(r, DURATION.normal + 50));
-    expect(inst.open()).toBe(false);
-    expect(closed).toHaveBeenCalledOnce();
+  it('shows the overlay and animates the backdrop, then the panel, in', async () => {
+    const { host, overlay, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    expect(overlay().getAttribute('style')).not.toContain('display: none');
+    expect(animate).toHaveBeenCalledWith(backdrop(), [
+      START,
+      expect.any(String),
+      [{ opacity: 0 }, { opacity: 1 }],
+      expect.objectContaining({ duration: DURATION.normal }),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(0.9) translateY(10px)', opacity: 0 },
+        { transform: 'scale(1) translateY(0px)', opacity: 1 },
+      ],
+      expect.objectContaining({ duration: DURATION.slow }),
+    ]);
   });
 
-  it('overlayStyle switches between visible and hidden variants', async () => {
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    let overlay = container.querySelector('overlay');
-    expect(overlay?.getAttribute('style')).toContain('display: none');
-
-    const view = container.querySelector('view') as Element;
-    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
-      nativeElement: view,
-    });
-    (inst as unknown as { panelRef: unknown }).panelRef = signal({
-      nativeElement: view,
-    });
-    inst.open.set(true);
-    for (let i = 0; i < 10; i++) await waitForUpdate();
-    overlay = container.querySelector('overlay');
-    expect(overlay?.getAttribute('style')).not.toContain('display: none');
-  });
-
-  it('accepts a user class on the panel', async () => {
-    const { componentRef, container } = await render(UiAlertDialog);
-    const inst = componentRef.instance as UiAlertDialog;
-    setInputSignal(inst.userClass, 'custom-panel');
-    await waitForUpdate();
-    const views = Array.from(container.querySelectorAll('view'));
-    expect(
-      views.some((el) => el.getAttribute('class')?.includes('custom-panel')),
-    ).toBe(true);
+  it('moves a screen reader into the panel and keeps it there while open', async () => {
+    const { host, panel } = await renderAlertDialog();
+    const invoke = vi.spyOn(host.dialog().panelRef().nativeElement, 'invoke');
+    host.open.set(true);
+    await after(OPENED);
+    expect(invoke).toHaveBeenCalledWith('requestAccessibilityFocus');
+    expect(panel().getAttribute('accessibility-exclusive-focus')).toBe('true');
   });
-});
 
-describe('Alert dialog sub-components', () => {
-  it('UiAlertDialogHeader renders projected content', async () => {
-    const { container } = await render(UiAlertDialogHeader);
-    expect(container.querySelector('view')).toBeTruthy();
+  it('animates out, then hides and emits closed', async () => {
+    const { host, overlay, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    animate.mockClear();
+
+    host.open.set(false);
+    await after(CLOSED);
+    expect(animate).toHaveBeenCalledWith(backdrop(), [
+      START,
+      expect.any(String),
+      [{ opacity: 1 }, { opacity: 0 }],
+      expect.any(Object),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel(), [
+      START,
+      expect.any(String),
+      [
+        { transform: 'scale(1) translateY(0px)', opacity: 1 },
+        { transform: 'scale(0.95) translateY(10px)', opacity: 0 },
+      ],
+      expect.any(Object),
+    ]);
+    expect(overlay().getAttribute('style')).toContain('display: none');
+    expect(panel().getAttribute('accessibility-exclusive-focus')).toBe('false');
+    expect(host.closes()).toBe(1);
   });
 
-  it('UiAlertDialogTitle renders projected content', async () => {
-    const { container } = await render(UiAlertDialogTitle);
-    expect(container.querySelector('text')).toBeTruthy();
+  it('cancels the previous animations when it opens again', async () => {
+    const { host, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    host.open.set(false);
+    await after(CLOSED);
+    animate.mockClear();
+
+    host.open.set(true);
+    await after(OPENED);
+    // The close animations hold their last frame (fill: forwards) until
+    // they're canceled, which would hide the panel being opened.
+    expect(animate).toHaveBeenCalledWith(backdrop(), [
+      CANCEL,
+      expect.any(String),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel(), [CANCEL, expect.any(String)]);
   });
 
-  it('UiAlertDialogDescription renders projected content', async () => {
-    const { container } = await render(UiAlertDialogDescription);
-    expect(container.querySelector('text')).toBeTruthy();
+  it('stays open when the backdrop or the panel is tapped', async () => {
+    const { host, backdrop, panel } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    // Unlike a dialog, an alert dialog waits for an answer from its actions.
+    fireEvent.tap(backdrop());
+    // The panel catches its taps, so they don't reach the backdrop either.
+    fireEvent.tap(panel(), { eventType: 'catchEvent' });
+    await waitForUpdate();
+    expect(host.open()).toBe(true);
   });
 
-  it('UiAlertDialogFooter renders projected content', async () => {
-    const { container } = await render(UiAlertDialogFooter);
-    expect(container.querySelector('view')).toBeTruthy();
+  it('stops its close sequence when it is destroyed while closing', async () => {
+    const warn = vi.spyOn(console, 'warn');
+    const { host } = await renderAlertDialog();
+    host.open.set(true);
+    await after(OPENED);
+    host.open.set(false);
+    await after(0);
+    // Destroyed during the close animation. Its close timer
+    // (DURATION.normal + 20) used to fire anyway and emit `closed` from the
+    // destroyed output, which Angular warns about in dev builds.
+    host.shown.set(false);
+    await waitForUpdate();
+    await after(CLOSED);
+    const warnings = warn.mock.calls.map(([message]) => String(message));
+    warn.mockRestore();
+    expect(warnings.filter((message) => message.includes('NG0953'))).toEqual(
+      [],
+    );
+    expect(host.closes()).toBe(0);
   });
 });

package/dist/ui/components/alert-dialog/alert-dialog.ts

@@ -52,8 +52,11 @@ export class UiAlertDialog implements OnDestroy {
 
   protected readonly overlayVisible = signal(false);
 
-  readonly backdropRef = viewChild<ElementRef>('backdrop');
-  readonly panelRef = viewChild<ElementRef>('panel');
+  // Required: both are always in the template (the overlay hides with
+  // display:none rather than leaving the tree), and the sequences only read
+  // them from timers that start after the first render.
+  readonly backdropRef = viewChild.required<ElementRef>('backdrop');
+  readonly panelRef = viewChild.required<ElementRef>('panel');
   #backdropAnim?: AnimationHandle;
   #panelAnim?: AnimationHandle;
   #hasBeenOpen = false;
@@ -61,21 +64,26 @@ export class UiAlertDialog implements OnDestroy {
   // them.
   readonly #timers = new Set<ReturnType<typeof setTimeout>>();
 
-  constructor() {
-    // `#hasBeenOpen` prevents the close animation from running on the initial
-    // effect evaluation when `open` starts as false. Without this guard, the
-    // first run would call #doClose() immediately and emit `closed` before the
-    // dialog has ever been opened.
-    effect(() => {
-      const isOpen = this.open();
-      if (isOpen) {
-        this.#hasBeenOpen = true;
-        this.#doOpen();
-      } else if (this.#hasBeenOpen) {
-        this.#doClose();
-      }
-    });
-  }
+  /**
+   * Plays the open or close sequence whenever `open` 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.
+   *
+   * `#hasBeenOpen` prevents the close animation from running on the initial
+   * effect evaluation when `open` starts as false. Without this guard, the
+   * first run would call #doClose() immediately and emit `closed` before the
+   * dialog has ever been opened.
+   */
+  protected readonly openAndClose = effect(() => {
+    const isOpen = this.open();
+    if (isOpen) {
+      this.#hasBeenOpen = true;
+      this.#doOpen();
+    } else if (this.#hasBeenOpen) {
+      this.#doClose();
+    }
+  });
 
   /**
    * `width`/`height`/`top`/`left` are web-only necessities: on web
@@ -92,9 +100,9 @@ export class UiAlertDialog implements OnDestroy {
   // `bg-black/50` supplies the dim. It lives on the backdrop specifically so
   // the existing fadeIn/fadeOut (opacity 0↔1, staggered 30ms ahead of the
   // panel scale-in) animate the dim in lockstep with the dialog appearing —
-  // no separate animation needed. A named color with an opacity modifier is
-  // used deliberately: it compiles to `rgb(0 0 0 / 0.5)`, which Lynx accepts,
-  // whereas a semantic token like `bg-background/50` would render transparent.
+  // no separate animation needed. It's a named color, not a theme one,
+  // because the dim is black in light and dark mode alike; it compiles to
+  // `rgb(0 0 0 / 0.5)`, which Lynx accepts.
   protected readonly backdropClass = computed(() =>
     cn('items-center flex justify-center', 'h-full w-full', 'bg-black/50'),
   );
@@ -163,9 +171,8 @@ export class UiAlertDialog implements OnDestroy {
   }
 
   #animateIn(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
@@ -191,9 +198,8 @@ export class UiAlertDialog implements OnDestroy {
   }
 
   #animateOut(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();

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

@@ -1,7 +1,14 @@
+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, SceneNode } from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { areaChartDefinition } from './area-chart';
+import type { XYDatum } from '../chart/chart-presets';
+import { UiAreaChart, areaChartDefinition } from './area-chart';
 
 const data = [
   { x: 0, y: 4 },
@@ -69,3 +76,76 @@ describe('areaChartDefinition', () => {
     expect(definition.tooltip).toBe(false);
   });
 });
+
+@Component({
+  imports: [UiAreaChart],
+  template: `
+    <ui-area-chart
+      [data]="data"
+      [width]="300"
+      [baseline]="baseline()"
+      [fillOpacity]="0.3"
+      (pointTap)="tapped.push($event)"
+    />
+  `,
+})
+class AreaChartHost {
+  readonly data = data;
+  readonly baseline = signal(0);
+  /** 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.
+ */
+const dotsDrawn = (container: Element) =>
+  [
+    ...marksSvg(container).matchAll(/<circle cx="([\d.-]+)" cy="([\d.-]+)"/g),
+  ].map(([, x, y]) => ({ x: Number(x), y: Number(y) }));
+
+/**
+ * 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();
+};
+
+/**
+ * The texts of the chart's labels, such as its ticks.
+ */
+const labelTexts = (container: Element) =>
+  [...container.querySelectorAll('text')].map((text) => text.textContent);
+
+describe('UiAreaChart', () => {
+  it('fills under its line with its inputs, keeping the baseline in view', async () => {
+    const { componentRef, container } = await render(AreaChartHost);
+    expect(marksSvg(container)).toContain('fill-opacity="0.3"');
+    expect(dotsDrawn(container)).toHaveLength(3);
+    expect(labelTexts(container)).not.toContain('-20');
+
+    (componentRef.instance as AreaChartHost).baseline.set(-20);
+    await waitForUpdate();
+    expect(labelTexts(container)).toContain('-20');
+  });
+
+  it("emits a tapped point's datum, and nothing for a tap off the points", async () => {
+    const { componentRef, container } = await render(AreaChartHost);
+    const host = componentRef.instance as AreaChartHost;
+    const first = dotsDrawn(container)[0]!;
+    await tap(container, { x: first.x + 1, y: first.y + 1 });
+    expect(host.tapped).toEqual([data[0]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([data[0]]);
+  });
+});