test(react-toast): add hook-level tests for toast components

packages/react-components/react-toast/library/src/components/Toast/useToast.test.tsx

@@ -0,0 +1,81 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+import { useToast_unstable } from './useToast';
+import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
+import type { ToastContainerContextValue } from '../../contexts/toastContainerContext';
+
+const defaultContextValue: ToastContainerContextValue = {
+  close: () => null,
+  intent: undefined,
+  bodyId: 'body-id',
+  titleId: 'title-id',
+};
+
+function makeWrapper(contextValue: Partial<ToastContainerContextValue> = {}) {
+  const value = { ...defaultContextValue, ...contextValue };
+  return ({ children }: { children: React.ReactNode }) => (
+    <ToastContainerContextProvider value={value}>{children}</ToastContainerContextProvider>
+  );
+}
+
+describe('useToast_unstable', () => {
+  it('returns components shape { root: div }', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({}, ref), { wrapper: makeWrapper() });
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    expect(result.current.components).toEqual({ root: 'div' });
+  });
+
+  it('always returns a root slot', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({}, ref), { wrapper: makeWrapper() });
+    expect(result.current.root).toBeDefined();
+  });
+
+  it('sets backgroundAppearance to undefined when appearance prop is omitted', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({}, ref), { wrapper: makeWrapper() });
+    expect(result.current.backgroundAppearance).toBeUndefined();
+  });
+
+  it('sets backgroundAppearance to "inverted" when appearance="inverted"', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({ appearance: 'inverted' }, ref), {
+      wrapper: makeWrapper(),
+    });
+    expect(result.current.backgroundAppearance).toBe('inverted');
+  });
+
+  it('sets backgroundAppearance to "brand" when appearance="brand"', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({ appearance: 'brand' }, ref), {
+      wrapper: makeWrapper(),
+    });
+    expect(result.current.backgroundAppearance).toBe('brand');
+  });
+
+  it('reads intent from ToastContainerContext', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({}, ref), {
+      wrapper: makeWrapper({ intent: 'success' }),
+    });
+    expect(result.current.intent).toBe('success');
+  });
+
+  it('intent is undefined when context does not provide one', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({}, ref), {
+      wrapper: makeWrapper({ intent: undefined }),
+    });
+    expect(result.current.intent).toBeUndefined();
+  });
+
+  it('spreads extra div props onto the root slot', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToast_unstable({ className: 'custom-class', 'aria-label': 'toast' }, ref), {
+      wrapper: makeWrapper(),
+    });
+    expect(result.current.root.className).toBe('custom-class');
+    expect(result.current.root['aria-label']).toBe('toast');
+  });
+});

packages/react-components/react-toast/library/src/components/ToastBody/useToastBody.test.tsx

