@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/src/primitives/__tests__/empty-state.test.tsx

@@ -0,0 +1,154 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { EmptyState } from '../empty-state'
+
+describe('EmptyState primitive', () => {
+  it('renders the title', () => {
+    render(<EmptyState title="No results" />)
+    expect(screen.getByText('No results')).toBeInTheDocument()
+  })
+
+  it('renders description when provided', () => {
+    render(<EmptyState title="Empty" description="Try adjusting filters" />)
+    expect(screen.getByText('Try adjusting filters')).toBeInTheDocument()
+  })
+
+  it('renders an icon when provided', () => {
+    const Icon = () => <svg data-testid="empty-icon" />
+    render(<EmptyState title="None" icon={<Icon />} />)
+    expect(screen.getByTestId('empty-icon')).toBeInTheDocument()
+  })
+
+  it('renders custom actions ReactNode when provided', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        actions={<button type="button">Custom action</button>}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Custom action' })).toBeInTheDocument()
+  })
+
+  it('renders the legacy action object as a default outline button', () => {
+    const onClick = jest.fn()
+    render(
+      <EmptyState
+        title="Empty"
+        action={{ label: 'Add item', onClick }}
+      />,
+    )
+    const button = screen.getByRole('button', { name: /Add item/i })
+    expect(button).toBeInTheDocument()
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders legacy actionLabel + onAction as a button (BC for old backend EmptyState)', () => {
+    const onAction = jest.fn()
+    render(
+      <EmptyState title="Empty" actionLabel="Create" onAction={onAction} />,
+    )
+    const button = screen.getByRole('button', { name: /Create/i })
+    fireEvent.click(button)
+    expect(onAction).toHaveBeenCalledTimes(1)
+  })
+
+  it('prefers actions over legacy action when both are provided', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        actions={<button type="button">Primary</button>}
+        action={{ label: 'Legacy', onClick: () => {} }}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Primary' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Legacy/i })).not.toBeInTheDocument()
+  })
+
+  it('default variant renders dashed border + bg-muted/30', () => {
+    const { container } = render(<EmptyState title="Default" />)
+    const root = container.querySelector('[data-slot="empty-state"]')
+    expect(root!.className).toContain('border-dashed')
+    expect(root!.className).toContain('bg-muted/30')
+  })
+
+  it('subtle variant has no border and no muted background', () => {
+    const { container } = render(<EmptyState title="Subtle" variant="subtle" />)
+    const root = container.querySelector('[data-slot="empty-state"]')
+    expect(root!.className).not.toContain('border-dashed')
+    expect(root!.className).not.toContain('bg-muted/30')
+  })
+
+  it('subtle variant wraps icon in a round muted box (Figma illustration tile style)', () => {
+    const Icon = () => <svg data-testid="boxed-icon" />
+    const { container } = render(
+      <EmptyState title="Subtle" variant="subtle" icon={<Icon />} />,
+    )
+    const iconWrapper = container.querySelector('[data-slot="empty-state"] > div')
+    expect(iconWrapper!.className).toContain('bg-muted')
+    expect(iconWrapper!.className).toContain('rounded-full')
+  })
+
+  it('illustration prop renders without an icon-box wrapper (Figma illustrations bring own bg)', () => {
+    const Illustration = () => <svg data-testid="figma-illustration" width="120" height="120" />
+    const { container } = render(
+      <EmptyState
+        title="With illustration"
+        variant="subtle"
+        illustration={<Illustration />}
+      />,
+    )
+    expect(container.querySelector('[data-testid="figma-illustration"]')).toBeInTheDocument()
+    const wrapper = container.querySelector('[data-slot="empty-state"] > div')
+    expect(wrapper!.className).not.toContain('bg-muted')
+    expect(wrapper!.className).not.toContain('rounded-full')
+  })
+
+  it('illustration takes precedence over icon when both are provided', () => {
+    const Illustration = () => <svg data-testid="illustration" />
+    const Icon = () => <svg data-testid="icon" />
+    render(
+      <EmptyState
+        title="Both"
+        illustration={<Illustration />}
+        icon={<Icon />}
+      />,
+    )
+    expect(screen.getByTestId('illustration')).toBeInTheDocument()
+    expect(screen.queryByTestId('icon')).not.toBeInTheDocument()
+  })
+
+  it('size variants apply correct padding tokens', () => {
+    const { container: sm } = render(<EmptyState title="X" size="sm" />)
+    expect(sm.querySelector('[data-slot="empty-state"]')!.className).toContain('py-6')
+
+    const { container: dft } = render(<EmptyState title="X" />)
+    expect(dft.querySelector('[data-slot="empty-state"]')!.className).toContain('py-10')
+
+    const { container: lg } = render(<EmptyState title="X" size="lg" />)
+    expect(lg.querySelector('[data-slot="empty-state"]')!.className).toContain('py-16')
+  })
+
+  it('forwards className to the root element', () => {
+    const { container } = render(
+      <EmptyState title="Empty" className="custom-class" />,
+    )
+    expect(container.querySelector('[data-slot="empty-state"]')!.className).toContain('custom-class')
+  })
+
+  it('renders children between description and actions', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        description="No items"
+      >
+        <p data-testid="custom-child">Extra content</p>
+      </EmptyState>,
+    )
+    expect(screen.getByTestId('custom-child')).toBeInTheDocument()
+  })
+})

