@oxyhq/bloom 0.50.2 → 0.51.0

package/src/__tests__/toast-animations.test.ts

@@ -0,0 +1,98 @@
+import {
+  MAX_CACHED_ANIMATIONS,
+  getToastEnterAnimation,
+  getToastExitAnimation,
+  toastAnimationCacheSize,
+} from '../toast/animations';
+import type { ToastPosition } from '../toast/types';
+
+const POSITIONS: ToastPosition[] = ['top-center', 'bottom-center', 'center'];
+
+describe('toast layout animations', () => {
+  it('returns the same instance for the same enter shape', () => {
+    const first = getToastEnterAnimation('bottom-center');
+    expect(getToastEnterAnimation('bottom-center')).toBe(first);
+  });
+
+  it('returns a different enter instance per position', () => {
+    const instances = POSITIONS.map((position) =>
+      getToastEnterAnimation(position),
+    );
+    expect(new Set(instances).size).toBe(POSITIONS.length);
+  });
+
+  it('returns a different exit instance per position', () => {
+    const instances = POSITIONS.map((position) =>
+      getToastExitAnimation({
+        position,
+        isHiddenByLimit: false,
+        isSingle: true,
+        stackGap: 8,
+      }),
+    );
+    expect(new Set(instances).size).toBe(POSITIONS.length);
+  });
+
+  it('returns the same instance for the same exit shape', () => {
+    const shape = {
+      position: 'bottom-center' as const,
+      isHiddenByLimit: false,
+      isSingle: true,
+      stackGap: 8,
+    };
+    expect(getToastExitAnimation(shape)).toBe(getToastExitAnimation(shape));
+  });
+
+  it.each([
+    ['isHiddenByLimit', { isHiddenByLimit: true }],
+    ['isSingle', { isSingle: false }],
+    ['stackGap', { stackGap: 12 }],
+    ['position', { position: 'top-center' as const }],
+  ])('keys the exit cache on %s', (_label, override) => {
+    const base = {
+      position: 'bottom-center' as const,
+      isHiddenByLimit: false,
+      isSingle: true,
+      stackGap: 8,
+    };
+    expect(getToastExitAnimation({ ...base, ...override })).not.toBe(
+      getToastExitAnimation(base),
+    );
+  });
+
+  it('gives each cached instance its own definition object', () => {
+    // `Keyframe.parseDefinitions()` mutates the definitions it was built with
+    // (rewriting `from`/`to` into `0`/`100`), so two instances sharing one object
+    // would make the second throw. Distinct instances must not alias.
+    const first = getToastEnterAnimation('top-center');
+    const second = getToastEnterAnimation('bottom-center');
+    expect(first).not.toBe(second);
+  });
+
+  it('never grows past MAX_CACHED_ANIMATIONS, however many gaps are used', () => {
+    for (let stackGap = 0; stackGap < MAX_CACHED_ANIMATIONS * 4; stackGap++) {
+      getToastExitAnimation({
+        position: 'bottom-center',
+        isHiddenByLimit: false,
+        isSingle: false,
+        stackGap,
+      });
+    }
+    expect(toastAnimationCacheSize()).toBeLessThanOrEqual(
+      MAX_CACHED_ANIMATIONS,
+    );
+  });
+
+  it('still serves a shape that was evicted, by rebuilding it', () => {
+    const rebuilt = getToastExitAnimation({
+      position: 'bottom-center',
+      isHiddenByLimit: false,
+      isSingle: false,
+      stackGap: 0,
+    });
+    expect(rebuilt).toBeDefined();
+    expect(toastAnimationCacheSize()).toBeLessThanOrEqual(
+      MAX_CACHED_ANIMATIONS,
+    );
+  });
+});

package/src/__tests__/toast-comparator.test.ts