@@ -0,0 +1,105 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+import { useToastBody_unstable } from './useToastBody';
+import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
+import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
+import type { ToastContainerContextValue } from '../../contexts/toastContainerContext';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+
+const defaultContextValue: ToastContainerContextValue = {
+  close: () => null,
+  intent: undefined,
+  bodyId: 'test-body-id',
+  titleId: 'test-title-id',
+};
+
+function makeWrapper(
+  options: {
+    context?: Partial<ToastContainerContextValue>;
+    backgroundAppearance?: BackgroundAppearanceContextValue;
+  } = {},
+) {
+  const contextValue = { ...defaultContextValue, ...options.context };
+  return ({ children }: { children: React.ReactNode }) => (
+    <BackgroundAppearanceProvider value={options.backgroundAppearance}>
+      <ToastContainerContextProvider value={contextValue}>{children}</ToastContainerContextProvider>
+    </BackgroundAppearanceProvider>
+  );
+}
+
+describe('useToastBody_unstable', () => {
+  it('returns components shape { root: div, subtitle: div }', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), { wrapper: makeWrapper() });
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    expect(result.current.components).toEqual({ root: 'div', subtitle: 'div' });
+  });
+
+  it('always returns a root slot', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), { wrapper: makeWrapper() });
+    expect(result.current.root).toBeDefined();
+  });
+
+  it('applies bodyId from context to root.id', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), {
+      wrapper: makeWrapper({ context: { bodyId: 'my-body-id' } }),
+    });
+    expect(result.current.root.id).toBe('my-body-id');
+  });
+
+  it('returns undefined subtitle when subtitle prop is not provided', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), { wrapper: makeWrapper() });
+    expect(result.current.subtitle).toBeUndefined();
+  });
+
+  it('returns a subtitle slot when subtitle prop is provided', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({ subtitle: 'sub text' }, ref), {
+      wrapper: makeWrapper(),
+    });
+    expect(result.current.subtitle).toBeDefined();
+  });
+
+  it('reads backgroundAppearance from BackgroundAppearanceContext — undefined by default', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), { wrapper: makeWrapper() });
+    expect(result.current.backgroundAppearance).toBeUndefined();
+  });
+
+  it('reads backgroundAppearance="inverted" from BackgroundAppearanceContext', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), {
+      wrapper: makeWrapper({ backgroundAppearance: 'inverted' }),
+    });
+    expect(result.current.backgroundAppearance).toBe('inverted');
+  });
+
+  it('reads backgroundAppearance="brand" from BackgroundAppearanceContext', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), {
+      wrapper: makeWrapper({ backgroundAppearance: 'brand' }),
+    });
+    expect(result.current.backgroundAppearance).toBe('brand');
+  });
+
+  it('does not derive backgroundAppearance from props (it has no appearance prop)', () => {
+    const ref = React.createRef<HTMLElement>();
+    // ToastBody has no appearance prop; backgroundAppearance must always come from context
+    const { result } = renderHook(() => useToastBody_unstable({}, ref), {
+      wrapper: makeWrapper({ backgroundAppearance: 'brand' }),
+    });
+    expect(result.current.backgroundAppearance).toBe('brand');
+  });
+
+  it('spreads extra div props onto the root slot', () => {
+    const ref = React.createRef<HTMLElement>();
+    const { result } = renderHook(() => useToastBody_unstable({ className: 'body-class', 'aria-label': 'body' }, ref), {
+      wrapper: makeWrapper(),
+    });
+    expect(result.current.root.className).toBe('body-class');
+    expect(result.current.root['aria-label']).toBe('body');
+  });
+});