package/src/primitives/__tests__/inline-input.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { InlineInput } from '../inline-input'
+
+describe('InlineInput primitive', () => {
+  it('renders an input element', () => {
+    render(<InlineInput placeholder="Edit value" />)
+    expect(screen.getByPlaceholderText('Edit value')).toBeInTheDocument()
+  })
+
+  it('renders without a visible border at rest (border-transparent + bg-transparent)', () => {
+    const { container } = render(<InlineInput value="hello" onChange={() => {}} />)
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('border-transparent')
+    expect(wrapper).toHaveClass('bg-transparent')
+    expect(wrapper).toHaveClass('shadow-none')
+  })
+
+  it('reveals a hover border by default', () => {
+    const { container } = render(<InlineInput value="x" onChange={() => {}} />)
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('hover:border-input')
+  })
+
+  it('omits the hover border when showBorderOnHover is false', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} showBorderOnHover={false} />,
+    )
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).not.toHaveClass('hover:border-input')
+    expect(wrapper).toHaveClass('hover:bg-transparent')
+  })
+
+  it('defaults to the sm size (h-8)', () => {
+    const { container } = render(<InlineInput value="x" onChange={() => {}} />)
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('h-8')
+  })
+
+  it('supports size="default" (h-9)', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} size="default" />,
+    )
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('h-9')
+  })
+
+  it('forwards value / onChange like a regular Input', () => {
+    const onChange = jest.fn()
+    render(<InlineInput value="hello" onChange={onChange} />)
+    const input = screen.getByDisplayValue('hello') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'world' } })
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('forwards onBlur for save-on-blur consumer flows', () => {
+    const onBlur = jest.fn()
+    render(<InlineInput value="hello" onChange={() => {}} onBlur={onBlur} />)
+    const input = screen.getByDisplayValue('hello')
+    fireEvent.blur(input)
+    expect(onBlur).toHaveBeenCalled()
+  })
+
+  it('forwards refs to the underlying input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<InlineInput ref={ref} value="hello" onChange={() => {}} />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('INPUT')
+  })
+
+  it('merges consumer className alongside the borderless baseline', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} className="text-right font-mono" />,
+    )
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('text-right')
+    expect(wrapper).toHaveClass('font-mono')
+    expect(wrapper).toHaveClass('border-transparent')
+  })
+
+  it('renders aria-invalid via the underlying Input wrapper', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} aria-invalid />,
+    )
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('honors a custom input type', () => {
+    const { container } = render(
+      <InlineInput value="user@example.com" onChange={() => {}} type="email" />,
+    )
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('type', 'email')
+  })
+})

