@prenta/admin 2.6.1 → 2.7.0

package/src/__tests__/components/notification-bell.test.tsx

@@ -80,26 +80,58 @@ function createFakeApi() {
 }
 
 describe('NotificationBell — badge', () => {
-  it('shows the unread badge from the unread() call', async () => {
+  // The kit draws a dot, not a number (SHELL.md §3); the count is in the
+  // button's name.
+  it('shows the unread dot and puts the unread() count in the name', async () => {
     const fake = createFakeApi()
     fake.setRows([row(), row({ id: 'n-2' })])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 2 unread',
+      ),
+    )
+    const dot = screen.getByTestId('bell-badge')
+    expect(dot.textContent).toBe('')
+    expect(dot.getAttribute('aria-hidden')).toBe('true')
   })
 
-  it('hides the badge when count is 0', async () => {
+  it('hides the dot when count is 0', async () => {
     const fake = createFakeApi()
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
     // Let the initial unread() settle.
     await waitFor(() => expect(fake.api.unread).toHaveBeenCalled())
     expect(screen.queryByTestId('bell-badge')).toBeNull()
+    expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe('Notifications')
   })
 
-  it('clamps the badge at "99+"', async () => {
+  it('keeps the unread state under StrictMode (the dev app)', async () => {
+    // StrictMode unmounts and remounts once; the bell used to stay "unmounted"
+    // and drop every result, so the dot never showed in development.
+    const fake = createFakeApi()
+    fake.setRows([row()])
+    render(
+      <React.StrictMode>
+        <NotificationBell api={fake.api} pollIntervalMs={0} />
+      </React.StrictMode>,
+    )
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
+    expect(screen.getByTestId('bell-badge')).toBeTruthy()
+  })
+
+  it('clamps the count in the name at "99+"', async () => {
     const fake = createFakeApi()
     fake.setRows(Array.from({ length: 150 }, (_, i) => row({ id: `n-${i}` })))
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('99+'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 99+ unread',
+      ),
+    )
   })
 
   it('polls unread() at pollIntervalMs', async () => {
@@ -164,7 +196,11 @@ describe('NotificationBell — dropdown', () => {
     const onSelect = vi.fn()
     fake.setRows([row()])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} onSelect={onSelect} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
     await act(async () => {
@@ -181,7 +217,11 @@ describe('NotificationBell — dropdown', () => {
     const onError = vi.fn()
     fake.setRows([row()])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} onError={onError} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-n-1')).toBeTruthy())
     await act(async () => {
@@ -189,14 +229,22 @@ describe('NotificationBell — dropdown', () => {
     })
     expect(onError).toHaveBeenCalledWith('server')
     // The badge should bounce back to 1.
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
   })
 
   it('marks all read in one click and disables the button after', async () => {
     const fake = createFakeApi()
     fake.setRows([row(), row({ id: 'n-2' })])
     render(<NotificationBell api={fake.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('2'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 2 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-mark-all')).toBeTruthy())
     await act(async () => {
@@ -250,7 +298,11 @@ describe('NotificationBell — SSE push', () => {
     await act(async () => {
       wired.push(row({ id: 'sse-1' }))
     })
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
   })
 
   it('does not double-count a notification that arrives via both SSE and REST', async () => {
@@ -259,7 +311,11 @@ describe('NotificationBell — SSE push', () => {
     fake.setRows([row({ id: 'race' })])
     render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
     // Open the dropdown so the row is in `items` from the REST list.
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-race')).toBeTruthy())
     // Now push the same row via SSE — must NOT add a duplicate or
@@ -268,7 +324,9 @@ describe('NotificationBell — SSE push', () => {
       wired.push(row({ id: 'race' }))
     })
     expect(screen.getAllByTestId('bell-row-race')).toHaveLength(1)
-    expect(screen.getByTestId('bell-badge').textContent).toBe('1')
+    expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+      'Notifications, 1 unread',
+    )
   })
 
   it('prepends new pushed rows to the open dropdown', async () => {
@@ -276,7 +334,11 @@ describe('NotificationBell — SSE push', () => {
     const wired = withSubscribe(fake.api)
     fake.setRows([row({ id: 'old' })])
     render(<NotificationBell api={wired.api} pollIntervalMs={0} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-old')).toBeTruthy())
     await act(async () => {
@@ -336,7 +398,11 @@ describe('NotificationBell — SSE push', () => {
     )
     const onError = vi.fn()
     render(<NotificationBell api={wired.api} pollIntervalMs={0} onError={onError} />)
-    await waitFor(() => expect(screen.getByTestId('bell-badge').textContent).toBe('1'))
+    await waitFor(() =>
+      expect(screen.getByTestId('bell-button').getAttribute('aria-label')).toBe(
+        'Notifications, 1 unread',
+      ),
+    )
     fireEvent.click(screen.getByTestId('bell-button'))
     await waitFor(() => expect(screen.getByTestId('bell-row-before')).toBeTruthy())
 
@@ -377,3 +443,69 @@ describe('NotificationBell — SSE push', () => {
     expect(screen.queryByTestId('bell-badge')).toBeNull()
   })
 })
+
+/**
+ * P-04 review: the panel is a labelled, non-modal dialog that closes like
+ * one, not a `role="menu"` that only the bell could close.
+ */
+describe('NotificationBell — panel dismissal', () => {
+  async function openPanel() {
+    const fake = createFakeApi()
+    fake.setRows([row()])
+    render(
+      <>
+        <button type="button">Outside</button>
+        <NotificationBell api={fake.api} pollIntervalMs={0} />
+      </>,
+    )
+    const bell = screen.getByTestId('bell-button')
+    bell.focus()
+    fireEvent.click(bell)
+    const panel = await screen.findByRole('dialog', { name: 'Notifications' })
+    return { bell, panel }
+  }
+
+  it('is a labelled non-modal dialog the bell controls, not a menu', async () => {
+    const { bell, panel } = await openPanel()
+    expect(screen.queryByRole('menu')).toBeNull()
+    expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+    expect(panel.getAttribute('aria-modal')).toBeNull()
+    expect(bell.getAttribute('aria-haspopup')).toBe('dialog')
+    expect(bell.getAttribute('aria-expanded')).toBe('true')
+    expect(bell.getAttribute('aria-controls')).toBe(panel.id)
+    // Focus moves into the panel, so Tab continues through its controls.
+    await waitFor(() => expect(document.activeElement).toBe(panel))
+  })
+
+  it('closes on Esc and puts focus back on the bell', async () => {
+    const { bell, panel } = await openPanel()
+    fireEvent.keyDown(panel, { key: 'Escape' })
+    expect(screen.queryByTestId('bell-dropdown')).toBeNull()
+    expect(bell.getAttribute('aria-expanded')).toBe('false')
+    expect(document.activeElement).toBe(bell)
+  })
+
+  it('closes on a pointerdown outside without moving focus to the bell', async () => {
+    const { bell, panel } = await openPanel()
+    // A pointerdown inside the panel leaves it open.
+    fireEvent.pointerDown(panel)
+    expect(screen.getByTestId('bell-dropdown')).toBeTruthy()
+    const outside = screen.getByRole('button', { name: 'Outside' })
+    fireEvent.pointerDown(outside)
+    expect(screen.queryByTestId('bell-dropdown')).toBeNull()
+    expect(document.activeElement).not.toBe(bell)
+  })
+
+  it('closes when focus moves past it', async () => {
+    const { panel } = await openPanel()
+    const outside = screen.getByRole('button', { name: 'Outside' })
+    fireEvent.focusOut(panel, { relatedTarget: outside })
+    expect(screen.queryByTestId('bell-dropdown')).toBeNull()
+  })
+
+  it('stays open while focus moves inside it', async () => {
+    const { bell, panel } = await openPanel()
+    fireEvent.focusOut(bell, { relatedTarget: panel })
+    expect(screen.getByTestId('bell-dropdown')).toBeTruthy()
+  })
+})