@ploykit/ui 0.6.0 → 0.6.2

package/src/pages/workspace/__tests__/SchedulesPage.test.tsx

@@ -0,0 +1,239 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { SchedulesPage } from '../SchedulesPage'
+import { browserTzLabel, formatDateTimeTz } from '../../../lib/utils'
+
+
+
+const apiMocks = vi.hoisted(() => ({
+  get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn(),
+}))
+vi.mock('../../../../../hooks/src/hooks/useApi', () => ({ useApi: () => apiMocks }))
+
+const clientPost = vi.hoisted(() => vi.fn())
+vi.mock('@ploykit/client', () => {
+  class ApiError extends Error {
+    status: number
+    code?: string
+    constructor(status: number, code: string | undefined, message: string) {
+      super(message)
+      this.status = status
+      this.code = code
+    }
+  }
+  return {
+    api: { post: clientPost },
+    ApiError,
+    setWorkspaceIdProvider: vi.fn(),
+  }
+})
+
+vi.mock('../../../../../hooks/src/hooks/useWorkspace', () => ({
+  useWorkspace: () => ({
+    current: { id: 'ws-1', name: 'Acme', slug: 'acme', plan_code: 'free', role: 'owner' },
+    switchTo: vi.fn(),
+    clear: vi.fn(),
+  }),
+}))
+
+
+
+const confirmMock = vi.hoisted(() => ({ calls: [] as Array<{ title?: string; description?: string }>, ret: true }))
+vi.mock('../../../components/ConfirmDialog', () => ({
+  useConfirm: () => async (opts: { title?: string; description?: string }) => {
+    confirmMock.calls.push(opts)
+    return confirmMock.ret
+  },
+}))
+
+const toastMocks = vi.hoisted(() => ({
+  success: vi.fn(), error: vi.fn(), info: vi.fn(),
+}))
+vi.mock('../../../components/toast', () => ({ toast: toastMocks }))
+
+function renderPage() {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } })
+  return render(
+    <QueryClientProvider client={qc}>
+      <SchedulesPage />
+    </QueryClientProvider>,
+  )
+}
+
+const plan = {
+  id: 'plan-1', workspace_id: 'ws-1', kind: 'task.cleanup',
+  cron_expr: '0 9 * * *', timezone: 'Asia/Shanghai',
+  next_fire_at: '2026-10-07T01:00:00Z', misfire: 'skip',
+  last_fired_at: null, created_at: '2026-10-06T00:00:00Z', enabled: true,
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  confirmMock.calls.length = 0
+  confirmMock.ret = true
+  apiMocks.get.mockImplementation(async (path: string) => {
+    if (path === '/api/schedules') return { items: [plan] }
+    throw new Error('unexpected GET ' + path)
+  })
+  apiMocks.post.mockResolvedValue(plan)
+  apiMocks.patch.mockResolvedValue({ ...plan, enabled: false })
+  apiMocks.delete.mockResolvedValue(undefined)
+  clientPost.mockResolvedValue({ items: ['2026-10-07T01:00:00Z', '2026-10-08T01:00:00Z', '2026-10-09T01:00:00Z'] })
+})
+
+describe('SchedulesPage（调度页：列表/启停/新建）', () => {
+  it('渲染计划表（kind/表达式/时区/错过策略/下次触发/Switch）', async () => {
+    renderPage()
+    expect(await screen.findByText('task.cleanup')).toBeInTheDocument()
+    expect(screen.getByText('0 9 * * *')).toBeInTheDocument()
+    expect(screen.getByText('Asia/Shanghai')).toBeInTheDocument()
+    expect(screen.getByText('错过跳过')).toBeInTheDocument()
+    expect(screen.getByText('每天 09:00')).toBeInTheDocument() 
+    expect(screen.getByRole('switch', { name: /停用计划 task.cleanup/ })).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('Switch 停用 → PATCH /api/schedules/{id} {enabled:false}', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByRole('switch', { name: /停用计划/ }))
+    await waitFor(() =>
+      expect(apiMocks.patch).toHaveBeenCalledWith('/api/schedules/plan-1', { enabled: false }),
+    )
+    await waitFor(() => expect(toastMocks.success).toHaveBeenCalled())
+  })
+
+  it('新建计划：填 kind + CronInput 预览 + 提交 POST /api/schedules', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: /创建计划/ }))
+
+    fireEvent.change(await screen.findByLabelText('触发标识（kind）'), {
+      target: { value: 'task.cleanup' },
+    })
+
+    
+    fireEvent.change(screen.getByLabelText('Cron 表达式'), { target: { value: '0 9 * * *' } })
+    fireEvent.click(screen.getByRole('button', { name: /预览下次 3 次/ }))
+    await waitFor(() =>
+      expect(clientPost).toHaveBeenCalledWith('/api/schedules/preview', {
+        cron_expr: '0 9 * * *',
+        timezone: expect.any(String),
+        count: 3,
+      }),
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: '创建计划' }))
+    await waitFor(() =>
+      expect(apiMocks.post).toHaveBeenCalledWith('/api/schedules', {
+        kind: 'task.cleanup',
+        cron_expr: '0 9 * * *',
+        timezone: expect.any(String),
+        misfire: 'skip',
+      }),
+    )
+    await waitFor(() => expect(toastMocks.success).toHaveBeenCalled())
+  })
+
+  it('空态：无计划时显示引导', async () => {
+    apiMocks.get.mockResolvedValue({ items: [] })
+    renderPage()
+    expect(await screen.findByText('暂无调度计划')).toBeInTheDocument()
+  })
+
+  
+
+  it('删除：确认弹窗回显 kind+下次触发+不可恢复，放行后 DELETE /api/schedules/{id}', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: '删除' }))
+
+    
+    expect(confirmMock.calls.length).toBe(1)
+    expect(confirmMock.calls[0].title).toBe('删除调度计划')
+    expect(confirmMock.calls[0].description).toContain('task.cleanup')
+    expect(confirmMock.calls[0].description).toContain('每天 09:00')
+    expect(confirmMock.calls[0].description).toContain('Asia/Shanghai')
+    expect(confirmMock.calls[0].description).toContain('不可恢复')
+
+    await waitFor(() => expect(apiMocks.delete).toHaveBeenCalledWith('/api/schedules/plan-1'))
+    await waitFor(() => expect(toastMocks.success).toHaveBeenCalledWith('计划 task.cleanup 已删除'))
+  })
+
+  it('删除：确认取消时不发 DELETE', async () => {
+    confirmMock.ret = false
+    renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: '删除' }))
+    await waitFor(() => expect(confirmMock.calls.length).toBe(1))
+    expect(apiMocks.delete).not.toHaveBeenCalled()
+  })
+
+  
+
+  it('编辑：对话框回填行值（kind 只读），改 cron 提交 PATCH 只含改动字段', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: '编辑' }))
+
+    
+    const kindInput = await screen.findByLabelText('触发标识（kind，不可修改）')
+    expect(kindInput).toHaveValue('task.cleanup')
+    expect(kindInput).toBeDisabled()
+    expect(screen.getByLabelText('Cron 表达式')).toHaveValue('0 9 * * *')
+
+    
+    fireEvent.change(screen.getByLabelText('Cron 表达式'), { target: { value: '30 8 * * 1' } })
+    fireEvent.click(screen.getByRole('button', { name: '保存修改' }))
+
+    await waitFor(() =>
+      expect(apiMocks.patch).toHaveBeenCalledWith('/api/schedules/plan-1', { cron_expr: '30 8 * * 1' }),
+    )
+    await waitFor(() => expect(toastMocks.success).toHaveBeenCalled())
+  })
+
+  it('编辑：无改动提交直接关窗，不发 PATCH', async () => {
+    renderPage()
+    fireEvent.click(await screen.findByRole('button', { name: '编辑' }))
+    await screen.findByLabelText('触发标识（kind，不可修改）')
+    fireEvent.click(screen.getByRole('button', { name: '保存修改' }))
+    await waitFor(() => expect(screen.queryByLabelText('触发标识（kind，不可修改）')).not.toBeInTheDocument())
+    expect(apiMocks.patch).not.toHaveBeenCalled()
+  })
+
+  
+
+  it('下次触发正文带 (GMT±X) 口径，title 提示计划时区与显示口径', async () => {
+    renderPage()
+    
+    expect(await screen.findByText(formatDateTimeTz(plan.next_fire_at))).toBeInTheDocument()
+    
+    
+    const labeled = screen.getByTitle(`计划时区 Asia/Shanghai；此处按浏览器本地时区（${browserTzLabel()}）显示`)
+    expect(labeled).toHaveTextContent(formatDateTimeTz(plan.next_fire_at))
+  })
+
+  it('最近触发同样带口径标注（有值行）', async () => {
+    apiMocks.get.mockImplementation(async (path: string) => {
+      if (path === '/api/schedules') {
+        return { items: [{ ...plan, last_fired_at: '2026-10-06T01:00:00Z' }] }
+      }
+      throw new Error('unexpected GET ' + path)
+    })
+    renderPage()
+    expect(await screen.findByText(formatDateTimeTz('2026-10-06T01:00:00Z'))).toBeInTheDocument()
+  })
+
+  
+
+  it('kind code 带 break-all + max-w 收纳（100 字符边界不再把列推出视口）', async () => {
+    apiMocks.get.mockImplementation(async (path: string) => {
+      if (path === '/api/schedules') {
+        const longKind = 'a'.repeat(100)
+        return { items: [{ ...plan, kind: longKind }] }
+      }
+      throw new Error('unexpected GET ' + path)
+    })
+    renderPage()
+    const code = await screen.findByText('a'.repeat(100))
+    expect(code.tagName).toBe('CODE')
+    expect(code).toHaveClass('break-all')
+    expect(code.className).toContain('max-w-')
+  })
+})