package/src/primitives/__tests__/inline-select.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import {
+  InlineSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '../inline-select'
+
+function renderInlineSelect(
+  props: Partial<React.ComponentProps<typeof InlineSelectTrigger>> = {},
+) {
+  return render(
+    <Select defaultValue="open">
+      <InlineSelectTrigger aria-label="Status" {...props}>
+        <SelectValue />
+      </InlineSelectTrigger>
+      <SelectContent>
+        <SelectItem value="open">Open</SelectItem>
+        <SelectItem value="closed">Closed</SelectItem>
+      </SelectContent>
+    </Select>,
+  )
+}
+
+describe('InlineSelect primitive', () => {
+  it('renders the trigger borderless at rest', () => {
+    const { container } = renderInlineSelect()
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).not.toBeNull()
+    expect(trigger).toHaveClass('border-transparent')
+    expect(trigger).toHaveClass('bg-transparent')
+    expect(trigger).toHaveClass('shadow-none')
+  })
+
+  it('shows the hover border by default', () => {
+    const { container } = renderInlineSelect()
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('hover:border-input')
+    expect(trigger).toHaveClass('hover:bg-muted/40')
+  })
+
+  it('omits the hover border when showBorderOnHover is false', () => {
+    const { container } = renderInlineSelect({ showBorderOnHover: false })
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).not.toHaveClass('hover:border-input')
+    expect(trigger).toHaveClass('hover:bg-transparent')
+  })
+
+  it('defaults to the sm size (h-8)', () => {
+    const { container } = renderInlineSelect()
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('h-8')
+  })
+
+  it('supports size="default" (h-9)', () => {
+    const { container } = renderInlineSelect({ size: 'default' })
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('h-9')
+  })
+
+  it('forwards refs to the underlying button trigger', () => {
+    const ref = React.createRef<HTMLButtonElement>()
+    render(
+      <Select defaultValue="a">
+        <InlineSelectTrigger ref={ref} aria-label="Pick">
+          <SelectValue />
+        </InlineSelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">A</SelectItem>
+        </SelectContent>
+      </Select>,
+    )
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('BUTTON')
+  })
+
+  it('merges consumer className alongside the borderless baseline', () => {
+    const { container } = renderInlineSelect({
+      className: 'text-right font-mono',
+    })
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('text-right')
+    expect(trigger).toHaveClass('font-mono')
+    expect(trigger).toHaveClass('border-transparent')
+  })
+
+  it('forwards aria-label to the Radix trigger', () => {
+    renderInlineSelect({ 'aria-label': 'Pipeline stage' })
+    expect(screen.getByRole('combobox', { name: 'Pipeline stage' })).toBeInTheDocument()
+  })
+
+  it('renders aria-invalid styling when aria-invalid is set', () => {
+    const { container } = renderInlineSelect({ 'aria-invalid': true })
+    const trigger = container.querySelector('[aria-invalid="true"]')
+    expect(trigger).not.toBeNull()
+  })
+})

package/src/primitives/__tests__/notification-stack.test.tsx

