@blotch/dolan 22.2.2 → 22.2.4

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

@@ -1,342 +1,463 @@
-import { ElementRef } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
-import { UiToastItem, UiToaster } from './toast';
-import { toast, toasts, type ToastData } from './toast-state';
+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 { DURATION } from '../../utils/animate';
+import { UiToaster } from './toast';
+import { type ToastOptions, dismissToast, toast, toasts } from './toast-state';
+
+const sleep = (ms: number) =>
+  new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+/**
+ * Waits out a toast's exit animation, after which the toaster drops it from
+ * the queue, and renders that.
+ */
+const waitForExit = async () => {
+  await sleep(DURATION.fast + 40);
+  await waitForUpdate();
+};
+
+const renderToaster = async () => {
+  const result = await render(UiToaster);
+  /**
+   * A toast's card: its host element, around the view holding its texts.
+   */
+  const card = (title: string) =>
+    result.getByText(title).parentElement!.parentElement!;
+  return {
+    ...result,
+    card,
+    /** One property of a toast card's inline style. */
+    styleOf: (title: string, property: string) =>
+      (card(title) as HTMLElement).style.getPropertyValue(property),
+    /**
+     * Raises a toast and lets it mount, then start its entrance, which waits
+     * a macrotask so the card is committed to Lynx's tree first.
+     */
+    raise: async (options: ToastOptions) => {
+      const id = toast(options);
+      await waitForUpdate();
+      await waitForUpdate();
+      return id;
+    },
+  };
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+
+/** Where the front toast rests. */
+const FRONT = 'translateY(0px) scale(1)';
+/** Where the toast behind the front one rests: lifted, and a little smaller. */
+const SECOND = 'translateY(-14px) scale(0.95)';
 
 describe('UiToaster', () => {
-  afterEach(() => {
-    toasts.set([]);
-  });
+  // The queue is module state, so each test starts it empty.
+  beforeEach(() => toasts.set([]));
 
-  it('renders without any active toasts', async () => {
-    const { container } = await render(UiToaster);
-    expect(container).toBeTruthy();
+  // 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 the stack container when a toast is added', async () => {
-    toast({ title: 'Saved!' });
-    const { container } = await render(UiToaster);
-    await waitForUpdate();
-    // Toast content isn't asserted here — JIT does not wire the required
-    // `data` input on the projected <ui-toast-item> so the child template
-    // silently fails. UiToastItem's lifecycle is exercised directly below.
-    expect(container.querySelectorAll('view').length).toBeGreaterThan(0);
-  });
+  /**
+   * The keyframes of the animations started on an element.
+   */
+  const keyframesOn = (element: Element) =>
+    animate.mock.calls
+      .filter(
+        ([target, [operation]]) => target === element && operation === START,
+      )
+      .map(([, [, , keyframes]]) => keyframes);
 
-  it('onDismissed removes the toast from the queue', async () => {
-    const id = toast({ title: 'ByeBye' });
-    const { componentRef } = await render(UiToaster);
-    const inst = componentRef.instance as unknown as {
-      onDismissed: (id: string) => void;
-    };
-    inst.onDismissed(id);
-    expect(toasts()).toHaveLength(0);
-  });
-});
+  const entrance = [
+    { transform: 'translateY(100%) scale(0.95)', opacity: 0 },
+    { transform: FRONT, opacity: 1 },
+  ];
+  const exit = (fromY: number) => [
+    { transform: `translateY(${fromY}px) scale(1)`, opacity: 1 },
+    { transform: 'translateY(300px) scale(0.95)', opacity: 0 },
+  ];
+  const snapBack = (fromY: number) => [
+    { transform: `translateY(${fromY}px) scale(1)` },
+    { transform: FRONT },
+  ];
 
-describe('UiToastItem', () => {
-  const baseData = (over: Partial<ToastData> = {}): ToastData => ({
-    id: 'toast-x',
-    title: 'Hello',
-    description: 'World',
-    variant: 'default',
-    duration: 60_000,
-    ...over,
-  });
+  describe('showing toasts', () => {
+    it('shows a toast once one is raised', async () => {
+      const { queryByText, getByText, raise } = await renderToaster();
+      expect(queryByText('Saved')).toBeNull();
 
-  it('renders default and destructive variants', async () => {
-    const { componentRef, container } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData({ variant: 'destructive' }));
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    // JIT + input.required races the initial CD: even with the signal set, the
-    // template DOM may not be materialized in this synthetic bootstrap. The
-    // variant computed is exercised elsewhere; asserting on the container ref
-    // proves the render didn't throw.
-    expect(container).toBeTruthy();
-  });
+      await raise({ title: 'Saved', description: 'Your changes are live.' });
+      expect(getByText('Saved')).toBeTruthy();
+      expect(getByText('Your changes are live.')).toBeTruthy();
+    });
 
-  it('exercises all computed presentation getters (default + destructive)', async () => {
-    // The template computed getters (`cardClass`, `titleClass`, etc.) are only
-    // read by the template when it materializes; JIT + required inputs races
-    // that, so read them directly so their branches run under coverage.
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    const cast = inst as unknown as {
-      hostStyle: () => string;
-      cardClass: () => string;
-      titleClass: () => string;
-      descriptionClass: () => string;
-      actionClass: () => string;
-      actionTextClass: () => string;
-    };
-
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    expect(cast.hostStyle()).toContain('translateY');
-    expect(cast.cardClass()).toContain('bg-background');
-    expect(cast.titleClass()).toContain('text-foreground');
-    expect(cast.descriptionClass()).toContain('text-muted-foreground');
-    expect(cast.actionClass()).toContain('border-border');
-    expect(cast.actionTextClass()).toContain('text-foreground');
-
-    setInputSignal(inst.data, baseData({ variant: 'destructive' }));
-    setInputSignal(inst.depth, 2);
-    await waitForUpdate();
-    expect(cast.cardClass()).toContain('bg-destructive');
-    expect(cast.titleClass()).toContain('text-destructive-foreground');
-    expect(cast.descriptionClass()).toContain('text-destructive-foreground');
-    expect(cast.actionClass()).toContain('border-destructive-foreground');
-    expect(cast.actionTextClass()).toContain('text-destructive-foreground');
-    expect(cast.hostStyle()).toContain('translateY');
-  });
+    it("leaves out a title or description it doesn't have", async () => {
+      const { getByText, raise } = await renderToaster();
+      await raise({ title: 'Only a title' });
+      await raise({ title: '', description: 'Only a description' });
+      const textsBeside = (text: string) =>
+        getByText(text).parentElement!.querySelectorAll('text');
+      expect(textsBeside('Only a title')).toHaveLength(1);
+      expect(textsBeside('Only a description')).toHaveLength(1);
+    });
 
-  it('renders an action button and invokes it via onAction', async () => {
-    const cb = vi.fn();
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(
-      inst.data,
-      baseData({ action: { label: 'Do it', onAction: cb } }),
-    );
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    await new Promise((r) => setTimeout(r, 20));
-    (inst as unknown as { onAction: () => void }).onAction();
-    expect(cb).toHaveBeenCalledTimes(1);
-  });
+    it('styles a toast by its variant', async () => {
+      const { card, getByText, raise } = await renderToaster();
+      const action = { label: 'Undo', onAction: () => {} };
+      await raise({ title: 'Saved', description: 'Done.', action });
+      expect(card('Saved').classList).toContain('bg-background');
+      expect(getByText('Saved').classList).toContain('text-foreground');
+      expect(getByText('Done.').classList).toContain('text-muted-foreground');
+      expect(getByText('Undo').classList).toContain('text-foreground');
+      expect(getByText('Undo').parentElement!.classList).toContain(
+        'border-border',
+      );
 
-  it('onAction handles missing action gracefully', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    expect(() =>
-      (inst as unknown as { onAction: () => void }).onAction(),
-    ).not.toThrow();
-  });
+      await raise({
+        title: 'Failed',
+        description: 'Try again.',
+        variant: 'destructive',
+        action: { label: 'Retry', onAction: () => {} },
+      });
+      expect(card('Failed').classList).toContain('bg-destructive');
+      for (const text of ['Failed', 'Try again.', 'Retry']) {
+        expect(getByText(text).classList).toContain(
+          'text-destructive-foreground',
+        );
+      }
+      expect(getByText('Retry').parentElement!.classList).toContain(
+        'border-destructive-foreground',
+      );
+    });
 
-  it('onTap dismisses only when the toast is front (depth 0)', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 1); // behind — no-op
-    await waitForUpdate();
-    expect(() =>
-      (inst as unknown as { onTap: () => void }).onTap(),
-    ).not.toThrow();
-
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    (inst as unknown as { onTap: () => void }).onTap();
-  });
+    it('stays hidden until it slides up into view', async () => {
+      const { card, styleOf } = await renderToaster();
+      toast({ title: 'Saved' });
+      // Mounted, but its entrance waits a macrotask: until then it's hidden,
+      // or it would flash at its resting place first.
+      await waitForUpdate();
+      expect(styleOf('Saved', 'opacity')).toBe('0');
+      expect(keyframesOn(card('Saved'))).toEqual([]);
 
-  it('auto-dismisses after the duration timer fires', async () => {
-    const dismissed = vi.fn();
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    inst.dismissed.subscribe(dismissed);
-    setInputSignal(inst.data, baseData({ duration: 30 }));
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    // Manually call ngOnInit after data is set so the auto-dismiss timer
-    // registers (JIT's initial CD ran ngOnInit before the required-input's
-    // value was available, so the timer was skipped).
-    inst.ngOnInit();
-    // Wait long enough for both the auto-dismiss (30ms) and the dismissed
-    // emit setTimeout(DURATION.fast + 20 = 170ms) to fire.
-    await new Promise((r) => setTimeout(r, 400));
-    expect(dismissed).toHaveBeenCalled();
-  });
+      await waitForUpdate();
+      expect(styleOf('Saved', 'opacity')).toBe('1');
+      expect(keyframesOn(card('Saved'))).toEqual([entrance]);
+    });
 
-  it('touch drag beyond threshold dismisses; below threshold snaps back', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData({ duration: 60_000 }));
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    // Call ngOnInit manually so the auto-dismiss timer is set — that's the
-    // branch inside dismiss() that touchend beyond threshold exercises.
-    inst.ngOnInit();
-    await new Promise((r) => setTimeout(r, 10));
-
-    const cast = inst as unknown as {
-      onTouchStart: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchMove: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchEnd: () => void;
-    };
-    // Below threshold → snap back.
-    cast.onTouchStart({ touches: [{ clientY: 100 }] });
-    cast.onTouchMove({ touches: [{ clientY: 130 }] });
-    cast.onTouchEnd();
-    await waitForUpdate();
-
-    // Beyond threshold → dismiss.
-    cast.onTouchStart({ touches: [{ clientY: 100 }] });
-    cast.onTouchMove({ touches: [{ clientY: 400 }] });
-    cast.onTouchEnd();
-    await new Promise((r) => setTimeout(r, 200));
-  });
+    it('stacks the newest three, newest in front, and queues the rest', async () => {
+      const { queryByText, styleOf, raise } = await renderToaster();
+      for (const title of ['First', 'Second', 'Third', 'Fourth']) {
+        await raise({ title });
+      }
+      // The oldest waits its turn, off screen.
+      expect(queryByText('First')).toBeNull();
+      expect(toasts()).toHaveLength(4);
 
-  it('touch handlers guard non-front toasts and missing touches', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 1); // behind — early-return in onTouchStart
-    await waitForUpdate();
-
-    const cast = inst as unknown as {
-      onTouchStart: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchMove: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchEnd: () => void;
-    };
-    cast.onTouchStart({ touches: [{ clientY: 100 }] });
-    cast.onTouchMove({ touches: [{ clientY: 200 }] }); // not dragging → no-op
-    cast.onTouchEnd(); // not dragging → no-op
-
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    // Empty touches array → no-op
-    cast.onTouchStart({ touches: [] });
-    cast.onTouchMove({ touches: [] });
-    // No prior touchstart with real coords, so onTouchEnd is a no-op.
-    cast.onTouchEnd();
-  });
+      expect(styleOf('Fourth', 'z-index')).toBe('100');
+      expect(styleOf('Fourth', 'transform')).toBe(FRONT);
+      expect(styleOf('Third', 'z-index')).toBe('99');
+      expect(styleOf('Third', 'transform')).toBe(SECOND);
+      expect(styleOf('Second', 'z-index')).toBe('98');
+      expect(styleOf('Second', 'transform')).toBe(
+        'translateY(-28px) scale(0.9)',
+      );
+    });
 
