From b46676ed377e63d862da7c55785f40372bfe9a73 Mon Sep 17 00:00:00 2001
From: c0dedance <2627702283@qq.com>
Date: Sun, 23 Jan 2022 13:57:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/tag/__tests__/tag.spec.ts | 113 +++++++++++++++++-
 1 file changed, 111 insertions(+), 2 deletions(-)

diff --git a/packages/devui-vue/devui/tag/__tests__/tag.spec.ts b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts
index 9db389e4d2..c46756f57c 100644
--- a/packages/devui-vue/devui/tag/__tests__/tag.spec.ts
+++ b/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')
   })
 })