feat: 新增组件库

2026-08-21 21:47:00 +08:00 · 2026-08-18 15:29:13 +08:00
parent f93dc539e4
commit 89d388f661
39 changed files with 2630 additions and 141 deletions
@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ToastProvider,
+  TooltipProvider,
+  useToast
+} from '../../src/renderer/src/components/ui'
+
+function ToastDemo(): React.ReactElement {
+  const { toast } = useToast()
+  return (
+    <Button onClick={() => toast({ title: '已保存', description: '设置已更新' })}>显示通知</Button>
+  )
+}
+
+describe('TraceMemo UI infrastructure', () => {
+  it('restores focus after a dialog is closed with Escape', async () => {
+    const user = userEvent.setup()
+    render(
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>打开对话框</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogTitle>测试对话框</DialogTitle>
+          <Input aria-label="测试输入" />
+        </DialogContent>
+      </Dialog>
+    )
+
+    const trigger = screen.getByRole('button', { name: '打开对话框' })
+    await user.click(trigger)
+    expect(screen.getByRole('dialog', { name: '测试对话框' })).toBeVisible()
+
+    await user.keyboard('{Escape}')
+    expect(screen.queryByRole('dialog', { name: '测试对话框' })).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+  })
+
+  it('closes a popover when the user clicks outside', async () => {
+    const user = userEvent.setup()
+    render(
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button>打开菜单</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <p>菜单内容</p>
+        </PopoverContent>
+      </Popover>
+    )
+
+    await user.click(screen.getByRole('button', { name: '打开菜单' }))
+    expect(screen.getByText('菜单内容')).toBeVisible()
+    await user.click(document.body)
+    expect(screen.queryByText('菜单内容')).not.toBeInTheDocument()
+  })
+
+  it('renders toast notifications through the shared provider', async () => {
+    const user = userEvent.setup()
+    render(
+      <TooltipProvider>
+        <ToastProvider>
+          <ToastDemo />
+        </ToastProvider>
+      </TooltipProvider>
+    )
+
+    await user.click(screen.getByRole('button', { name: '显示通知' }))
+    expect(screen.getByText('已保存')).toBeVisible()
+    expect(screen.getByText('设置已更新')).toBeVisible()
+  })
+})