Browse Source

优化知识库管理页面的测试用例,增强对用户事件的集成,确保模态框和表单的交互逻辑正常。同时,更新表单提交逻辑,添加调试信息以便于后续排查,提升测试的准确性和稳定性,改善用户体验和代码可维护性。

zyh 8 months ago
parent
commit
56fcebf2ea
2 changed files with 109 additions and 52 deletions
  1. 104 51
      client/admin/pages_know_info.test.tsx
  2. 5 1
      client/admin/pages_know_info.tsx

+ 104 - 51
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(
         <QueryClientProvider client={queryClient}>
           <AuthProvider>
@@ -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 modal = await findByRole('dialog');
+        assertExists(modal, '未找到模态框');
         
-        const modalTitle = await findByText(/添加知识库文章/i);
+        const modalTitle = await within(modal).findByText(/添加知识库文章/i);
         assertExists(modalTitle, '未找到添加文章模态框');
-
-        debug(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 () => {
+          rows = await within(table).findAllByRole('row');
+          assert(rows.length === 2, '表格未刷新');
+        }, {
+          timeout: 1000 * 5,
+          onTimeout: () => new Error('等待表格刷新超时')
+        });
 
-        // 验证表格中是否出现新添加的文章
+        // 等待搜索结果并验证
         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('等待搜索结果超时')
+        });
+        
+        // 检查至少有一行包含"测试文章标题"
+        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);
 
-            console.log('hasNewArticle', hasNewArticle)
-            
-            assert(hasNewArticle, '新添加的文章未出现在表格中');
-          }, 
-          // {
-          //   timeout: 5000,
-          //   onTimeout: () => new Error('等待新文章出现在表格中超时')
-          // }
-        );
+        assert(hasMatch, '搜索结果中没有找到包含"测试文章标题"的文章');
       });
 
   // // 测试5: 分页功能

+ 5 - 1
client/admin/pages_know_info.tsx

@@ -107,6 +107,7 @@ export const KnowInfoPage = () => {
   
   // 处理表单提交
   const handleSubmit = async (values: Partial<KnowInfo>) => {
+    console.log('handleSubmit', values)
     try {
       const response = formMode === 'create'
         ? await KnowInfoAPI.createKnowInfo(values)
@@ -325,7 +326,10 @@ export const KnowInfoPage = () => {
       <Modal
         title={formMode === 'create' ? '添加知识库文章' : '编辑知识库文章'}
         open={modalVisible}
-        onOk={() => form.submit()}
+        onOk={() => {
+          console.log('onOk', form.getFieldsValue())
+          form.submit()
+        }}
         onCancel={() => setModalVisible(false)}
         width={800}
         okText="确定"