fix: add unit tests after classifications (#591)

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

@@ -5,6 +5,7 @@
 
     <div v-else class="search-mode-ctn">
         <SearchResults
+            data-test="search-results"
             key="search-results"
             :tag-results="tagResults"
             :existing-tags="existingTags"
@@ -60,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,
         },

src/components/search/Filters/SkillsFilterEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ inline }" class="skills-filter-editor">
+    <div class="skills-filter-editor">
         <div class="section">
             <CurrentTags
                 :current-tags="skills"
@@ -12,20 +12,26 @@
         <div class="section" v-if="!allSearchMode">
             <p class="notice">{{ $t('search.pick-skill-classification') }}</p>
 
-            <LpiSelect v-model="selectedClassificationId" :options="orgClassificationOptions" />
+            <LpiSelect
+                data-test="classification-picker"
+                v-model="selectedClassificationId"
+                :options="orgClassificationOptions"
+            />
         </div>
 
         <div v-show="allSearchMode || showTagSearch" class="section">
             <p class="notice">{{ $t('search.current-skill-description') }}</p>
 
             <FilterSearchInput
+                data-test="tag-search-input"
                 ref="search-input-component"
                 v-model.trim="search"
                 :placeholder="$t('search.search-skill')"
                 class="search-input-ctn"
             />
 
             <TagResults
+                data-test="tag-results"
                 v-if="search || showPreSearchList"
                 :classification-id="selectedClassificationId"
                 :existing-tags="alreadySelectedSkills"
@@ -40,6 +46,7 @@
                 <p class="notice notice-suggested">{{ $t('search.pick-skill-preset') }}</p>
 
                 <SuggestedTags
+                    data-test="suggested-tags"
                     :current-tags="alreadySelectedSkills"
                     :suggested-tags="suggestedTags"
                     @add-tag="onAddSkill"
@@ -77,25 +84,19 @@ export default {
             default: () => [],
         },
         blockedSkills: {
+            // unselctable skills (already selected ones)
             type: Array,
             default: () => [],
         },
 
-        triggerUpdate: {
-            type: Boolean,
-            default: false,
-        },
-
         hideOrganizationTags: {
-            type: Boolean,
-            default: false,
-        },
-
-        inline: {
+            // dont show org suggested skills
             type: Boolean,
             default: false,
         },
         allSearchMode: {
+            // search all org classification
+            // or a picked one
             type: Boolean,
             default: true,
         },
@@ -184,10 +185,6 @@ export default {
             }
         },
 
-        triggerUpdate: function () {
-            this.$emit('update:modelValue', this.skills)
-        },
-
         modelValue: {
             handler: function (neo) {
                 this.skills = [...neo]

src/components/search/Filters/TagsFilterEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ inline }" class="tags-filter-editor">
+    <div class="tags-filter-editor">
         <div class="section">
             <CurrentTags
                 :current-tags="tags"
@@ -12,7 +12,11 @@
         <div class="section" v-if="!allSearchMode">
             <p class="notice">{{ $t('search.pick-tag-classification') }}</p>
 
-            <LpiSelect v-model="selectedClassificationId" :options="orgClassificationOptions" />
+            <LpiSelect
+                data-test="classification-picker"
+                v-model="selectedClassificationId"
+                :options="orgClassificationOptions"
+            />
 
             <ClassificationDescription
                 v-if="selectedClassification"
@@ -24,13 +28,15 @@
             <p class="notice">{{ $t('search.current-tag-description') }}</p>
 
             <FilterSearchInput
+                data-test="tag-search-input"
                 ref="search-input-component"
                 v-model.trim="search"
                 :placeholder="$t('search.search-tag')"
                 class="search-input-ctn"
             />
 
             <TagResults
+                data-test="tag-results"
                 v-if="search || showPreSearchList"
                 :classification-id="selectedClassificationId"
                 :existing-tags="alreadySelectedTags"
@@ -44,6 +50,7 @@
             <template v-else-if="suggestedTags.length">
                 <p class="notice notice-suggested">{{ $t('search.pick-tag-preset') }}</p>
                 <SuggestedTags
+                    data-test="suggested-tags"
                     :current-tags="alreadySelectedTags"
                     :suggested-tags="suggestedTags"
                     @add-tag="addTag"
@@ -82,31 +89,30 @@ export default {
             default: () => [],
         },
         blockedTags: {
+            // unselctable tags (already selected ones)
             type: Array,
             default: () => [],
         },
-        triggerUpdate: {
-            type: Boolean,
-            default: false,
-        },
 
         hideOrganizationTags: {
-            type: Boolean,
-            default: false,
-        },
-        inline: {
+            // dont show org suggested tags
             type: Boolean,
             default: false,
         },
         progressiveUpdate: {
+            // if false emit specific event instead of model update
+            // see ProjectForm
             type: Boolean,
             default: true,
         },
         allSearchMode: {
+            // search all org classification
+            // or a picked one
             type: Boolean,
             default: true,
         },
         hideCurrentTagsSeparator: {
+            // hide "or" separator between selected tags
             type: Boolean,
             default: false,
         },
@@ -203,10 +209,6 @@ export default {
             }
         },
 
