test: update mod searchbar for testing

ourjapanlife · Jan 29, 2025 · 6855e2b · 6855e2b
1 parent d6a5680
commit 6855e2b
Show file tree

Hide file tree

Showing 4 changed files with 379 additions and 378 deletions.
diff --git a/components/ModEditHealthcareProfessionalSection.vue b/components/ModEditHealthcareProfessionalSection.vue
@@ -139,6 +139,7 @@
                 </label>
                 <ModSearchbar
                     v-model="healthcareProfessionalAcceptedInsurancesArray"
+                    data-test-id="mod-healthcare-professional-section-accepted-insurances"
                     :place-holder-text="$t('modHealthcareProfessionalSection.placeholderTextAcceptedInsurances')"
                     :no-match-text="$t('modHealthcareProfessionalSection.noInsurancesWereFound')"
                     :fields-to-display-callback="insurancesToDisplayCallback"
@@ -161,6 +162,7 @@
                 </label>
                 <ModSearchbar
                     v-model="healthcareProfessionalDegreesArray"
+                    data-test-id="mod-healthcare-professional-section-degrees"
                     :place-holder-text="$t('modHealthcareProfessionalSection.placeholderTextDegrees')"
                     :no-match-text="$t('modHealthcareProfessionalSection.noDegreesWereFound')"
                     :fields-to-display-callback="degreesToDisplayCallback"
@@ -183,6 +185,7 @@
                 </label>
                 <ModSearchbar
                     v-model="healthcareProfessionalSpecialtiesArray"
+                    data-test-id="mod-healthcare-professional-section-specialties"
                     :place-holder-text="$t('modHealthcareProfessionalSection.placeholderTextSpecialties')"
                     :no-match-text="$t('modHealthcareProfessionalSection.noSpecialtiesWereFound')"
                     :fields-to-display-callback="specialtiesToDisplayCallback"
@@ -205,6 +208,7 @@
                 </label>
                 <ModSearchbar
                     v-model="healthcareProfessionalSpokenLanguages"
+                    data-test-id="mod-healthcare-professional-section-spoken-locales"
                     :place-holder-text="$t('modHealthcareProfessionalSection.placeholderTextLocales')"
                     :no-match-text="$t('modHealthcareProfessionalSection.noLocalesWereFound')"
                     :fields-to-display-callback="localesToDisplayCallback"

diff --git a/components/ModSearchBar.vue b/components/ModSearchBar.vue
@@ -18,6 +18,7 @@
                 ref="searchInputElement"
                 type="text"
                 :placeholder="placeHolderText"
+                :data-testid="`${dataTestId}`"
                 class="grow focus-visible:outline-none"
                 @blur="handleSearchInputBlur"
                 @keydown.esc="handleSearchInputBlur"
@@ -136,6 +137,8 @@ type Props = {
     noMatchText: string
     // Callback to display the desired output
     fieldsToDisplayCallback: (item: SetType<T>) => string[]
+    //Optional test id for testing the component
+    dataTestId?: string
 }
 
 const { placeHolderText, noMatchText, fieldsToDisplayCallback } = defineProps<Props>()