-  it('onTouchMove ignores subsequent moves with missing touches once dragging', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    inst.ngOnInit();
-    const cast = inst as unknown as {
-      onTouchStart: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchMove: (e: { touches?: { clientY: number }[] }) => void;
-    };
-    // Start a real drag (sets #isDragging = true).
-    cast.onTouchStart({ touches: [{ clientY: 50 }] });
-    // A subsequent move without touches must fall through the `y == null` guard
-    // in onTouchMove (line 257) — this is the "finger left the surface without
-    // a touchend" native quirk we defend against.
-    cast.onTouchMove({ touches: [] });
-    cast.onTouchMove({}); // touches undefined
-  });
+    it('moves the stack back for a new toast, and forward when the front one goes', async () => {
+      const { card, raise } = await renderToaster();
+      await raise({ title: 'Older' });
+      await raise({ title: 'Newer' });
+      expect(keyframesOn(card('Older'))).toEqual([
+        entrance,
+        [{ transform: FRONT }, { transform: SECOND }],
+      ]);
 
-  it('onTouchEnd is a no-op when dismissal is already in progress', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    inst.ngOnInit();
-    const cast = inst as unknown as {
-      onTouchStart: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchMove: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchEnd: () => void;
-    };
-    // Start a drag.
-    cast.onTouchStart({ touches: [{ clientY: 100 }] });
-    cast.onTouchMove({ touches: [{ clientY: 200 }] });
-    // Race the dismiss(): tapping or the timer already started tearing down.
-    inst.dismiss();
-    // touchend must observe #isDismissing and bail out (line 271).
-    cast.onTouchEnd();
-  });
+      fireEvent.tap(card('Newer'));
+      await waitForExit();
+      expect(keyframesOn(card('Older')).at(-1)).toEqual([
+        { transform: SECOND },
+        { transform: FRONT },
+      ]);
+    });
 