@@ -0,0 +1,174 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import {
+  NotificationProvider,
+  NotificationStack,
+  useNotification,
+} from '../notification-stack'
+
+function Harness({
+  placement,
+  maxVisible,
+  children,
+}: {
+  placement?: React.ComponentProps<typeof NotificationStack>['placement']
+  maxVisible?: number
+  children?: React.ReactNode
+}) {
+  return (
+    <NotificationProvider maxVisible={maxVisible}>
+      {children}
+      <NotificationStack placement={placement} />
+    </NotificationProvider>
+  )
+}
+
+function NotifyButton({ label = 'Notify', options }: { label?: string; options: any }) {
+  const { notify } = useNotification()
+  return (
+    <button type="button" onClick={() => notify(options)}>
+      {label}
+    </button>
+  )
+}
+
+describe('NotificationStack + useNotification', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('renders nothing when the queue is empty', () => {
+    const { container } = render(<Harness />)
+    expect(container.querySelector('[data-slot="notification-stack"]')).toBeNull()
+  })
+
+  it('renders the stack wrapper once a notification is queued', () => {
+    const { container } = render(
+      <Harness>
+        <NotifyButton options={{ title: 'Hello' }} />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('Notify'))
+    expect(container.querySelector('[data-slot="notification-stack"]')).not.toBeNull()
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+
+  it('respects the placement prop (data-placement attribute + Tailwind classes)', () => {
+    const { container } = render(
+      <Harness placement="bottom-left">
+        <NotifyButton options={{ title: 'A' }} />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('Notify'))
+    const stack = container.querySelector('[data-slot="notification-stack"]')
+    expect(stack).toHaveAttribute('data-placement', 'bottom-left')
+    expect(stack).toHaveClass('bottom-4')
+    expect(stack).toHaveClass('left-4')
+  })
+
+  it('dismiss button on a notification removes it from the queue', () => {
+    render(
+      <Harness>
+        <NotifyButton options={{ title: 'Dismissable' }} />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('Notify'))
+    expect(screen.getByText('Dismissable')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+    expect(screen.queryByText('Dismissable')).toBeNull()
+  })
+
+  it('auto-dismisses after autoDismissMs and clears its timer', () => {
+    render(
+      <Harness>
+        <NotifyButton options={{ title: 'Auto', autoDismissMs: 2000 }} />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('Notify'))
+    expect(screen.getByText('Auto')).toBeInTheDocument()
+    act(() => {
+      jest.advanceTimersByTime(1999)
+    })
+    expect(screen.getByText('Auto')).toBeInTheDocument()
+    act(() => {
+      jest.advanceTimersByTime(1)
+    })
+    expect(screen.queryByText('Auto')).toBeNull()
+  })
+
+  it('manual dismiss before autoDismissMs cancels the timer (no late re-fire)', () => {
+    render(
+      <Harness>
+        <NotifyButton options={{ title: 'Cancel', autoDismissMs: 3000 }} />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('Notify'))
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+    expect(screen.queryByText('Cancel')).toBeNull()
+    // Advance past the auto-dismiss window — no errors, no resurrected card.
+    act(() => {
+      jest.advanceTimersByTime(5000)
+    })
+    expect(screen.queryByText('Cancel')).toBeNull()
+  })
+
+  it('respects maxVisible cap (FIFO trim of oldest entries)', () => {
+    render(
+      <Harness maxVisible={2}>
+        <NotifyButton label="A" options={{ title: 'First' }} />
+        <NotifyButton label="B" options={{ title: 'Second' }} />
+        <NotifyButton label="C" options={{ title: 'Third' }} />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('A'))
+    fireEvent.click(screen.getByText('B'))
+    fireEvent.click(screen.getByText('C'))
+    expect(screen.queryByText('First')).toBeNull()
+    expect(screen.getByText('Second')).toBeInTheDocument()
+    expect(screen.getByText('Third')).toBeInTheDocument()
+  })
+
+  it('useNotification throws outside the provider', () => {
+    function Bad() {
+      useNotification()
+      return null
+    }
+    // Suppress React error logging for the expected throw.
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {})
+    expect(() => render(<Bad />)).toThrow(
+      /useNotification must be used within a NotificationProvider/,
+    )
+    spy.mockRestore()
+  })
+
+  it('dismissAll clears the queue', () => {
+    function DismissAllButton() {
+      const { dismissAll } = useNotification()
+      return (
+        <button type="button" onClick={dismissAll}>
+          Clear
+        </button>
+      )
+    }
+    render(
+      <Harness>
+        <NotifyButton label="A" options={{ title: 'First' }} />
+        <NotifyButton label="B" options={{ title: 'Second' }} />
+        <DismissAllButton />
+      </Harness>,
+    )
+    fireEvent.click(screen.getByText('A'))
+    fireEvent.click(screen.getByText('B'))
+    expect(screen.getByText('First')).toBeInTheDocument()
+    fireEvent.click(screen.getByText('Clear'))
+    expect(screen.queryByText('First')).toBeNull()
+    expect(screen.queryByText('Second')).toBeNull()
+  })
+})

package/src/primitives/__tests__/notification.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Notification } from '../notification'
+
+describe('Notification primitive', () => {
+  it('renders the underlying Alert at size="default" (rounded-xl)', () => {
+    const { container } = render(<Notification title="Test" />)
+    const alert = container.querySelector('[data-slot="notification"]')
+    expect(alert).toHaveClass('rounded-xl')
+  })
+
+  it('marks the root with data-slot="notification" (overrides Alert data-slot via spread)', () => {
+    const { container } = render(<Notification title="Test" />)
+    expect(container.querySelector('[data-slot="notification"]')).not.toBeNull()
+  })
+
+  it('forwards id as data-notification-id', () => {
+    const { container } = render(<Notification id="notif-123" title="Test" />)
+    expect(container.querySelector('[data-notification-id="notif-123"]')).not.toBeNull()
+  })
+
+  it('renders title as AlertTitle and description below', () => {
+    render(<Notification title="John commented" description="On the latest deal" />)
+    expect(screen.getByText('John commented').tagName).toBe('H5')
+    expect(screen.getByText('On the latest deal').tagName).toBe('P')
+  })
+
+  it('description gets opacity-72 per Figma Notification reference', () => {
+    const { container } = render(
+      <Notification title="t" description="body" />,
+    )
+    const desc = container.querySelector('[data-slot="notification-description"]')
+    expect(desc).toHaveClass('opacity-72')
+  })
+
+  it('renders the timestamp slot when provided', () => {
+    render(<Notification title="t" timestamp="2 min ago" />)
+    expect(screen.getByText('2 min ago')).toBeInTheDocument()
+  })
+
+  it('omits the title row entirely when neither title nor timestamp is provided', () => {
+    const { container } = render(<Notification description="just a body" />)
+    expect(container.querySelector('h5')).toBeNull()
+    expect(container.querySelector('[data-slot="notification-timestamp"]')).toBeNull()
+  })
+
+  it('renders an actions row when actions are provided', () => {
+    render(
+      <Notification
+        title="t"
+        actions={
+          <>
+            <button data-testid="view">View</button>
+            <button data-testid="dismiss">Dismiss</button>
+          </>
+        }
+      />,
+    )
+    expect(screen.getByTestId('view')).toBeInTheDocument()
+    expect(screen.getByTestId('dismiss')).toBeInTheDocument()
+  })
+
+  it('actions row carries data-slot="notification-actions"', () => {
+    const { container } = render(
+      <Notification title="t" actions={<button>x</button>} />,
+    )
+    expect(container.querySelector('[data-slot="notification-actions"]')).not.toBeNull()
+  })
+
+  it('uses the avatar prop as the Alert icon override (no default status icon when avatar set)', () => {
+    const Avatar = () => <span data-testid="user-avatar" />
+    const { container } = render(<Notification title="t" avatar={<Avatar />} />)
+    expect(screen.getByTestId('user-avatar')).toBeInTheDocument()
+    // No badge wrap because Alert sees `icon` prop and treats this as the leading visual
+    expect(container.querySelector('[data-slot="alert-icon-badge"]')).not.toBeNull()
+  })
+
+  it('dismissible defaults to true and fires onDismiss when X is clicked', () => {
+    const onDismiss = jest.fn()
+    render(<Notification title="t" onDismiss={onDismiss} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+    expect(onDismiss).toHaveBeenCalledTimes(1)
+  })
+
+  it('omits the dismiss button when dismissible is false', () => {
+    render(<Notification title="t" dismissible={false} />)
+    expect(screen.queryByRole('button', { name: 'Dismiss' })).toBeNull()
+  })
+
+  it('honors a custom dismissAriaLabel', () => {
+    render(<Notification title="t" dismissAriaLabel="Zamknij" />)
+    expect(screen.getByRole('button', { name: 'Zamknij' })).toBeInTheDocument()
+  })
+
+  it('forwards status to the underlying Alert', () => {
+    const { container } = render(<Notification status="success" title="Saved" />)
+    expect(container.querySelector('[data-slot="notification"]')).toHaveAttribute('data-status', 'success')
+  })
+
+  it('forwards style to the underlying Alert', () => {
+    const { container } = render(
+      <Notification status="warning" style="lighter" title="Heads up" />,
+    )
+    const alert = container.querySelector('[data-slot="notification"]')
+    expect(alert).toHaveAttribute('data-style', 'lighter')
+    expect(alert).toHaveClass('bg-status-warning-bg')
+  })
+
+  it('forwards refs to the underlying Alert wrapper div', () => {
+    const ref = React.createRef<HTMLDivElement>()
+    render(<Notification ref={ref} title="t" />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.getAttribute('data-slot')).toBe('notification')
+  })
+})