zhangwenrui/material_manage_system
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 计划 Task 8 的组件测试片段补上 el-table 渲染时序

Browse Source 
原片段用同步的 mountResult 直接断言 tbody tr 的文本，但 el-table 分两轮渲染：
先注册列，下一轮才把单元格填上。只等一个 tick 时拿到的是空 tr，断言会以
"expected '' to contain '2'" 这种看不出原因的方式失败（实测撞到过）。

改成 async mountResult，内部 await 两轮 nextTick 并附上原因；三个用例跟着
改成 await 调用，导出那条也复用 mountResult 传 provide，不再内联 mount。
This commit is contained in:
文睿 张 2026-10-10 16:25:53 +08:00
parent c3835fb28d
commit 326cf77010
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/superpowers/plans/2026-10-10-material-bulk-import.md
View File

@ -2143,6 +2143,7 @@ git commit -m "feat: 物料导入前端接口与 CSV 导出工具"
```js ```js
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import { nextTick } from 'vue'
import { describe, expect, test, vi } from 'vitest' import { describe, expect, test, vi } from 'vitest'
import MaterialImportResult from './MaterialImportResult.vue' import MaterialImportResult from './MaterialImportResult.vue'
@ -2156,16 +2157,21 @@ const failedResult = {
] ]
} }
function mountResult(result) { // el-table 分两轮渲染：先注册列，下一轮才把单元格填上。只等一个 tick 的话
return mount(MaterialImportResult, { // 拿到的是空 <tr>，断言文本会莫名其妙地失败（实测过一次），所以统一等两轮。
async function mountResult(result, options = {}) {
const wrapper = mount(MaterialImportResult, {
props: { result }, props: { result },
global: { plugins: [ElementPlus], stubs: { teleport: true } } global: { plugins: [ElementPlus], stubs: { teleport: true }, ...options }
}) })
await nextTick()
await nextTick()
return wrapper
} }
describe('MaterialImportResult', () => { describe('MaterialImportResult', () => {
test('失败时展示行数摘要与每行错误', () => { test('失败时展示行数摘要与每行错误', async () => {
const wrapper = mountResult(failedResult) const wrapper = await mountResult(failedResult)
expect(wrapper.text()).toContain('共 3 行') expect(wrapper.text()).toContain('共 3 行')
expect(wrapper.text()).toContain('2 行未通过') expect(wrapper.text()).toContain('2 行未通过')
@ -2178,14 +2184,7 @@ describe('MaterialImportResult', () => {
test('导出错误明细时把行号与原因写进 CSV', async () => { test('导出错误明细时把行号与原因写进 CSV', async () => {
const download = vi.fn() const download = vi.fn()
const wrapper = mount(MaterialImportResult, { const wrapper = await mountResult(failedResult, { provide: { downloadCsv: download } })
props: { result: failedResult },
global: {
plugins: [ElementPlus],
stubs: { teleport: true },
provide: { downloadCsv: download }
}
})
await wrapper.find('[data-test="export-errors"]').trigger('click') await wrapper.find('[data-test="export-errors"]').trigger('click')
@ -2197,8 +2196,8 @@ describe('MaterialImportResult', () => {
wrapper.unmount() wrapper.unmount()
}) })
test('全部成功时只展示成功摘要，不显示错误表格', () => { test('全部成功时只展示成功摘要，不显示错误表格', async () => {
const wrapper = mountResult({ total_rows: 2, success_rows: 2, failed_rows: 0, errors: [] }) const wrapper = await mountResult({ total_rows: 2, success_rows: 2, failed_rows: 0, errors: [] })
expect(wrapper.text()).toContain('成功导入 2 条') expect(wrapper.text()).toContain('成功导入 2 条')
expect(wrapper.find('[data-test="error-table"]').exists()).toBe(false) expect(wrapper.find('[data-test="error-table"]').exists()).toBe(false)