test: cover project scroll loading and filter reset
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { NImage, NRadioGroup, NScrollbar } from 'naive-ui'
|
import { NDataTable, NImage, NRadioGroup, NScrollbar } from 'naive-ui'
|
||||||
import { createMemoryHistory, createRouter } from 'vue-router'
|
import { createMemoryHistory, createRouter } from 'vue-router'
|
||||||
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
|
import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
|
||||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||||
@@ -1444,6 +1444,51 @@ describe('工作台页面交互', () => {
|
|||||||
expect(wrapper.findAll('tbody tr')).toHaveLength(1)
|
expect(wrapper.findAll('tbody tr')).toHaveLength(1)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('项目列表滚动追加,搜索覆盖未展示项目且清除后回到首批', async () => {
|
||||||
|
const projects = Array.from({ length: 45 }, (_, index) => ({
|
||||||
|
...fixture,
|
||||||
|
id: 'project-' + index,
|
||||||
|
title: '剧本' + index
|
||||||
|
}))
|
||||||
|
const fetcher = vi.fn<typeof fetch>().mockImplementation(async () =>
|
||||||
|
new Response(JSON.stringify({ data: projects }))
|
||||||
|
)
|
||||||
|
vi.stubGlobal('fetch', fetcher)
|
||||||
|
const router = createRouter({
|
||||||
|
history: createMemoryHistory(),
|
||||||
|
routes: [{ path: '/', component: ProjectsPage }]
|
||||||
|
})
|
||||||
|
await router.push('/')
|
||||||
|
wrapper = mount(ProjectsPage, { attachTo: document.body, global: { plugins: [router] } })
|
||||||
|
await flushPromises()
|
||||||
|
const table = wrapper.getComponent(NDataTable)
|
||||||
|
expect(table.props('data')).toHaveLength(20)
|
||||||
|
expect(wrapper.find('.n-pagination').exists()).toBe(false)
|
||||||
|
expect(wrapper.text()).not.toContain('个项目')
|
||||||
|
expect(wrapper.text()).not.toContain('更新于')
|
||||||
|
// 远离底部不追加;抵达底部后逐批追加,末批不重复。
|
||||||
|
const scroll = async (scrollTop: number) => {
|
||||||
|
table.vm.$emit('scroll', { target: { scrollHeight: 1000, clientHeight: 200, scrollTop } })
|
||||||
|
await flushPromises()
|
||||||
|
}
|
||||||
|
await scroll(100)
|
||||||
|
expect(table.props('data')).toHaveLength(20)
|
||||||
|
await scroll(800)
|
||||||
|
expect(table.props('data')).toHaveLength(40)
|
||||||
|
await scroll(800)
|
||||||
|
expect(table.props('data')).toHaveLength(45)
|
||||||
|
await scroll(800)
|
||||||
|
expect(table.props('data')).toHaveLength(45)
|
||||||
|
await wrapper.get('input[aria-label="搜索项目"]').setValue('剧本44')
|
||||||
|
await flushPromises()
|
||||||
|
expect(table.props('data')).toHaveLength(1)
|
||||||
|
expect(wrapper.text()).toContain('剧本44')
|
||||||
|
await wrapper.get('input[aria-label="搜索项目"]').setValue('')
|
||||||
|
await flushPromises()
|
||||||
|
expect(table.props('data')).toHaveLength(20)
|
||||||
|
expect(fetcher).toHaveBeenCalledTimes(1)
|
||||||
|
})
|
||||||
|
|
||||||
it('新建弹窗提交真实参数并返回 202 的项目 ID', async () => {
|
it('新建弹窗提交真实参数并返回 202 的项目 ID', async () => {
|
||||||
const fetcher = vi
|
const fetcher = vi
|
||||||
.fn<typeof fetch>()
|
.fn<typeof fetch>()
|
||||||
|
|||||||
Reference in New Issue
Block a user