@@ -0,0 +1,131 @@
+import React from 'react';
+
+import { areToastsEqual } from '../toast/toast-comparator';
+import { isToastAction, type ToastProps } from '../toast/types';
+
+const baseToast = (overrides: Partial<ToastProps> = {}): ToastProps => ({
+  id: 'a',
+  index: 0,
+  title: 'Saved',
+  numberOfToasts: 1,
+  orderedToastIds: ['a'],
+  ...overrides,
+});
+
+describe('areToastsEqual', () => {
+  it('treats two structurally identical toasts as equal', () => {
+    expect(areToastsEqual(baseToast(), baseToast())).toBe(true);
+  });
+
+  it.each<[string, Partial<ToastProps>]>([
+    ['id', { id: 'b' }],
+    ['title', { title: 'Changed' }],
+    ['variant', { variant: 'error' }],
+    ['description', { description: 'details' }],
+    ['closeButton', { closeButton: true }],
+    ['invert', { invert: true }],
+    ['position', { position: 'top-center' }],
+    ['dismissible', { dismissible: false }],
+    ['duration', { duration: 10 }],
+    ['important', { important: true }],
+    ['richColors', { richColors: true }],
+    ['style', { style: { opacity: 0.5 } }],
+    ['styles', { styles: { title: { fontSize: 9 } } }],
+  ])('reports a change of %s', (_field, overrides) => {
+    expect(areToastsEqual(baseToast(), baseToast(overrides))).toBe(false);
+  });
+
+  it('compares icon and jsx by reference', () => {
+    const icon = React.createElement('Icon');
+    expect(
+      areToastsEqual(baseToast({ icon }), baseToast({ icon })),
+    ).toBe(true);
+    expect(
+      areToastsEqual(
+        baseToast({ icon }),
+        baseToast({ icon: React.createElement('Icon') }),
+      ),
+    ).toBe(false);
+  });
+
+  it('compares promiseOptions by reference', () => {
+    const promiseOptions = {
+      promise: Promise.resolve('ok'),
+      loading: 'Saving…',
+      error: 'Failed',
+    };
+    expect(
+      areToastsEqual(baseToast({ promiseOptions }), baseToast({ promiseOptions })),
+    ).toBe(true);
+    expect(
+      areToastsEqual(
+        baseToast({ promiseOptions }),
+        baseToast({
+          promiseOptions: { ...promiseOptions },
+        }),
+      ),
+    ).toBe(false);
+  });
+
+  it('compares actions by label, so a fresh onClick closure is not a change', () => {
+    expect(
+      areToastsEqual(
+        baseToast({ action: { label: 'Undo', onClick: () => {} } }),
+        baseToast({ action: { label: 'Undo', onClick: () => {} } }),
+      ),
+    ).toBe(true);
+
+    expect(
+      areToastsEqual(
+        baseToast({ action: { label: 'Undo', onClick: () => {} } }),
+        baseToast({ action: { label: 'Retry', onClick: () => {} } }),
+      ),
+    ).toBe(false);
+  });
+
+  it('compares a rendered action node by reference', () => {
+    const action = React.createElement('Button');
+    expect(areToastsEqual(baseToast({ action }), baseToast({ action }))).toBe(
+      true,
+    );
+    expect(
+      areToastsEqual(
+        baseToast({ action }),
+        baseToast({ action: React.createElement('Button') }),
+      ),
+    ).toBe(false);
+  });
+
+  it('applies the same rules to cancel', () => {
+    expect(
+      areToastsEqual(
+        baseToast({ cancel: { label: 'Dismiss', onClick: () => {} } }),
+        baseToast({ cancel: { label: 'Dismiss', onClick: () => {} } }),
+      ),
+    ).toBe(true);
+    expect(
+      areToastsEqual(
+        baseToast({ cancel: { label: 'Dismiss', onClick: () => {} } }),
+        baseToast({ cancel: { label: 'Close', onClick: () => {} } }),
+      ),
+    ).toBe(false);
+  });
+});
+
+describe('isToastAction', () => {
+  it('accepts a label + onClick pair', () => {
+    expect(isToastAction({ label: 'Undo', onClick: () => {} })).toBe(true);
+  });
+
+  it.each<[string, unknown]>([
+    ['undefined', undefined],
+    ['null', null],
+    ['a string', 'Undo'],
+    ['a React element', React.createElement('Button')],
+    ['a partial action', { label: 'Undo' }],
+    ['a non-string label', { label: 7, onClick: () => {} }],
+    ['a non-function onClick', { label: 'Undo', onClick: 'nope' }],
+  ])('rejects %s', (_label, value) => {
+    expect(isToastAction(value as React.ReactNode)).toBe(false);
+  });
+});

package/src/__tests__/toast-enter-driver.test.ts

