From aa51f799520acac06b7eafd5915dd98af300c13a Mon Sep 17 00:00:00 2001
From: Matthias Goudjil <matthias.goudjil@prestashop.com>
Date: Fri, 22 Sep 2023 10:18:34 +0200
Subject: [PATCH] test: #191 - tests for tag component

---
 packages/components/tag/src/tag.vue      |  2 +-
 packages/components/tag/test/tag.spec.ts | 44 ++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index 9abbb48b..1e2aba20 100644
--- a/packages/components/tag/src/tag.vue
+++ b/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"
       >
diff --git a/packages/components/tag/test/tag.spec.ts b/packages/components/tag/test/tag.spec.ts
index 40611d9f..22c20b89 100644
--- a/packages/components/tag/test/tag.spec.ts
+++ b/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')
+  })
 })