21154 - Unit tests for all involuntary dissolution views/components (#…

…2852)

* 21154 - Added unit tests for all involuntary dissolution views/components

* possible fix to sonarcloud issue

* Fixed SonarCloud issue

* updated package version after rebase

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.22",
+  "version": "2.6.23",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/auth/staff/DissolutionSchedule.vue

@@ -22,13 +22,14 @@
             cols="12"
             sm="3"
           >
-            <label id="company-label">Dissolution Batch Size</label>
+            <span id="dissolution-batch-size-text">Dissolution Batch Size</span>
           </v-col>
           <v-col
             cols="12"
             sm="9"
           >
             <v-text-field
+              id="dissolution-batch-size-text-field"
               ref="numberOfBusinessesRef"
               v-model="numberOfBusinessesEdit"
               filled
@@ -51,7 +52,7 @@
           cols="12"
           sm="3"
         >
-          <label id="company-label">Schedule Summary</label>
+          <span id="schedule-summary-text">Schedule Summary</span>
         </v-col>
         <v-col
           cols="12"
@@ -70,7 +71,7 @@
             class="text-right"
           >
             <v-btn
-              class="edit-button"
+              id="edit-btn"
               @click="triggerEditOnOff()"
             >
               <v-icon>mdi-pencil</v-icon>
@@ -89,6 +90,7 @@
             class="text-right"
           >
             <v-btn
+              id="cancel-btn"
               color="primary"
               large
               outlined
@@ -98,6 +100,7 @@
               Cancel
             </v-btn>
             <v-btn
+              id="save-btn"
               color="primary"
               large
               @click="saveBtnClicked()"
