@oxyhq/bloom 0.50.2 → 0.51.1

package/src/__tests__/ToastContent.test.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { ToastContent } from '../toast/ToastContent';
+import type { ToastVariant } from '../toast/types';
+
+const renderContent = (
+  props: Partial<React.ComponentProps<typeof ToastContent>> = {},
+) => {
+  const onDismiss = jest.fn();
+  const utils = render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      <ToastContent
+        id={1}
+        title="Saved"
+        unstyled={false}
+        icons={{}}
+        onDismiss={onDismiss}
+        {...props}
+      />
+    </BloomThemeProvider>,
+  );
+  return { ...utils, onDismiss };
+};
+
+/**
+ * `ReactTestInstance['type']` is `ElementType`, whose string arm is
+ * `keyof JSX.IntrinsicElements` — so comparing it to a React Native host name
+ * ('Pressable', 'Svg', …) is a type error. Normalise to a plain string instead of
+ * asserting the type away.
+ */
+const hostName = (node: { type: unknown }): string =>
+  typeof node.type === 'string' ? node.type : '';
+
+/**
+ * `*ByRole` does not resolve through this repo's `react-native` mock (it renders
+ * primitives as bare host elements), so button assertions go by component type.
+ */
+const pressablesOf = ({ UNSAFE_root }: ReturnType<typeof renderContent>) =>
+  UNSAFE_root.findAll((node) => hostName(node) === 'Pressable');
+
+/** Bloom icons render as `Svg` hosts. */
+const iconsOf = ({ UNSAFE_root }: ReturnType<typeof renderContent>) =>
+  UNSAFE_root.findAll((node) => hostName(node) === 'Svg');
+
+const spinnersOf = ({ UNSAFE_root }: ReturnType<typeof renderContent>) =>
+  UNSAFE_root.findAll((node) => hostName(node) === 'ActivityIndicator');
+
+describe('ToastContent', () => {
+  it('renders the title', () => {
+    const { getByText } = renderContent();
+    expect(getByText('Saved')).toBeTruthy();
+  });
+
+  it('renders a description only when one is given', () => {
+    expect(renderContent().queryByText('Details')).toBeNull();
+    expect(
+      renderContent({ description: 'Details' }).getByText('Details'),
+    ).toBeTruthy();
+  });
+
+  it('renders an action button and calls onClick', () => {
+    const onClick = jest.fn();
+    const { getByText } = renderContent({
+      action: { label: 'Undo', onClick },
+    });
+
+    fireEvent.press(getByText('Undo'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders an action supplied as a node instead of a label/onClick pair', () => {
+    const { getByText } = renderContent({
+      action: <Text>Custom action</Text>,
+    });
+    expect(getByText('Custom action')).toBeTruthy();
+  });
+
+  it('dismisses after running the cancel handler', () => {
+    const onClick = jest.fn();
+    const { getByText, onDismiss } = renderContent({
+      cancel: { label: 'Dismiss', onClick },
+    });
+
+    fireEvent.press(getByText('Dismiss'));
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledWith(1);
+  });
+
+  it('shows no button row when there is neither action nor cancel', () => {
+    expect(pressablesOf(renderContent())).toHaveLength(0);
+  });
+
+  it('renders the close button only when asked, and it dismisses', () => {
+    expect(pressablesOf(renderContent({ dismissible: true }))).toHaveLength(0);
+
+    const rendered = renderContent({ dismissible: true, closeButton: true });
+    const [closeButton] = pressablesOf(rendered);
+    expect(closeButton).toBeDefined();
+    if (closeButton) {
+      fireEvent.press(closeButton);
+    }
+    expect(rendered.onDismiss).toHaveBeenCalledWith(1);
+  });
+
+  it('never renders a close button on a non-dismissible toast', () => {
+    expect(
+      pressablesOf(renderContent({ dismissible: false, closeButton: true })),
+    ).toHaveLength(0);
+  });
+
+  it('prefers a caller-supplied close node over the default button', () => {
+    const { getByText } = renderContent({
+      dismissible: true,
+      closeButton: true,
+      close: <Text>Bye</Text>,
+    });
+    expect(getByText('Bye')).toBeTruthy();
+  });
+
+  it('renders a variant icon, and none for a variant-less toast', () => {
+    // A neutral toast has no leading icon at all.
+    expect(iconsOf(renderContent({ variant: 'success' })).length).toBeGreaterThan(
+      iconsOf(renderContent()).length,
+    );
+  });
+
+  it.each<ToastVariant>(['success', 'error', 'warning', 'info'])(
+    'renders an icon for the %s variant',
+    (variant) => {
+      expect(iconsOf(renderContent({ variant })).length).toBeGreaterThan(0);
+    },
+  );
+
+  it('uses a spinner instead of an icon while a promise is pending', () => {
+    const rendered = renderContent({
+      promiseOptions: {
+        promise: Promise.resolve('done'),
+        loading: 'Saving…',
+        error: 'Failed',
+      },
+    });
+    expect(spinnersOf(rendered)).toHaveLength(1);
+    expect(iconsOf(rendered)).toHaveLength(0);
+  });
+
+  it('lets the outlet override the loading indicator', () => {
+    const { getByText } = renderContent({
+      variant: 'loading',
+      icons: { loading: <Text>spinning</Text> },
+    });
+    expect(getByText('spinning')).toBeTruthy();
+  });
+
+  it('lets the outlet override a variant icon', () => {
+    const { getByText } = renderContent({
+      variant: 'success',
+      icons: { success: <Text>yay</Text> },
+    });
+    expect(getByText('yay')).toBeTruthy();
+  });
+
+  it('prefers a per-toast icon over the variant icon', () => {
+    const { getByText } = renderContent({
+      variant: 'success',
+      icon: <Text>mine</Text>,
+      icons: { success: <Text>yay</Text> },
+    });
+    expect(getByText('mine')).toBeTruthy();
+  });
+
+  it('applies caller style overrides to the title', () => {
+    const { getByText } = renderContent({
+      styles: { title: { fontSize: 99 } },
+    });
+    expect(getByText('Saved').props.style).toEqual(
+      expect.arrayContaining([{ fontSize: 99 }]),
+    );
+  });
+
+  it('drops its own surface and text styling when unstyled', () => {
+    const { getByText } = renderContent({ unstyled: true });
+    // Only the (absent) override slot remains, so nothing carries a colour.
+    expect(getByText('Saved').props.style).toEqual([
+      undefined,
+      undefined,
+      undefined,
+    ]);
+  });
+});

package/src/__tests__/ToastHostWebFork.test.ts

@@ -0,0 +1,155 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Source/contract guards for the toast host split, mirroring
+ * `BottomSheetWebFork.test.ts`.
+ *
+ * The toast engine is ONE universal implementation; its only platform split is
+ * the host. Several of the properties below cannot be reproduced in jest (the
+ * real paint, the portal ancestry, Metro's `.native` resolution), so they are
+ * asserted against the source and the generated packaging instead, and verified
+ * for real in a browser and on a device.
+ */
+
+const SRC = join(__dirname, '..');
+const REPO_ROOT = join(SRC, '..');
+
+const read = (rel: string) => readFileSync(join(SRC, rel), 'utf8');
+
+/**
+ * Source with comments removed. These files deliberately DOCUMENT the patterns
+ * they must not contain (`ToastHost.native.tsx` shows a consumer how to inject
+ * `FullWindowOverlay`; `Positioner.tsx` explains why it holds no `position:
+ * 'fixed'`), so every negative assertion runs against code only.
+ */
+const code = (rel: string) =>
+  read(rel)
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^\s*\/\/.*$/gm, '');
+
+describe('ToastHost platform split', () => {
+  it('web/default host portals into the shared bloom portal root', () => {
+    const host = read('toast/ToastHost.tsx');
+    expect(host).toMatch(/from '\.\.\/portal\/index\.web'/);
+    expect(host).toMatch(/<Portal>/);
+  });
+
+  it('web/default host provides its own GestureHandlerRootView (W8)', () => {
+    const host = read('toast/ToastHost.tsx');
+    // Portaled content sits outside the app-root GHRV, so swipe-to-dismiss
+    // would never receive touches without this.
+    expect(host).toMatch(
+      /import \{ GestureHandlerRootView \} from 'react-native-gesture-handler'/,
+    );
+  });
+
+  it('web/default host anchors to the viewport through the shared style module (W7)', () => {
+    const host = code('toast/ToastHost.tsx');
+    expect(host).toMatch(/position: WEB_POSITION_FIXED/);
+    expect(host).toMatch(/from '\.\.\/styles\/web-view-style'/);
+    // The one-off inline cast this replaces must never come back.
+    expect(host).not.toMatch(/'fixed' as/);
+  });
+
+  it('web/default host layers toasts at Z_INDEX.toast', () => {
+    const host = read('toast/ToastHost.tsx');
+    expect(host).toMatch(/zIndex: Z_INDEX\.toast/);
+  });
+
+  it('native host imports neither react-native-screens nor the portal (D6)', () => {
+    const native = code('toast/ToastHost.native.tsx');
+    expect(native).not.toMatch(/from 'react-native-screens'/);
+    expect(native).not.toMatch(/from '\.\.\/portal/);
+    expect(native).toMatch(/ToasterOverlayWrapper/);
+    // The doc comment still has to tell consumers how to inject it themselves.
+    expect(read('toast/ToastHost.native.tsx')).toMatch(/FullWindowOverlay/);
+  });
+
+  it('the shared style module owns the only fixed-position assertion', () => {
+    const styleModule = read('styles/web-view-style.ts');
+    expect(styleModule).toMatch(
+      /export const WEB_POSITION_FIXED = 'fixed' as ViewStyle\['position'\]/,
+    );
+    // Exactly one cast in the module, and nothing else exported alongside it.
+    // (Counted against code — the doc comment discusses casts in prose.)
+    expect(code('styles/web-view-style.ts').match(/ as /g)).toHaveLength(1);
+    expect(styleModule.match(/^export /gm)).toHaveLength(1);
+  });
+
+  it('no engine file other than the host reaches for a platform overlay', () => {
+    for (const file of [
+      'toast/Toaster.tsx',
+      'toast/Positioner.tsx',
+      'toast/ToastRow.tsx',
+    ]) {
+      const source = code(file);
+      expect(source).not.toMatch(/from 'react-native-screens'/);
+      // Doc comments explain why `fixed` lives in the host; assert no file here
+      // actually POSITIONS anything fixed.
+      expect(source).not.toMatch(/position:\s*'fixed'/);
+      expect(source).not.toMatch(/webPosition\(/);
+    }
+  });
+
+  it('never returns an animation from a mapper (reanimated web failure mode A)', () => {
+    // `useDerivedValue(() => withTiming(...))` and a `withTiming` returned from
+    // inside `useAnimatedStyle` do not tick on web: the value jumps to a static
+    // frame. Every animation must be ASSIGNED from JS instead — the row's shared
+    // values come from `useAnimatedTarget`, and its mappers only read them.
+    for (const file of [
+      'toast/ToastRow.tsx',
+      'toast/use-toast-position.ts',
+      'toast/ToastSwipeHandler.tsx',
+    ]) {
+      const source = code(file);
+      expect(source).not.toMatch(/useDerivedValue/);
+      expect(source).not.toMatch(/return withTiming/);
+    }
+
+    const driver = code('toast/use-animated-target.ts');
+    expect(driver).toMatch(/value\.value = withTiming\(/);
+    expect(driver).not.toMatch(/useDerivedValue/);
+  });
+
+  it('Positioner passes pointerEvents through style, not as a prop', () => {
+    const positioner = code('toast/Positioner.tsx');
+    expect(positioner).toMatch(/pointerEvents:/);
+    expect(positioner).not.toMatch(/pointerEvents=\{/);
+  });
+
+  it('package.json exports ./toast WITHOUT a browser condition', () => {
+    const pkg = JSON.parse(readFileSync(join(REPO_ROOT, 'package.json'), 'utf8')) as {
+      exports: Record<string, { browser?: unknown; import?: { default?: string } }>;
+    };
+    const entry = pkg.exports['./toast'];
+    expect(entry).toBeDefined();
+    // A browser condition would emit lib/module/toast/index.web.js, and any
+    // bundler with `.web.js` in resolve.extensions would resolve `./toast` to it.
+    expect(entry?.browser).toBeUndefined();
+    expect(entry?.import?.default).toBe('./lib/module/toast/index.js');
+  });
+
+  it('the generator no longer lists ./toast as web-forked', () => {
+    const generator = readFileSync(
+      join(REPO_ROOT, 'scripts/generate-platform-exports.mjs'),
+      'utf8',
+    );
+    const forkedBlock = /const WEB_FORKED_SUBPATHS = new Set\(\[([\s\S]*?)\]\)/.exec(
+      generator,
+    );
+    expect(forkedBlock).not.toBeNull();
+    expect(forkedBlock?.[1]).not.toMatch(/^\s*'\.\/toast',/m);
+  });
+
+  it('no sonner import survives in the toast surface or the root barrel', () => {
+    for (const file of [
+      'toast/index.tsx',
+      'toast/Toaster.tsx',
+      'toast/toast-fns.ts',
+      'index.ts',
+    ]) {
+      expect(code(file)).not.toMatch(/from 'sonner(-native)?'/);
+    }
+  });
+});