@blotch/dolan 22.2.3 → 22.2.5

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

@@ -1,19 +1,38 @@
-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 { UiAlert, alertVariants } from './alert';
+import { describe, expect, it, vi } from 'vitest';
+import { lynxMainThread } from '../../../test-utils/lynx-main-thread';
+import { type AlertVariant, UiAlert, alertVariants } from './alert';
 
 @Component({
-  standalone: true,
   imports: [UiAlert, LYNX_ELEMENTS],
-  template: `<ui-alert [variant]="variant"><text>Message</text></ui-alert>`,
+  template: `
+    <ui-alert
+      [variant]="variant()"
+      [title]="title()"
+      [description]="description()"
+      class="mt-2"
+    >
+      <text>Message</text>
+    </ui-alert>
+  `,
 })
 class AlertHost {
-  variant: 'default' | 'destructive' = 'default';
+  readonly variant = signal<AlertVariant>('default');
+  readonly title = signal('');
+  readonly description = signal('');
 }
 
+const renderAlert = async () => {
+  const result = await render(AlertHost);
+  return {
+    ...result,
+    host: result.componentRef.instance as AlertHost,
+    alert: () => result.container.querySelector('.rounded-lg')!,
+  };
+};
+
 describe('alertVariants', () => {
   it('returns default variant classes', () => {
     expect(alertVariants()).toContain('bg-background');
@@ -27,22 +46,51 @@ describe('alertVariants', () => {
 });
 
 describe('UiAlert', () => {
-  it('renders projected content', async () => {
-    const { getByText } = await render(AlertHost);
+  it('renders projected content, without a title or description', async () => {
+    const { alert, getByText } = await renderAlert();
     expect(getByText('Message')).toBeTruthy();
+    expect(alert().querySelectorAll('text')).toHaveLength(1);
+    expect(alert().classList).toContain('mt-2');
   });
 
-  it('renders title and description slots when their inputs are set', async () => {
-    // JIT template bindings don't propagate through input(); drive the signals
-    // directly so the @if(title()) / @if(description()) branches render and
-    // their computed class functions run.
-    const { componentRef, container } = await render(UiAlert);
-    const inst = componentRef.instance as UiAlert;
-    setInputSignal(inst.title, 'Heads up');
-    setInputSignal(inst.description, 'Your download is ready.');
+  it('renders the title and description when set', async () => {
+    const { host, getByText } = await renderAlert();
+    host.title.set('Heads up');
+    host.description.set('Your download is ready.');
     await waitForUpdate();
+    expect(getByText('Heads up').getAttribute('class')).toContain(
+      'text-foreground',
+    );
+    expect(
+      getByText('Your download is ready.').getAttribute('class'),
+    ).toContain('text-muted-foreground');
+  });
+
+  it('colors every part for the destructive variant', async () => {
+    const { host, alert, getByText } = await renderAlert();
+    host.variant.set('destructive');
+    host.title.set('Error');
+    host.description.set('Something went wrong.');
+    await waitForUpdate();
+    expect(alert().classList).toContain('border-destructive');
+    expect(getByText('Error').classList).toContain('text-destructive');
+    expect(getByText('Something went wrong.').classList).toContain(
+      'text-destructive',
+    );
+  });
 
-    const texts = container.querySelectorAll('text');
-    expect(texts.length).toBeGreaterThanOrEqual(2);
+  it('reveals itself on first render', async () => {
+    const animate = vi.spyOn(lynxMainThread(), '__ElementAnimate');
+    const { alert } = await renderAlert();
+    expect(animate).toHaveBeenCalledWith(alert(), [
+      0, // Starts an animation.
+      expect.any(String),
+      [
+        { transform: 'translateY(4px)', opacity: 0 },
+        { transform: 'translateY(0)', opacity: 1 },
+      ],
+      expect.any(Object),
+    ]);
+    animate.mockRestore();
   });
 });

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

@@ -17,9 +17,10 @@ export const alertVariants = cva('flex-col rounded-lg border p-4 flex', {
   variants: {
     variant: {
       default: 'border-border bg-background',
-      // Opacity modifiers on semantic colors don't work on Lynx (opaque rgba
-      // values with no separable channels): use a solid destructive border and
-      // the pre-composed translucent bg-destructive-subtle for the tint.
+      // A solid destructive border over red at 10%. The tint is the
+      // pre-composed bg-destructive-subtle, not bg-destructive/10: a modifier
+      // needs the theme's --destructive-rgb, which themes copied before it
+      // existed don't have.
       destructive: 'border-destructive bg-destructive-subtle',
     },
   },
@@ -75,20 +76,17 @@ export class UiAlert {
   readonly description = input<string>('');
   readonly userClass = input<string>('', { alias: 'class' });
 
-  readonly containerRef = viewChild<ElementRef>('container');
+  readonly containerRef = viewChild.required<ElementRef>('container');
 
-  constructor() {
-    // Subtle entrance animation on first render
-    effect(() => {
-      const el = this.containerRef()?.nativeElement;
-      // revealIn calls el.animate() which is inert in jsdom — the animation
-      // never plays and the effect can't be verified from a JIT render test.
-      /* v8 ignore next 3 */
-      if (el) {
-        revealIn(el, { fromY: 4 });
-      }
-    });
-  }
+  /**
+   * Reveals the alert with a subtle entrance on first render. 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(() => {
+    revealIn(this.containerRef().nativeElement, { fromY: 4 });
+  });
 
   protected readonly containerClass = computed(() =>
     cn(alertVariants({ variant: this.variant() }), this.userClass()),