From 56fcebf2ea79dce8e0667ced6bddc0e0299e54ca Mon Sep 17 00:00:00 2001 From: zyh Date: Fri, 11 Apr 2025 14:34:15 +0000 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9F=A5=E8=AF=86=E5=BA=93?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=B5=8B=E8=AF=95?= =?UTF-8?q?=E7=94=A8=E4=BE=8B=EF=BC=8C=E5=A2=9E=E5=BC=BA=E5=AF=B9=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BA=8B=E4=BB=B6=E7=9A=84=E9=9B=86=E6=88=90=EF=BC=8C?= =?UTF-8?q?=E7=A1=AE=E4=BF=9D=E6=A8=A1=E6=80=81=E6=A1=86=E5=92=8C=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E7=9A=84=E4=BA=A4=E4=BA=92=E9=80=BB=E8=BE=91=E6=AD=A3?= =?UTF-8?q?=E5=B8=B8=E3=80=82=E5=90=8C=E6=97=B6=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E8=A1=A8=E5=8D=95=E6=8F=90=E4=BA=A4=E9=80=BB=E8=BE=91=EF=BC=8C?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B0=83=E8=AF=95=E4=BF=A1=E6=81=AF=E4=BB=A5?= =?UTF-8?q?=E4=BE=BF=E4=BA=8E=E5=90=8E=E7=BB=AD=E6=8E=92=E6=9F=A5=EF=BC=8C?= =?UTF-8?q?=E6=8F=90=E5=8D=87=E6=B5=8B=E8=AF=95=E7=9A=84=E5=87=86=E7=A1=AE?= =?UTF-8?q?=E6=80=A7=E5=92=8C=E7=A8=B3=E5=AE=9A=E6=80=A7=EF=BC=8C=E6=94=B9?= =?UTF-8?q?=E5=96=84=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E5=92=8C=E4=BB=A3?= =?UTF-8?q?=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 | 161 +++++++++++++++++--------- client/admin/pages_know_info.tsx | 6 +- 2 files changed, 112 insertions(+), 55 deletions(-) diff --git a/client/admin/pages_know_info.test.tsx b/client/admin/pages_know_info.test.tsx index 53b1cf1..68fed05 100644 --- a/client/admin/pages_know_info.test.tsx +++ b/client/admin/pages_know_info.test.tsx @@ -1,6 +1,6 @@ import { JSDOM } from 'jsdom' import React from 'react' -import {render, fireEvent, within, screen, waitFor, configure} from '@testing-library/react' +import {render, waitFor, within} from '@testing-library/react' import {userEvent} from '@testing-library/user-event' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { createBrowserRouter, RouterProvider, Navigate } from 'react-router' @@ -174,16 +174,13 @@ Deno.test({ try { - // 确保在正确的测试环境中设置 userEvent - const user = userEvent.setup({ - document: dom.window.document, - delay: 0 - }); // 渲染组件 const { findByText, findByPlaceholderText, queryByText, - findByRole, findAllByRole, findByLabelText, findAllByText, debug + findByRole, findAllByRole, findByLabelText, findAllByText, debug, + queryByRole + } = render( @@ -219,6 +216,12 @@ Deno.test({ // 测试2: 搜索表单功能 await t.step('搜索表单应正常工作', async () => { + // 确保在正确的测试环境中设置 userEvent + const user = userEvent.setup({ + document: dom.window.document, + delay: 0 + }); + // 直接查找标题搜索输入框和搜索按钮 const searchInput = await findByPlaceholderText(/请输入文章标题/i) as HTMLInputElement; const searchButton = await findByText(/搜 索/i); @@ -226,7 +229,6 @@ Deno.test({ assertExists(searchButton, '未找到搜索按钮'); // 输入搜索内容 - await user.type(searchInput, '数据分析') assertEquals(searchInput.value, '数据分析', '搜索输入框值未更新'); @@ -305,85 +307,136 @@ Deno.test({ // 测试4: 添加文章功能 await t.step('应能打开添加文章模态框', async () => { + // 确保在正确的测试环境中设置 userEvent + const user = userEvent.setup({ + document: dom.window.document, + delay: 0 + }); + const addButton = await findByText(/添加文章/i); assertExists(addButton, '未找到添加文章按钮'); await user.click(addButton); - - const modalTitle = await findByText(/添加知识库文章/i); - assertExists(modalTitle, '未找到添加文章模态框'); - debug(modalTitle) + // 找到模态框 + const modal = await findByRole('dialog'); + assertExists(modal, '未找到模态框'); + + const modalTitle = await within(modal).findByText(/添加知识库文章/i); + assertExists(modalTitle, '未找到添加文章模态框'); // 验证表单字段 - const titleInput = await findByLabelText(/文章标题/i); + const titleInput = await within(modal).findByPlaceholderText(/请输入文章标题/i); assertExists(titleInput, '未找到标题输入框'); + + const contentInput = await within(modal).findByPlaceholderText(/请输入文章内容/i); + assertExists(contentInput, '未找到文章内容输入框'); + + // 取消 + const cancelButton = await within(modal).findByText(/取 消/i); + assertExists(cancelButton, '未找到取消按钮'); + await user.click(cancelButton); + + // 验证模态框是否关闭 + await waitFor(async () => { + + const modalTitle = await within(modal).findByText(/添加知识库文章/i); + assertExists(!modalTitle, '模态框未关闭'); + }, { + timeout: 1000 * 5, + onTimeout: () => new Error('等待模态框关闭超时') + }); }); // 测试5: 完整添加文章流程 await t.step('应能完整添加一篇文章', async () => { + + // 确保在正确的测试环境中设置 userEvent + const user = userEvent.setup({ + document: dom.window.document, + delay: 0 + }); // 打开添加模态框 const addButton = await findByText(/添加文章/i); assertExists(addButton, '未找到添加文章按钮'); await user.click(addButton); - // 填写表单 - const titleInput = await findByLabelText(/文章标题/i) as HTMLInputElement; - const contentInput = await findByLabelText(/文章内容/i) as HTMLTextAreaElement; - const submitButton = await findByText(/确 定/i); + // 找到模态框 + const modal = await findByRole('dialog'); + assertExists(modal, '未找到模态框'); - assertExists(titleInput, '未找到标题输入框'); + const modalTitle = await within(modal).findByText(/添加知识库文章/i); + assertExists(modalTitle, '未找到添加文章模态框'); + + // 确保上一个测试的输入框值不会影响这个测试 + // 在模态框内查找标题和内容输入框 + const titleInput = await within(modal).findByPlaceholderText(/请输入文章标题/i) as HTMLInputElement; + const contentInput = await within(modal).findByPlaceholderText(/请输入文章内容/i) as HTMLTextAreaElement; + const submitButton = await within(modal).findByText(/确 定/i); + + assertExists(titleInput, '未找到模态框中的标题输入框'); assertExists(contentInput, '未找到文章内容输入框'); assertExists(submitButton, '未找到提交按钮'); - - await user.type(titleInput, '测试文章标题') - await user.type(contentInput, '这是测试文章内容') + // 先清空输入框，以防止之前的测试影响 + // await user.clear(titleInput); + // await user.clear(contentInput); - debug(titleInput) - debug(contentInput) - debug(submitButton) + // 输入新值 + await user.type(titleInput, '测试文章标题'); + await user.type(contentInput, '这是测试文章内容'); + + debug(titleInput); + debug(contentInput); + debug(submitButton); // 验证表单字段 - assertEquals(titleInput.value, '测试文章标题', '标题输入框值未更新'); + assertEquals(titleInput.value, '测试文章标题', '模态框中标题输入框值未更新'); assertEquals(contentInput.value, '这是测试文章内容', '内容输入框值未更新'); // 提交表单 await user.click(submitButton); + let rows: HTMLElement[] = []; - // // 验证提交后状态 - // await waitFor(() => { - // const successMessage = queryByText(/添加成功/i); - // assertExists(successMessage, '未显示添加成功提示'); - // }); + + const table = await findByRole('table'); + assertExists(table, '未找到数据表格'); - // // 验证模态框已关闭 - // await waitFor(() => { - // const modalTitle = queryByText(/添加知识库文章/i); - // assertEquals(modalTitle, null, '添加模态框未关闭'); - // }); - - // 验证表格中是否出现新添加的文章 + // 等待表格刷新并验证 await waitFor(async () => { - const table = await findByRole('table'); - const rows = await within(table).findAllByRole('row'); - - const hasNewArticle = rows.some(async row => { - // 使用更通用的选择器来查找包含文本的单元格 - const cells = await within(row).findAllByRole('cell') - return cells.some(cell => cell.textContent?.includes('测试文章标题')); - }); + rows = await within(table).findAllByRole('row'); + assert(rows.length === 2, '表格未刷新'); + }, { + timeout: 1000 * 5, + onTimeout: () => new Error('等待表格刷新超时') + }); - console.log('hasNewArticle', hasNewArticle) - - assert(hasNewArticle, '新添加的文章未出现在表格中'); - }, - // { - // timeout: 5000, - // onTimeout: () => new Error('等待新文章出现在表格中超时') - // } - ); + // 等待搜索结果并验证 + await waitFor(async () => { + rows = await within(table).findAllByRole('row'); + assert(rows.length > 2, '表格没有数据'); + }, { + timeout: 1000 * 5, + onTimeout: () => new Error('等待搜索结果超时') + }); + + // 检查至少有一行包含"测试文章标题" + const matchResults = await Promise.all(rows.map(async row => { + try{ + const cells = await within(row).findAllByRole('cell'); + return cells.some(cell => { + return cell.textContent?.includes('测试文章标题') + }); + } catch (error: unknown) { + // console.error('搜索结果获取失败', error) + return false + } + })) + // console.log('matchResults', matchResults) + const hasMatch = matchResults.some(result => result); + + assert(hasMatch, '搜索结果中没有找到包含"测试文章标题"的文章'); }); // // 测试5: 分页功能 diff --git a/client/admin/pages_know_info.tsx b/client/admin/pages_know_info.tsx index d2ef32a..35217f5 100644 --- a/client/admin/pages_know_info.tsx +++ b/client/admin/pages_know_info.tsx @@ -107,6 +107,7 @@ export const KnowInfoPage = () => { // 处理表单提交 const handleSubmit = async (values: Partial) => { + console.log('handleSubmit', values) try { const response = formMode === 'create' ? await KnowInfoAPI.createKnowInfo(values) @@ -325,7 +326,10 @@ export const KnowInfoPage = () => { form.submit()} + onOk={() => { + console.log('onOk', form.getFieldsValue()) + form.submit() + }} onCancel={() => setModalVisible(false)} width={800} okText="确定"