@@ -203,14 +206,14 @@ export default defineComponent({
 .section-container {
   color: $gray9;
 
-  label {
+  #dissolution-batch-size-text, #schedule-summary-text {
     color: $gray9;
     font-weight: bold;
   }
 }
 
 // Remove background + shadow of the edit button. Change the colors to app blue.
-::v-deep .edit-button {
+::v-deep #edit-btn {
   background-color: transparent !important;
   color: $app-blue;
   box-shadow: none;

auth-web/tests/unit/components/CardHeader.spec.ts

@@ -0,0 +1,40 @@
+import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
+import CardHeader from '@/components/CardHeader.vue'
+import Vuetify from 'vuetify'
+
+describe('CardHeader.vue', () => {
+  let wrapper: Wrapper<any>
+
+  beforeEach(() => {
+    const localVue = createLocalVue()
+
+    wrapper = mount(CardHeader, {
+      localVue,
+      vuetify: new Vuetify({}),
+      propsData: {
+        badgeText: 'Megatron',
+        icon: 'mdi-calendar-clock',
+        label: 'Optimus Prime',
+        showBadge: true
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('renders the component properly', () => {
+    expect(wrapper.findComponent(CardHeader).exists()).toBe(true)
+    expect(wrapper.find('.v-card-header').exists()).toBe(true)
+    expect(wrapper.find('.v-card-header').find('.v-icon').exists()).toBe(true)
+    expect(wrapper.find('.v-card-header').find('.v-chip').exists()).toBe(true)
+    expect(wrapper.find('.v-card-label').exists()).toBe(true)
+  })
+
+  it('shows proper components with proper content', () => {
+    expect(wrapper.find('.v-card-header').find('.v-icon').attributes().class.includes('mdi-calendar-clock')).toBe(true)
+    expect(wrapper.find('.v-card-label').text()).toBe('Optimus Prime')
+    expect(wrapper.find('.v-card-header').find('.v-chip').text()).toBe('Megatron')
+  })
+})

auth-web/tests/unit/components/DissolutionSchedule.spec.ts

@@ -0,0 +1,118 @@
+import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
+import DissolutionSchedule from '@/components/auth/staff/DissolutionSchedule.vue'
+import { InvoluntaryDissolutionConfigNames } from '@/util/constants'
+import StaffService from '../../../src/services/staff.services'
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { useStaffStore } from '@/stores'
+
+describe('DissolutionSchedule.vue', () => {
+  let wrapper: Wrapper<any>
+
+  beforeEach(() => {
+    const localVue = createLocalVue()
+
+    vi.spyOn((StaffService as any), 'getInvoluntaryDissolutionBatchSize').mockImplementation(() => ({}))
+
+    const staffStore = useStaffStore()
+    staffStore.involuntaryDissolutionConfigurations = {
+      configurations: [
+        {
+          'fullDescription': 'Number of involuntary dissolutions per day.',
+          'name': InvoluntaryDissolutionConfigNames.NUM_DISSOLUTIONS_ALLOWED,
+          'shortDescription': 'Number of involuntary dissolutions per day.',
+          'value': '250'
+        }
+      ]
+    }
+
+    wrapper = mount(DissolutionSchedule, {
+      localVue,
+      vuetify: new Vuetify({})
+    })
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('renders the component properly', () => {
+    expect(wrapper.findComponent(DissolutionSchedule).exists()).toBe(true)
+    expect(wrapper.find('#dissolution-schedule').isVisible()).toBe(true)
+    expect(wrapper.find('#schedule-summary-text').exists()).toBe(true)
+    expect(wrapper.find('.section-container').exists()).toBe(true)
+  })
+
+  it('shows the proper schedule summary text', async () => {
+    await Vue.nextTick()
+    expect(wrapper.find('#schedule-summary-text').text()).toBe('Schedule Summary')
+    expect(wrapper.findAll('span').at(1).text()).toContain('Moving 250 businesses into D1 dissolution every Tuesday,')
+    expect(wrapper.findAll('span').at(1).text()).toContain(' Wednesday, and Thursday at 12:15 a.m. Pacific Time.')
+  })
+
+  it('clicking on edit button shows the editing panel', async () => {
+    // verify that proper components don't exist
+    expect(wrapper.vm.isEdit).toBe(false)
+    expect(wrapper.find('#dissolution-batch-size-text').exists()).toBe(false)
+    expect(wrapper.find('#dissolution-batch-size-text-field').exists()).toBe(false)
+
+    // verify Edit button and click it
+    const editButton = wrapper.find('#edit-btn')
+    expect(editButton.text()).toBe('Edit')
+    await editButton.trigger('click')
+
+    // verify that proper components exist and now are visible
+    expect(wrapper.vm.isEdit).toBe(true)
+    expect(wrapper.find('#dissolution-batch-size-text').isVisible()).toBe(true)
+    expect(wrapper.find('#dissolution-batch-size-text-field').isVisible()).toBe(true)
+  })
+
+  it('clicking on cancel button closes the editing panel', async () => {
+    // verify that proper components don't exist
+    expect(wrapper.vm.isEdit).toBe(false)
+    expect(wrapper.find('#cancel-btn').exists()).toBe(false)
+    expect(wrapper.find('#dissolution-batch-size-text').exists()).toBe(false)
+    expect(wrapper.find('#dissolution-batch-size-text-field').exists()).toBe(false)
+
+    // Edit button clicked
+    const editButton = wrapper.find('#edit-btn')
+    await editButton.trigger('click')
+
+    // verify that cancel button now exists and is visible
+    expect(wrapper.find('#cancel-btn').isVisible()).toBe(true)
+
+    // Cancel button clicked
+    const cancelButton = wrapper.find('#cancel-btn')
+    expect(cancelButton.text()).toBe('Cancel')
+    await cancelButton.trigger('click')
+
+    // verify that proper components don't exist anymore and are not shown
+    expect(wrapper.vm.isEdit).toBe(false)
+    expect(wrapper.find('#dissolution-batch-size-text').exists()).toBe(false)
+    expect(wrapper.find('#dissolution-batch-size-text-field').exists()).toBe(false)
+  })
+
+  it('clicking on save button saves the batch size', async () => {
+    expect(wrapper.find('#save-btn').exists()).toBe(false)
+
+    // Edit button clicked
+    const editButton = wrapper.find('#edit-btn')
+    await editButton.trigger('click')
+
+    // verify that save button now exists and is visible
+    expect(wrapper.find('#save-btn').isVisible()).toBe(true)
+
+    // set the batch size to 10 instead of 250
+    const input = wrapper.find('#dissolution-batch-size-text-field')
+    input.setValue('10')
+    input.trigger('change')
+
+    // Save button clicked
+    const saveButton = wrapper.find('#save-btn')
+    expect(saveButton.text()).toBe('Save')
+    await saveButton.trigger('click')
+
+    // the number is updated
+    expect(wrapper.findAll('span').at(2).text()).toContain('Moving 10 businesses into D1 dissolution every Tuesday,')
+  })
+})

auth-web/tests/unit/views/InvoluntaryDissolution.spec.ts

@@ -1,8 +1,12 @@
 import { Wrapper, createLocalVue, mount } from '@vue/test-utils'
+import { useStaffStore, useUserStore } from '@/stores'
+import CardHeader from '@/components/CardHeader.vue'
+import DissolutionSchedule from '@/components/auth/staff/DissolutionSchedule.vue'
 import InvoluntaryDissolution from '@/views/auth/staff/InvoluntaryDissolution.vue'
 import { Role } from '@/util/constants'
+import StaffService from '../../../src/services/staff.services'
+import Vue from 'vue'
 import Vuetify from 'vuetify'
-import { useUserStore } from '@/stores'
 
 const vuetify = new Vuetify({})
 
@@ -12,6 +16,13 @@ describe('StaffDashboardView tests', () => {
   beforeEach(async () => {
     const localVue = createLocalVue()
 
+    vi.spyOn((StaffService as any), 'getDissolutionStatistics').mockImplementation(() => ({}))
+
+    const staffStore = useStaffStore()
+    staffStore.dissolutionStatistics = {
+      data: { 'eligibleCount': 300 }
+    }
+
     const userStore = useUserStore()
     userStore.currentUser = {
       roles: [Role.Staff]
@@ -27,8 +38,20 @@ describe('StaffDashboardView tests', () => {
     wrapper.destroy()
   })
 
-  it('renders view with child components', async () => {
+  it('renders components properly', () => {
+    expect(wrapper.findComponent(CardHeader).exists()).toBe(true)
+    expect(wrapper.findComponent(DissolutionSchedule).exists()).toBe(true)
     expect(wrapper.findComponent(InvoluntaryDissolution).exists()).toBe(true)
+    expect(wrapper.find('#company-summary-vcard').exists()).toBe(true)
+    expect(wrapper.find('.loading-container').exists()).toBe(true)
+    expect(wrapper.find('.view-header').exists()).toBe(true)
+  })
+
+  it('renders child components with correct information', async () => {
+    await Vue.nextTick()
     expect(wrapper.find('h1').text()).toBe('Staff Involuntary Dissolution Batch')
+    expect(wrapper.find('h2').text()).toBe('Automated Dissolution')
+    expect(wrapper.findAll('p').at(0).text()).toBe('B.C. Business Ready for D1 Dissolution: 300')
+    expect(wrapper.findAll('p').at(1).text()).toContain('You can set up a schedule to automate the involuntary dissolution process.')
   })
 })