@@ -0,0 +1,147 @@
+/**
+ * The toast engine has exactly ONE platform switch — `TOAST_ENTER_DRIVER`, which
+ * mechanism plays the DEFAULT enter animation. Both halves are load-bearing, and
+ * each one broke the other platform when it was applied universally:
+ *
+ *   web    — a `Keyframe` on `entering` is frozen in place by reanimated's web
+ *            layout-animation cleanup `duration * 5` later, so a second toast
+ *            lands on top of the first.
+ *   native — driving the enter imperatively stopped a `bottom-center` toast from
+ *            painting at all.
+ *
+ * The invariant these tests protect: EXACTLY ONE of `entering` / `enterTranslateY`
+ * is ever set. Both would play the enter twice. Neither would leave the row with no
+ * enter animation and, on the imperative path, parked at `opacity: 0` one full
+ * `enterTranslateY` from its slot — which is exactly how the native regression
+ * presented.
+ */
+import { FadeIn } from 'react-native-reanimated';
+
+import {
+  TOAST_ENTER_DRIVER,
+  resolveToastEnterAnimation,
+  type ToastEnterDriver,
+} from '../toast/animations';
+import type { ToastPosition } from '../toast/types';
+
+interface RNMock {
+  Platform: { OS: 'ios' | 'android' | 'web' | 'windows' | 'macos' };
+}
+
+const POSITIONS: ToastPosition[] = ['bottom-center', 'top-center', 'center'];
+const DRIVERS: ToastEnterDriver[] = ['imperative', 'layoutAnimation'];
+
+/** Re-evaluate the module against a given `Platform.OS`. */
+const driverFor = (os: RNMock['Platform']['OS']): ToastEnterDriver => {
+  let driver: ToastEnterDriver | undefined;
+  jest.isolateModules(() => {
+    (require('react-native') as RNMock).Platform.OS = os;
+    driver = (require('../toast/animations') as { TOAST_ENTER_DRIVER: ToastEnterDriver })
+      .TOAST_ENTER_DRIVER;
+  });
+  if (!driver) {
+    throw new Error('module did not evaluate');
+  }
+  return driver;
+};
+
+describe('TOAST_ENTER_DRIVER', () => {
+  afterEach(() => {
+    (require('react-native') as RNMock).Platform.OS = 'ios';
+  });
+
+  it('is imperative on web only', () => {
+    expect(driverFor('web')).toBe('imperative');
+    expect(driverFor('ios')).toBe('layoutAnimation');
+    expect(driverFor('android')).toBe('layoutAnimation');
+  });
+
+  it('is a real value under the suite’s own platform', () => {
+    expect(DRIVERS).toContain(TOAST_ENTER_DRIVER);
+  });
+});
+
+describe('resolveToastEnterAnimation', () => {
+  it.each(DRIVERS)(
+    'sets exactly one of entering / enterTranslateY (%s), at every position',
+    (driver) => {
+      for (const position of POSITIONS) {
+        const resolved = resolveToastEnterAnimation({
+          position,
+          enterOverride: undefined,
+          driver,
+        });
+        const set = [resolved.entering, resolved.enterTranslateY].filter(
+          (value) => value !== undefined,
+        );
+        expect({ driver, position, count: set.length }).toEqual({
+          driver,
+          position,
+          count: 1,
+        });
+      }
+    },
+  );
+
+  it('drives the default enter imperatively, never through `entering`, on the imperative driver', () => {
+    const resolved = resolveToastEnterAnimation({
+      position: 'bottom-center',
+      enterOverride: undefined,
+      driver: 'imperative',
+    });
+    expect(resolved.entering).toBeUndefined();
+    expect(resolved.enterTranslateY).toBe(50);
+  });
+
+  it('travels the other way at top-center', () => {
+    expect(
+      resolveToastEnterAnimation({
+        position: 'top-center',
+        enterOverride: undefined,
+        driver: 'imperative',
+      }).enterTranslateY,
+    ).toBe(-20);
+  });
+
+  it('drives the default enter through `entering`, never imperatively, on the layout driver', () => {
+    const resolved = resolveToastEnterAnimation({
+      position: 'bottom-center',
+      enterOverride: undefined,
+      driver: 'layoutAnimation',
+    });
+    expect(resolved.entering).toBeDefined();
+    expect(resolved.enterTranslateY).toBeUndefined();
+  });
+
+  it.each(DRIVERS)(
+    'hands a consumer override to `entering` and drives nothing imperatively (%s)',
+    (driver) => {
+      const resolved = resolveToastEnterAnimation({
+        position: 'bottom-center',
+        enterOverride: FadeIn,
+        driver,
+      });
+      expect(resolved.entering).toBe(FadeIn);
+      expect(resolved.enterTranslateY).toBeUndefined();
+    },
+  );
+
+  it.each(DRIVERS)(
+    "treats 'default' as no override at all (%s)",
+    (driver) => {
+      expect(
+        resolveToastEnterAnimation({
+          position: 'bottom-center',
+          enterOverride: 'default',
+          driver,
+        }),
+      ).toEqual(
+        resolveToastEnterAnimation({
+          position: 'bottom-center',
+          enterOverride: undefined,
+          driver,
+        }),
+      );
+    },
+  );
+});

