From a31a7629c0b7fc368eea9f8fc107ee5e0d2823de Mon Sep 17 00:00:00 2001 From: zyh Date: Fri, 11 Apr 2025 07:40:10 +0000 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=B8=BB=E9=A2=98=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=B5=8B=E8=AF=95=E6=96=87?= =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=B8=85=E7=90=86=E4=B8=8D=E5=86=8D=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E4=BB=A3=E7=A0=81=EF=BC=8C=E6=8F=90=E5=8D=87?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=8F=AF=E7=BB=B4=E6=8A=A4=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/admin/pages_know_info.test.tsx | 148 ++++++++++++++++++ .../{test => }/pages_theme_setting.test.tsx | 4 +- 2 files changed, 150 insertions(+), 2 deletions(-) create mode 100644 client/admin/pages_know_info.test.tsx rename client/admin/{test => }/pages_theme_setting.test.tsx (97%) diff --git a/client/admin/pages_know_info.test.tsx b/client/admin/pages_know_info.test.tsx new file mode 100644 index 0000000..c2c8fe0 --- /dev/null +++ b/client/admin/pages_know_info.test.tsx @@ -0,0 +1,148 @@ +import { JSDOM } from 'jsdom' +import React from 'react' +import {render, fireEvent, within, screen, waitFor} from '@testing-library/react' +import { KnowInfoPage } from "./pages_know_info.tsx" +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + assertEquals, + assertExists, + assertNotEquals, + assertRejects, +} from "https://deno.land/std@0.217.0/assert/mod.ts"; + +const queryClient = new QueryClient() + +const dom = new JSDOM(``, { + runScripts: "dangerously", + pretendToBeVisual: true, + url: "http://localhost" +}); + +// 模拟浏览器环境 +globalThis.window = dom.window; +globalThis.document = dom.window.document; + +// 定义浏览器环境所需的类 +globalThis.Element = dom.window.Element; +globalThis.HTMLElement = dom.window.HTMLElement; +globalThis.ShadowRoot = dom.window.ShadowRoot; +globalThis.SVGElement = dom.window.SVGElement; + +// 模拟 getComputedStyle +globalThis.getComputedStyle = (elt) => { + const style = new dom.window.CSSStyleDeclaration(); + style.getPropertyValue = () => ''; + return style; +}; + +// 模拟matchMedia函数 +globalThis.matchMedia = (query) => ({ + matches: query.includes('max-width'), + media: query, + onchange: null, + addListener: () => {}, + removeListener: () => {}, + addEventListener: () => {}, + removeEventListener: () => {}, + dispatchEvent: () => false, +}); + +// 模拟动画相关API +globalThis.AnimationEvent = globalThis.AnimationEvent || dom.window.Event; +globalThis.TransitionEvent = globalThis.TransitionEvent || dom.window.Event; + +// 模拟requestAnimationFrame +globalThis.requestAnimationFrame = globalThis.requestAnimationFrame || ((cb) => setTimeout(cb, 0)); +globalThis.cancelAnimationFrame = globalThis.cancelAnimationFrame || clearTimeout; + +// 设置浏览器尺寸相关方法 +window.resizeTo = (width, height) => { + window.innerWidth = width || window.innerWidth; + window.innerHeight = height || window.innerHeight; + window.dispatchEvent(new Event('resize')); +}; +window.scrollTo = () => {}; + +const customScreen = within(document.body); + +// 使用异步测试处理组件渲染 +Deno.test('知识库管理页面测试', async (t) => { + // 渲染组件 + const { + findByText, findByPlaceholderText, queryByText, + findByRole, findAllByRole, findByLabelText, findAllByText + } = render( + + + + ); + + // 测试1: 基本渲染 + await t.step('应正确渲染页面元素', async () => { + const title = await findByText(/知识库管理/i); + assertExists(title, '未找到知识库管理标题'); + }); + + // 测试2: 搜索表单功能 + await t.step('搜索表单应正常工作', async () => { + const searchInput = await findByPlaceholderText(/请输入文章标题/i); + const searchButton = await findByText(/搜索/i); + + // 输入搜索内容 + fireEvent.change(searchInput, { target: { value: '测试' } }); + assertEquals(searchInput.getAttribute('value'), '测试', '搜索输入框值未更新'); + + // 提交搜索 + fireEvent.click(searchButton); + + // 验证是否触发了搜索 + await waitFor(() => { + const loading = queryByText(/加载中/i); + assertNotEquals(loading, null, '搜索未触发加载状态'); + }); + }); + + // 测试3: 表格数据加载 + await t.step('表格应加载并显示数据', async () => { + // 等待数据加载 + await waitFor(() => { + const loading = queryByText(/加载中/i); + assertEquals(loading, null, '数据加载未完成'); + }); + + // 验证表格存在 + const table = await findByRole('table'); + assertExists(table, '未找到数据表格'); + }); + + // 测试4: 添加文章功能 + await t.step('应能打开添加文章模态框', async () => { + const addButton = await findByText(/添加文章/i); + fireEvent.click(addButton); + + const modalTitle = await findByText(/添加知识库文章/i); + assertExists(modalTitle, '未找到添加文章模态框'); + + // 验证表单字段 + const titleInput = await findByLabelText(/文章标题/i); + assertExists(titleInput, '未找到标题输入框'); + }); + + // 测试5: 分页功能 + await t.step('应显示分页控件', async () => { + const pagination = await findByRole('navigation'); + assertExists(pagination, '未找到分页控件'); + + const pageItems = await findAllByRole('button', { name: /1|2|3|下一页|上一页/i }); + assertNotEquals(pageItems.length, 0, '未找到分页按钮'); + }); + + // 测试6: 操作按钮 + await t.step('应显示操作按钮', async () => { + const editButtons = await findAllByText(/编辑/i); + assertNotEquals(editButtons.length, 0, '未找到编辑按钮'); + + const deleteButtons = await findAllByText(/删除/i); + assertNotEquals(deleteButtons.length, 0, '未找到删除按钮'); + }); +}); \ No newline at end of file diff --git a/client/admin/test/pages_theme_setting.test.tsx b/client/admin/pages_theme_setting.test.tsx similarity index 97% rename from client/admin/test/pages_theme_setting.test.tsx rename to client/admin/pages_theme_setting.test.tsx index adc7f6c..3ed0d48 100644 --- a/client/admin/test/pages_theme_setting.test.tsx +++ b/client/admin/pages_theme_setting.test.tsx @@ -1,8 +1,8 @@ import { JSDOM } from 'jsdom' import React from 'react' import {render, fireEvent, within, screen} from '@testing-library/react' -import { ThemeSettingsPage } from "../pages_theme_settings.tsx" -import { ThemeProvider } from "../hooks_sys.tsx" +import { ThemeSettingsPage } from "./pages_theme_settings.tsx" +import { ThemeProvider } from "./hooks_sys.tsx" import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { assertEquals,