-  it('snap-back reschedules the auto-dismiss timer that eventually fires', async () => {
-    const dismissed = vi.fn();
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    inst.dismissed.subscribe(dismissed);
-    // Short duration so the snap-back's rescheduled setTimeout callback
-    // (line 419) actually fires before the test times out.
-    setInputSignal(inst.data, baseData({ duration: 30 }));
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    inst.ngOnInit();
-    const cast = inst as unknown as {
-      onTouchStart: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchMove: (e: { touches?: { clientY: number }[] }) => void;
-      onTouchEnd: () => void;
-    };
-    // Drag below threshold → snap back reschedules the auto-dismiss.
-    cast.onTouchStart({ touches: [{ clientY: 100 }] });
-    cast.onTouchMove({ touches: [{ clientY: 120 }] });
-    cast.onTouchEnd();
-    // Wait long enough for the rescheduled dismiss (30ms) + dismissed emit
-    // (DURATION.fast + 20 ≈ 170ms) to fire.
-    await new Promise((r) => setTimeout(r, 400));
-    expect(dismissed).toHaveBeenCalled();
+    it('brings a queued toast into the back of the stack once there is room', async () => {
+      const { card, raise } = await renderToaster();
+      for (const title of ['First', 'Second', 'Third', 'Fourth']) {
+        await raise({ title });
+      }
+      fireEvent.tap(card('Fourth'));
+      await waitForExit();
+      // It mounts there, so it rises into the back slot rather than sliding
+      // up past the others.
+      await waitForUpdate();
+      expect(keyframesOn(card('First'))).toEqual([
+        [
+          { transform: 'translateY(-20px) scale(0.864)', opacity: 0 },
+          { transform: 'translateY(-28px) scale(0.9)', opacity: 1 },
+        ],
+      ]);
+    });
   });
 
