16700 Fixed validation in LimitedRestorationPanel component (#258)

* - fixed input handling and validation * - updated unit tests * - don't call validate before component is rendered (fixes unit test warnings) --------- Co-authored-by: Severin Beauvais <severin.beauvais@gov.bc.ca>
bcgov · Sep 13, 2024 · e78170a · e78170a
1 parent ac13e90
commit e78170a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 47 deletions.
diff --git a/src/components/limited-restoration-panel/LimitedRestorationPanel.vue b/src/components/limited-restoration-panel/LimitedRestorationPanel.vue
@@ -45,7 +45,6 @@
           hide-spin-buttons
           :rules="monthsRules"
           :disabled="(radioValue !== 'customMonths')"
-          @input="onMonthsInput($event)"
         />
       </v-form>
       <span class="ml-2 mt-2 month-text">month(s)</span>
@@ -84,9 +83,9 @@ export default class LimitedRestorationPanel extends Vue {
 
   /**
    * Called when the component is mounted.
-   * Sets the initial radio button and months input (if applicable).
    */
   mounted (): void {
+    // set the initial radio button and months input (if applicable)
     if ([24, 18, 12, 6].includes(this.months)) {
       this.radioValue = this.months.toString()
     } else {
@@ -96,49 +95,38 @@ export default class LimitedRestorationPanel extends Vue {
   }
 
   /**
-   * Called when months input has changed.
+   * Called when radio value or input value have changed.
    */
-  async onMonthsInput (input: string): Promise<void> {
-    // ignore non-inputs
-    if (input !== null) {
-      // wait for component updates
+  @Watch('radioValue')
+  @Watch('inputValue')
+  private async onValueChanged (): Promise<void> {
+    if (this.radioValue === 'customMonths') {
+      // wait for component updates then validate the input field
       await this.$nextTick()
-      // validate the input
-      const valid = this.$refs.monthsRef.validate()
-      // emit validity
+      const valid = this.$refs.monthsRef?.validate()
+
+      // emit months and validity
+      this.emitMonths(valid ? +this.inputValue : null) // emit null if invalid
       this.emitValid(valid)
-      // if valid, emit new value
-      if (valid) this.emitMonths(Number(this.inputValue))
-    }
-  }
+    } else {
+      // reset input field validation
+      this.$refs.monthsRef.resetValidation()
 
-  /**
-   * Called when radio button has changed.
-   */
-  @Watch('radioValue')
-  private onRadioValueChanged () {
-    if (this.radioValue !== 'customMonths') {
-      // reset months text field when another radio button is selected
-      this.$refs.monthsRef.reset()
       // emit months and validity
-      this.emitMonths(Number(this.radioValue))
+      this.emitMonths(+this.radioValue)
       this.emitValid(true)
-    } else if (!this.inputValue) {
-      // as there is no input value, this component is invalid
-      // otherwise, validation will be done in onMonthsInput()
-      this.emitValid(false)
     }
   }
 
   /**
-   * Emits the numbed of months selected.
+   * Emits the number of months selected.
    */
   @Emit('months')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private emitMonths (months: number): void {}
 
   /**
-   * Emits whether the number of months selected is valid.
+   * Emits the component validity.
    */
   @Emit('valid')
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -148,6 +136,7 @@ export default class LimitedRestorationPanel extends Vue {
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
+
 .month-text {
   color: $gray7;
 }

diff --git a/tests/unit/LimitedRestorationPanel.spec.ts b/tests/unit/LimitedRestorationPanel.spec.ts
@@ -27,25 +27,23 @@ function createDefaultComponent (
 
 describe('Initialize RelationshipsPanel component', () => {
   it('loads the component', () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent()
+    const wrapper = createDefaultComponent()
 
     expect(wrapper.findComponent(LimitedRestorationPanel).exists()).toBe(true)
 
     wrapper.destroy()
   })
 
-  it('loads with a preset expiry (24 months)', async () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent(24)
-    await Vue.nextTick()
+  it('loads with a preset expiry (24 months)', () => {
+    const wrapper = createDefaultComponent(24)
 
     expect(wrapper.vm.$data.radioValue).toEqual('24')
 
     wrapper.destroy()
   })
 
-  it('loads with a custom expiry (1 month)', async () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent(1)
-    await Vue.nextTick()
+  it('loads with a custom expiry (1 month)', () => {
+    const wrapper = createDefaultComponent(1)
 
     expect(wrapper.vm.$data.radioValue).toEqual('customMonths')
     expect(wrapper.vm.$data.inputValue).toEqual('1')
@@ -54,48 +52,49 @@ describe('Initialize RelationshipsPanel component', () => {
   })
 
   it('emits events when we select a preset expiry (24 months)', async () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent()
-    await Vue.nextTick()
+    const wrapper = createDefaultComponent()
 
     await wrapper.find('#radio-24').setChecked()
+
     expect(wrapper.emitted('valid').pop()[0]).toBe(true)
     expect(wrapper.emitted('months').pop()[0]).toEqual(24)
 
     wrapper.destroy()
   })
 
   it('emits events when we select a custom expiry (1 month)', async () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent()
-    await Vue.nextTick()
-    const vm = wrapper.vm as any
+    const wrapper = createDefaultComponent()
 
     await wrapper.find('#radio-custom').setChecked()
     await wrapper.find('#text-field-months').setValue('1')
+    await Vue.nextTick()
+
     expect(wrapper.emitted('valid').pop()[0]).toBe(true)
     expect(wrapper.emitted('months').pop()[0]).toEqual(1)
 
     wrapper.destroy()
   })
+
   it('emits valid=false when we select 25 months with a max of 24', async () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent()
-    await Vue.nextTick()
-    const vm = wrapper.vm as any
+    const wrapper = createDefaultComponent()
 
     await wrapper.find('#radio-custom').setChecked()
     await wrapper.find('#text-field-months').setValue('25')
+
     expect(wrapper.emitted('valid').pop()[0]).toEqual(false)
+    expect(wrapper.emitted('months').pop()[0]).toEqual(null)
 
     wrapper.destroy()
   })
 
   it('emits valid=true when we select 25 months with a max of 36', async () => {
-    const wrapper: Wrapper<LimitedRestorationPanel> = createDefaultComponent(undefined, 36)
-    await Vue.nextTick()
-    const vm = wrapper.vm as any
+    const wrapper = createDefaultComponent(undefined, 36)
 
     await wrapper.find('#radio-custom').setChecked()
     await wrapper.find('#text-field-months').setValue('25')
+
     expect(wrapper.emitted('valid').pop()[0]).toEqual(true)
+    expect(wrapper.emitted('months').pop()[0]).toEqual(25)
 
     wrapper.destroy()
   })