@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

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')
+  })
+})