@blotch/dolan 22.2.2 → 22.2.4

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,51 +1,178 @@
+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,
+  SceneRect,
+} from '@tanstack/charts/types';
 import { describe, expect, it } from 'vitest';
-import { computeBars } from './bar-chart';
-
-// Screen y grows downward, so a value ABOVE the baseline has a SMALLER pixel y
-// than baseY. Baseline pixel y = 100 in these cases (bottom of the plot).
-describe('computeBars', () => {
-  it('draws a positive bar from the baseline up to the value, centered on cx', () => {
-    // value projects to y=30 (above the baseline at y=100).
-    const [bar] = computeBars([{ cx: 50, valueY: 30 }], 100, 12);
-    expect(bar.top).toBe(30); // min(valueY, baseY) — the higher edge
-    expect(bar.height).toBe(70); // |valueY - baseY|
-    expect(bar.width).toBe(12);
-    expect(bar.left).toBe(50 - 6); // cx - barWidth/2
-  });
-
-  it('draws a negative bar growing downward from the baseline', () => {
-    // value projects BELOW the baseline, so valueY (140) > baseY (100).
-    const [bar] = computeBars([{ cx: 20, valueY: 140 }], 100, 10);
-    expect(bar.top).toBe(100); // min(valueY, baseY) = baseY here
-    expect(bar.height).toBe(40); // grows down to the value
-  });
-
-  it('draws nothing (zero height) for a value exactly on the baseline', () => {
-    // A bar's height is its datum: on the baseline there is nothing to draw, so
-    // the default minBarHeight of 0 leaves it invisible rather than a sliver.
-    const [bar] = computeBars([{ cx: 0, valueY: 100 }], 100, 12);
-    expect(bar.height).toBe(0);
-  });
-
-  it('honors a custom minimum bar height', () => {
-    const [bar] = computeBars([{ cx: 0, valueY: 100 }], 100, 12, 3);
-    expect(bar.height).toBe(3);
-  });
-
-  it('centers every bar on its own cx', () => {
-    const bars = computeBars(
-      [
-        { cx: 10, valueY: 40 },
-        { cx: 60, valueY: 20 },
-      ],
-      100,
-      8,
+import { type BarDatum, UiBarChart, barChartDefinition } from './bar-chart';
+
+/**
+ * Every bar in a definition's scene.
+ */
+const bars = (definition: ChartDefinition<any, any, any>) => {
+  const scene = createChartRuntime().render(definition, {
+    width: 300,
+    height: 200,
+  });
+  const found: SceneRect[] = [];
+  const walk = (nodes: readonly SceneNode[]) => {
+    for (const node of nodes) {
+      if (node.kind === 'group') {
+        if (!node.focus) walk(node.children);
+      } else if (node.kind === 'rect') found.push(node);
+    }
+  };
+  walk(scene.nodes);
+  return { scene, found };
+};
+
+describe('barChartDefinition', () => {
+  const week = [
+    { x: 'Mon', y: 5 },
+    { x: 'Tue', y: 8 },
+    { x: 'Wed', y: 3 },
+  ];
+
+  it('puts category labels on a band scale', () => {
+    const { scene, found } = bars(
+      barChartDefinition({ data: week, radius: 4 }),
+    );
+    expect(found).toHaveLength(3);
+    expect(scene.scales['x']!.bandwidth).toBeGreaterThan(0);
+    expect(found[0]!.style?.fill).toBe('var(--primary)');
+  });
+
+  it('cycles per-bar colors on categories', () => {
+    const { found } = bars(
+      barChartDefinition({ data: week, colors: ['red', 'blue'] }),
+    );
+    expect(found.map((bar) => bar.style?.fill)).toEqual(['red', 'blue', 'red']);
+  });
+
+  it('sizes bars on a band scale by barWidthRatio, clamped to 0–1', () => {
+    const wide = bars(
+      barChartDefinition({
+        data: week,
+        barWidthRatio: 2,
+        showXGrid: true,
+        xAxisLabel: 'Day',
+      }),
+    );
+    const narrow = bars(barChartDefinition({ data: week, barWidthRatio: 0.2 }));
+    expect(narrow.found[0]!.width).toBeLessThan(wide.found[0]!.width);
+  });
+
+  const series = [
+    { x: 0, y: 4 },
+    { x: 1, y: -2 },
+    { x: 3, y: 6 },
+  ];
+
+  it('places numeric bars at their values, the ratio of the smallest gap wide', () => {
+    const { scene, found } = bars(
+      barChartDefinition({ data: series, barWidthRatio: 0.5 }),
+    );
+    const x = scene.scales['x']!;
+    expect(x.bandwidth).toBe(0);
+    // The x axis has half a gap of room either side for the edge bars.
+    expect(x.domain[0]).toBeLessThanOrEqual(-0.5);
+    const unit = Math.abs(x.map(1) - x.map(0));
+    // rect trims a hair off each edge, so allow a couple of pixels.
+    expect(Math.abs(found[0]!.width - unit * 0.5)).toBeLessThan(2);
+    // Negative values grow down from the baseline.
+    expect(Math.abs(found[1]!.y - scene.scales['y']!.map(0))).toBeLessThan(1);
+  });
+
+  it('colors numeric bars through the color scale', () => {
+    const { found } = bars(
+      barChartDefinition({
+        data: series,
+        colors: ['red', 'blue'],
+        tooltip: false,
+      }),
     );
-    expect(bars[0].left).toBe(10 - 4);
-    expect(bars[1].left).toBe(60 - 4);
+    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]]);
 
-  it('returns an empty array for no bars', () => {
-    expect(computeBars([], 100, 12)).toEqual([]);
+    await tap(container, { x: -100, y: -100 });
+    expect(host.tapped).toEqual([host.data[1]]);
   });
 });