@oxyhq/bloom 0.54.1 → 0.55.0

package/src/__tests__/Toaster.test.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
+import * as ReactNative from 'react-native';
 import { AppState, Text } from 'react-native';
 import { act, fireEvent, render } from '@testing-library/react-native';
 
 import { space } from '../styles/tokens';
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 import {
+  CLOSE_BUTTON_HIT_AREA,
   ENTERING_ANIMATION_DURATION,
+  toastDefaults,
   TOAST_MAX_ROW_WIDTH,
 } from '../toast/constants';
 import { toast, ToastOutlet } from '../toast';
 import { toastStore } from '../toast/toast-store';
+import {
+  HOVER_LEAVE_GRACE,
+  resetStackHoverForTests,
+} from '../toast/use-stack-hover';
 import type { ToasterProps, ToastPosition } from '../toast/types';
 
 /**
@@ -151,6 +158,61 @@ const rowBoxOf = ({ UNSAFE_root }: ReturnType<typeof renderOutlet>) =>
       hostName(node) === 'Animated.View' && node.props['aria-live'] !== undefined,
   );
 
+/** Every mounted row box — one per rendered toast, whatever its geometry. */
+const rowBoxesOf = ({ UNSAFE_root }: ReturnType<typeof renderOutlet>) =>
+  UNSAFE_root.findAll(
+    (node) =>
+      hostName(node) === 'Animated.View' && node.props['aria-live'] !== undefined,
+  );
+
+/**
+ * The shape `__mocks__/react-native-gesture-handler.ts` records its callbacks in,
+ * so a suite can fire the row's REAL tap with a real row-relative x rather than
+ * reaching inside the component for the policy.
+ */
+type MockGesture = {
+  __handlers: { onEnd?: (event: { x: number; y: number }) => void };
+  __members: MockGesture[];
+};
+
+const isMockGesture = (value: unknown): value is MockGesture =>
+  typeof value === 'object' &&
+  value !== null &&
+  '__handlers' in value &&
+  '__members' in value;
+
+/**
+ * Fires the tap gesture of one row at a ROW-RELATIVE x, in render order (so the
+ * last one is the front of a bottom-anchored stack — the row a real tap lands on).
+ * The pan gesture registers `onBegin`/`onChange`/`onFinalize` and no `onEnd`, so
+ * `onEnd` identifies the tap unambiguously.
+ */
+const tapRow = (
+  rendered: ReturnType<typeof renderOutlet>,
+  { x, row = 'front' }: { x: number; row?: 'front' | number },
+) => {
+  const gestures = rendered.UNSAFE_root
+    .findAll((node) => isMockGesture(node.props.gesture))
+    .flatMap((node) => {
+      const gesture: unknown = node.props.gesture;
+      return isMockGesture(gesture) ? [gesture] : [];
+    });
+  const gesture = row === 'front' ? gestures[gestures.length - 1] : gestures[row];
+  const onEnd = gesture?.__members.find(
+    (member) => typeof member.__handlers.onEnd === 'function',
+  )?.__handlers.onEnd;
+  if (!onEnd) {
+    throw new Error(`no tap gesture found for row ${String(row)}`);
+  }
+  act(() => {
+    onEnd({ x, y: 20 });
+  });
+};
+
+/** The mocked window is 375 wide, so the row is uncapped and the strip starts here. */
+const STRIP_X = 375 - CLOSE_BUTTON_HIT_AREA + 10;
+const ROW_CENTRE_X = 100;
+
 describe('ToastOutlet', () => {
   beforeEach(() => {
     jest.useFakeTimers();
@@ -158,6 +220,9 @@ describe('ToastOutlet', () => {
   });
 
   afterEach(() => {
+    // Hover state is module-level (one stack per document), so it outlives the
+    // render tree and has to be cleared between tests.
+    resetStackHoverForTests();
     act(() => {
       toastStore.dismissToast(undefined);
       jest.runOnlyPendingTimers();
@@ -522,6 +587,495 @@ describe('ToastOutlet', () => {
     });
   });
 
+  /**
+   * HOVER-TO-EXPAND (web). jest resolves `use-stack-hover.ts`, the web file, so
+   * these run the real trigger; `use-stack-hover.native.ts` returns no handlers at
+   * all and is covered by `toast-stack-hover.test.ts`.
+   *
+   * The pointer geometry itself — that hover reaches a row through the portal
+   * root's `pointer-events: none`, and the transforms on hover-in and hover-out —
+   * is only observable in a browser and is measured there.
+   */
+  describe('stack hover', () => {
+    const mouse = { nativeEvent: { pointerType: 'mouse' } };
+    const touch = { nativeEvent: { pointerType: 'touch' } };
+
+    const hoverRow = (rendered: ReturnType<typeof renderOutlet>, index = 0) => {
+      const row = rowBoxesOf(rendered)[index];
+      if (!row) {
+        throw new Error(`no row box at index ${index}`);
+      }
+      return row;
+    };
+
+    it('expands the stack when a mouse enters a row', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+      });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+    });
+
+    it('ignores a touch pointer, so a tap does not expand-then-collapse', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', touch);
+      });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+    });
+
+    it('collapses on leave, but only after the grace period', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+      });
+
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerLeave', mouse);
+        jest.advanceTimersByTime(HOVER_LEAVE_GRACE - 1);
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(1);
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+    });
+
+    it('does not collapse when the pointer crosses from one row to the next', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+      });
+
+      // The gap between two expanded rows: leave one, enter the next a tick later.
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerLeave', mouse);
+        jest.advanceTimersByTime(HOVER_LEAVE_GRACE - 20);
+        fireEvent(hoverRow(rendered, 1), 'pointerEnter', mouse);
+        jest.advanceTimersByTime(HOVER_LEAVE_GRACE * 3);
+      });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+    });
+
+    it('does not let a hovered toast auto-close under the cursor', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+        // Well past both rows' deadlines.
+        jest.advanceTimersByTime(
+          (toastDefaults.duration + ENTERING_ANIMATION_DURATION) * 3,
+        );
+      });
+
+      expect(rendered.queryByText('first')).toBeTruthy();
+      expect(rendered.queryByText('second')).toBeTruthy();
+
+      // Leaving restarts the clock, so they still go on their own.
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerLeave', mouse);
+        jest.advanceTimersByTime(
+          HOVER_LEAVE_GRACE + toastDefaults.duration + ENTERING_ANIMATION_DURATION,
+        );
+      });
+      expect(rendered.queryByText('first')).toBeNull();
+      expect(rendered.queryByText('second')).toBeNull();
+    });
+
+    it('pauses a hovered toast with stacking off too, without expanding anything', () => {
+      const rendered = renderOutlet({ enableStacking: false });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+        jest.advanceTimersByTime(
+          (toastDefaults.duration + ENTERING_ANIMATION_DURATION) * 3,
+        );
+      });
+
+      expect(rendered.queryByText('first')).toBeTruthy();
+      // Nothing to expand in a flat column — the pointer only pauses.
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerLeave', mouse);
+        jest.advanceTimersByTime(
+          HOVER_LEAVE_GRACE + toastDefaults.duration + ENTERING_ANIMATION_DURATION,
+        );
+      });
+      expect(rendered.queryByText('first')).toBeNull();
+    });
+
+    it('keeps a hovered stack expanded when a row is dismissed out of it', () => {
+      // The store auto-collapses down to a single row so it cannot hang, but doing
+      // that under the cursor would resume the timers hover had just paused — the
+      // remaining toast would then expire while the user is reading it.
+      const rendered = renderOutlet({ enableStacking: true, closeButton: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+
+      // Dismiss the front row from the close strip: 2 rows -> 1.
+      tapRow(rendered, { x: STRIP_X });
+      expect(rendered.queryByText('second')).toBeNull();
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+      act(() => {
+        jest.advanceTimersByTime(
+          (toastDefaults.duration + ENTERING_ANIMATION_DURATION) * 3,
+        );
+      });
+      expect(rendered.queryByText('first')).toBeTruthy();
+
+      // Leaving releases the hold: the survivor collapses and resumes.
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerLeave', mouse);
+        jest.advanceTimersByTime(HOVER_LEAVE_GRACE);
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+      act(() => {
+        jest.advanceTimersByTime(
+          toastDefaults.duration + ENTERING_ANIMATION_DURATION,
+        );
+      });
+      expect(rendered.queryByText('first')).toBeNull();
+    });
+
+    it('leaves the expansion alone on a press while hovering, and still runs onPress', () => {
+      const onPress = jest.fn();
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second', { onPress });
+      });
+      act(() => {
+        fireEvent(hoverRow(rendered), 'pointerEnter', mouse);
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+
+      // A desktop click on the row: hover owns expansion, so this must not toggle
+      // it shut (which would resume the timers hover just paused).
+      tapRow(rendered, { x: ROW_CENTRE_X });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  /**
+   * TAPS ON A STACKED ROW — INVARIANT: NOT ONE OF THEM IS INERT.
+   *
+   * Every case here fires the row's real tap callback with a real row-relative x,
+   * because the defect this covers lived INSIDE that callback and a test that only
+   * taps row centres passes against it: the close-button strip used to require
+   * `isExpanded` to dismiss and did nothing whatsoever otherwise, so at default
+   * config (`closeButton: false`, dismiss branch unreachable) the rightmost 60dp of
+   * every stacked row was dead. Stacking is now the default, so that was the
+   * default too.
+   *
+   * The strip's x is measured from the ROW's capped width, never the window's —
+   * `measures the strip from the row, not the window` below is the guard on that.
+   */
+  describe('stacked row taps', () => {
+    it('expands a collapsed stack from the close strip instead of doing nothing', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+
+      tapRow(rendered, { x: STRIP_X });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+      // Nothing was dismissed: there is no ✕ to aim at at default config.
+      expect(rendered.queryByText('first')).toBeTruthy();
+      expect(rendered.queryByText('second')).toBeTruthy();
+    });
+
+    it('collapses an expanded stack from the close strip when there is no close button', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      tapRow(rendered, { x: ROW_CENTRE_X });
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+
+      tapRow(rendered, { x: STRIP_X });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+      expect(rendered.queryByText('second')).toBeTruthy();
+    });
+
+    it('dismisses from the close strip of a COLLAPSED stack — the ✕ is visible there', () => {
+      const rendered = renderOutlet({ enableStacking: true, closeButton: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+
+      tapRow(rendered, { x: STRIP_X });
+
+      // The front row goes; the stack does not expand instead.
+      expect(rendered.queryByText('second')).toBeNull();
+      expect(rendered.queryByText('first')).toBeTruthy();
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+    });
+
+    it('dismisses from the close strip of an expanded stack', () => {
+      const rendered = renderOutlet({ enableStacking: true, closeButton: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+      tapRow(rendered, { x: ROW_CENTRE_X });
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+
+      tapRow(rendered, { x: STRIP_X });
+
+      expect(rendered.queryByText('second')).toBeNull();
+      expect(rendered.queryByText('first')).toBeTruthy();
+    });
+
+    it('never dismisses from the strip when the toast is not dismissible', () => {
+      const rendered = renderOutlet({ enableStacking: true, closeButton: true });
+      show(() => {
+        toast('first');
+        toast('second', { dismissible: false });
+      });
+
+      tapRow(rendered, { x: STRIP_X });
+
+      // No ✕ renders on a non-dismissible row, so the strip expands instead.
+      expect(rendered.queryByText('second')).toBeTruthy();
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+    });
+
+    it('treats the strip boundary itself as row, not strip', () => {
+      const rendered = renderOutlet({ enableStacking: true, closeButton: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+
+      // `x > rowWidth - CLOSE_BUTTON_HIT_AREA` — the boundary pixel is outside.
+      tapRow(rendered, { x: 375 - CLOSE_BUTTON_HIT_AREA });
+
+      expect(rendered.queryByText('second')).toBeTruthy();
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+    });
+
+    it('measures the strip from the row, not the window', () => {
+      // A 1280px viewport caps the row at TOAST_MAX_ROW_WIDTH, so the strip starts
+      // at 328. Measured from the WINDOW it would start at 1220 and this tap would
+      // land in the row body — the failure mode the row-relative math exists for.
+      jest
+        .spyOn(ReactNative, 'useWindowDimensions')
+        .mockReturnValue({ width: 1280, height: 900, scale: 1, fontScale: 1 });
+
+      const rendered = renderOutlet({ enableStacking: true, closeButton: true });
+      show(() => {
+        toast('first');
+        toast('second');
+      });
+
+      tapRow(rendered, { x: TOAST_MAX_ROW_WIDTH - CLOSE_BUTTON_HIT_AREA + 10 });
+
+      expect(rendered.queryByText('second')).toBeNull();
+    });
+
+    it('still runs the toast onPress from inside the strip', () => {
+      const onPress = jest.fn();
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => {
+        toast('first');
+        toast('second', { onPress });
+      });
+
+      tapRow(rendered, { x: STRIP_X });
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('leaves a lone toast unexpanded — there is no stack to open', () => {
+      const rendered = renderOutlet({ enableStacking: true });
+      show(() => toast('only'));
+
+      tapRow(rendered, { x: ROW_CENTRE_X });
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+      expect(rendered.queryByText('only')).toBeTruthy();
+    });
+  });
+
+  /**
+   * The stacked presentation itself is geometry, so it is verified where geometry
+   * is verifiable: `toast-position-utils.test.ts` for the offsets and the `scaleX`
+   * depth cue, and the `Sequential*` / `Stacking` stories in a real browser for
+   * the composed result. What jest can pin — and what the two `describe.each`
+   * blocks below deliberately do NOT pin, since they run both values — is which
+   * one an outlet with no props gets.
+   *
+   * `useAnimatedTarget` drives the stack transform from a layout effect, so the
+   * rendered style still carries the previous frame's numbers; asserting them from
+   * the tree would read a stale value rather than the stack.
+   */
+  it('stacks by default — the deliberate deviation from sonner-native', () => {
+    expect(toastDefaults.enableStacking).toBe(true);
+  });
+
+  /**
+   * SEQUENTIAL MULTI-TOAST AT THE DEFAULT DURATION.
+   *
+   * Every earlier sequential check — the `Sequential*` stories and the browser
+   * probes driving them — fires with `duration: Infinity`, which starts no
+   * auto-close timer at all. That made the whole timer path invisible to them:
+   * a defect that cut a settled row's life short when the next toast arrived
+   * would have left every one of those results green. These tests therefore use
+   * the OUTLET DEFAULT duration and assert lifetimes, not just presence.
+   *
+   * Both `enableStacking` values run: the flat and collapsed-stack paths resolve
+   * row positions through different branches of `calculateToastPosition`, and a
+   * row dropped from the render set in one but not the other would otherwise be
+   * a coin flip on the default.
+   *
+   * These are RENDER-SET assertions. A row that is mounted but visually pinned or
+   * collapsed by reanimated's web layout-animation cleanup still passes here —
+   * that class of bug is only observable in a real browser, which is what the
+   * `Sequential*` stories and `animations.ts`'s `TOAST_ENTER_DRIVER` note cover.
+   */
+  describe.each([false, true])(
+    'sequential toasts at the default duration (enableStacking=%s)',
+    (enableStacking) => {
+      /** The window the consumer report measured the first row's disappearance in. */
+      const REPORT_WINDOW = 150;
+      const GAP = 1000;
+
+      it('keeps both rows mounted when the second arrives while the first is at rest', () => {
+        const rendered = renderOutlet({ enableStacking });
+        show(() => toast('first'));
+        act(() => {
+          jest.advanceTimersByTime(GAP);
+        });
+        show(() => toast('second'));
+        act(() => {
+          jest.advanceTimersByTime(REPORT_WINDOW);
+        });
+
+        expect(rendered.queryByText('first')).toBeTruthy();
+        expect(rendered.queryByText('second')).toBeTruthy();
+        expect(rowBoxesOf(rendered)).toHaveLength(2);
+      });
+
+      it('does not shorten the first row: it lives its own full duration, no less', () => {
+        const rendered = renderOutlet({ enableStacking });
+        show(() => toast('first'));
+        act(() => {
+          jest.advanceTimersByTime(GAP);
+        });
+        show(() => toast('second'));
+
+        // One tick short of the first row's own deadline (its duration plus the
+        // enter animation's head start), measured from ITS fire, not the second's.
+        act(() => {
+          jest.advanceTimersByTime(
+            toastDefaults.duration + ENTERING_ANIMATION_DURATION - GAP - 1,
+          );
+        });
+        expect(rendered.queryByText('first')).toBeTruthy();
+        expect(rowBoxesOf(rendered)).toHaveLength(2);
+
+        act(() => {
+          jest.advanceTimersByTime(1);
+        });
+        expect(rendered.queryByText('first')).toBeNull();
+        expect(rendered.queryByText('second')).toBeTruthy();
+        expect(rowBoxesOf(rendered)).toHaveLength(1);
+      });
+
+      it('does not extend the first row either, nor cut the second short', () => {
+        const rendered = renderOutlet({ enableStacking });
+        show(() => toast('first'));
+        act(() => {
+          jest.advanceTimersByTime(GAP);
+        });
+        show(() => toast('second'));
+
+        // The second row's own deadline is a full GAP later than the first's.
+        act(() => {
+          jest.advanceTimersByTime(
+            toastDefaults.duration + ENTERING_ANIMATION_DURATION - 1,
+          );
+        });
+        expect(rendered.queryByText('first')).toBeNull();
+        expect(rendered.queryByText('second')).toBeTruthy();
+
+        act(() => {
+          jest.advanceTimersByTime(1);
+        });
+        expect(rendered.queryByText('second')).toBeNull();
+        expect(rowBoxesOf(rendered)).toHaveLength(0);
+      });
+
+      it('holds every row of a three-toast run, one arriving each second', () => {
+        const rendered = renderOutlet({ enableStacking });
+        show(() => toast('first'));
+        act(() => {
+          jest.advanceTimersByTime(GAP);
+        });
+        show(() => toast('second'));
+        act(() => {
+          jest.advanceTimersByTime(GAP);
+        });
+        show(() => toast('third'));
+        act(() => {
+          jest.advanceTimersByTime(REPORT_WINDOW);
+        });
+
+        expect(rowBoxesOf(rendered)).toHaveLength(3);
+        expect(rendered.queryByText('first')).toBeTruthy();
+        expect(rendered.queryByText('second')).toBeTruthy();
+        expect(rendered.queryByText('third')).toBeTruthy();
+      });
+    },
+  );
+
   describe('app-state pausing', () => {
     it('subscribes exactly once for the whole stack, not once per row', () => {
       const addEventListener = jest.spyOn(AppState, 'addEventListener');

package/src/__tests__/toast-position-utils.test.ts

@@ -196,6 +196,34 @@ describe('calculateToastPosition', () => {
         }),
       ).toBe(54);
     });
+
+    /**
+     * WHY THE STORE MAY AUTO-COLLAPSE A STACK DOWN TO ITS LAST ROW.
+     *
+     * `ToastStore.dismissToast` collapses an expanded stack once one row is left, so
+     * that row's paused timer resumes and it cannot hang on screen forever. That is
+     * only acceptable because the collapse is INVISIBLE at one row: both branches of
+     * `calculateToastPosition` resolve to the same offset, and `calculateStackScaleX`
+     * returns 1 either way. If this ever stops holding, the store's rule needs a
+     * rethink rather than this test an update.
+     */
+    it.each<ToastPosition>(['bottom-center', 'top-center', 'center'])(
+      'a single row is unmoved by expansion (%s)',
+      (position) => {
+        const lone = {
+          index: 0,
+          position,
+          enableStacking: true,
+          numberOfToasts: 1,
+          orderedToastIds: ['a'],
+          allToastHeights: { a: 50 },
+        };
+
+        expect(positionAt({ ...lone, isExpanded: true })).toBe(
+          positionAt({ ...lone, isExpanded: false }),
+        );
+      },
+    );
   });
 });