feat: unit test filtered out suggested tags

Author: JulienDroulez

src/components/search/FilterTags/SearchResults.vue

@@ -43,6 +43,7 @@ export default {
     },
     props: {
         tagResults: {
+            // array of tag objects
             type: Array,
             default: () => [],
         },
@@ -55,6 +56,7 @@ export default {
             default: false,
         },
         existingTags: {
+            // array of tag ids
             type: Array,
             default: () => [],
         },

src/components/search/FilterTags/SuggestedTags.vue

@@ -36,11 +36,13 @@ export default {
     },
     props: {
         currentTags: {
+            // array of tag ids
             type: Array,
             default: () => [],
         },
 
         suggestedTags: {
+            // array of tag objects
             type: Array,
             default: () => [],
         },

src/components/search/FilterTags/TagResults.vue

@@ -61,26 +61,32 @@ export default {
 
     props: {
         search: {
+            // search query
             type: String,
             default: '',
         },
         classificationId: {
+            // classification id to limit search to (if not searchAll)
             type: Number,
             default: null,
         },
         type: {
-            type: String, // "skills" or "projects"
+            // "skills" or "projects"
+            type: String,
             default: '',
         },
         searchAll: {
+            // search all org classification
             type: Boolean,
             default: false,
         },
         existingTags: {
+            // array of tag ids
             type: Array,
             default: () => [],
         },
         showPreSearchList: {
+            // shwow all tags (aka empty search) before search
             type: Boolean,
             default: false,
         },

tests/unit/components/search/FilterTags/SuggestedTags.spec.ts

@@ -1,8 +1,9 @@
-import { lpiShallowMount } from '../../../../helpers/LpiMount'
+import { lpiShallowMount, lpiMount } from '../../../../helpers/LpiMount'
 import english from '@/locales/en.json'
 import SuggestedTags from '@/components/search/FilterTags/SuggestedTags.vue'
 
 import { afterEach, beforeEach, describe, expect, it, vi, Mock } from 'vitest'
+import { id } from 'date-fns/locale'
 const i18n = {
     locale: 'en',
     fallbackLocale: 'en',
@@ -26,4 +27,46 @@ describe('SuggestedTags', () => {
 
         expect(wrapper.exists()).toBeTruthy()
     })
+
+    it('should render all Suggested Tags items', () => {
+        wrapper = lpiMount(SuggestedTags, {
+            ...defaultParams,
+            props: {
+                suggestedTags: [
+                    { id: 1, title: 'tag1' },
+                    { id: 2, title: 'tag2' },
+                    { id: 3, title: 'tag3' },
+                ],
+            },
+        })
+
+        const vm: any = wrapper.vm
+
+        expect(vm.displayableTags.length).toBe(3)
+
+        const tags = wrapper.findAll('.filter-value')
+        expect(tags.length).toBe(3)
+    })
+
+    it('should not render alredy selected Tags items', () => {
+        wrapper = lpiMount(SuggestedTags, {
+            ...defaultParams,
+            props: {
+                suggestedTags: [
+                    { id: 1, title: 'tag1' },
+                    { id: 2, title: 'tag2' },
+                    { id: 3, title: 'tag3' },
+                ],
+                currentTags: [1, 3],
+            },
+        })
+
+        const vm: any = wrapper.vm
+
+        expect(vm.displayableTags.length).toBe(1)
+        expect(vm.displayableTags[0].id).toBe(2)
+
+        const tags = wrapper.findAll('.filter-value')
+        expect(tags.length).toBe(1)
+    })
 })