mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
test(tag): add tag test (#309)
This commit is contained in:
五柳
GitHub
parent
ddd860064a
commit
7956fbf6fd
@ -5,4 +5,136 @@ describe('n-tag', () => {
|
||||
it('should work with import on demand', () => {
|
||||
mount(NTag)
|
||||
})
|
||||
|
||||
it('should work with bordered prop', () => {
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
bordered: true
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.n-tag__border').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('should be clickable', () => {
|
||||
const onClick = jest.fn()
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
onClick
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.trigger('click')
|
||||
expect(onClick).toBeCalled()
|
||||
})
|
||||
|
||||
it('should be checkable', async () => {
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
checkable: true
|
||||
}
|
||||
})
|
||||
|
||||
await wrapper.setProps({ checked: true })
|
||||
expect(wrapper.find('.n-tag').classes()).toContain('n-tag--checkable')
|
||||
|
||||
await wrapper.setProps({ checked: false })
|
||||
expect(wrapper.find('.n-tag').classes()).not.toContain('n-tag--checked')
|
||||
})
|
||||
|
||||
it('should work with on-update:checked', () => {
|
||||
const onChecked = jest.fn()
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
checkable: true,
|
||||
'onUpdate:checked': onChecked
|
||||
}
|
||||
})
|
||||
|
||||
wrapper.trigger('click')
|
||||
expect(onChecked).toBeCalled()
|
||||
})
|
||||
|
||||
it('should work with closable prop', () => {
|
||||
const onClose = jest.fn()
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
closable: true,
|
||||
onClose
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.n-tag__close').exists()).toBe(true)
|
||||
wrapper.find('.n-tag__close').trigger('click')
|
||||
expect(onClose).toBeCalled()
|
||||
})
|
||||
|
||||
it('should work with disabled prop', async () => {
|
||||
const onClose = jest.fn()
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
disabled: true,
|
||||
closable: true,
|
||||
onClose
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.n-tag').classes()).toContain('n-tag--disabled')
|
||||
wrapper.find('.n-tag__close').trigger('click')
|
||||
expect(onClose).not.toBeCalled()
|
||||
})
|
||||
|
||||
it('should work with round prop', () => {
|
||||
const wrapper = mount(NTag, {
|
||||
props: {
|
||||
round: true
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.n-tag').classes()).toContain('n-tag--round')
|
||||
})
|
||||
|
||||
it('should work with size prop', () => {
|
||||
const wrapper = mount(NTag)
|
||||
|
||||
wrapper.setProps({ size: 'small' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
|
||||
wrapper.setProps({ size: 'medium' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
|
||||
wrapper.setProps({ size: 'large' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work with type prop', () => {
|
||||
const wrapper = mount(NTag)
|
||||
|
||||
wrapper.setProps({ type: 'default' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
|
||||
wrapper.setProps({ type: 'info' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
|
||||
wrapper.setProps({ type: 'success' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
|
||||
wrapper.setProps({ type: 'warning' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
|
||||
wrapper.setProps({ type: 'error' })
|
||||
expect(wrapper.find('.n-tag').attributes('style')).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('should work with default slot', () => {
|
||||
const wrapper = mount(NTag, {
|
||||
slots: {
|
||||
default: () => 'default'
|
||||
}
|
||||
})
|
||||
|
||||
expect(wrapper.find('.n-tag__content').exists()).toBe(true)
|
||||
expect(wrapper.find('.n-tag__content').element.textContent).toBe('default')
|
||||
expect(wrapper.find('.n-tag__content').html()).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
19
src/tag/tests/__snapshots__/Tag.spec.ts.snap
Normal file
19
src/tag/tests/__snapshots__/Tag.spec.ts.snap
Normal file
@ -0,0 +1,19 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`n-tag should work with default slot 1`] = `"<span class=\\"n-tag__content\\">default</span>"`;
|
||||
|
||||
exports[`n-tag should work with size prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with size prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with size prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with type prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with type prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with type prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with type prop 4`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
|
||||
exports[`n-tag should work with type prop 5`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 2px; --border: 1px solid rgb(224, 224, 230); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --close-margin: 0 0 0 3px; --close-margin-rtl: 0 3px 0 0; --close-size: 14px; --color: rgb(250, 250, 252); --color-checkable: #0000; --color-checked: #18a058; --color-checked-hover: #36ad6a; --color-checked-pressed: #0c7a43; --color-hover-checkable: #0000; --color-pressed-checkable: #0000; --font-size: 14px; --height: 28px; --opacity-disabled: 0.5; --padding: 0 7px; --text-color: rgb(51, 54, 57); --text-color-checkable: rgb(51, 54, 57); --text-color-checked: #FFF; --text-color-hover-checkable: #36ad6a; --text-color-pressed-checkable: #0c7a43;"`;
|
||||
Loading…
Reference in New Issue
Block a user