mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(collapse): Update collapse component test (#1362)

Browse Source
This commit is contained in:
songjianet 2021-10-18 09:17:02 +08:00 committed by GitHub
parent 06462b96fc
commit aff36db44c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 90 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/collapse/tests/Collapse.spec.tsx
View File

@ -21,6 +21,50 @@ describe('n-collapse', () => {
expect(wrapper.find('.my-icon').exists()).toEqual(true)
})
it('should work with `accordion` prop', async () => {
const wrapper = mount(NCollapse, {
slots: {
default: () => [
<NCollapseItem name="1">
{{ default: () => <div class="ci1">ci1</div> }}
</NCollapseItem>,
<NCollapseItem name="2">
{{ default: () => <div class="ci2">ci2</div> }}
</NCollapseItem>,
<NCollapseItem name="3">
{{ default: () => <div class="ci3">ci3</div> }}
</NCollapseItem>
]
}
})
const headerMains = wrapper.findAll('.n-collapse-item__header-main')
await headerMains[0].trigger('click')
await headerMains[1].trigger('click')
expect(wrapper.findAll('.n-collapse-item__header')[0].classes()).toContain(
'n-collapse-item__header--active'
)
expect(wrapper.findAll('.n-collapse-item__header')[1].classes()).toContain(
'n-collapse-item__header--active'
)
await wrapper.setProps({
accordion: true
})
await headerMains[2].trigger('click')
expect(
wrapper.findAll('.n-collapse-item__header')[0].classes()
).not.toContain('n-collapse-item__header--active')
expect(
wrapper.findAll('.n-collapse-item__header')[1].classes()
).not.toContain('n-collapse-item__header--active')
expect(wrapper.findAll('.n-collapse-item__header')[2].classes()).toContain(
'n-collapse-item__header--active'
)
})
it('should work with `arrow-placement` prop', async () => {
const wrapper = mount(NCollapse, {
slots: {
@ -38,28 +82,40 @@ describe('n-collapse', () => {
})
it('should work with nested structure', async () => {
mount(NCollapse, {
const wrapper = mount(NCollapse, {
slots: {
default: () =>
h(
NCollapseItem,
{ name: '1', title: 'test1' },
{ name: '1' },
{
default: () =>
h(NCollapse, null, {
default: () => h(NCollapseItem, { name: '2', title: 'test2' })
default: () => h(NCollapseItem, { name: '2' })
})
}
)
}
})
// todo: test display-directive
// I wanted to test this function, but I was bothered by the <transition-stub>
await wrapper.find('.n-collapse-item__header-main').trigger('click')
expect(wrapper.find('.n-collapse-item__header').classes()).toContain(
'n-collapse-item__header--active'
)
await wrapper
.find('.n-collapse-item__content-wrapper')
.find('.n-collapse-item__header-main')
.trigger('click')
expect(
wrapper
.find('.n-collapse-item__content-wrapper')
.find('.n-collapse-item__header')
.classes()
).toContain('n-collapse-item__header--active')
})
it('should work with `display-directive` prop', async () => {
mount(NCollapse, {
const wrapper = mount(NCollapse, {
props: {
displayDirective: 'show'
},
@ -67,13 +123,27 @@ describe('n-collapse', () => {
default: () =>
h(
NCollapseItem,
{ name: '1', title: 'test' },
{ name: '1' },
{ default: () => h('div', null, { default: () => 'test' }) }
)
}
// todo: test display-directive
// I wanted to test this function, but I was bothered by the <transition-stub>
})
await wrapper.find('.n-collapse-item__header-main').trigger('click')
await wrapper.find('.n-collapse-item__header-main').trigger('click')
expect(
wrapper.find('.n-collapse-item__content-wrapper').attributes('style')
).toBe('display: none;')
await wrapper.setProps({
displayDirective: 'if'
})
await wrapper.find('.n-collapse-item__header-main').trigger('click')
await wrapper.find('.n-collapse-item__header-main').trigger('click')
expect(wrapper.find('.n-collapse-item__content-wrapper').exists()).toBe(
false
)
})
it('should work with `on-item-header-click` prop', async () => {
@ -149,4 +219,15 @@ describe('n-collapse', () => {
expect(wrapper.find('.ci1').isVisible()).toEqual(true)
expect(wrapper.find('.ci2').exists()).toEqual(false)
})
it('should work with collapseItem component `title` prop', async () => {
const wrapper = mount(NCollapse, {
slots: {
default: () => <NCollapseItem title="test"></NCollapseItem>
}
})
await wrapper.find('.n-collapse-item__header-main').trigger('click')
expect(wrapper.find('.n-collapse-item__header-main').text()).toBe('test')
})
})