-  it('restack effect runs when depth changes on an already-mounted item', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    setInputSignal(inst.depth, 1); // triggers restack animation
-    await waitForUpdate();
-    setInputSignal(inst.depth, 2);
-    await waitForUpdate();
-  });
+  describe('dismissing', () => {
+    it('slides the front toast away when tapped', async () => {
+      const { card, queryByText, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+      fireEvent.tap(card('Saved'));
+      expect(keyframesOn(card('Saved')).at(-1)).toEqual(exit(0));
 
-  it('hostStyle flips opacity to 1 after the entrance animation runs', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    const cast = inst as unknown as { hostStyle: () => string };
-    // Before ngOnInit → #hasEntered = false → opacity: 0.
-    expect(cast.hostStyle()).toContain('opacity: 0');
-    inst.ngOnInit();
-    // Wait past the setTimeout(0) that runs #animateIn, which sets #hasEntered.
-    await new Promise((r) => setTimeout(r, 30));
-    // After animateIn → #hasEntered = true → opacity: 1 (the ternary's truthy arm).
-    expect(cast.hostStyle()).toContain('opacity: 1');
-  });
+      await waitForExit();
+      expect(queryByText('Saved')).toBeNull();
+      expect(toasts()).toEqual([]);
+    });
 
-  it('dismiss() is idempotent (re-entry guard)', async () => {
-    const dismissed = vi.fn();
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    inst.dismissed.subscribe(dismissed);
-    setInputSignal(inst.data, baseData({ duration: 60_000 }));
-    setInputSignal(inst.depth, 0);
-    await waitForUpdate();
-    inst.dismiss();
-    inst.dismiss(); // guarded
-    await new Promise((r) => setTimeout(r, 200));
-    expect(dismissed).toHaveBeenCalledTimes(1);
-  });
+    it('slides away only once, however often it is tapped', async () => {
+      const { card, queryByText, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+      fireEvent.tap(card('Saved'));
+      fireEvent.tap(card('Saved'));
+      expect(keyframesOn(card('Saved'))).toEqual([entrance, exit(0)]);
+
+      await waitForExit();
+      expect(queryByText('Saved')).toBeNull();
+    });
+
+    it('ignores taps on a toast behind the front one', async () => {
+      const { card, getByText, raise } = await renderToaster();
+      await raise({ title: 'Older' });
+      await raise({ title: 'Newer' });
+      animate.mockClear();
+
+      fireEvent.tap(card('Older'));
+      await waitForExit();
+      expect(animate).not.toHaveBeenCalled();
+      expect(getByText('Older')).toBeTruthy();
+    });
+
+    it('runs its action, then goes', async () => {
+      const onAction = vi.fn();
+      const { getByText, queryByText, raise } = await renderToaster();
+      await raise({ title: 'Deleted', action: { label: 'Undo', onAction } });
+
+      // The action catches its tap, so the card doesn't see it as well.
+      fireEvent.tap(getByText('Undo').parentElement!, {
+        eventType: 'catchEvent',
+      });
+      expect(onAction).toHaveBeenCalledTimes(1);
 
-  it('behind toast (depth > 0) uses the promoted-from-queue entrance animation', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 2);
-    await waitForUpdate();
-    inst.ngOnInit();
-    await new Promise((r) => setTimeout(r, 30));
+      await waitForExit();
+      expect(queryByText('Deleted')).toBeNull();
+    });
+
+    it('goes by itself once its duration is up', async () => {
+      const { queryByText, raise } = await renderToaster();
+      await raise({ title: 'Saved', duration: 30 });
+      expect(queryByText('Saved')).not.toBeNull();
+
+      await sleep(30);
+      await waitForExit();
+      expect(queryByText('Saved')).toBeNull();
+    });
+
+    it('fades a toast behind the front one away in place when it expires', async () => {
+      const { card, queryByText, raise } = await renderToaster();
+      // Raised together, so the older one is behind from the start.
+      toast({ title: 'Older', duration: 30 });
+      await raise({ title: 'Newer' });
+
+      await sleep(30);
+      await waitForUpdate();
+      expect(keyframesOn(card('Older')).at(-1)).toEqual([
+        { transform: SECOND, opacity: 1 },
+        { transform: 'translateY(-14px) scale(0.855)', opacity: 0 },
+      ]);
+
+      await waitForExit();
+      expect(queryByText('Older')).toBeNull();
+      expect(queryByText('Newer')).not.toBeNull();
+    });
+
+    it("lets a toast that's going finish, rather than moving back for a new one", async () => {
+      const { card, raise } = await renderToaster();
+      await raise({ title: 'Older' });
+      fireEvent.tap(card('Older'));
+      await raise({ title: 'Newer' });
+      expect(keyframesOn(card('Older'))).toEqual([entrance, exit(0)]);
+    });
+
+    describe('removed before its timers fire', () => {
+      // A destroyed output warns (NG0953) if something still emits on it.
+      let warn: MockInstance<typeof console.warn>;
+      beforeEach(() => {
+        warn = vi.spyOn(console, 'warn');
+      });
+      afterEach(() => warn.mockRestore());
+
+      it("doesn't expire once it's gone", async () => {
+        const { card, queryByText, raise } = await renderToaster();
+        const id = await raise({ title: 'Saved', duration: 100 });
+        const removed = card('Saved');
+        dismissToast(id);
+        await waitForUpdate();
+        expect(queryByText('Saved')).toBeNull();
+
+        await sleep(100);
+        await waitForExit();
+        expect(keyframesOn(removed)).toEqual([entrance]);
+        expect(warn).not.toHaveBeenCalledWith(
+          expect.stringContaining('NG0953'),
+        );
+      });
+
+      it("doesn't report finishing its exit once it's gone", async () => {
+        const { card, queryByText, raise } = await renderToaster();
+        const id = await raise({ title: 'Saved' });
+        fireEvent.tap(card('Saved'));
+        dismissToast(id);
+        await waitForUpdate();
+        expect(queryByText('Saved')).toBeNull();
+
+        await waitForExit();
+        expect(warn).not.toHaveBeenCalledWith(
+          expect.stringContaining('NG0953'),
+        );
+      });
+    });
   });
 
-  it('behind toast (depth > 0) also dismisses via a per-depth exit animation', async () => {
-    const { componentRef } = await render(UiToastItem);
-    const inst = componentRef.instance as UiToastItem;
-    setInputSignal(inst.data, baseData());
-    setInputSignal(inst.depth, 2);
-    await waitForUpdate();
-    inst.ngOnInit();
-    await new Promise((r) => setTimeout(r, 20));
-    inst.dismiss();
-    await new Promise((r) => setTimeout(r, 200));
+  describe('dragging', () => {
+    /**
+     * Fires a touch event the card catches, at a height on screen.
+     */
+    const touch = (
+      name: 'touchstart' | 'touchmove' | 'touchend' | 'touchcancel',
+      element: Element,
+      clientY?: number,
+    ) =>
+      fireEvent[name](element, {
+        eventType: 'catchEvent',
+        ...(clientY === undefined ? {} : { touches: [{ clientY }] }),
+      });
+
+    it('follows the finger down, and springs back if let go early', async () => {
+      const { card, styleOf, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+
+      touch('touchstart', card('Saved'), 100);
+      touch('touchmove', card('Saved'), 130);
+      await waitForUpdate();
+      expect(styleOf('Saved', 'transform')).toBe('translateY(30px) scale(1)');
+
+      // Docked at the bottom, it only moves down.
+      touch('touchmove', card('Saved'), 60);
+      await waitForUpdate();
+      expect(styleOf('Saved', 'transform')).toBe(FRONT);
+
+      touch('touchmove', card('Saved'), 150);
+      touch('touchend', card('Saved'));
+      await waitForUpdate();
+      expect(keyframesOn(card('Saved')).at(-1)).toEqual(snapBack(50));
+      expect(styleOf('Saved', 'transform')).toBe(FRONT);
+    });
+
+    it('springs back when the touch is canceled', async () => {
+      const { card, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+      touch('touchstart', card('Saved'), 100);
+      touch('touchmove', card('Saved'), 140);
+      touch('touchcancel', card('Saved'));
+      expect(keyframesOn(card('Saved')).at(-1)).toEqual(snapBack(40));
+    });
+
+    it('slides away from the finger when dragged far enough', async () => {
+      const { card, queryByText, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+      touch('touchstart', card('Saved'), 100);
+      touch('touchmove', card('Saved'), 220);
+      touch('touchend', card('Saved'));
+      expect(keyframesOn(card('Saved')).at(-1)).toEqual(exit(120));
+
+      await waitForExit();
+      expect(queryByText('Saved')).toBeNull();
+    });
+
+    it("doesn't expire while held, and gets its full time again once let go", async () => {
+      const { card, queryByText, raise } = await renderToaster();
+      await raise({ title: 'Saved', duration: 100 });
+      touch('touchstart', card('Saved'), 100);
+
+      await sleep(100);
+      await waitForExit();
+      expect(queryByText('Saved')).not.toBeNull();
+
+      touch('touchend', card('Saved'));
+      await sleep(100);
+      await waitForExit();
+      expect(queryByText('Saved')).toBeNull();
+    });
+
+    it('ignores touches on a toast behind the front one', async () => {
+      const { card, styleOf, raise } = await renderToaster();
+      await raise({ title: 'Older' });
+      await raise({ title: 'Newer' });
+      animate.mockClear();
+
+      touch('touchstart', card('Older'), 100);
+      touch('touchmove', card('Older'), 200);
+      touch('touchend', card('Older'));
+      await waitForUpdate();
+      expect(styleOf('Older', 'transform')).toBe(SECOND);
+      expect(animate).not.toHaveBeenCalled();
+    });
+
+    it('ignores touches without a position', async () => {
+      const { card, styleOf, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+
+      // Without a starting point, there's no drag to follow.
+      touch('touchstart', card('Saved'));
+      touch('touchmove', card('Saved'), 200);
+      await waitForUpdate();
+      expect(styleOf('Saved', 'transform')).toBe(FRONT);
+
+      // A move without a position leaves the toast where it was.
+      touch('touchstart', card('Saved'), 100);
+      touch('touchmove', card('Saved'), 140);
+      touch('touchmove', card('Saved'));
+      await waitForUpdate();
+      expect(styleOf('Saved', 'transform')).toBe('translateY(40px) scale(1)');
+    });
+
+    it("doesn't spring back when a tap dismissed it mid-drag", async () => {
+      const { card, queryByText, raise } = await renderToaster();
+      await raise({ title: 'Saved' });
+      touch('touchstart', card('Saved'), 100);
+      touch('touchmove', card('Saved'), 120);
+      fireEvent.tap(card('Saved'));
+      touch('touchend', card('Saved'));
+      expect(keyframesOn(card('Saved'))).toEqual([entrance, exit(20)]);
+
+      await waitForExit();
+      expect(queryByText('Saved')).toBeNull();
+    });
   });
 });
-void ElementRef;