test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 17:31:02 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(components): [pagination] use JSX in Unit test (#8269)

Browse Source 
* refactor(components): [pagination] remove no unused vars
This commit is contained in:
LIUCHAO 2022-07-13 18:36:55 +08:00 committed by GitHub
parent 006cc3dc24
commit 33fc8e5c4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

250
packages/components/pagination/__tests__/pagination.test.ts → packages/components/pagination/__tests__/pagination.test.tsx
View File

@ -1,4 +1,4 @@
import { h, nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
import Pagination from '../src/pagination' import Pagination from '../src/pagination'
@ -38,13 +38,8 @@ describe('Pagination', () => {
test('both absence of total & pageCount is invalid', async () => { test('both absence of total & pageCount is invalid', async () => {
expect(console.warn).not.toHaveBeenCalled() expect(console.warn).not.toHaveBeenCalled()
const total = ref<number | undefined>(undefined) const total = ref<number | undefined>(undefined)
const wrapper = mount({ const wrapper = mount(() => <Pagination total={total.value}></Pagination>)
setup() {
return () => {
return h(Pagination, { total: total.value })
}
},
})
expect(wrapper.find('.el-pagination').exists()).toBe(false) expect(wrapper.find('.el-pagination').exists()).toBe(false)
expect(console.warn).toHaveBeenCalled() expect(console.warn).toHaveBeenCalled()
total.value = 100 total.value = 100
@ -53,46 +48,27 @@ describe('Pagination', () => {
}) })
test('current-page defined while absence of current-page listener is invalid', () => { test('current-page defined while absence of current-page listener is invalid', () => {
expect(console.warn).not.toHaveBeenCalled() expect(console.warn).not.toHaveBeenCalled()
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination total={100} currentPage={1}></Pagination>
return () => { ))
return h(Pagination, {
total: 100,
currentPage: 1,
})
}
},
})
expect(wrapper.find('.el-pagination').exists()).toBe(false) expect(wrapper.find('.el-pagination').exists()).toBe(false)
expect(console.warn).toHaveBeenCalled() expect(console.warn).toHaveBeenCalled()
}) })
test('layout with `sizes` restrictions(page-count)', () => { test('layout with `sizes` restrictions(page-count)', () => {
expect(console.warn).not.toHaveBeenCalled() expect(console.warn).not.toHaveBeenCalled()
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination layout="sizes, pager" pageCount={10}></Pagination>
return () => { ))
return h(Pagination, {
layout: 'sizes, pager',
pageCount: 10,
})
}
},
})
expect(wrapper.find('.el-pagination').exists()).toBe(false) expect(wrapper.find('.el-pagination').exists()).toBe(false)
expect(console.warn).toHaveBeenCalled() expect(console.warn).toHaveBeenCalled()
}) })
test('layout with `sizes` restrictions(page-size)', () => { test('layout with `sizes` restrictions(page-size)', () => {
expect(console.warn).not.toHaveBeenCalled() expect(console.warn).not.toHaveBeenCalled()
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination layout="sizes, pager" pageSize={10}></Pagination>
return () => { ))
return h(Pagination, {
layout: 'sizes, pager',
pageSize: 10,
})
}
},
})
expect(wrapper.find('.el-pagination').exists()).toBe(false) expect(wrapper.find('.el-pagination').exists()).toBe(false)
expect(console.warn).toHaveBeenCalled() expect(console.warn).toHaveBeenCalled()
}) })
@ -100,16 +76,10 @@ describe('Pagination', () => {
describe('test layout & layout reactive change', () => { describe('test layout & layout reactive change', () => {
const layoutRef = ref('') const layoutRef = ref('')
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination total={100} layout={layoutRef.value}></Pagination>
return () => { ))
return h(Pagination, {
total: 100,
layout: layoutRef.value,
})
}
},
})
test('layout empty', async () => { test('layout empty', async () => {
await nextTick() await nextTick()
expect(wrapper.find('.el-pagination').exists()).toBe(false) expect(wrapper.find('.el-pagination').exists()).toBe(false)
@ -143,15 +113,8 @@ describe('Pagination', () => {
}) })
test('layout with default layout prop', () => { test('layout with default layout prop', () => {
const wrapper = mount({ const wrapper = mount(() => <Pagination total={100}></Pagination>)
setup() {
return () => {
return h(Pagination, {
total: 100,
})
}
},
})
assertElementsExistence( assertElementsExistence(
wrapper, wrapper,
[ [
@ -166,34 +129,20 @@ describe('Pagination', () => {
}) })
test('test layout with slot', () => { test('test layout with slot', () => {
const TestComponent = { const wrapper = mount(() => (
template: ` <Pagination layout="slot, prev, pager, next" pageSize={25} total={100}>
<el-pagination <span class="slot-test">slot test</span>
layout="slot, prev, pager, next" </Pagination>
:page-size="25" ))
:total="100">
<span class="slot-test">slot test</span>
</el-pagination>
`,
components: {
'el-pagination': Pagination,
},
}
const wrapper = mount(TestComponent)
expect(wrapper.find('.slot-test').exists()).toBe(true) expect(wrapper.find('.slot-test').exists()).toBe(true)
}) })
test('test small layout', () => { test('test small layout', () => {
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination total={100} small={true}></Pagination>
return () => { ))
return h(Pagination, {
total: 100,
small: true,
})
}
},
})
expect(wrapper.vm.$el.classList.contains('el-pagination--small')).toBe( expect(wrapper.vm.$el.classList.contains('el-pagination--small')).toBe(
true true
) )
@ -201,16 +150,10 @@ describe('Pagination', () => {
test('test with background', async () => { test('test with background', async () => {
const withBackground = ref(true) const withBackground = ref(true)
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination total={100} background={withBackground.value}></Pagination>
return () => { ))
return h(Pagination, {
total: 100,
background: withBackground.value,
})
}
},
})
expect(wrapper.find('.is-background').exists()).toBe(true) expect(wrapper.find('.is-background').exists()).toBe(true)
withBackground.value = false withBackground.value = false
await nextTick() await nextTick()
@ -219,16 +162,13 @@ describe('Pagination', () => {
test('test hide-on-single-page prop', async () => { test('test hide-on-single-page prop', async () => {
const hideOnSinglePage = ref(false) const hideOnSinglePage = ref(false)
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination
return () => { total={10} // deivded by default page-size(10), there will be only one page
return h(Pagination, { hideOnSinglePage={hideOnSinglePage.value}
total: 10, // deivded by default page-size(10), there will be only one page />
hideOnSinglePage: hideOnSinglePage.value, ))
})
}
},
})
expect(wrapper.find('.el-pagination').exists()).toBe(true) expect(wrapper.find('.el-pagination').exists()).toBe(true)
hideOnSinglePage.value = true hideOnSinglePage.value = true
await nextTick() await nextTick()
@ -239,17 +179,10 @@ describe('Pagination', () => {
describe('test pageSize & currentPage reactive change', () => { describe('test pageSize & currentPage reactive change', () => {
test(`test pageSize change`, async () => { test(`test pageSize change`, async () => {
const pageSize = ref(10) const pageSize = ref(10)
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination layout="pager" total={100} pageSize={pageSize.value} />
return () => { ))
return h(Pagination, {
layout: 'pager',
total: 100,
pageSize: pageSize.value,
})
}
},
})
// total pages = Math.ceil(total / pageSize) // total pages = Math.ceil(total / pageSize)
assertPages(wrapper, 10) assertPages(wrapper, 10)
pageSize.value = 20 pageSize.value = 20
@ -262,18 +195,15 @@ describe('Pagination', () => {
test('test currentPage change', async () => { test('test currentPage change', async () => {
const pageSize = ref(10) const pageSize = ref(10)
const defaultCurrentPage = ref(2) const defaultCurrentPage = ref(2)
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination
return () => { layout="prev, pager, next"
return h(Pagination, { total={100}
layout: 'prev, pager, next', pageSize={pageSize.value}
total: 100, defaultCurrentPage={defaultCurrentPage.value}
pageSize: pageSize.value, />
defaultCurrentPage: defaultCurrentPage.value, ))
})
}
},
})
assertCurrent(wrapper, 2) assertCurrent(wrapper, 2)
defaultCurrentPage.value = 1 defaultCurrentPage.value = 1
assertCurrent(wrapper, 2) // still 2 assertCurrent(wrapper, 2) // still 2
@ -290,16 +220,10 @@ describe('Pagination', () => {
test('test pageCount change and side effect', async () => { test('test pageCount change and side effect', async () => {
const pageCount = ref(10) const pageCount = ref(10)
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination layout="prev, pager, next" pageCount={pageCount.value} />
return () => { ))
return h(Pagination, {
layout: 'prev, pager, next',
pageCount: pageCount.value,
})
}
},
})
assertPages(wrapper, 10) assertPages(wrapper, 10)
pageCount.value = 20 pageCount.value = 20
await nextTick() await nextTick()
@ -317,18 +241,15 @@ describe('Pagination', () => {
test('test listener work', async () => { test('test listener work', async () => {
const pageSizeWatcher = vi.fn() const pageSizeWatcher = vi.fn()
const currentPageWatcher = vi.fn() const currentPageWatcher = vi.fn()
const wrapper = mount({ const wrapper = mount(() => (
setup() { <Pagination
return () => { total={100}
return h(Pagination, { layout="prev, pager, next, sizes"
total: 100, onUpdate:current-page={currentPageWatcher}
layout: 'prev, pager, next, sizes', onUpdate:page-size={pageSizeWatcher}
['onUpdate:currentPage']: currentPageWatcher, />
['onUpdate:pageSize']: pageSizeWatcher, ))
})
}
},
})
await wrapper.find('.el-pager li:last-child').trigger('click') await wrapper.find('.el-pager li:last-child').trigger('click')
assertCurrent(wrapper, 10 /* Math.ceil(100/10) */) assertCurrent(wrapper, 10 /* Math.ceil(100/10) */)
expect(currentPageWatcher).toHaveBeenCalled() expect(currentPageWatcher).toHaveBeenCalled()
@ -344,15 +265,7 @@ describe('Pagination', () => {
describe('test a11y supports', () => { describe('test a11y supports', () => {
test('test a11y attributes', async () => { test('test a11y attributes', async () => {
const wrapper = mount({ const wrapper = mount(() => <Pagination total={100} />)
setup() {
return () => {
return h(Pagination, {
total: 100,
})
}
},
})
expect(wrapper.find('.el-pagination').attributes('aria-label')).toBe( expect(wrapper.find('.el-pagination').attributes('aria-label')).toBe(
'pagination' 'pagination'
) )
@ -387,15 +300,7 @@ describe('Pagination', () => {
}) })
test('test tabindex interactive', async () => { test('test tabindex interactive', async () => {
const wrapper = mount({ const wrapper = mount(() => <Pagination total={100} />)
setup() {
return () => {
return h(Pagination, {
total: 100,
})
}
},
})
await wrapper.find('.el-pager li:nth-child(2)').trigger('click') await wrapper.find('.el-pager li:nth-child(2)').trigger('click')
assertCurrent(wrapper, 2) assertCurrent(wrapper, 2)
await wrapper.find('.el-pager li:nth-child(3)').trigger('click', { await wrapper.find('.el-pager li:nth-child(3)').trigger('click', {
@ -413,23 +318,18 @@ describe('Pagination', () => {
}) })
test('test tabindex disabled', async () => { test('test tabindex disabled', async () => {
const wrapper = mount({ const disabled = ref(true)
setup() { const wrapper = mount(() => (
return () => { <Pagination total={100} disabled={disabled.value}></Pagination>
return h(Pagination, { ))
total: 100,
disabled: true,
})
}
},
})
expect( expect(
wrapper.find('.el-pager li:first-child').attributes('tabindex') wrapper.find('.el-pager li:first-child').attributes('tabindex')
).toBe('-1') ).toBe('-1')
await wrapper.setProps({ disabled: false }) disabled.value = false
await nextTick()
expect( expect(
wrapper.find('.el-pager li:first-child').attributes('tabindex') wrapper.find('.el-pager li:first-child').attributes('tabindex')
).toBe('0') ).toBe('0')