AGM Location Change Third PR

src/components/AgmLocationChange/AgmYear.vue

@@ -15,7 +15,6 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
 
 @Component({})
 export default class AgmYear extends Vue {
@@ -40,12 +39,6 @@ export default class AgmYear extends Vue {
     this.emitValid(this.value)
   }
 
-  @Watch('value')
-  @Debounce(300)
-  onValueChanged (val: string): void {
-    this.emitValid(val)
-  }
-
   /** Validate AGM year field */
   @Watch('validateForm')
   validateAgmYear (): void {
@@ -57,8 +50,9 @@ export default class AgmYear extends Vue {
 
   /** Emits an event with the changed input (ie, updated v-model). */
   @Emit('input')
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  emitInput (val: string): void {}
+  emitInput (val: string): void {
+    this.emitValid(val)
+  }
 
   /** Emits an event indicating whether or not this component is valid. */
   @Emit('valid')

src/views/AgmLocationChg.vue

@@ -192,8 +192,8 @@
                         sm="8"
                       >
                         <p>
-                          Enter the AGM location not in B.C. Include the city, province or state equivalent, and country.
-                          E.g. "Red Deer, Alberta, Canada"
+                          Enter the AGM location not in B.C. Include the city, province or state equivalent,
+                          and country. E.g. "Red Deer, Alberta, Canada"
                         </p>
                         <AgmLocation
                           v-model="agmLocation"

tests/unit/AgmLocation.spec.ts

@@ -0,0 +1,102 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { mount } from '@vue/test-utils'
+import AgmLocation from '@/components/AgmLocationChange/AgmLocation.vue'
+
+Vue.use(Vuetify)
+const vuetify = new Vuetify({})
+
+// Prevent the warning "[Vuetify] Unable to locate target [data-app]"
+document.body.setAttribute('data-app', 'true')
+
+describe('AgmLocation', () => {
+  /** Array of validations rules for AGM location to be passed as a prop. */
+  const rules = [] as Array<(val) => boolean | string>
+  rules.push(val => !!val || 'AGM location is required.')
+  rules.push(val => (val.length <= 100) || 'Must be 100 characters or less.')
+
+  it('initializes correctly', () => {
+    const wrapper = mount(AgmLocation,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+    const vm: any = wrapper.vm
+
+    expect(vm.agmLocation).toBe('')
+    expect(wrapper.emitted('update:agmLocation')).toBeUndefined()
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('emit correct validation when initial location value is passed', async () => {
+    const wrapper = mount(AgmLocation,
+      {
+        vuetify,
+        propsData: {
+          rules: rules,
+          locationValue: 'Toronto, Ontario, Canada'
+        }
+      })
+
+    expect(wrapper.emitted('valid').pop()[0]).toBe(true)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when a valid agm location is the input', async () => {
+    const wrapper = mount(AgmLocation,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#agm-location')
+    await input.setValue('Toronto, Ontario, Canada')
+
+    expect(wrapper.emitted('update:agmLocation').pop()[0]).toBe('Toronto, Ontario, Canada')
+    expect(wrapper.emitted('valid').pop()[0]).toBe(true)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when an invalid agm location (empty string) is the input', async () => {
+    const wrapper = mount(AgmLocation,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#agm-location')
+    await input.setValue('')
+
+    expect(wrapper.emitted('update:agmLocation').pop()[0]).toBe('')
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when an invalid agm location (over 100 chars) is the input', async () => {
+    const wrapper = mount(AgmLocation,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#agm-location')
+    let testString = ''
+    for (let i = 0; i <= 100; i++) {
+      testString += 'a'
+    }
+    await input.setValue(testString)
+
+    expect(wrapper.emitted('update:agmLocation').pop()[0]).toBe(testString)
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+})

tests/unit/AgmLocationChg.spec.ts

@@ -80,15 +80,8 @@ describe('AGM Location Chg view', () => {
               filing: {
                 agmLocationChange: {
                   year: '2023',
-                  newAgmLocation: {
-                    streetAddress: 'Peter Griffin delivery street address',
-                    streetAddressAdditional: null,
-                    addressCity: 'deliv address city',
-                    addressCountry: 'deliv country',
-                    postalCode: 'H0H0H0',
-                    addressRegion: 'MB',
-                    deliveryInstructions: 'Test notes'
-                  }
+                  agmLocation: 'Toronto, Ontario, Canada',
+                  reason: 'Test Reason'
                 },
                 business: {
                   foundingDate: '2007-04-08T00:00:00+00:00',

tests/unit/AgmYear.spec.ts

@@ -0,0 +1,119 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import { mount } from '@vue/test-utils'
+import AgmYear from '@/components/AgmLocationChange/AgmYear.vue'
+
+Vue.use(Vuetify)
+const vuetify = new Vuetify({})
+
+// Prevent the warning "[Vuetify] Unable to locate target [data-app]"
+document.body.setAttribute('data-app', 'true')
+
+describe('AgmYear', () => {
+  /** Array of validations rules for AGM Year with min and max AGM year. */
+  const today = new Date()
+  const minAgmYear = today.getFullYear() - 2
+  const maxAgmYear = today.getFullYear() + 1
+  const rules = [] as Array<(val) => boolean | string>
+  rules.push(val => !!val || 'AGM year is required.')
+  rules.push(val => (val && +val <= maxAgmYear) || 'Must be on or before ' + maxAgmYear)
+  rules.push(val => (val && +val >= minAgmYear) || 'Must be on or after ' + minAgmYear)
+
+  it('initializes correctly', () => {
+    const wrapper = mount(AgmYear,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+    const vm: any = wrapper.vm
+
+    expect(vm.agmYear).toBe('')
+    expect(wrapper.emitted('input')).toBeUndefined()
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('emit correct validation when valid agm year is passed', async () => {
+    const wrapper = mount(AgmYear,
+      {
+        vuetify,
+        propsData: {
+          rules: rules,
+          value: today.getFullYear()
+        }
+      })
+
+    expect(wrapper.emitted('valid').pop()[0]).toBe(true)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when a valid agm year is the input', async () => {
+    const wrapper = mount(AgmYear,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#year-txt')
+    await input.setValue(today.getFullYear().toString())
+
+    expect(wrapper.emitted('input').pop()[0]).toBe(today.getFullYear().toString())
+    expect(wrapper.emitted('valid').pop()[0]).toBe(true)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when an invalid agm year (empty string) is the input', async () => {
+    const wrapper = mount(AgmYear,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#year-txt')
+    await input.setValue('')
+
+    expect(wrapper.emitted('input').pop()[0]).toBe('')
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when an invalid agm year (less than min) is the input', async () => {
+    const wrapper = mount(AgmYear,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#year-txt')
+    await input.setValue(today.getFullYear() - 3)
+
+    expect(wrapper.emitted('input').pop()[0]).toBe((today.getFullYear() - 3).toString())
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+
+  it('emit correct events when an invalid agm year (more than max) is the input', async () => {
+    const wrapper = mount(AgmYear,
+      {
+        vuetify,
+        propsData: {
+          rules: rules
+        }
+      })
+
+    const input = wrapper.find('#year-txt')
+    await input.setValue(today.getFullYear() + 2)
+
+    expect(wrapper.emitted('input').pop()[0]).toBe((today.getFullYear() + 2).toString())
+    expect(wrapper.emitted('valid').pop()[0]).toBe(false)
+    wrapper.destroy()
+  })
+})

tests/unit/EntityMenu.spec.ts

@@ -478,7 +478,7 @@ describe('Entity Menu - Consent to Continuation click tests', () => {
   })
 })
 
-describe.skip('Entity Menu - Request AGM Extension click tests', () => {
+describe('Entity Menu - Request AGM Extension click tests', () => {
   let vm: any
 
   beforeAll(() => {
@@ -503,6 +503,9 @@ describe.skip('Entity Menu - Request AGM Extension click tests', () => {
     vm = wrapper.vm
     vi.spyOn(vm, 'enableAgmExtension', 'get').mockReturnValue(true)
 
+    // Fix TypeError: GetFeatureFlag(...).includes is not a function test error (unrelated to extensions)
+    vi.spyOn(vm, 'enableAgmLocationChg', 'get').mockReturnValue(true)
+
     await wrapper.find('.menu-btn').trigger('click')
 
     expect(wrapper.find('#agm-ext-list-item').exists()).toBe(true)