test: #191 - tests for tag component

packages/components/tag/src/tag.vue

@@ -9,7 +9,7 @@
     <PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-tag__icon" />
     <div class="puik-tag__content">
       <puik-tooltip
-        v-if="content.length >= 30"
+        v-if="content?.length >= 30"
         :position="(tooltipPosition as PuikTooltipPosition)"
         :description="content"
       >

packages/components/tag/test/tag.spec.ts

@@ -5,6 +5,14 @@ import type { MountingOptions, VueWrapper } from '@vue/test-utils'
 
 describe('Tag tests', () => {
   let wrapper: VueWrapper<any>
+  const findTag = () => wrapper.find('.puik-tag')
+  const findTagContent = () => wrapper.find('.puik-tag__content')
+  const findCloseBtn = () => wrapper.find('.puik-tag__close')
+  const findLeftIcon = () => wrapper.find('.puik-tag__icon')
+
+  // const findButtonLeftIcon = () => wrapper.find('.puik-button__left-icon')
+  // const findButtonRightIcon = () => wrapper.find('.puik-button__right-icon')
+
   const factory = (
     propsData: Record<string, any> = {},
     options: MountingOptions<any> = {}
@@ -16,8 +24,44 @@ describe('Tag tests', () => {
       ...options,
     })
   }
+
   it('should be a vue instance', () => {
     factory()
     expect(wrapper).toBeTruthy()
   })
+
+  it('as id prop value is "puik-tag-example", id html attribute of puik-tag should be "puik-tag-example"', () => {
+    factory({ id: 'puik-tag-example' })
+    expect(findTag().attributes().id).toBe('puik-tag-example')
+  })
+
+  it('Tag text should be "content"', () => {
+    factory({ content: 'content' })
+    expect(findTagContent().text()).toBe('content')
+  })
+
+  it('should display a blue version of the tag', () => {
+    factory({ variant: 'blue' })
+    expect(findTag().classes()).toContain('puik-tag--blue')
+  })
+
+  it('should display a tag small version', () => {
+    factory({ size: 'small' })
+    expect(findTag().classes()).toContain('puik-tag--small')
+  })
+
+  it('should display a tag version with left icon', () => {
+    factory({ icon: 'home' })
+    expect(findLeftIcon().text()).toBe('home')
+  })
+
+  it('should display a tag closeable version', () => {
+    factory({ closeable: true })
+    expect(findCloseBtn().text()).toBe('close')
+  })
+
+  it('should display a tag disabled version', () => {
+    factory({ disabled: true })
+    expect(findTag().classes()).toContain('puik-tag--disabled')
+  })
 })