test: update mod searchbar for testing

ourjapanlife · Jan 17, 2025 · 0d5d5c3 · 0d5d5c3
1 parent 5cf1309
commit 0d5d5c3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 16 deletions.
diff --git a/components/ModEditHealthcareProfessionalSection.vue b/components/ModEditHealthcareProfessionalSection.vue
@@ -101,6 +101,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"
@@ -123,6 +124,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"
@@ -145,6 +147,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"
@@ -167,6 +170,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>()

diff --git a/test/cypress/e2e/moderationEditHealthcareProfessional.cy.ts b/test/cypress/e2e/moderationEditHealthcareProfessional.cy.ts
@@ -56,13 +56,10 @@ describe('Moderation edit professional healthcare form', () => {
             Cypress.session.clearCurrentSessionData()
         })
 
-        it('contains the following input fields', () => {
+        it('contains the following input and select fields', () => {
             cy.get('[data-testid="mod-healthcare-professional-section-lastName"]').should('exist')
             cy.get('[data-testid="mod-healthcare-professional-section-firstName"]').should('exist')
             cy.get('[data-testid="mod-healthcare-professional-section-middleName"]').should('exist')
-        })
-
-        it('should contain the following select field', () => {
             cy.get('[data-testid="mod-healthcare-professional-section-name-locale"]').should('exist')
             cy.get('[data-testid="mod-healthcare-professional-section-accepted-insurances"]').should('exist')
             cy.get('[data-testid="mod-healthcare-professional-section-degrees"]').should('exist')
@@ -74,19 +71,7 @@ describe('Moderation edit professional healthcare form', () => {
             cy.get('[data-testid="mod-healthcare-professional-section-lastName"]').find('input').type('Doe')
             cy.get('[data-testid="mod-healthcare-professional-section-firstName"]').find('input').type('John')
             cy.get('[data-testid="mod-healthcare-professional-section-middleName"]').find('input').type('Johnny')
-        })
-
-        it('should be able to select a field', () => {
             cy.get('[data-testid="mod-healthcare-professional-section-name-locale"]').select('en_US')
-            cy.get('[data-testid="mod-healthcare-professional-section-accepted-insurances"]').select(
-                ['INSURANCE_NOT_ACCEPTED', 'INTERNATIONAL_HEALTH_INSURANCE',
-                 'JAPANESE_HEALTH_INSURANCE', 'UNINSURED'], { force: true }
-            )
-            cy.get('[data-testid="mod-healthcare-professional-section-degrees"]').select(['CNM', 'DMD'], { force: true })
-            cy.get('[data-testid="mod-healthcare-professional-section-specialties"]')
-                .select(['FAMILY_MEDICINE', 'NEUROLOGY'], { force: true })
-            cy.get('[data-testid="mod-healthcare-professional-section-spoken-locales"]')
-                .select(['en_US', 'fr_FR'], { force: true })
         })
     })
 })