18272 Add unit test for AboutTheBusiness component (#570)

* Add unit test for AboutTheBusiness

* Update AboutTheBusiness tests

* Incorporate Sev's test for AboutTheBusiness

* Check long string date in test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

src/components/AgmExtension/AboutTheBusiness.vue

@@ -20,6 +20,7 @@
           <strong>Business in Good Standing</strong>
         </v-col>
         <v-col
+          id="entity-in-good-standing"
           cols="12"
           sm="9"
         >
@@ -40,6 +41,7 @@
           <strong>Date of Incorporation</strong>
         </v-col>
         <v-col
+          id="entity-date-of-incorporation"
           cols="12"
           sm="9"
         >

tests/unit/AboutTheBusiness.spec.ts

@@ -2,33 +2,49 @@ import Vue from 'vue'
 import Vuetify from 'vuetify'
 import { mount } from '@vue/test-utils'
 import AboutTheBusiness from '@/components/AgmExtension/AboutTheBusiness.vue'
+import { AgmExtEvalIF, EmptyAgmExtEval } from '@/interfaces'
+import { DateUtilities } from '@/services'
 
 Vue.use(Vuetify)
 const vuetify = new Vuetify({})
 
-describe('AboutTheBusiness', () => {
-  it('displays normally', () => {
+describe('About The Business component', () => {
+  it('handles empty data', () => {
+    const wrapper = mount(AboutTheBusiness, {
+      propsData: { data: EmptyAgmExtEval },
+      vuetify
+    })
+
+    expect(wrapper.find('#entity-in-good-standing').text()).toBe('No')
+    expect(wrapper.find('#entity-date-of-incorporation').text()).toBe('')
+
+    wrapper.destroy()
+  })
+
+  it('displays business info properly', () => {
     const wrapper = mount(AboutTheBusiness, {
       propsData: {
         data: {
+          ...EmptyAgmExtEval,
           isGoodStanding: true,
           incorporationDate: new Date('2023-12-31T08:00:00.000Z')
-        }
+        } as AgmExtEvalIF
       },
       vuetify
     })
 
+    // verify component displays properly
     expect(wrapper.find('.v-card').attributes('id')).toBe('about-the-business')
     expect(wrapper.find('header i').attributes('class')).toContain('mdi-domain')
     expect(wrapper.find('header h2').text()).toBe('About the Business')
 
     const rows = wrapper.findAll('.content > .row')
-
     expect(rows.at(0).find('.col-sm-3').text()).toBe('Business in Good Standing')
-    expect(rows.at(0).find('.col-sm-9').text()).toBe('Yes')
-
     expect(rows.at(1).find('.col-sm-3').text()).toBe('Date of Incorporation')
-    expect(rows.at(1).find('.col-sm-9').text()).toBe('December 31, 2023')
+
+    // verify displayed text
+    expect(wrapper.find('#entity-in-good-standing').text()).toBe('Yes')
+    expect(wrapper.find('#entity-date-of-incorporation').text()).toBe('December 31, 2023')
 
     wrapper.destroy()
   })