Update MHR unit tests - Part 1 (bcgov#1630)

Update unit tests

ppr-ui/package.json

@@ -1,13 +1,13 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview",
+    "serve": "vite dev",
     "lint": "eslint . --ext .js,.ts,.vue",
     "test:unit": "vitest run",
     "test:coverage": "vitest run --coverage"

ppr-ui/src/components/common/Attention.vue

@@ -65,6 +65,7 @@ export default defineComponent({
     },
     sectionNumber: {
       type: Number,
+      default: null,
       required: false
     },
     validate: {

ppr-ui/src/components/common/ButtonFooter.vue

@@ -208,6 +208,7 @@ export default defineComponent({
             return props.navConfig[i]
           }
         }
+        return null
       })
     })
     const cancel = () => {

ppr-ui/src/components/common/Remarks.vue

@@ -20,7 +20,7 @@
           <v-col cols="3">
             <label
               for="remarks-textarea"
-              class="generic-label"
+              class="generic-label side-label"
               :class="{ 'error-text': showBorderError }"
             >
               {{ content.sideLabel }}
@@ -75,11 +75,13 @@ export default defineComponent({
     },
     additionalRemarks: {
       type: String,
-      required: false
+      required: false,
+      default: ''
     },
     sectionNumber: {
       type: Number,
-      required: false
+      required: false,
+      default: null
     },
     content: {
       type: Object as () => ContentIF,

ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue

@@ -22,13 +22,13 @@
       >
         <template v-if="!isMhrManufacturerRegistration">
           <v-radio-group
-            id="certification-option-btns"
             v-model="certificationOption"
-            class="mt-0"
+            class="mt-0 certification-option-btns"
             inline
             hideDetails="true"
             :disabled="hasNoCertification"
             :class="{ 'disabled-radio': hasNoCertification }"
+            data-test-id="certification-option-btns"
           >
             <v-radio
               id="csa-option"
@@ -152,7 +152,6 @@
             class="mt-8 pt-0 mb-n4 float-left"
           />
           <v-tooltip
-            id="no-certification-tooltip"
             location="top"
             contentClass="top-tooltip"
             transition="fade-transition"
@@ -162,6 +161,7 @@
                 class="ml-2 mt-12"
                 color="primary"
                 v-bind="props"
+                data-test-id="no-certification-tooltip"
               >
                 mdi-information-outline
               </v-icon>
@@ -344,7 +344,7 @@ export default defineComponent({
 :deep(.theme--light.v-icon.mdi-close) {
   color: $primary-blue !important;
 }
-#certification-option-btns {
+.certification-option-btns {
   :deep(.v-selection-control--dirty) {
     border: 1px solid $app-blue;
     background-color: white;

ppr-ui/src/components/unitNotes/UnitNoteReview.vue

@@ -301,7 +301,7 @@ export default defineComponent({
     onMounted(() => {
       // scroll to top
       setTimeout(() => {
-        document.getElementById('unit-note-review-confirm').scrollIntoView({ behavior: 'smooth' })
+        document.getElementById('unit-note-review-confirm')?.scrollIntoView({ behavior: 'smooth' })
       }, 500)
     })
 

ppr-ui/src/components/userAccess/ServiceAgreement.vue

@@ -6,6 +6,7 @@
       color="primary"
       class="mt-2"
       :ripple="false"
+      data-test-id="download-agreement-btn"
       @click="downloadServiceAgreement"
     >
       <img

ppr-ui/tests/setup.ts

@@ -1,6 +1,7 @@
 // // setup.ts
 import { afterEach, beforeAll, vi } from 'vitest'
 import { config } from '@vue/test-utils'
+import { dataTestId } from './unit/plugins'
 import { createPinia, setActivePinia } from 'pinia'
 import vuetify from '@/plugins/vuetify'
 import * as matchers from 'vitest-axe/matchers'
@@ -15,7 +16,7 @@ const pinia = createPinia()
 setActivePinia(createPinia())
 
 // Add properties to the wrapper
-config.global.plugins.push([vuetify, pinia])
+config.global.plugins.push([vuetify, pinia, dataTestId])
 // Suppress Vue warnings
 config.global.config.warnHandler = () => null
 global.css = { supports: () => false }

ppr-ui/tests/unit/HomeCertification.spec.ts

@@ -1,60 +1,53 @@
 // Libraries
-import Vue, { nextTick } from 'vue'
-import Vuetify from 'vuetify'
+import { nextTick } from 'vue'
 import { useStore } from '../../src/store/store'
-import { Wrapper } from '@vue/test-utils'
 
 // Components
 import { HomeCertification } from '@/components/mhrRegistration'
-import { SharedDatePicker } from '@/components/common'
 import flushPromises from 'flush-promises'
 import { MhrRegistrationType } from '@/resources'
 import { mockedManufacturerAuthRoles } from './test-data'
 import { HomeCertificationOptions, AuthRoles, ProductCode } from '@/enums'
-import { createComponent } from './utils'
-
-Vue.use(Vuetify)
+import { createComponent, getTestId } from './utils'
+import { InputFieldDatePicker } from '@/components/common'
 
 const store = useStore()
 
 describe('Home Certification - staff', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
 
   beforeAll(async () => {
     await store.setAuthRoles([AuthRoles.PPR_STAFF, AuthRoles.STAFF, AuthRoles.MHR, AuthRoles.PPR])
   })
 
   beforeEach(async () => {
-    wrapper = await createComponent(HomeCertification, {})
+    wrapper = await createComponent(HomeCertification, { appReady: true })
     await store.setMhrHomeDescription({ key: 'certificationOption', value: null })
     await store.setMhrHomeDescription({ key: 'hasNoCertification', value: null })
     wrapper.vm.certificationOption = null
     wrapper.vm.hasNoCertification = false
     await nextTick()
     await flushPromises()
   })
-  afterEach(() => {
-    wrapper.destroy()
-  })
 
   afterAll(async () => {
     await store.setAuthRoles([])
   })
 
   it('renders base component with default sub components', async () => {
     expect(wrapper.findComponent(HomeCertification).exists()).toBe(true)
-    expect(wrapper.findComponent(SharedDatePicker).exists()).toBe(false)
+    expect(wrapper.findComponent(InputFieldDatePicker).exists()).toBe(false)
   })
 
   it('renders with default values', async () => {
     /// Verify Radio grp
-    expect(wrapper.find('#certification-option-btns').exists()).toBe(true)
+    expect(wrapper.find(getTestId('certification-option-btns')).exists()).toBe(true)
 
     // Verify Forms hidden before radio btn selection
     expect(wrapper.find('#csa-form').isVisible()).toBe(false)
     expect(wrapper.find('#engineer-form').isVisible()).toBe(false)
     expect(wrapper.find('#no-certification-checkbox').isVisible()).toBe(true)
-    expect(wrapper.find('#no-certification-tooltip').exists()).toBe(true)
+    expect(wrapper.find(getTestId('no-certification-tooltip')).exists()).toBe(true)
   })
 
   it('opens the CSA Form when selected', async () => {
@@ -63,7 +56,7 @@ describe('Home Certification - staff', () => {
     expect(wrapper.find('#engineer-form').isVisible()).toBe(false)
 
     // Click the btn
-    await wrapper.find('#csa-option').trigger('click')
+    await wrapper.find('#csa-option').setValue(true)
 
     // Verify CSA Form
     expect(wrapper.find('#csa-form').isVisible()).toBe(true)
@@ -82,7 +75,7 @@ describe('Home Certification - staff', () => {
     expect(wrapper.find('#engineer-form').isVisible()).toBe(false)
 
     // Click the btn
-    await wrapper.find('#engineer-option').trigger('click')
+    await wrapper.find('#engineer-option').setValue(true)
 
     // Verify Engineer Form
     expect(wrapper.find('#engineer-form').isVisible()).toBe(true)
@@ -101,7 +94,7 @@ describe('Home Certification - staff', () => {
     expect(wrapper.find('#engineer-form').isVisible()).toBe(false)
 
     // Click the btn
-    await wrapper.find('#engineer-option').trigger('click')
+    await wrapper.find('#engineer-option').setValue(true)
 
     // Verify Engineer Form
     expect(wrapper.find('#engineer-form').isVisible()).toBe(true)
@@ -116,7 +109,7 @@ describe('Home Certification - staff', () => {
     // Verify Form Toggle
 
     // Click the btn
-    await wrapper.find('#csa-option').trigger('click')
+    await wrapper.find('#csa-option').setValue(true)
 
     // Verify CSA Form
     expect(wrapper.find('#csa-form').isVisible()).toBe(true)
@@ -131,39 +124,39 @@ describe('Home Certification - staff', () => {
 
   it('renders the DatePicker for the engineer option', async () => {
     // Click the btn
-    await wrapper.find('#engineer-option').trigger('click')
-    expect(wrapper.findComponent(SharedDatePicker).exists()).toBe(true)
+    await wrapper.find('#engineer-option').setValue(true)
+    expect(wrapper.findComponent(InputFieldDatePicker).exists()).toBe(true)
   })
 
   it('collapses form if no certification checkbox is selected', async () => {
-    await wrapper.find('#csa-option').trigger('click')
+    await wrapper.find('#csa-option').setValue(true)
     expect(wrapper.find('#csa-form').isVisible()).toBe(true)
 
-    await wrapper.find('#no-certification-checkbox').trigger('click')
+    await wrapper.find('#no-certification-checkbox').setValue(true)
     expect(wrapper.find('#csa-form').isVisible()).toBe(false)
   })
 
   it('disables buttons if no certification checkbox is selected', async () => {
-    await wrapper.find('#no-certification-checkbox').trigger('click')
+    await wrapper.find('#no-certification-checkbox').setValue(false)
 
-    expect(wrapper.find('#csa-option').attributes('disabled')).toBe('disabled')
-    expect(wrapper.find('#engineer-option').attributes('disabled')).toBe('disabled')
+    expect(wrapper.find('#csa-option').getCurrentComponent().props.disabled).toBe(false)
+    expect(wrapper.find('#engineer-option').getCurrentComponent().props.disabled).toBe(false)
 
     // Enables button after unselected
-    await wrapper.find('#no-certification-checkbox').trigger('click')
-    expect(wrapper.find('#csa-option').attributes('disabled')).toBe(undefined)
-    expect(wrapper.find('#engineer-option').attributes('disabled')).toBe(undefined)
+    await wrapper.find('#no-certification-checkbox').setValue(true)
+    expect(wrapper.find('#csa-option').getCurrentComponent().props.disabled).toBe(true)
+    expect(wrapper.find('#engineer-option').getCurrentComponent().props.disabled).toBe(true)
   })
 
   it('sets the home certification section to valid if no certification checkbox is selected', async () => {
     expect(store.getMhrRegistrationValidationModel.yourHomeValid.homeCertificationValid).toBe(false)
-    await wrapper.find('#no-certification-checkbox').trigger('click')
+    await wrapper.find('#no-certification-checkbox').setValue(true)
     expect(store.getMhrRegistrationValidationModel.yourHomeValid.homeCertificationValid).toBe(true)
   })
 })
 
 describe('Home Certification - manufacturer', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
 
   beforeAll(async () => {
     await store.setAuthRoles(mockedManufacturerAuthRoles)
@@ -174,30 +167,27 @@ describe('Home Certification - manufacturer', () => {
   })
 
   beforeEach(async () => {
-    wrapper = await createComponent(HomeCertification, {})
+    wrapper = await createComponent(HomeCertification, { appReady: true })
     await nextTick()
     await flushPromises()
   })
-  afterEach(() => {
-    wrapper.destroy()
-  })
 
   afterAll(async () => {
-    await store.setAuthRoles(null)
+    await store.setAuthRoles([])
     await store.setRegistrationType(null)
   })
 
   it('renders base component with correct sub components', async () => {
     expect(wrapper.findComponent(HomeCertification).exists()).toBe(true)
-    expect(wrapper.findComponent(SharedDatePicker).exists()).toBe(false)
+    expect(wrapper.findComponent(InputFieldDatePicker).exists()).toBe(false)
 
     /// Verify Radio group does not exist
-    expect(wrapper.find('#certification-option-btns').exists()).toBe(false)
+    expect(wrapper.find(getTestId('certification-option-btns')).exists()).toBe(false)
 
     // Verify only csa-form is shown
     expect(wrapper.find('#csa-form').isVisible()).toBe(true)
     expect(wrapper.find('#engineer-form').exists()).toBe(false)
     expect(wrapper.find('#no-certification').exists()).toBe(false)
-    expect(wrapper.find('#no-certification-tooltip').exists()).toBe(false)
+    expect(wrapper.find(getTestId('no-certification-tooltip')).exists()).toBe(false)
   })
 })

ppr-ui/tests/unit/HomeLandOwnership.spec.ts

@@ -1,48 +1,18 @@
 // Libraries
-import Vue, { nextTick } from 'vue'
-import Vuetify from 'vuetify'
-import { mount, createLocalVue, Wrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 // Components
 import { HomeLandOwnership } from '@/components/mhrRegistration'
-import flushPromises from 'flush-promises'
-import { getTestId } from './utils'
-import { createPinia, setActivePinia } from 'pinia'
+import { createComponent, getTestId } from './utils'
 import { useStore } from '../../src/store/store'
 
-Vue.use(Vuetify)
-
-const vuetify = new Vuetify({})
-setActivePinia(createPinia())
 const store = useStore()
-/**
- * Creates and mounts a component, so that it can be tested.
- *
- * @returns a Wrapper<SearchBar> object with the given parameters.
- */
-function createComponent (): Wrapper<any> {
-  const localVue = createLocalVue()
-  localVue.use(Vuetify)
-
-  document.body.setAttribute('data-app', 'true')
-  return mount((HomeLandOwnership as any), {
-    localVue,
-    propsData: {},
-    store,
-    vuetify
-  })
-}
 
 describe('Home Land Ownership', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
 
   beforeEach(async () => {
-    wrapper = createComponent()
-    await nextTick()
-    await flushPromises()
-  })
-  afterEach(() => {
-    wrapper.destroy()
+    wrapper = await createComponent(HomeLandOwnership)
   })
 
   it('renders base component', async () => {