@blotch/dolan 22.2.3 → 22.2.4

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

@@ -102,18 +102,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/line-chart/line-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 { lineChartDefinition } from './line-chart';
+import type { XYDatum } from '../chart/chart-presets';
+import { UiLineChart, lineChartDefinition } from './line-chart';
 
 const data = [
   { x: 0, y: 10 },
@@ -75,3 +82,71 @@ describe('lineChartDefinition', () => {
     expect(lineChartDefinition({ data, tooltip: false }).tooltip).toBe(false);
   });
 });
+
+@Component({
+  imports: [UiLineChart],
+  template: `
+    <ui-line-chart
+      [data]="data"
+      [width]="300"
+      [showDots]="showDots()"
+      color="red"
+      yAxisLabel="Revenue"
+      (pointTap)="tapped.push($event)"
+    />
+  `,
+})
+class LineChartHost {
+  readonly data = data;
+  readonly showDots = signal(true);
+  /** 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();
+};
+
+describe('UiLineChart', () => {
+  it('draws its data with its inputs', async () => {
+    const { componentRef, container, getByText } = await render(LineChartHost);
+    expect(marksSvg(container)).toContain('stroke="red"');
+    expect(dotsDrawn(container)).toHaveLength(3);
+    expect(getByText('Revenue')).toBeTruthy();
+
+    (componentRef.instance as LineChartHost).showDots.set(false);
+    await waitForUpdate();
+    expect(dotsDrawn(container)).toHaveLength(0);
+  });
+
+  it("emits a tapped point's datum, and nothing for a tap off the points", async () => {
+    const { componentRef, container } = await render(LineChartHost);
+    const host = componentRef.instance as LineChartHost;
+    const middle = dotsDrawn(container)[1]!;
+    await tap(container, { x: middle.x + 1, y: middle.y + 1 });
+    expect(host.tapped).toEqual([data[1]]);
+
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([data[1]]);
+  });
+});