@csntgao/uni-base 0.1.0

package/packages/web-components/tests/notification-center.test.ts

@@ -0,0 +1,429 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type {
+  NotificationCenterTransport,
+  NotificationDto,
+  NotificationRealtimeChange,
+} from '@uniplat/ai-employee-client'
+import '../src'
+import { UniplatNotificationCenter } from '../src'
+
+function notification(overrides: Partial<NotificationDto> = {}): NotificationDto {
+  return {
+    id: overrides.id ?? 'n1',
+    type: overrides.type ?? 'report',
+    typeName: overrides.typeName ?? '报告',
+    title: overrides.title ?? '5月人事月报已生成',
+    summary: overrides.summary ?? '含在职、入离职、合规、薪酬',
+    content: overrides.content ?? '正文内容',
+    contentType: overrides.contentType ?? 'text',
+    priority: overrides.priority ?? 'normal',
+    source: overrides.source ?? {
+      type: 'ai_employee',
+      code: 'analyst',
+      id: '',
+      name: '数据分析师',
+      avatarUrl: '',
+    },
+    resources: overrides.resources ?? [],
+    attachments: overrides.attachments ?? [],
+    readStatus: overrides.readStatus ?? 'unread',
+    readAt: overrides.readAt ?? null,
+    archivedAt: overrides.archivedAt ?? null,
+    createdAt: overrides.createdAt ?? '2026-05-30T16:35:00.000Z',
+    expiresAt: overrides.expiresAt ?? null,
+  }
+}
+
+function makeTransport(
+  items: NotificationDto[],
+  overrides: Partial<NotificationCenterTransport> = {},
+) {
+  return {
+    listInbox: vi.fn(async () => ({ items, hasMore: false, nextId: null })),
+    getUnreadCount: vi.fn(async () => ({
+      unreadCount: items.filter((i) => i.readStatus === 'unread').length,
+    })),
+    markRead: vi.fn(async () => ({ unreadCount: 0, readAt: '2026-05-30T17:00:00.000Z' })),
+    markAllRead: vi.fn(async () => ({ markedCount: 1, unreadCount: 0 })),
+    downloadAttachment: vi.fn(async () => new Blob(['file'])),
+    ...overrides,
+  } satisfies NotificationCenterTransport
+}
+
+function tabLabels(component: UniplatNotificationCenter): string[] {
+  return Array.from(
+    component.shadowRoot?.querySelectorAll('.tab') ?? [],
+    (node) => node.textContent?.trim() ?? '',
+  )
+}
+
+async function mount(
+  items: NotificationDto[],
+  overrides: Partial<NotificationCenterTransport> = {},
+) {
+  const transport = makeTransport(items, overrides)
+  const component = document.createElement('uniplat-notification-center')
+  component.configure({ applicationName: 'HrSaas', transport })
+  document.body.append(component)
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  await component.updateComplete
+  return { component, transport }
+}
+
+describe('<uniplat-notification-center>', () => {
+  afterEach(() => document.body.replaceChildren())
+
+  it('registers, exports the class and renders the notification center panel', async () => {
+    const { component } = await mount([notification()])
+    expect(customElements.get('uniplat-notification-center')).toBeTruthy()
+    expect(component).toBeInstanceOf(UniplatNotificationCenter)
+    const root = component.shadowRoot
+    expect(root?.querySelector('.topbar-title')?.textContent).toContain('通知中心')
+    expect(root?.querySelector('.topbar-subtitle')).toBeNull()
+    expect(root?.textContent).not.toContain('数字员工推送的提醒与报告')
+    expect(root?.querySelector('.mark-all')?.textContent).toContain('全部标已读')
+    // 页签由数据里实际出现的分类决定，展示名来自后端 notification_type_name。
+    expect(tabLabels(component)).toEqual(['全部', '报告'])
+    expect(root?.querySelector('.list-count')?.textContent).toContain('条')
+    expect(root?.querySelector('.nc-item-title')?.textContent).toContain('5月人事月报已生成')
+    expect(root?.querySelector('.unread-dot')).toBeTruthy()
+  })
+
+  it('builds the category tabs from the backend facets with backend display names', async () => {
+    const listInbox = vi.fn(async (query: { notificationTypes?: readonly string[] }) => {
+      const types = query.notificationTypes ?? []
+      const all = [
+        notification({ id: 'n1', type: 'alert', typeName: '预警' }),
+        notification({ id: 'n2', type: 'sales_lead_assigned', typeName: '新线索' }),
+        // 后端字典没登记该码时 notification_type_name 为空，页签回退到原始 code。
+        notification({ id: 'n3', type: 'interview', typeName: '' }),
+      ]
+      const items = types.length ? all.filter((item) => types.includes(item.type)) : all
+      return {
+        items,
+        hasMore: false,
+        nextId: null,
+        types: [
+          { type: 'alert', name: '预警' },
+          { type: 'sales_lead_assigned', name: '新线索' },
+          { type: 'interview', name: '' },
+        ],
+      }
+    })
+    const { component, transport } = await mount([], {
+      listInbox: listInbox as unknown as NotificationCenterTransport['listInbox'],
+    })
+    expect(transport.listInbox).toHaveBeenCalledWith(
+      expect.objectContaining({ includeTypeFacets: true }),
+    )
+    expect(tabLabels(component)).toEqual(['全部', '预警', '新线索', 'interview'])
+
+    const interviewTab = component.shadowRoot?.querySelectorAll<HTMLButtonElement>('.tab')[3]
+    interviewTab?.click()
+    await vi.waitFor(() =>
+      expect(transport.listInbox).toHaveBeenLastCalledWith(
+        expect.objectContaining({ notificationTypes: ['interview'] }),
+      ),
+    )
+    await component.updateComplete
+    // 服务端只回该分类，页签集合不能因此塌缩。
+    expect(tabLabels(component)).toEqual(['全部', '预警', '新线索', 'interview'])
+    expect(component.shadowRoot?.querySelectorAll('.nc-item')).toHaveLength(1)
+    expect(component.shadowRoot?.querySelector('.nc-item-sub')?.textContent).toContain('interview')
+  })
+
+  it('falls back to page-local types when the backend sends no facets', async () => {
+    const { component } = await mount([notification({ id: 'n1', type: 'todo', typeName: '待办' })])
+    expect(tabLabels(component)).toEqual(['全部', '待办'])
+    expect(component.shadowRoot?.querySelector('.notice')).toBeNull()
+  })
+
+  it('keeps no built-in Chinese name for the documented codes', async () => {
+    // 展示名只能来自数据：typeName 为空时必须显示原始 code，不得回落到内置中文名。
+    const { component } = await mount([
+      notification({ id: 'n1', type: 'alert', typeName: '', readStatus: 'read' }),
+    ])
+    expect(tabLabels(component)).toEqual(['全部', 'alert'])
+    expect(component.shadowRoot?.querySelector('.nc-item-sub')?.textContent).toContain('alert')
+    expect(component.shadowRoot?.innerHTML ?? '').not.toContain('预警')
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.nc-item')?.click()
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.info-card')?.textContent).toContain('alert')
+  })
+
+  it('keeps the prototype structure: row list, single detail card, typed tone and file tile', async () => {
+    const { component } = await mount([
+      notification({ id: 'n1', type: 'care', typeName: '关怀', readStatus: 'read' }),
+      notification({
+        id: 'n2',
+        type: 'report',
+        readStatus: 'read',
+        resources: [{ type: 'service_order', id: 'so-9', title: '服务单 A', aeCode: '' }],
+        attachments: [
+          {
+            fileId: 'f1',
+            versionId: '',
+            name: 'Q2资料完整度巡检报告.pdf',
+            sizeBytes: 1638,
+            mimeType: 'application/pdf',
+          },
+        ],
+      }),
+    ])
+    const root = component.shadowRoot
+    // 原型 .inbox-item 是整行（分隔线 + 左侧选中条），不是浮动圆角卡片。
+    const styles = UniplatNotificationCenter.styles?.toString() ?? ''
+    expect(styles).toContain('border-bottom: 1px solid #f0f4f9')
+    // 原型 .notif-icon-wrap 的 alert-i 是橙色、report-i 是靛蓝、关怀走 info-i。
+    expect(styles).toContain('.detail-badge.alert')
+    expect(styles).not.toContain('.detail-badge.success')
+
+    root?.querySelectorAll<HTMLButtonElement>('.nc-item')[0]?.click()
+    await component.updateComplete
+    // 关怀沿用原型 info-i 蓝底
+    expect(root?.querySelector('.detail-badge')?.className).toContain('info')
+
+    root?.querySelectorAll<HTMLButtonElement>('.nc-item')[1]?.click()
+    await component.updateComplete
+    // 原型 .detail-card：详情整体是一张白卡，各区块在卡内
+    const card = root?.querySelector('.detail-card')
+    expect(card).toBeTruthy()
+    expect(card?.querySelectorAll('.section-title')).toHaveLength(4)
+    expect(root?.querySelector('.detail-badge')?.className).toContain('report')
+    // 原型 .order-item 右侧「查看 →」胶囊与 .file-icon 图标块
+    expect(root?.querySelector('.resource-status')?.textContent).toContain('查看')
+    expect(root?.querySelector('.attachment-icon')?.textContent?.trim()).toBe('📕')
+  })
+
+  it('formats timestamps with the prototype 今天/昨天/月日 forms', async () => {
+    const now = new Date()
+    const yesterday = new Date(now.getTime() - 86_400_000)
+    // 60 天前一定不落在今天/昨天分支，且不依赖测试运行的具体日历日。
+    const older = new Date(now.getTime() - 60 * 86_400_000)
+    const { component } = await mount([
+      notification({ id: 'a', createdAt: now.toISOString() }),
+      notification({ id: 'b', createdAt: yesterday.toISOString() }),
+      notification({ id: 'c', createdAt: older.toISOString() }),
+    ])
+    const times = Array.from(
+      component.shadowRoot?.querySelectorAll('.nc-item-time') ?? [],
+      (node) => node.textContent?.trim() ?? '',
+    )
+    expect(times[0]).toMatch(/^今天 \d{2}:\d{2}$/)
+    expect(times[1]).toMatch(/^昨天 \d{2}:\d{2}$/)
+    // 原型第三种形式是「M月D日 HH:mm」，跨年才补年份；不使用星期或 ISO 日期。
+    const sameYear = older.getFullYear() === now.getFullYear()
+    expect(times[2]).toMatch(
+      sameYear ? /^\d{1,2}月\d{1,2}日 \d{2}:\d{2}$/ : /^\d{4}年\d{1,2}月\d{1,2}日 \d{2}:\d{2}$/,
+    )
+    expect(times[2]).toContain(`${older.getMonth() + 1}月${older.getDate()}日`)
+  })
+
+  it('never opens a WebSocket and takes realtime updates from the host instead', async () => {
+    const openedSockets: string[] = []
+    const originalWebSocket = globalThis.WebSocket
+    class TrackingSocket {
+      constructor(url: string) {
+        openedSockets.push(url)
+      }
+    }
+    Object.defineProperty(globalThis, 'WebSocket', {
+      value: TrackingSocket,
+      configurable: true,
+      writable: true,
+    })
+    try {
+      const parseRealtimeEvent = vi.fn((): NotificationRealtimeChange => ({
+        kind: 'created',
+        notification: notification({ id: 'n2', type: 'alert', title: '社保缴纳异常' }),
+        unreadCount: 5,
+      }))
+      const unreadEvents: number[] = []
+      const { component, transport } = await mount([notification({ id: 'n1' })], {
+        parseRealtimeEvent,
+      })
+      component.addEventListener('unread-count-change', (event) =>
+        unreadEvents.push((event as CustomEvent<{ unreadCount: number }>).detail.unreadCount),
+      )
+      vi.mocked(transport.listInbox).mockClear()
+
+      component.applyRealtimeEvent({ event_type: 'notification_created', notification: {} })
+      await component.updateComplete
+
+      expect(openedSockets).toEqual([])
+      expect(parseRealtimeEvent).toHaveBeenCalledTimes(1)
+      expect(transport.listInbox).not.toHaveBeenCalled()
+      expect(component.shadowRoot?.querySelector('.nc-item-title')?.textContent).toContain(
+        '社保缴纳异常',
+      )
+      expect(unreadEvents).toContain(5)
+      expect(component.getUnreadCount()).toBe(5)
+    } finally {
+      Object.defineProperty(globalThis, 'WebSocket', {
+        value: originalWebSocket,
+        configurable: true,
+        writable: true,
+      })
+    }
+  })
+
+  it('refreshes the inbox when a host-fed event cannot be mapped', async () => {
+    const { component, transport } = await mount([notification()], {
+      parseRealtimeEvent: () => null,
+    })
+    vi.mocked(transport.listInbox).mockClear()
+    vi.mocked(transport.getUnreadCount).mockClear()
+    component.applyRealtimeEvent({ event_type: 'notification_unknown' })
+    await vi.waitFor(() => expect(transport.getUnreadCount).toHaveBeenCalledTimes(1))
+    expect(transport.listInbox).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores host-fed events before configure and after removal', async () => {
+    const bare = document.createElement('uniplat-notification-center')
+    expect(() => bare.applyRealtimeEvent({ event_type: 'notification_created' })).not.toThrow()
+
+    const { component, transport } = await mount([notification()], {
+      parseRealtimeEvent: () => null,
+    })
+    component.remove()
+    vi.mocked(transport.listInbox).mockClear()
+    expect(() => component.applyRealtimeEvent({ event_type: 'notification_created' })).not.toThrow()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    expect(transport.listInbox).not.toHaveBeenCalled()
+  })
+
+  it('marks an unread notification read on selection and emits a safe read event', async () => {
+    const readEvents: unknown[] = []
+    const { component, transport } = await mount([notification({ id: 'n1' })])
+    component.addEventListener('notification-read', (event) =>
+      readEvents.push((event as CustomEvent).detail),
+    )
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.nc-item')?.click()
+    await vi.waitFor(() => expect(transport.markRead).toHaveBeenCalledTimes(1))
+    expect(transport.markRead).toHaveBeenCalledWith({
+      notificationId: 'n1',
+      applicationName: 'HrSaas',
+    })
+    await component.updateComplete
+    expect(readEvents).toEqual([{ notificationId: 'n1' }])
+    // Detail area is populated with the基本信息 section.
+    expect(component.shadowRoot?.querySelector('.detail-title')?.textContent).toContain(
+      '5月人事月报',
+    )
+    expect(component.shadowRoot?.querySelector('.info-card')?.textContent).toContain('报告')
+  })
+
+  it('emits unread-count-change and disables 全部标已读 after marking all read', async () => {
+    const unreadEvents: number[] = []
+    const { component, transport } = await mount([notification({ id: 'n1' })])
+    component.addEventListener('unread-count-change', (event) =>
+      unreadEvents.push((event as CustomEvent<{ unreadCount: number }>).detail.unreadCount),
+    )
+    expect(component.getUnreadCount()).toBe(1)
+    const button = component.shadowRoot?.querySelector<HTMLButtonElement>('.mark-all')
+    expect(button?.disabled).toBe(false)
+    button?.click()
+    await vi.waitFor(() => expect(transport.markAllRead).toHaveBeenCalledTimes(1))
+    await component.updateComplete
+    // The recomputed unread count is emitted to the host and zeroes the badge.
+    expect(unreadEvents).toContain(0)
+    expect(component.getUnreadCount()).toBe(0)
+    expect(component.shadowRoot?.querySelector<HTMLButtonElement>('.mark-all')?.disabled).toBe(true)
+  })
+
+  it('requests host navigation for related resources with only safe business fields', async () => {
+    const details: unknown[] = []
+    const { component } = await mount([
+      notification({
+        readStatus: 'read',
+        resources: [{ type: 'service_order', id: 'so-9', title: '服务单 A', aeCode: '' }],
+      }),
+    ])
+    component.addEventListener('notification-resource-requested', (event) =>
+      details.push((event as CustomEvent).detail),
+    )
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.nc-item')?.click()
+    await component.updateComplete
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.resource-card')?.click()
+    expect(details).toEqual([{ resourceType: 'service_order', id: 'so-9' }])
+  })
+
+  it('downloads attachments through the transport', async () => {
+    const { component, transport } = await mount([
+      notification({
+        readStatus: 'read',
+        attachments: [
+          {
+            fileId: 'f1',
+            versionId: '',
+            name: '2026年5月人事月报.pdf',
+            sizeBytes: 1600,
+            mimeType: 'application/pdf',
+          },
+        ],
+      }),
+    ])
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.nc-item')?.click()
+    await component.updateComplete
+    expect(component.shadowRoot?.querySelector('.attachment-name')?.textContent).toContain(
+      '人事月报.pdf',
+    )
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.attachment-download')?.click()
+    await vi.waitFor(() => expect(transport.downloadAttachment).toHaveBeenCalledTimes(1))
+    expect(transport.downloadAttachment).toHaveBeenCalledWith({
+      fileId: 'f1',
+      name: '2026年5月人事月报.pdf',
+    })
+  })
+
+  it('renders markdown safely without injecting raw HTML', async () => {
+    const { component } = await mount([
+      notification({
+        readStatus: 'read',
+        contentType: 'markdown',
+        content: '**加粗** 与 [x](javascript:alert(1)) 与 <script>alert(2)</script>',
+      }),
+    ])
+    component.shadowRoot?.querySelector<HTMLButtonElement>('.nc-item')?.click()
+    await component.updateComplete
+    const content = component.shadowRoot?.querySelector('.content-card')
+    expect(content?.querySelector('strong')?.textContent).toContain('加粗')
+    // No script element is created and no javascript: anchor survives; raw
+    // markup is escaped to inert text rather than injected as HTML.
+    expect(content?.querySelector('script')).toBeNull()
+    expect(content?.querySelector('a')).toBeNull()
+    expect(content?.innerHTML ?? '').toContain('&lt;script&gt;')
+  })
+
+  it('keeps host-fed realtime payloads out of the DOM and public events', async () => {
+    const errors: unknown[] = []
+    const { component } = await mount([notification()], { parseRealtimeEvent: () => null })
+    component.addEventListener('error', (event) =>
+      errors.push((event as unknown as CustomEvent).detail),
+    )
+    component.applyRealtimeEvent({ event_type: 'notification_created', access_token: 'notify.jwt' })
+    await component.updateComplete
+    expect(component.outerHTML).not.toContain('notify.jwt')
+    expect(component.shadowRoot?.innerHTML ?? '').not.toContain('notify.jwt')
+    expect(JSON.stringify(errors)).not.toContain('notify.jwt')
+  })
+
+  it('surfaces a sanitized banner when the inbox request fails', async () => {
+    const { component } = await mount([], {
+      listInbox: vi.fn(async () => {
+        throw new Error('backend stack trace 5xx')
+      }) as unknown as NotificationCenterTransport['listInbox'],
+    })
+    await component.updateComplete
+    const notice = component.shadowRoot?.querySelector('.notice')?.textContent ?? ''
+    expect(notice).toContain('通知加载失败')
+    expect(notice).not.toContain('backend stack trace')
+  })
+
+  it('releases the client on disconnect without throwing', async () => {
+    const { component } = await mount([notification()])
+    expect(() => component.remove()).not.toThrow()
+  })
+})