package/src/pages/workspace/__tests__/UsagePage.test.tsx

@@ -0,0 +1,223 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { MemoryRouter } from 'react-router'
+import { UsagePage } from '../UsagePage'
+
+const usageMocks = vi.hoisted(() => ({ useUsage: vi.fn() }))
+vi.mock('../../../../../hooks/src/hooks/useUsage', () => ({ useUsage: usageMocks.useUsage }))
+
+const usage = {
+  workspace_id: 'ws-1',
+  plan_code: 'starter',
+  period: '2026-10',
+  items: [
+    { key: 'tasks_monthly', limit: 1000, used: 250, granted: 0, period: '2026-10' },
+    { key: 'seats', limit: -1, used: 3, granted: 0, period: '2026-10' },
+  ],
+}
+
+
+const usageWithReserved = {
+  workspace_id: 'ws-1',
+  plan_code: 'pro',
+  period: '2026-10',
+  items: [
+    {
+      key: 'tasks_monthly', limit: 1000, used: 250, granted: 0, reserved: 120, period: '2026-10',
+      reservations: [
+        { id: 'rsv-1', amount: 80, status: 'reserved', expires_at: '2026-10-07T12:34:56Z' },
+        { id: 'rsv-2', amount: 40, status: 'reserved', expires_at: '2026-10-07T09:00:00Z' },
+      ],
+    },
+    
+    { key: 'seats', limit: 10, used: 2, granted: 0, reserved: 0, period: '2026-10' },
+  ],
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('UsagePage', () => {
+  it('加载中显示 PageLoading', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1', usage: null, loading: true, error: null, refetch: vi.fn(),
+    })
+    render(<UsagePage />)
+    expect(screen.getByText('加载用量数据…')).toBeInTheDocument()
+  })
+
+  it('按维度渲染卡片：used/limit 进度，limit=-1 显示“不限量”', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1', usage, loading: false, error: null, refetch: vi.fn(),
+    })
+    render(
+      <MemoryRouter>
+        <UsagePage />
+      </MemoryRouter>,
+    )
+
+    
+    expect(screen.getAllByText('任务数（本月）').length).toBeGreaterThanOrEqual(1)
+    
+    expect(screen.getByText(/250 \/ 1,000/)).toBeInTheDocument()
+    expect(screen.getAllByRole('progressbar')).toHaveLength(2)
+
+    
+    expect(screen.getByText('不限量')).toBeInTheDocument()
+    expect(screen.getByText(/3 \/ ∞/)).toBeInTheDocument()
+
+    
+    expect(screen.getByText(/starter/)).toBeInTheDocument()
+    expect(screen.getByText(/2026-10/)).toBeInTheDocument()
+  })
+
+  it('B2：卡内正文不出现原始 API 键，中文标签进卡题与进度行，原始键留 title 悬停', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1', usage, loading: false, error: null, refetch: vi.fn(),
+    })
+    render(
+      <MemoryRouter>
+        <UsagePage />
+      </MemoryRouter>,
+    )
+
+    
+    expect(screen.queryByText('tasks_monthly')).not.toBeInTheDocument()
+    expect(screen.queryByText('seats')).not.toBeInTheDocument()
+
+    
+    expect(screen.getByTitle('tasks_monthly')).toBeInTheDocument()
+
+    
+    const card = screen.getByTitle('tasks_monthly').closest('div[data-slot="card"]')
+    expect(card).toBeTruthy()
+    expect(within(card as HTMLElement).getAllByText('任务数（本月）').length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('B6：大数字千分位（12,500 / 50,000）', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1',
+      usage: {
+        workspace_id: 'ws-1',
+        plan_code: 'free',
+        period: '2026-10',
+        items: [
+          { key: 'tasks_monthly', limit: 50000, used: 12500, granted: 0, period: '2026-10' },
+        ],
+      },
+      loading: false, error: null, refetch: vi.fn(),
+    })
+    render(
+      <MemoryRouter>
+        <UsagePage />
+      </MemoryRouter>,
+    )
+    expect(screen.getByText(/12,500 \/ 50,000/)).toBeInTheDocument()
+  })
+
+  it('已满卡片：已用尽徽标 + 升级 CTA（文案不承诺“将被拒绝”）+ 命中区 ≥24px 补偿', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1',
+      usage: {
+        workspace_id: 'ws-1',
+        plan_code: 'free',
+        period: '2026-10',
+        items: [
+          
+          { key: 'workspaces', limit: 1, used: 3, granted: 0, period: '2026-10' },
+        ],
+      },
+      loading: false, error: null, refetch: vi.fn(),
+    })
+    render(
+      <MemoryRouter>
+        <UsagePage />
+      </MemoryRouter>,
+    )
+
+    expect(screen.getByText('已用尽')).toBeInTheDocument()
+    expect(screen.getByText(/已用尽，可升级套餐提高上限/)).toBeInTheDocument()
+    expect(screen.queryByText(/超额操作将被拒绝/)).not.toBeInTheDocument()
+
+    
+    const link = screen.getByRole('link', { name: '升级套餐' })
+    expect(link.getAttribute('href')).toBe('/settings/workspace/billing')
+    expect(link.className).toContain('py-1.5')
+    expect(link.className).toContain('-my-1.5')
+  })
+
+  it('reserved 缺省（老后端/未重生成类型）→ 回退两段展示，无“预留中”段落', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1', usage, loading: false, error: null, refetch: vi.fn(),
+    })
+    render(<UsagePage />)
+
+    expect(screen.queryByText(/预留中/)).not.toBeInTheDocument()
+    expect(screen.queryByText(/预留明细/)).not.toBeInTheDocument()
+    expect(screen.getByText(/250 \/ 1,000/)).toBeInTheDocument()
+  })
+
+  it('三段展示：已用 / 预留中 / 上限（reserved>0 的维度渲染分段条与第三段数值）', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1', usage: usageWithReserved, loading: false, error: null, refetch: vi.fn(),
+    })
+    render(
+      <MemoryRouter>
+        <UsagePage />
+      </MemoryRouter>,
+    )
+
+    
+    const card = screen.getByTitle('tasks_monthly').closest('div[data-slot="card"]')
+    expect(card).toBeTruthy()
+    const scope = within(card as HTMLElement)
+
+    
+    expect(scope.getByText(/250/)).toBeInTheDocument()
+    expect(scope.getByText(/120/)).toBeInTheDocument()
+    expect(scope.getByText(/1,000/)).toBeInTheDocument()
+    expect(scope.getAllByText(/预留中/).length).toBeGreaterThan(0)
+
+    
+    expect(scope.getAllByRole('progressbar')).toHaveLength(1)
+    expect(scope.getByTestId('progress-indicator-used')).toBeInTheDocument()
+    expect(scope.getByTestId('progress-indicator-reserved')).toBeInTheDocument()
+
+    
+    const seats = screen.getByTitle('seats').closest('div[data-slot="card"]')
+    expect(within(seats as HTMLElement).queryByTestId('progress-indicator-reserved')).not.toBeInTheDocument()
+  })
+
+  it('预留明细可展开：数量/状态/到期时间（DataTable 复用）', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: 'ws-1', usage: usageWithReserved, loading: false, error: null, refetch: vi.fn(),
+    })
+    render(<UsagePage />)
+
+    const summary = screen.getByText('预留明细（2 笔）')
+    const details = summary.closest('details') as HTMLDetailsElement
+    expect(details).toBeTruthy()
+    expect(details.open).toBe(false)
+
+    
+    expect(screen.getByText('80')).toBeInTheDocument()
+    expect(screen.getByText('40')).toBeInTheDocument()
+    expect(screen.getByText('2026-10-07 12:34')).toBeInTheDocument()
+    expect(screen.getByText('2026-10-07 09:00')).toBeInTheDocument()
+    
+    expect(screen.getAllByText('预留中').length).toBeGreaterThanOrEqual(2)
+
+    fireEvent.click(summary)
+    expect(details.open).toBe(true)
+  })
+
+  it('无工作区上下文 → 引导空态', () => {
+    usageMocks.useUsage.mockReturnValue({
+      wsId: '', usage: null, loading: false, error: null, refetch: vi.fn(),
+    })
+    render(<UsagePage />)
+    expect(screen.getByText('请先创建并选择一个工作区')).toBeInTheDocument()
+  })
+})