packages/react-components/react-toast/library/src/components/ToastTitle/useToastTitle.test.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { CheckmarkCircleFilled, DiamondDismissFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
+import { useToastTitle_unstable } from './useToastTitle';
+import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
+import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
+import type { ToastContainerContextValue } from '../../contexts/toastContainerContext';
+import type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { ToastIntent } from '../../state/types';
+
+const defaultContextValue: ToastContainerContextValue = {
+  close: () => null,
+  intent: undefined,
+  bodyId: 'test-body-id',
+  titleId: 'test-title-id',
+};
+
+function assertReactElement(node: React.ReactNode): asserts node is React.ReactElement {
+  expect(React.isValidElement(node)).toBe(true);
+}
+
+function makeWrapper(
+  options: {
+    context?: Partial<ToastContainerContextValue>;
+    backgroundAppearance?: BackgroundAppearanceContextValue;
+  } = {},
+) {
+  const contextValue = { ...defaultContextValue, ...options.context };
+  return ({ children }: { children: React.ReactNode }) => (
+    <BackgroundAppearanceProvider value={options.backgroundAppearance}>
+      <ToastContainerContextProvider value={contextValue}>{children}</ToastContainerContextProvider>
+    </BackgroundAppearanceProvider>
+  );
+}
+
+describe('useToastTitle_unstable', () => {
+  describe('components and slots', () => {
+    it('returns components shape { root: div, media: div, action: div }', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), { wrapper: makeWrapper() });
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
+      expect(result.current.components).toEqual({ root: 'div', media: 'div', action: 'div' });
+    });
+
+    it('always returns a root slot', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), { wrapper: makeWrapper() });
+      expect(result.current.root).toBeDefined();
+    });
+
+    it('returns undefined action when action prop is not provided', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), { wrapper: makeWrapper() });
+      expect(result.current.action).toBeUndefined();
+    });
+
+    it('returns an action slot when action prop is provided', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({ action: 'Dismiss' }, ref), {
+        wrapper: makeWrapper(),
+      });
+      expect(result.current.action).toBeDefined();
+    });
+  });
+
+  describe('root slot', () => {
+    it('applies titleId from context to root.id', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ context: { titleId: 'my-title-id' } }),
+      });
+      expect(result.current.root.id).toBe('my-title-id');
+    });
+
+    it('spreads extra div props onto the root slot', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(
+        () => useToastTitle_unstable({ className: 'title-class', 'aria-label': 'title' }, ref),
+        { wrapper: makeWrapper() },
+      );
+      expect(result.current.root.className).toBe('title-class');
+      expect(result.current.root['aria-label']).toBe('title');
+    });
+  });
+
+  describe('backgroundAppearance', () => {
+    it('is undefined by default', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), { wrapper: makeWrapper() });
+      expect(result.current.backgroundAppearance).toBeUndefined();
+    });
+
+    it('reads "inverted" from BackgroundAppearanceContext', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ backgroundAppearance: 'inverted' }),
+      });
+      expect(result.current.backgroundAppearance).toBe('inverted');
+    });
+
+    it('reads "brand" from BackgroundAppearanceContext', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ backgroundAppearance: 'brand' }),
+      });
+      expect(result.current.backgroundAppearance).toBe('brand');
+    });
+  });
+
+  describe('intent', () => {
+    it('reads intent from ToastContainerContext', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ context: { intent: 'success' } }),
+      });
+      expect(result.current.intent).toBe('success');
+    });
+
+    it('intent is undefined when context does not provide one', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ context: { intent: undefined } }),
+      });
+      expect(result.current.intent).toBeUndefined();
+    });
+  });
+
+  describe('media slot — default icon injection by intent', () => {
+    it('media is undefined when no intent and no media prop', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ context: { intent: undefined } }),
+      });
+      expect(result.current.media).toBeUndefined();
+    });
+
+    const intentIconCases: Array<[ToastIntent, React.ElementType]> = [
+      ['success', CheckmarkCircleFilled],
+      ['error', DiamondDismissFilled],
+      ['warning', WarningFilled],
+      ['info', InfoFilled],
+    ];
+
+    it.each(intentIconCases)('injects default icon for intent="%s"', (intent, ExpectedIcon) => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ context: { intent } }),
+      });
+
+      expect(result.current.media).toBeDefined();
+      const children = result.current.media?.children;
+      assertReactElement(children);
+      expect(children.type).toBe(ExpectedIcon);
+    });
+
+    it('renders media slot (without default icon) when intent is set but media has explicit children', () => {
+      const ref = React.createRef<HTMLElement>();
+      const customIcon = <span data-testid="custom-icon" />;
+      const { result } = renderHook(() => useToastTitle_unstable({ media: { children: customIcon } }, ref), {
+        wrapper: makeWrapper({ context: { intent: 'success' } }),
+      });
+
+      expect(result.current.media).toBeDefined();
+      const children = result.current.media?.children;
+      assertReactElement(children);
+      // User's children must take precedence over the default icon
+      expect(children).toBe(customIcon);
+      expect(children.type).not.toBe(CheckmarkCircleFilled);
+    });
+
+    it('media is defined (renderByDefault) when intent is set even without media prop', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({}, ref), {
+        wrapper: makeWrapper({ context: { intent: 'info' } }),
+      });
+      // renderByDefault: !!intent → media must exist
+      expect(result.current.media).toBeDefined();
+    });
+
+    it('media children are still the default icon when media prop is provided without children and intent is set', () => {
+      const ref = React.createRef<HTMLElement>();
+      const { result } = renderHook(() => useToastTitle_unstable({ media: {} }, ref), {
+        wrapper: makeWrapper({ context: { intent: 'warning' } }),
+      });
+
+      expect(result.current.media).toBeDefined();
+      const children = result.current.media?.children;
+      assertReactElement(children);
+      expect(children.type).toBe(WarningFilled);
+    });
+  });
+});