MakeModel Test Fix

bcgov · Nov 28, 2023 · 484e330 · 484e330
1 parent eaf1fcf
commit 484e330
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 63 deletions.
diff --git a/ppr-ui/src/components/tables/ppr/SearchedResults.vue b/ppr-ui/src/components/tables/ppr/SearchedResults.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="pa-0 bg-white">
+  <v-container class="pa-0 bg-white pb-0">
     <!-- Results Header -->
     <v-row
       v-if="searched"
@@ -80,6 +80,7 @@
           v-if="results"
           id="search-results-table"
           class="results-table"
+          :class="{'hide-scroll': results.length <= 1 }"
           fixedHeader
         >
           <template #default>
@@ -485,4 +486,9 @@ th {
 :deep(.v-table__wrapper) {
   max-height: 550px;
 }
+.hide-scroll {
+  :deep(.v-table__wrapper) {
+    overflow: hidden!important;
+  }
+}
 </style>
diff --git a/ppr-ui/tests/unit/ManufacturerMakeModel.spec.ts b/ppr-ui/tests/unit/ManufacturerMakeModel.spec.ts
@@ -1,47 +1,22 @@
-import Vue, { nextTick } from 'vue'
-import Vuetify from 'vuetify'
-import { createPinia, setActivePinia } from 'pinia'
-import { useStore } from '../../src/store/store'
-
-import { mount, createLocalVue, Wrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { createComponent } from './utils'
 import { getTestId } from './utils'
 import { ManufacturerMakeModel, ManufacturedYearInput, ManufacturedYearSelect } from '@/components/mhrRegistration'
 import { MhrRegistrationType } from '@/resources'
 import { mockedManufacturerAuthRoles } from './test-data'
 import { ProductCode } from '@/enums'
+import { useStore } from '@/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 object with the given parameters.
- */
-function createComponent (): Wrapper<any> {
-  const localVue = createLocalVue()
-  localVue.use(Vuetify)
-
-  return mount((ManufacturerMakeModel as any), {
-    localVue,
-    store,
-    vuetify
-  })
-}
-
 // Error message class selector
-const ERROR_MSG = '.error--text .v-messages__message'
+const ERROR_MSG = '.v-input--error .v-messages__message'
 
 describe('ManufacturerMakeModel component - staff', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
 
   beforeEach(async () => {
-    wrapper = createComponent()
-  })
-  afterEach(() => {
-    wrapper.destroy()
+    wrapper = await createComponent(ManufacturerMakeModel)
   })
 
   it('renders the component', async () => {
@@ -57,82 +32,110 @@ describe('ManufacturerMakeModel component - staff', () => {
     wrapper.find(getTestId('manufacturer-model')).exists()
   })
 
-  it('verifes Name of Manufactuer field is not disabled', async () => {
+  it('verifies Name of Manufacturer field is not disabled', async () => {
     expect(wrapper.find(getTestId('manufacturer-name')).attributes('disabled')).toBe(undefined)
   })
 
   it('show error messages for Name of Manufacturer field', async () => {
-    wrapper.find(getTestId('manufacturer-name')).setValue('x')
-    await nextTick()
-    wrapper.find(getTestId('manufacturer-name')).setValue('')
+    await wrapper.find('#manufacturer-name').setValue('x')
     await nextTick()
+    await wrapper.find('#manufacturer-name').setValue('')
     await nextTick()
+
     expect(wrapper.findAll(ERROR_MSG).length).toBe(1)
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('Enter a manufacturer')
   })
 
   it('show error messages for Manufacturer Make Model inputs', async () => {
-    wrapper.find(getTestId('manufacturer-name')).setValue('x'.repeat(70))
-    wrapper.find(getTestId('manufacture-year')).setValue('x'.repeat(6))
-    wrapper.find(getTestId('manufacturer-make')).setValue('x'.repeat(70))
-    wrapper.find(getTestId('manufacturer-model')).setValue('x'.repeat(70))
+    await wrapper.find('#manufacturer-name').setValue('x'.repeat(70))
+    await wrapper.find('#manufacturer-year').setValue('x'.repeat(6))
+    await wrapper.find('#manufacturer-make').setValue('x'.repeat(70))
+    await wrapper.find('#manufacturer-model').setValue('x'.repeat(70))
     await nextTick()
     const messages = wrapper.findAll(ERROR_MSG)
     expect(messages.length).toBe(4)
   })
 
   it('show error messages for Year of Manufacture field', async () => {
-    const yearInputField = wrapper.find(getTestId('manufacture-year'))
+    // Set defaults to isolate year validation
+    const form = await wrapper.findComponent('.v-form')
+    await wrapper.find('#manufacturer-name').setValue('x')
+    await wrapper.find('#manufacturer-make').setValue('x')
+    await wrapper.find('#manufacturer-model').setValue('x')
 
+    const yearInputField = await wrapper.find('#manufacturer-year')
     yearInputField.setValue('1899')
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).length).toBe(1)
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('19 or 20')
 
     yearInputField.setValue('')
     yearInputField.setValue('1955')
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).length).toBe(0)
 
     yearInputField.setValue('')
     yearInputField.setValue('20')
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('Minimum 4')
 
     yearInputField.setValue('')
     yearInputField.setValue('200000')
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('Maximum 4')
 
     yearInputField.setValue('')
     yearInputField.setValue('20aa')
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('numbers only')
 
     yearInputField.setValue('')
     yearInputField.setValue('2033') // Enter grater number than year + 1
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('more than 1')
   })
 
   it('show error messages for Make and Model fields', async () => {
-    wrapper.find(getTestId('manufacturer-make')).setValue('x'.repeat(30))
-    wrapper.find(getTestId('manufacturer-model')).setValue('x'.repeat(30))
-    await nextTick()
+    const form = await wrapper.findComponent('.v-form')
+    await wrapper.find('#manufacturer-name').setValue('x')
+    await wrapper.find('#manufacturer-year').setValue('2000')
+    await wrapper.find('#manufacturer-make').setValue('x'.repeat(30))
+    await wrapper.find('#manufacturer-model').setValue('x'.repeat(30))
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).length).toBe(0)
 
     // Enter more than 65 chars into Make and Model field to
     // exceed the limit for combined field length
-    wrapper.find(getTestId('manufacturer-make')).setValue('x'.repeat(35))
-    wrapper.find(getTestId('manufacturer-model')).setValue('x'.repeat(35))
+    await wrapper.find('#manufacturer-make').setValue('x'.repeat(35))
+    await wrapper.find('#manufacturer-model').setValue('x'.repeat(35))
     await nextTick()
+
+    // Validate Form
+    await form.vm.validate()
     await nextTick()
     expect(wrapper.findAll(ERROR_MSG).length).toBe(2)
     expect(wrapper.findAll(ERROR_MSG).at(0).text()).toContain('cannot exceed 65')
@@ -141,7 +144,7 @@ describe('ManufacturerMakeModel component - staff', () => {
 })
 
 describe('ManufacturerMakeModel component - manufacturer', () => {
-  let wrapper: Wrapper<any>
+  let wrapper
 
   beforeAll(async () => {
     await store.setAuthRoles(mockedManufacturerAuthRoles)
@@ -150,15 +153,7 @@ describe('ManufacturerMakeModel component - manufacturer', () => {
   })
 
   beforeEach(async () => {
-    wrapper = createComponent()
-  })
-  afterEach(() => {
-    wrapper.destroy()
-  })
-
-  afterAll(async () => {
-    await store.setAuthRoles(null)
-    await store.setRegistrationType(null)
+    wrapper = await createComponent(ManufacturerMakeModel)
   })
 
   it('renders the component', async () => {
@@ -175,23 +170,24 @@ describe('ManufacturerMakeModel component - manufacturer', () => {
     wrapper.find(getTestId('manufacturer-model')).exists()
   })
 
-  it('verifes Name of Manufacturer field is disabled', async () => {
-    expect(wrapper.find(getTestId('manufacturer-name')).attributes('disabled')).toBe('disabled')
+  it('verifies Name of Manufacturer field is disabled', async () => {
+    expect(wrapper.find('#manufacturer-name').attributes().disabled).toBeDefined()
   })
 
   it('show error messages for Manufacturer Make Model inputs', async () => {
-    wrapper.find(getTestId('manufacturer-make')).setValue('x'.repeat(70))
-    wrapper.find(getTestId('manufacturer-model')).setValue('x'.repeat(70))
+    await wrapper.find('#manufacturer-make').setValue('x'.repeat(70))
+    await wrapper.find('#manufacturer-model').setValue('x'.repeat(70))
     await nextTick()
+
     const messages = wrapper.findAll(ERROR_MSG)
     expect(messages.length).toBe(2)
   })
 
   it('checks year of manufacturer select works as expected', async () => {
     const yearSelect = wrapper.findComponent(ManufacturedYearSelect)
-    const select = yearSelect.find('.v-select')
-    const items = select.props('items')
+    const select = await yearSelect.findComponent('.v-select')
     const currentYear = new Date().getFullYear()
-    expect(items).toStrictEqual([currentYear + 1, currentYear, currentYear - 1])
+
+    expect(select.vm.items).toStrictEqual([currentYear + 1, currentYear, currentYear - 1])
   })
 })