package/src/__tests__/toast-fns.test.ts

@@ -0,0 +1,240 @@
+import React from 'react';
+
+import { toast } from '../toast/toast-fns';
+import { toastStore } from '../toast/toast-store';
+import type { ToastProps, ToastType, ToastVariant } from '../toast/types';
+
+const stored = (id: string | number): ToastProps => {
+  const toastProps = toastStore.getSnapshot().toastsById.get(id);
+  if (!toastProps) {
+    throw new Error(`No toast in the store for id ${String(id)}`);
+  }
+  return toastProps;
+};
+
+const flushMicrotasks = async () => {
+  await Promise.resolve();
+  await Promise.resolve();
+};
+
+describe('toast()', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    toastStore.setConfig({});
+  });
+
+  afterEach(() => {
+    toastStore.dismissToast(undefined);
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  describe('content routing', () => {
+    it('treats a string as the title', () => {
+      const id = toast('Saved');
+      expect(stored(id)).toMatchObject({ title: 'Saved' });
+      expect(stored(id).jsx).toBeUndefined();
+    });
+
+    it('treats a React element as jsx with an empty title', () => {
+      const element = React.createElement('Row', null, 'custom');
+      const id = toast(element);
+      expect(stored(id).title).toBe('');
+      expect(stored(id).jsx).toBe(element);
+    });
+
+    it.each([
+      ['a number', 42, 'number'],
+      ['a boolean', true, 'boolean'],
+      ['null', null, 'object'],
+      ['undefined', undefined, 'undefined'],
+      ['an array', ['a', 'b'], 'object'],
+    ])('throws for %s', (_label, content, typeName) => {
+      expect(() => toast(content as React.ReactNode)).toThrow(
+        `Toast can be a string or a React element, got ${typeName}`,
+      );
+    });
+  });
+
+  describe('type → variant', () => {
+    it.each<[ToastType, ToastVariant | undefined]>([
+      ['default', undefined],
+      ['success', 'success'],
+      ['error', 'error'],
+      ['warning', 'warning'],
+      ['info', 'info'],
+      ['loading', 'loading'],
+    ])('maps type %s to variant %s', (type, variant) => {
+      const id = toast('x', { type });
+      expect(stored(id).variant).toBe(variant);
+    });
+
+    it('leaves the variant absent when no type is given', () => {
+      expect(stored(toast('x')).variant).toBeUndefined();
+    });
+
+    it('never leaks the public `type` key into the stored toast', () => {
+      const id = toast('x', { type: 'success' });
+      expect('type' in stored(id)).toBe(false);
+    });
+  });
+
+  describe('variant shorthands', () => {
+    const shorthands = {
+      success: toast.success,
+      error: toast.error,
+      warning: toast.warning,
+      info: toast.info,
+      loading: toast.loading,
+    };
+
+    it.each<[keyof typeof shorthands, ToastVariant]>([
+      ['success', 'success'],
+      ['error', 'error'],
+      ['warning', 'warning'],
+      ['info', 'info'],
+      ['loading', 'loading'],
+    ])('toast.%s sets variant %s', (method, variant) => {
+      const id = shorthands[method]('x');
+      expect(stored(id).variant).toBe(variant);
+    });
+
+    it('forwards the remaining options', () => {
+      const onDismiss = jest.fn();
+      const id = toast.success('x', { duration: 1234, onDismiss, id: 'mine' });
+      expect(stored(id)).toMatchObject({
+        id: 'mine',
+        duration: 1234,
+        variant: 'success',
+      });
+      expect(stored(id).onDismiss).toBe(onDismiss);
+    });
+  });
+
+  describe('toast.custom', () => {
+    it('stores the element as jsx with no variant', () => {
+      const element = React.createElement('Row', null, 'custom');
+      const id = toast.custom(element);
+      expect(stored(id)).toMatchObject({ title: '', jsx: element });
+      expect(stored(id).variant).toBeUndefined();
+    });
+
+    it('keeps action and description available to the renderer', () => {
+      const onClick = jest.fn();
+      const id = toast.custom(React.createElement('Row'), {
+        description: 'details',
+        action: { label: 'Undo', onClick },
+      });
+      expect(stored(id)).toMatchObject({
+        description: 'details',
+        action: { label: 'Undo', onClick },
+      });
+    });
+  });
+
+  describe('toast.promise', () => {
+    it('shows the loading title first, then the formatted success title', async () => {
+      const id = toast.promise(Promise.resolve({ name: 'Nate' }), {
+        loading: 'Saving…',
+        success: (result) => `Saved ${result.name}`,
+        error: 'Failed',
+      });
+
+      expect(stored(id)).toMatchObject({
+        title: 'Saving…',
+        variant: 'loading',
+      });
+      expect(stored(id).promiseOptions).toBeDefined();
+
+      await flushMicrotasks();
+
+      expect(stored(id)).toMatchObject({
+        title: 'Saved Nate',
+        variant: 'success',
+      });
+    });
+
+    it('formats the rejection through the error callback', async () => {
+      const id = toast.promise(Promise.reject(new Error('offline')), {
+        loading: 'Saving…',
+        success: () => 'Saved',
+        error: (error) =>
+          `Failed: ${error instanceof Error ? error.message : 'unknown'}`,
+      });
+
+      await flushMicrotasks();
+
+      expect(stored(id)).toMatchObject({
+        title: 'Failed: offline',
+        variant: 'error',
+      });
+    });
+
+    it('forwards the remaining options and the loading styles', async () => {
+      const loadingStyles = { title: { fontSize: 11 } };
+      const id = toast.promise(Promise.resolve('ok'), {
+        id: 'job',
+        duration: 2500,
+        loading: 'Saving…',
+        success: (result) => result,
+        error: 'Failed',
+        styles: { loading: loadingStyles },
+      });
+
+      expect(id).toBe('job');
+      expect(stored(id)).toMatchObject({ duration: 2500 });
+      expect(stored(id).styles).toBe(loadingStyles);
+
+      await flushMicrotasks();
+      expect(stored(id).title).toBe('ok');
+    });
+  });
+
+  describe('return values', () => {
+    it('hands back the store id from every method', () => {
+      expect(toast('a')).toBe(1);
+      expect(toast.success('b')).toBe(2);
+      expect(toast.error('c')).toBe(3);
+      expect(toast.warning('d')).toBe(4);
+      expect(toast.info('e')).toBe(5);
+      expect(toast.loading('f')).toBe(6);
+      expect(toast.custom(React.createElement('Row'))).toBe(7);
+      expect(
+        toast.promise(Promise.resolve('x'), {
+          loading: 'l',
+          success: (r) => r,
+          error: 'e',
+        }),
+      ).toBe(8);
+    });
+
+    it('respects a caller-supplied id', () => {
+      expect(toast('a', { id: 'mine' })).toBe('mine');
+    });
+
+    it('dismiss returns the id it dismissed, and nothing for dismiss-all', () => {
+      const id = toast('a');
+      expect(toast.dismiss(id)).toBe(id);
+      toast('b');
+      expect(toast.dismiss()).toBeUndefined();
+      expect(toastStore.getSnapshot().toasts).toHaveLength(0);
+    });
+
+    it('wiggle returns nothing', () => {
+      const id = toast('a');
+      expect(toast.wiggle(id)).toBeUndefined();
+    });
+  });
+
+  it('updates an existing toast in place when the same id is reused', () => {
+    toast('pending', { id: 'job' });
+    toast.success('done', { id: 'job' });
+
+    const state = toastStore.getSnapshot();
+    expect(state.toasts).toHaveLength(1);
+    expect(state.toasts[0]).toMatchObject({
+      title: 'done',
+      variant: 'success',
+    });
+  });
+});