feat(tag): 补充组件单元测试

packages/devui-vue/devui/tag/__tests__/tag.spec.ts

@@ -2,7 +2,116 @@ import { mount } from '@vue/test-utils'
 import { Tag } from '../index'
 
 describe('tag test', () => {
- it('tag init render', async () => {
- // todo
+ it('init render', async () => {
+ const wrapper = mount(Tag)
+ expect(wrapper.find('.devui-tag').exists()).toBeTruthy()
+ })
+ it('props type', () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ type: 'primary'
+ }
+ })
+ expect(wrapper.find('.devui-tag span').classes()).toContain('devui-tag-primary')
+ })
+ it('props color', () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ color: 'red-w98' //#f66f6a rgb(246, 111, 106)
+ }
+ })
+ expect(wrapper.find('.devui-tag span').attributes('style')).toContain('rgb(246, 111, 106)')
+ })
+ it('props color custom', () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ color: '#aa2116' //rgb(170, 33, 22)
+ }
+ })
+ expect(wrapper.find('.devui-tag span').attributes('style')).toContain('rgb(170, 33, 22)')
+ })
+ it('props titleContent', () => {
+ const titleContent = 'tagTitle test'
+ const wrapper = mount(Tag, {
+ props: { titleContent }
+ })
+ expect(wrapper.get('.devui-tag span').attributes('title')).toBe(titleContent)
+ })
+ it('props deletable show', async () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ deletable: false
+ }
+ })
+ expect(wrapper.find('.remove-button').exists()).toBeFalsy()
+ await wrapper.setProps({ deletable: true })
+ expect(wrapper.find('.remove-button').exists()).toBeTruthy()
+ })
+ it('props deletable hide', async () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ deletable: true
+ }
+ })
+ const btn = wrapper.find('.remove-button')
+ expect(btn.exists()).toBeTruthy()
+ await btn.trigger('click')
+ expect(wrapper.find('.devui-tag').exists()).toBeFalsy()
+ })
+ it('event tagDelete', async () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ deletable: true
+ }
+ })
+ await wrapper.find('.remove-button').trigger('click')
+ expect(wrapper.emitted('tagDelete').length).toBeGreaterThan(0)
+ })
+
+ it('props checked', async () => {
+ const wrapper = mount(Tag, {
+ propsData: {
+ type: 'primary' //对应颜色：rgb(94, 124, 224)
+ }
+ })
+ expect(wrapper.find('.devui-tag span').attributes('style')).toContain(
+ 'color: rgb(94, 124, 224);'
+ )
+ await wrapper.setProps({ checked: true })
+ expect(wrapper.find('.devui-tag span').attributes('style')).toContain(
+ 'background-color: rgb(94, 124, 224);'
+ )
+ expect(wrapper.emitted('checkedChange').length).toBeGreaterThan(0)
+ })
+ it('event checkedChange', async () => {
+ const wrapper = mount(Tag)
+ await wrapper.setProps({ checked: true })
+ expect(wrapper.emitted('checkedChange').length).toBeGreaterThan(0)
+ expect(wrapper.emitted('checkedChange')[0]).toEqual([true])
+ await wrapper.setProps({ checked: false })
+ expect(wrapper.emitted('checkedChange').length).toBeGreaterThan(1)
+ expect(wrapper.emitted('checkedChange')[1]).toEqual([false])
+ })
+
+ it('event click', async () => {
+ const wrapper = mount(Tag)
+ await wrapper.find('.devui-tag').trigger('click')
+ expect(wrapper.emitted('click').length).toBeGreaterThan(0)
+ })
+ it('slot default string', async () => {
+ const wrapper = mount(Tag, {
+ slots: {
+ default: 'default slot test'
+ }
+ })
+ expect(wrapper.text()).toContain('default slot test')
+ })
+ it('slot default component', async () => {
+ const wrapper = mount(Tag, {
+ slots: {
+ default: ['<d-icon name="like"></d-icon>', 'icon component test']
+ }
+ })
+ expect(wrapper.find('i').classes()).toContain('icon-like')
  })
 })