-        triggerUpdate: function () {
-            this.$emit('update:modelValue', this.tags)
-        },
-
         modelValue: {
             handler: function (neo) {
                 this.tags = [...neo]

src/composables/useTagSearch.js

@@ -114,7 +114,7 @@ export default function useTagSearch({
             const classificationReq = await getOrgClassificationTags(
                 organizationsStore.current.code,
                 selectedClassificationId.value,
-                // temp hackish fix until we have count int he org data
+                // temp hackish fix until we have count in the org data
                 { search: '' }
             )
             // if there's too many tags, show none

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

@@ -1,4 +1,4 @@
-import { lpiShallowMount } from '../../../../helpers/LpiMount'
+import { lpiShallowMount, lpiMount } from '../../../../helpers/LpiMount'
 import english from '@/locales/en.json'
 import SearchResults from '@/components/search/FilterTags/SearchResults.vue'
 
@@ -29,4 +29,40 @@ describe('SearchResults', () => {
 
         expect(wrapper.exists()).toBeTruthy()
     })
+
+    it('should mark disabled tags', () => {
+        wrapper = lpiMount(SearchResults, {
+            ...defaultParams,
+            props: {
+                tagResults: [{ id: 1 }, { id: 2 }, { id: 3 }],
+                existingTags: [1, 3],
+            },
+        })
+        const vm: any = wrapper.vm
+        const filtered = vm.filteredTagResults
+        expect(filtered.length).toBe(3)
+        expect(filtered[0].id).toBe(1)
+        expect(filtered[0].disabled).toBeTruthy()
+        expect(filtered[1].id).toBe(2)
+        expect(filtered[1].disabled).toBeFalsy()
+        expect(filtered[2].id).toBe(3)
+        expect(filtered[2].disabled).toBeTruthy()
+
+        const results = wrapper.findAll('.tag-result')
+        expect(results.length).toBe(3)
+
+        // disabled item should not emit event
+        results[0].trigger('click')
+        expect(wrapper.emitted()['result-clicked']).toBeFalsy()
+
+        // non disabled item should emit event (with item as payload)
+        results[1].trigger('click')
+        expect(wrapper.emitted()['result-clicked'].length).toBe(1)
+        // for some reason paylod is wrapped in an array by vitest
+        expect(wrapper.emitted()['result-clicked'][0][0]).toEqual(filtered[1])
+
+        // disabled item should not emit event
+        results[2].trigger('click')
+        expect(wrapper.emitted()['result-clicked'].length).toBe(1)
+    })
 })

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)
+    })
 })

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

@@ -1,4 +1,4 @@
-import { lpiShallowMount } from '../../../../helpers/LpiMount'
+import { lpiShallowMount, lpiMount } from '../../../../helpers/LpiMount'
 import english from '@/locales/en.json'
 import TagResults from '@/components/search/FilterTags/TagResults.vue'
 import { flushPromises } from '@vue/test-utils'
@@ -52,4 +52,17 @@ describe('TagResults', () => {
         expect(wrapper.exists()).toBeTruthy()
         expect(mockSearch).toHaveBeenCalled()
     })
+
+    it('should pass existingTags to searchResults', async () => {
+        wrapper = lpiMount(TagResults, { ...defaultParams, props: { existingTags: [1, 2] } })
+
+        const vm: any = wrapper.vm
+        vm.isLoading = false
+        await flushPromises()
+        // should display search results
+        const resultsComp = wrapper.findComponent('[data-test="search-results"]')
+        expect(resultsComp.vm.existingTags.length).toBe(2)
+        expect(resultsComp.vm.existingTags[0]).toBe(1)
+        expect(resultsComp.vm.existingTags[1]).toBe(2)
+    })
 })

tests/unit/components/search/Filters/CategoriesFilterEditor.spec.ts

@@ -33,7 +33,7 @@ describe('CategoriesFilterEditor.vue', () => {
     })
 
     it('should emit event update is triggered', async () => {
-        const wrapper = factory({ modelValue: [], triggerUpdate: true })
+        const wrapper = factory({ modelValue: [] })
         const vm: any = wrapper.vm
 
         const buttonContainer = wrapper.find('.category-picker-element input')