@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/action-sheet/action-sheet.test.ts

@@ -1,8 +1,25 @@
 import { Component, signal } from '@angular/core';
-import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+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 { setInputSignal } from '../../../test-utils/set-input-signal';
+import {
+  type MockInstance,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import { DURATION } from '../../utils/animate';
+import { fireLynxEvent } from '../../../test-utils/fire-lynx-event';
+import {
+  type LynxMainThread,
+  lynxMainThread,
+} from '../../../test-utils/lynx-main-thread';
 import {
   UiActionSheet,
   UiActionSheetCancel,
@@ -11,7 +28,6 @@ import {
 } from './action-sheet';
 
 @Component({
-  standalone: true,
   imports: [
     UiActionSheet,
     UiActionSheetTitle,
@@ -20,192 +36,308 @@ import {
     LYNX_ELEMENTS,
   ],
   template: `
-    <ui-action-sheet [(open)]="open">
-      <ui-action-sheet-title>Pick</ui-action-sheet-title>
-      <ui-action-sheet-item>Option</ui-action-sheet-item>
-      <ui-action-sheet-cancel>Cancel</ui-action-sheet-cancel>
+    <ui-action-sheet [(open)]="open" class="pb-8" (closed)="closed()">
+      <ui-action-sheet-title class="py-4">Pick</ui-action-sheet-title>
+      <ui-action-sheet-item (pressed)="shared()">Share</ui-action-sheet-item>
+      <ui-action-sheet-item
+        variant="destructive"
+        class="bg-muted"
+        (pressed)="deleted()"
+      >
+        Delete
+      </ui-action-sheet-item>
+      <ui-action-sheet-cancel class="mt-2" />
     </ui-action-sheet>
   `,
 })
 class ActionSheetHost {
-  open = true;
+  readonly open = signal(false);
+  readonly closed = vi.fn();
+  readonly shared = vi.fn();
+  readonly deleted = vi.fn();
 }
 
-describe('UiActionSheet', () => {
-  const patchRefs = (inst: UiActionSheet, view: Element) => {
-    (inst as unknown as { backdropRef: unknown }).backdropRef = signal({
-      nativeElement: view,
-    });
-    (inst as unknown as { panelRef: unknown }).panelRef = signal({
-      nativeElement: view,
-    });
+/**
+ * A cancel button given its own label.
+ */
+@Component({
+  imports: [UiActionSheet, UiActionSheetCancel],
+  template: `
+    <ui-action-sheet>
+      <ui-action-sheet-cancel label="Dismiss" />
+    </ui-action-sheet>
+  `,
+})
+class CancelLabelHost {}
+
+/**
+ * The Lynx function an element's `invoke()` calls to run one of its UI
+ * methods, such as moving a screen reader's focus. The testing library
+ * defines it on the global object.
+ */
+type InvokeUIMethod = {
+  __InvokeUIMethod: (
+    element: Element,
+    method: string,
+    params: Record<string, unknown>,
+    callback: (result: { code: number }) => void,
+  ) => void;
+};
+
+/** `__ElementAnimate`'s first argument for starting an animation. */
+const START = 0;
+
+const renderSheet = async () => {
+  const result = await render(ActionSheetHost);
+  const { container } = result;
+  return {
+    ...result,
+    host: result.componentRef.instance as ActionSheetHost,
+    overlay: container.querySelector('overlay')!,
+    backdrop: container.querySelector('overlay > view')!,
+    panel: container.querySelector('[accessibility-exclusive-focus]')!,
+    // A button's pressable tile: the view around its label.
+    button: (label: string) => result.getByText(label).parentElement!,
   };
+};
 
-  it('renders the sheet, title, item, and cancel content', async () => {
-    const { getByText } = await render(ActionSheetHost);
+/**
+ * Opens the action sheet and waits out its open sequence: the overlay shows
+ * on one tick, and the panel slides in on the next.
+ */
+const openSheet = async (host: ActionSheetHost) => {
+  host.open.set(true);
+  for (let i = 0; i < 3; i++) await waitForUpdate();
+};
+
+/**
+ * Waits for the close sequence to finish: the panel slides out, then the
+ * overlay hides and `closed` fires. Polled rather than timed, since the
+ * sequence only starts on the update after `open` changes.
+ */
+const waitForClose = async (host: ActionSheetHost) => {
+  await vi.waitFor(() => expect(host.closed).toHaveBeenCalled());
+  await waitForUpdate();
+};
+
+/**
+ * The scale a button's inline style holds, if any.
+ */
+const scaleOf = (element: Element) =>
+  (element as HTMLElement).style.getPropertyValue('transform');
+
+/**
+ * Presses a button and lets go every way Lynx reports it, checking that it
+ * scales down while pressed and back up once released.
+ */
+const expectPressFeedback = (button: Element) => {
+  fireEvent.touchstart(button);
+  expect(scaleOf(button)).toBe('scale(0.985)');
+  fireEvent.touchend(button);
+  expect(scaleOf(button)).toBe('scale(1)');
+
+  // A scroll that takes the touch over cancels it: the button scales back.
+  fireEvent.touchstart(button);
+  fireEvent.touchcancel(button);
+  expect(scaleOf(button)).toBe('scale(1)');
+
+  // On web, the mouse drives the same feedback.
+  fireEvent.mousedown(button);
+  expect(scaleOf(button)).toBe('scale(0.985)');
+  fireEvent.mouseup(button);
+  expect(scaleOf(button)).toBe('scale(1)');
+
+  fireEvent.mousedown(button);
+  fireLynxEvent(button, 'mouseleave');
+  expect(scaleOf(button)).toBe('scale(1)');
+};
+
+describe('UiActionSheet', () => {
+  // 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('stays hidden until opened, then shows its title and buttons', async () => {
+    const { host, overlay, getByText } = await renderSheet();
+    expect(overlay.getAttribute('style')).toContain('display: none');
+    expect(overlay.getAttribute('visible')).toBe('false');
+
+    await openSheet(host);
+    expect(overlay.getAttribute('style')).not.toContain('display: none');
+    expect(overlay.getAttribute('visible')).toBe('true');
     expect(getByText('Pick')).toBeTruthy();
-    expect(getByText('Option')).toBeTruthy();
+    expect(getByText('Share')).toBeTruthy();
+    expect(getByText('Delete')).toBeTruthy();
     expect(getByText('Cancel')).toBeTruthy();
   });
 
-  it('backdrop tap closes the sheet', async () => {
-    const { componentRef } = await render(UiActionSheet);
-    const inst = componentRef.instance as UiActionSheet;
-    inst.open.set(true);
-    await waitForUpdate();
-    (inst as unknown as { onBackdropTap: () => void }).onBackdropTap();
-    expect(inst.open()).toBe(false);
+  it("merges the class into the panel's own", async () => {
+    const { panel } = await renderSheet();
+    expect(panel.classList).toContain('pb-8');
+    expect(panel.classList).not.toContain('pb-6');
+    expect(panel.classList).toContain('px-4');
   });
 
-  it('close() sets open to false', async () => {
-    const { componentRef } = await render(UiActionSheet);
-    const inst = componentRef.instance as UiActionSheet;
-    inst.open.set(true);
-    inst.close();
-    expect(inst.open()).toBe(false);
+  it('fades the backdrop in and slides the panel up when opened', async () => {
+    const { host, backdrop, panel } = await renderSheet();
+    await openSheet(host);
+    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: 'translateY(100%)', opacity: 0.8 },
+        { transform: 'translateY(0%)', opacity: 1 },
+      ],
+      expect.objectContaining({ duration: DURATION.slow }),
+    ]);
   });
 
-  it('panel tap is a no-op', async () => {
-    const { componentRef } = await render(UiActionSheet);
-    const inst = componentRef.instance as UiActionSheet;
-    expect(() =>
-      (inst as unknown as { onPanelTap: () => void }).onPanelTap(),
-    ).not.toThrow();
-  });
+  it('moves a screen reader into the panel and keeps it there while open', async () => {
+    const invoke = vi.spyOn(
+      globalThis as unknown as InvokeUIMethod,
+      '__InvokeUIMethod',
+    );
+    const { host, panel } = await renderSheet();
+    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('false');
 
-  it('open effect runs the animate-in and animate-out lifecycles', async () => {
-    const { componentRef, container } = await render(UiActionSheet);
-    const inst = componentRef.instance as UiActionSheet;
-    const view = container.querySelector('view') as Element;
-    patchRefs(inst, view);
+    await openSheet(host);
+    expect(invoke).toHaveBeenCalledWith(
+      panel,
+      'requestAccessibilityFocus',
+      expect.anything(),
+      expect.any(Function),
+    );
+    expect(panel.getAttribute('accessibility-exclusive-focus')).toBe('true');
+    invoke.mockRestore();
+  });
 
-    inst.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    await waitForUpdate();
+  it('closes when the backdrop is tapped, sliding the panel down', async () => {
+    const { host, overlay, backdrop, panel } = await renderSheet();
+    await openSheet(host);
 
-    inst.open.set(false);
-    await new Promise((r) => setTimeout(r, 320));
-    await waitForUpdate();
-    expect(inst.open()).toBe(false);
+    fireEvent.tap(backdrop);
+    expect(host.open()).toBe(false);
+    await waitForClose(host);
+    expect(animate).toHaveBeenCalledWith(backdrop, [
+      START,
+      expect.any(String),
+      [{ opacity: 1 }, { opacity: 0 }],
+      expect.objectContaining({ duration: DURATION.normal }),
+    ]);
+    expect(animate).toHaveBeenCalledWith(panel, [
+      START,
+      expect.any(String),
+      [
+        { transform: 'translateY(0%)', opacity: 1 },
+        { transform: 'translateY(100%)', opacity: 0.8 },
+      ],
+      expect.objectContaining({ duration: DURATION.normal }),
+    ]);
+    // Once the slide is over, the overlay hides and `closed` fires, only for
+    // this close: an action sheet that starts closed hasn't closed before.
+    expect(overlay.getAttribute('style')).toContain('display: none');
+    expect(host.closed).toHaveBeenCalledOnce();
   });
 
-  it('open effect bails when backdrop/panel refs are undefined', async () => {
-    const { componentRef } = await render(UiActionSheet);
-    const inst = componentRef.instance as UiActionSheet;
-    inst.open.set(true);
-    await waitForUpdate();
-    await waitForUpdate();
-    inst.open.set(false);
-    await waitForUpdate();
-    expect(inst.open()).toBe(false);
+  it('stays open when the panel is tapped', async () => {
+    const { host, panel } = await renderSheet();
+    await openSheet(host);
+    // The panel catches its taps, so they never reach the backdrop.
+    fireEvent.tap(panel, { eventType: 'catchEvent' });
+    expect(host.open()).toBe(true);
   });
 
-  it('applies user class on the panel', async () => {
-    const { componentRef, container } = await render(UiActionSheet);
-    const inst = componentRef.instance as UiActionSheet;
-    setInputSignal(inst.userClass, 'my-panel');
+  it('stops its close timers when it is destroyed while closing', async () => {
+    const warn = vi.spyOn(console, 'warn');
+    const { host, unmount } = await renderSheet();
+    await openSheet(host);
+    host.open.set(false);
     await waitForUpdate();
-    expect(
-      Array.from(container.querySelectorAll('view')).some((el) =>
-        el.getAttribute('class')?.includes('my-panel'),
-      ),
-    ).toBe(true);
+    // Destroyed during the close animation, as an `@if` around the action
+    // sheet would do. Its close timer (DURATION.normal + 20) used to fire
+    // anyway and emit `closed` from the destroyed output.
+    unmount();
+    await new Promise((resolve) => setTimeout(resolve, DURATION.normal + 50));
+    const warnings = warn.mock.calls.map(([message]) => String(message));
+    warn.mockRestore();
+    expect(warnings.filter((message) => message.includes('NG0953'))).toEqual(
+      [],
+    );
+    expect(host.closed).not.toHaveBeenCalled();
   });
 });
 
 describe('UiActionSheetTitle', () => {
-  it('renders projected content', async () => {
-    const { container } = await render(UiActionSheetTitle);
-    expect(container.querySelector('view')).toBeTruthy();
-    expect(container.querySelector('text')).toBeTruthy();
+  it('shows its text muted, with the class on its container', async () => {
+    const { getByText } = await renderSheet();
+    const title = getByText('Pick');
+    expect(title.classList).toContain('text-muted-foreground');
+    expect(title.parentElement?.classList).toContain('py-4');
+    expect(title.parentElement?.classList).not.toContain('py-3');
   });
 });
 
 describe('UiActionSheetItem', () => {
-  const renderItem = async () => {
-    const parentResult = await render(UiActionSheet);
-    const parent = parentResult.componentRef.instance as UiActionSheet;
-    parent.open.set(true);
-    await waitForUpdate();
+  it('reports the press and closes the action sheet when tapped', async () => {
+    const { host, button } = await renderSheet();
+    await openSheet(host);
 
-    const itemResult = await render(UiActionSheetItem, {
-      providers: [{ provide: UiActionSheet, useValue: parent }],
-    });
-    return { parent, itemResult };
-  };
+    fireEvent.tap(button('Share'));
+    expect(host.shared).toHaveBeenCalledOnce();
+    expect(host.deleted).not.toHaveBeenCalled();
+    expect(host.open()).toBe(false);
+  });
 
-  it('onTap emits `pressed` and closes the parent sheet', async () => {
-    const { parent, itemResult } = await renderItem();
-    const inst = itemResult.componentRef
-      .instance as unknown as UiActionSheetItem & {
-      onTap: () => void;
-    };
-    const emitted = vi.fn();
-    inst.pressed.subscribe(emitted);
-    inst.onTap();
-    expect(emitted).toHaveBeenCalledTimes(1);
-    expect(parent.open()).toBe(false);
-  });
-
-  it('press handlers run cleanly', async () => {
-    const { itemResult } = await renderItem();
-    const inst = itemResult.componentRef.instance as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => inst.onPressStart()).not.toThrow();
-    expect(() => inst.onPressEnd()).not.toThrow();
-    expect(() => inst.onPressCancel()).not.toThrow();
-  });
-
-  it('applies destructive variant text class', async () => {
-    const { itemResult } = await renderItem();
-    const inst = itemResult.componentRef.instance as UiActionSheetItem;
-    setInputSignal(inst.variant, 'destructive');
-    await waitForUpdate();
-    const text = itemResult.container.querySelector('text');
-    expect(text?.getAttribute('class')).toContain('text-destructive');
+  it('colors its label by variant', async () => {
+    const { getByText } = await renderSheet();
+    expect(getByText('Share').classList).toContain('text-primary');
+    expect(getByText('Delete').classList).toContain('text-destructive');
+  });
+
+  it("merges the class into its tile's own", async () => {
+    const { button } = await renderSheet();
+    expect(button('Delete').classList).toContain('bg-muted');
+    expect(button('Delete').classList).toContain('border-t');
+  });
+
+  it('scales down while pressed, and back on release', async () => {
+    const { button } = await renderSheet();
+    expectPressFeedback(button('Share'));
   });
 });
 
 describe('UiActionSheetCancel', () => {
-  const renderCancel = async () => {
-    const parentResult = await render(UiActionSheet);
-    const parent = parentResult.componentRef.instance as UiActionSheet;
-    parent.open.set(true);
-    await waitForUpdate();
+  it('closes the action sheet when tapped', async () => {
+    const { host, button } = await renderSheet();
+    await openSheet(host);
 
-    const cancelResult = await render(UiActionSheetCancel, {
-      providers: [{ provide: UiActionSheet, useValue: parent }],
-    });
-    return { parent, cancelResult };
-  };
+    fireEvent.tap(button('Cancel'));
+    expect(host.open()).toBe(false);
+  });
+
+  it('shows Cancel, or the label it is given', async () => {
+    expect((await renderSheet()).getByText('Cancel')).toBeTruthy();
+    const { getByText } = await render(CancelLabelHost);
+    expect(getByText('Dismiss')).toBeTruthy();
+  });
+
+  it("merges the class into its tile's own", async () => {
+    const { button } = await renderSheet();
+    expect(button('Cancel').classList).toContain('mt-2');
+    expect(button('Cancel').classList).toContain('bg-card');
+  });
 
-  it('renders the default cancel label', async () => {
-    const { cancelResult } = await renderCancel();
-    expect(cancelResult.container.textContent).toContain('Cancel');
-  });
-
-  it('onTap closes the parent sheet', async () => {
-    const { parent, cancelResult } = await renderCancel();
-    const inst = cancelResult.componentRef.instance as unknown as {
-      onTap: () => void;
-    };
-    inst.onTap();
-    expect(parent.open()).toBe(false);
-  });
-
-  it('press handlers run cleanly', async () => {
-    const { cancelResult } = await renderCancel();
-    const inst = cancelResult.componentRef.instance as unknown as {
-      onPressStart: () => void;
-      onPressEnd: () => void;
-      onPressCancel: () => void;
-    };
-    expect(() => inst.onPressStart()).not.toThrow();
-    expect(() => inst.onPressEnd()).not.toThrow();
-    expect(() => inst.onPressCancel()).not.toThrow();
+  it('scales down while pressed, and back on release', async () => {
+    const { button } = await renderSheet();
+    expectPressFeedback(button('Cancel'));
   });
 });