From a51be8c2413e1fd149bf30fe6eb9585de2a70865 Mon Sep 17 00:00:00 2001
From: Severin Beauvais <severin.beauvais@gov.bc.ca>
Date: Tue, 10 Sep 2024 11:22:03 -0700
Subject: [PATCH 1/2] - added invalid-section styling - fixed whitespace -
 simplified v-radio template - fixed validations - fixed change/input/error
 handling - added validate prop - updated court order number rules text -
 fixed initial state (when mounted) - fixed validation - fixed lint issues

---
 src/components/approval-type/ApprovalType.vue | 238 +++++++++---------
 1 file changed, 117 insertions(+), 121 deletions(-)

diff --git a/src/components/approval-type/ApprovalType.vue b/src/components/approval-type/ApprovalType.vue
index 774235b4..75531e77 100644
--- a/src/components/approval-type/ApprovalType.vue
+++ b/src/components/approval-type/ApprovalType.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="approval-type">
+  <div
+    id="approval-type"
+    :class="{ 'invalid-section': invalidSection }"
+  >
     <v-row no-gutters>
       <v-col
         cols="12"
@@ -8,87 +11,81 @@
       >
         <label :class="{ 'error-text': invalidSection }">Approval Type</label>
       </v-col>
+
       <v-col
         cols="12"
         sm="9"
-        class="mt-n4"
+        class="mb-n5"
       >
         <v-radio-group
-          v-model="approvalTypeSelected"
-          class="payment-group pt-0"
-          @change="radioButtonChanged"
+          class="payment-group mt-0"
+          :value="approvalTypeSelected"
+          @change="setApprovalTypeSelected($event)"
         >
-          <!-- COURT ORDER section -->
-          <template v-if="!isCourtOrderRadio">
-            <span class="v-label ml-2 mb-2">{{ getRadioText(ApprovalTypes.VIA_COURT_ORDER) }}</span>
-          </template>
-          <template v-else>
-            <v-radio
-              id="court-order-radio"
-              class="mb-n3"
-              :label="getRadioText(ApprovalTypes.VIA_COURT_ORDER)"
-              :value="ApprovalTypes.VIA_COURT_ORDER"
-            />
-          </template>
-          <v-form
-            id="court-num-form"
-            ref="courtNumRef"
-            v-model="valid"
-            class="mt-8 ml-2"
+          <!-- court order section -->
+          <v-radio
+            v-if="isCourtOrderRadio"
+            id="court-order-radio"
+            class="mb-0"
+            :label="getRadioText(ApprovalTypes.VIA_COURT_ORDER)"
+            :value="ApprovalTypes.VIA_COURT_ORDER"
+          />
+          <span
+            v-else
+            class="v-label"
           >
-            <v-expand-transition class="pb-0 mb-0">
+            {{ getRadioText(ApprovalTypes.VIA_COURT_ORDER) }}
+          </span>
+          <v-form ref="courtNumRef">
+            <v-expand-transition>
               <v-text-field
                 v-if="approvalTypeSelected === ApprovalTypes.VIA_COURT_ORDER"
                 id="court-order-number-input"
-                v-model="courtOrderNumberText"
+                class="mt-4"
                 label="Court Order Number"
-                :rules="courtOrderNumRules"
+                :value="courtOrderNumber"
+                :rules="validate ? courtOrderNumRules : []"
                 hide-details="auto"
                 filled
-                @input="courtOrderNumberChanged"
-                @update:error="emitValidationError($event)"
+                @input="setCourtOrderNumberText($event)"
               />
             </v-expand-transition>
           </v-form>
-          <!-- REGISTRAR section -->
+
+          <!-- registrar section -->
           <v-radio
-            v-if="!isCourtOrderOnly"
+            v-if="isCourtOrderRadio"
             id="registrar-radio"
-            class="mb-n5 pt-2"
+            class="mt-6 mb-0"
             :label="getRadioText(ApprovalTypes.VIA_REGISTRAR)"
             :value="ApprovalTypes.VIA_REGISTRAR"
           />
           <v-expand-transition>
-            <div
-              v-if="approvalTypeSelected === ApprovalTypes.VIA_REGISTRAR"
-              flat
-            >
-              <div class="ml-8 mt-3">
+            <div v-if="approvalTypeSelected === ApprovalTypes.VIA_REGISTRAR">
+              <div class="ml-8 mt-4">
                 <span class="v-label">Enter the date the Notice of the Application for Restoration was published in
                   the BC Gazette:
                 </span>
                 <DatePicker
                   id="date-picker-notice"
-                  ref="noticeDateRef"
                   class="mt-2"
                   title="Select Date"
                   :nudgeRight="150"
                   :initialValue="noticeDate"
-                  :inputRules="datePickerRules"
-                  @emitDateSync="noticeDateChanged($event)"
+                  :inputRules="validate ? datePickerRules : []"
+                  @emitDateSync="setNoticeDateText($event)"
                 />
               </div>
               <div class="ml-8">
                 <span class="v-label">Enter the date the Application for Restoration was mailed to the company:</span>
                 <DatePicker
                   id="date-picker-application"
-                  ref="applicationDateRef"
                   class="mt-2"
                   title="Select Date"
                   :nudgeRight="150"
                   :initialValue="applicationDate"
-                  :inputRules="datePickerRules"
-                  @emitDateSync="applicationDateChanged($event)"
+                  :inputRules="validate ? datePickerRules : []"
+                  @emitDateSync="setApplicationDateText($event)"
                 />
               </div>
             </div>
@@ -101,7 +98,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Emit, Prop } from 'vue-property-decorator'
+import { Component, Emit, Prop, Watch } from 'vue-property-decorator'
 import { ApprovalTypes } from '@bcrs-shared-components/enums'
 import { FormIF } from '@bcrs-shared-components/interfaces'
 import { DatePicker } from '@bcrs-shared-components/date-picker'
@@ -117,148 +114,147 @@ export default class ApprovalType extends Vue {
     courtNumRef: FormIF
   }
 
-  /** Draft court order number. */
+  /** The initial court order number. */
   @Prop({ default: '' }) readonly courtOrderNumber!: string
 
-  /** Whether approved by the registrar. */
+  /** Whether restoration was approved by the registrar. */
   @Prop({ default: false }) readonly approvedByRegistrar!: boolean
 
-  /** filing name used in radio options. */
-  @Prop({ default: 'restoration' }) readonly filingType!: string
+  /** Whether restoration was approved by court order. */
+  @Prop({ default: false }) readonly approvedByCourtOrder!: boolean
 
-  /** Show only the court order option; remove via registrar option. */
-  @Prop({ default: false }) readonly isCourtOrderOnly!: boolean
+  /** Filing name used in radio options. */
+  @Prop({ default: 'restoration' }) readonly filingType!: string
 
-  /** Draft notice date. */
+  /** The initial date the notice of the application for restoration was published in the BC Gazette. */
   @Prop({ default: '' }) readonly noticeDate!: string
 
-  /** Draft application date. */
+  /** The initial date the application for restoration was mailed to the company. */
   @Prop({ default: '' }) readonly applicationDate!: string
 
   /** Whether this section is invalid. */
   @Prop({ default: false }) readonly invalidSection!: boolean
 
-  /** Whether the display of court order section is a radio button. */
+  /** Whether to show the court order radio button. */
   @Prop({ default: true }) readonly isCourtOrderRadio!: boolean
 
+  /** Whether validation is enabled. */
+  @Prop({ default: false }) readonly validate!: boolean
+
   // Local properties
+  private approvalTypeSelected = null as ApprovalTypes
   private courtOrderNumberText = ''
-  private valid = false
-  private approvalTypeSelected = ''
   private noticeDateText = ''
   private applicationDateText = ''
 
   // For template
   readonly ApprovalTypes = ApprovalTypes
 
-  // Date Picker Rules
-  protected readonly datePickerRules = [(v: string) => !!v || 'Date is required']
+  /** Date picker rules. */
+  readonly datePickerRules = [(v: string) => !!v || 'Date is required']
 
-  // Text Field Rules
-  protected readonly courtOrderNumRules = [
+  /** Text field rules. */
+  readonly courtOrderNumRules = [
     (v: string) => (!v || !/^\s/g.test(v)) || 'Invalid spaces', // leading spaces
     (v: string) => (!v || !/\s$/g.test(v)) || 'Invalid spaces', // trailing spaces
-    (v: string) => (!v || !(v.length < 5)) || 'Court order number is invalid',
-    (v: string) => (!v || !(v.length > 20)) || 'Court order number is invalid',
+    (v: string) => (!v || !(v.length < 5)) || 'Court order number is too short',
+    (v: string) => (!v || !(v.length > 20)) || 'Court order number is too long',
     (v: string) => !!v || 'A Court Order number is required'
   ]
 
   /** Called when component is mounted. */
   mounted (): void {
-    // Copy props to mutable properties
+    // copy props to mutable properties
     if (this.approvedByRegistrar) {
-      this.courtOrderNumberText = ''
-      this.approvalTypeSelected = ApprovalTypes.VIA_REGISTRAR
-    } else if (this.courtOrderNumber) {
-      this.courtOrderNumberText = this.courtOrderNumber
-      this.approvalTypeSelected = ApprovalTypes.VIA_COURT_ORDER
-    } else {
-      // Default state (no button selected)
-      this.radioButtonChanged('')
+      // first set approval type, then set values
+      // otherwise, validation will fail
+      this.setApprovalTypeSelected(ApprovalTypes.VIA_REGISTRAR)
+      this.setNoticeDateText(this.noticeDate)
+      this.setApplicationDateText(this.applicationDate)
+    } else if (this.approvedByCourtOrder) {
+      // first set approval type, then set values
+      // otherwise, validation will fail
+      this.setApprovalTypeSelected(ApprovalTypes.VIA_COURT_ORDER)
+      this.setCourtOrderNumberText(this.courtOrderNumber)
     }
-    if (!this.isCourtOrderRadio) {
-      this.approvalTypeSelected = ApprovalTypes.VIA_COURT_ORDER
+  }
+
+  /** When validate flag is set, validates the component. */
+  @Watch('validate')
+  private async onValidateChanged (validate: boolean): Promise<void> {
+    if (validate) {
+      // wait for rules to get processed before validating
+      await Vue.nextTick()
+      this.validateComponent()
     }
   }
 
-  /** Triggers the form validation. */
-  public validate (): boolean {
+  /** Validates the component and emits the validity. */
+  @Emit('valid')
+  private validateComponent (): boolean {
+    let valid = true
     if (this.approvalTypeSelected === ApprovalTypes.VIA_COURT_ORDER) {
-      let status = this.$refs.courtNumRef.validate()
-      this.$emit('valid', status)
-      return status
+      valid = this.$refs.courtNumRef.validate()
     } else if (this.approvalTypeSelected === ApprovalTypes.VIA_REGISTRAR) {
-      // Emit true (valid) if both dates were selected. Emit false (invalid) if at least one was empty.
-      let status = (!!this.noticeDateText && !!this.applicationDateText)
-      this.$emit('valid', status)
-      return status
+      // Valid if validation flag is not set.
+      // Valid if both dates are selected.
+      valid = !this.validate || (!!this.noticeDateText && !!this.applicationDateText)
     } else {
-      // Default state. Emit false (invalid).
-      return false
+      // no type selected (invalid)
+      valid = false
     }
+    return valid
   }
 
-  private emitValidationError (event: boolean): void {
-    this.$emit('valid', !event)
-  }
+  /** Sets Approval Type property, clears old data and emits the new value. */
+  @Emit('approvalTypeChange')
+  private async setApprovalTypeSelected (approvalTypeSelected: ApprovalTypes): Promise<void> {
+    this.approvalTypeSelected = approvalTypeSelected
 
-  // Emit the approval type (radio button selected).
-  @Emit('radioButtonChange')
-  private radioButtonChanged (event: string): void {
-    if (event === ApprovalTypes.VIA_REGISTRAR) {
-      this.courtOrderNumberText = ''
-      this.courtOrderNumberChanged('')
-    } else if (event === ApprovalTypes.VIA_COURT_ORDER) {
-      this.noticeDateChanged('')
-      this.applicationDateChanged('')
-      this.$emit('valid', false)
-    } else {
-      // Default State.
-      this.$emit('valid', false)
+    // wait for rules to get processed before validating
+    await Vue.nextTick()
+
+    // clear old data
+    if (approvalTypeSelected === ApprovalTypes.VIA_REGISTRAR) {
+      this.setCourtOrderNumberText('')
+    } else if (approvalTypeSelected === ApprovalTypes.VIA_COURT_ORDER) {
+      this.setNoticeDateText('')
+      this.setApplicationDateText('')
     }
   }
 
-  // Emit the court number.
+  /** Sets Court Order Number property, validates the component and emits the new value. */
   @Emit('courtNumberChange')
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private courtOrderNumberChanged (event: string): void {
-    this.validate()
+  setCourtOrderNumberText (courtOrderNumberText: string): void {
+    this.courtOrderNumberText = courtOrderNumberText
+    this.validateComponent()
   }
 
+  /** Returns the radio button text. */
   private getRadioText (option: string): string {
     if (option === ApprovalTypes.VIA_COURT_ORDER && this.isCourtOrderRadio) {
       return `This ${this.filingType} is approved by court order.`
     } else if (option === ApprovalTypes.VIA_COURT_ORDER && !this.isCourtOrderRadio) {
-      return 'Enter a Court Order number, as the restoration of this company was ordered by the court:'
+      return `Enter a Court Order number, as the ${this.filingType} of this company was ordered by the court:`
     }
     if (option === ApprovalTypes.VIA_REGISTRAR) {
       return `This ${this.filingType} is approved by registrar.`
     }
-    return '[error]'
+    return '[unknown]' // should never happen
   }
 
-  /**
-   * Emit the date the notice of the application for restoration was published in the BC Gazette.
-   * Validate that a date was successfully selected.
-   * @param noticeDate is the date that was selected (if any)
-   */
+  /** Sets Notice Date property, validates the component and emits the new value. */
   @Emit('update:noticeDate')
-  private noticeDateChanged (noticeDate: string): string {
-    this.noticeDateText = noticeDate
-    this.validate()
-    return noticeDate
+  private setNoticeDateText (noticeDateText: string): void {
+    this.noticeDateText = noticeDateText
+    this.validateComponent()
   }
 
-  /**
-   * Emit the date the application for restoration was mailed to the company.
-   * Validate that a date was successfully selected.
-   * @param applicationDate is the date that was selected (if any)
-   */
+  /** Sets Application Date property, validates the component and emits the new value. */
   @Emit('update:applicationDate')
-  private applicationDateChanged (applicationDate: string): string {
-    this.applicationDateText = applicationDate
-    this.validate()
-    return applicationDate
+  private setApplicationDateText (applicationDateText: string): void {
+    this.applicationDateText = applicationDateText
+    this.validateComponent()
   }
 }
 </script>

From 9a286b066430fa692de17301817764bba323c606 Mon Sep 17 00:00:00 2001
From: Severin Beauvais <severin.beauvais@gov.bc.ca>
Date: Tue, 10 Sep 2024 15:11:26 -0700
Subject: [PATCH 2/2] - small updates to component - updated/fixed unit tests

---
 src/components/approval-type/ApprovalType.vue |  27 ++-
 tests/unit/ApprovalType.spec.ts               | 189 +++++++++---------
 2 files changed, 117 insertions(+), 99 deletions(-)

diff --git a/src/components/approval-type/ApprovalType.vue b/src/components/approval-type/ApprovalType.vue
index 75531e77..23401ecb 100644
--- a/src/components/approval-type/ApprovalType.vue
+++ b/src/components/approval-type/ApprovalType.vue
@@ -18,7 +18,7 @@
         class="mb-n5"
       >
         <v-radio-group
-          class="payment-group mt-0"
+          class="mt-0"
           :value="approvalTypeSelected"
           @change="setApprovalTypeSelected($event)"
         >
@@ -43,7 +43,7 @@
                 id="court-order-number-input"
                 class="mt-4"
                 label="Court Order Number"
-                :value="courtOrderNumber"
+                :value="courtOrderNumberText"
                 :rules="validate ? courtOrderNumRules : []"
                 hide-details="auto"
                 filled
@@ -71,7 +71,7 @@
                   class="mt-2"
                   title="Select Date"
                   :nudgeRight="150"
-                  :initialValue="noticeDate"
+                  :initialValue="noticeDateText"
                   :inputRules="validate ? datePickerRules : []"
                   @emitDateSync="setNoticeDateText($event)"
                 />
@@ -83,7 +83,7 @@
                   class="mt-2"
                   title="Select Date"
                   :nudgeRight="150"
-                  :initialValue="applicationDate"
+                  :initialValue="applicationDateText"
                   :inputRules="validate ? datePickerRules : []"
                   @emitDateSync="setApplicationDateText($event)"
                 />
@@ -114,7 +114,10 @@ export default class ApprovalType extends Vue {
     courtNumRef: FormIF
   }
 
-  /** The initial court order number. */
+  /**
+   * The initial court order number.
+   * Is only read when the component is mounted.
+   */
   @Prop({ default: '' }) readonly courtOrderNumber!: string
 
   /** Whether restoration was approved by the registrar. */
@@ -126,10 +129,16 @@ export default class ApprovalType extends Vue {
   /** Filing name used in radio options. */
   @Prop({ default: 'restoration' }) readonly filingType!: string
 
-  /** The initial date the notice of the application for restoration was published in the BC Gazette. */
+  /**
+   * The initial date the notice of the application for restoration was published in the BC Gazette.
+   * Is only read when the component is mounted.
+   */
   @Prop({ default: '' }) readonly noticeDate!: string
 
-  /** The initial date the application for restoration was mailed to the company. */
+  /**
+   * The initial date the application for restoration was mailed to the company.
+   * Is only read when the component is mounted.
+   */
   @Prop({ default: '' }) readonly applicationDate!: string
 
   /** Whether this section is invalid. */
@@ -194,7 +203,7 @@ export default class ApprovalType extends Vue {
   private validateComponent (): boolean {
     let valid = true
     if (this.approvalTypeSelected === ApprovalTypes.VIA_COURT_ORDER) {
-      valid = this.$refs.courtNumRef.validate()
+      valid = this.$refs.courtNumRef?.validate()
     } else if (this.approvalTypeSelected === ApprovalTypes.VIA_REGISTRAR) {
       // Valid if validation flag is not set.
       // Valid if both dates are selected.
@@ -235,7 +244,7 @@ export default class ApprovalType extends Vue {
     if (option === ApprovalTypes.VIA_COURT_ORDER && this.isCourtOrderRadio) {
       return `This ${this.filingType} is approved by court order.`
     } else if (option === ApprovalTypes.VIA_COURT_ORDER && !this.isCourtOrderRadio) {
-      return `Enter a Court Order number, as the ${this.filingType} of this company was ordered by the court:`
+      return `Enter a Court Order number, as the restoration of this company was ordered by the court:`
     }
     if (option === ApprovalTypes.VIA_REGISTRAR) {
       return `This ${this.filingType} is approved by registrar.`
diff --git a/tests/unit/ApprovalType.spec.ts b/tests/unit/ApprovalType.spec.ts
index 476e4dec..6527bda1 100644
--- a/tests/unit/ApprovalType.spec.ts
+++ b/tests/unit/ApprovalType.spec.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import Vuetify from 'vuetify'
 import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 import { ApprovalType } from '@/components/approval-type'
@@ -14,152 +13,162 @@ localVue.use(VueRouter)
 function createDefaultComponent (
   courtOrderNumber = '',
   approvedByRegistrar = false,
+  approvedByCourtOrder = false,
+  filingType = 'restoration',
   noticeDate = '',
   applicationDate = '',
-  filingType = 'restoration',
-  isExtension = false
+  invalidSection = false,
+  isCourtOrderRadio = true,
+  validate = false
 ): Wrapper<ApprovalType> {
   return mount(ApprovalType, {
     propsData: {
       courtOrderNumber,
       approvedByRegistrar,
+      approvedByCourtOrder,
+      filingType,
       noticeDate,
       applicationDate,
-      filingType,
-      isExtension
+      invalidSection,
+      isCourtOrderRadio,
+      validate
     },
     vuetify,
     localVue
   })
 }
 
-describe('Initialize ApprovalType component', () => {
+describe('ApprovalType component', () => {
+  let wrapper: Wrapper<ApprovalType>
+  let vm: any
+
+  beforeEach(() => {
+    wrapper = createDefaultComponent()
+    vm = wrapper.vm
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
   it('loads the component', () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
     expect(wrapper.findComponent(ApprovalType).exists()).toBe(true)
-    wrapper.destroy()
   })
 
-  it('component default state has no fields populated', () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
-    expect(wrapper.vm.$data.courtOrderNumberText).toBe('')
-    expect(wrapper.vm.$data.approvalTypeSelected).toBe('')
-    expect(wrapper.vm.$data.valid).toBe(true)
-    wrapper.destroy()
+  it('populates default property values', () => {
+    expect(vm.$data.approvalTypeSelected).toBeNull()
+    expect(vm.$data.courtOrderNumberText).toBe('')
+    expect(vm.$data.noticeDateText).toBe('')
+    expect(vm.$data.applicationDateText).toBe('')
   })
 
-  it('if isConversionToFullRestoration prop true, alternative wording shown', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
-    expect(wrapper.find('label.v-label.theme--light').text())
+  it('displays default and updated court order button wording', async () => {
+    // verify court order radio button default wording
+    await wrapper.setProps({
+      approvedByCourtOrder: true
+    })
+    expect(wrapper.find('.v-label').text())
       .toEqual('This restoration is approved by court order.')
 
-    // Prompt validates through prop
-    wrapper.setProps({
+    // verify court order radio button updated wording
+    await wrapper.setProps({
       filingType: 'conversion to full restoration'
     })
-    await Vue.nextTick()
-    expect(wrapper.find('label.v-label.theme--light').text())
+    expect(wrapper.find('.v-label').text())
       .toEqual('This conversion to full restoration is approved by court order.')
-    wrapper.destroy()
   })
 
-  it('component emits events when court order number entered', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
-    // Select court order radio to show the court order number text-field
+  it('emits events when court order is selected and number is entered', async () => {
+    // check the court order radio button to show the court order number text-field
     const radio = wrapper.find('#court-order-radio')
     await radio.setChecked(true)
 
-    // Input text into text-field
+    // set text-field value
     const input = wrapper.find('#court-order-number-input')
     await input.setValue('89123456')
 
+    // verify emitted events
     expect(wrapper.emitted('courtNumberChange').pop()[0]).toEqual('89123456')
-    expect(wrapper.emitted('radioButtonChange').pop()[0]).toEqual('courtOrder')
+    expect(wrapper.emitted('approvalTypeChange').pop()[0]).toEqual('courtOrder')
     expect(wrapper.emitted('valid').pop()[0]).toEqual(true)
-    wrapper.destroy()
   })
 
-  it('component emits events when court order radio selected', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
-    // Input text into text-field
-    const input = wrapper.find('#court-order-radio')
-    input.setChecked()
-    await Vue.nextTick()
-
-    expect(wrapper.emitted('radioButtonChange').pop()[0]).toEqual('courtOrder')
-    expect(wrapper.vm.$data.courtOrderNumRules).not.toEqual([])
-    expect(wrapper.emitted('valid').pop()[0]).toEqual(false)
-    wrapper.destroy()
-  })
+  it('emits invalid if court order number is too short', async () => {
+    await wrapper.setProps({
+      validate: true
+    })
 
-  it('fails valid if the court number is too small', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
-    // Select court order radio to show the court order number text-field
+    // check the court order radio button to show the court order number text-field
     const radio = wrapper.find('#court-order-radio')
-    radio.setChecked(true)
-    await Vue.nextTick()
-    // Input text into text-field
+    await radio.setChecked(true)
+
+    // set text-field value
     const input = wrapper.find('#court-order-number-input')
-    input.setValue('1234')
+    await input.setValue('1234')
 
     expect(wrapper.emitted('courtNumberChange').pop()[0]).toEqual('1234')
-    expect(wrapper.emitted('radioButtonChange').pop()[0]).toEqual('courtOrder')
+    expect(wrapper.emitted('approvalTypeChange').pop()[0]).toEqual('courtOrder')
     expect(wrapper.emitted('valid').pop()[0]).toEqual(false)
-    wrapper.destroy()
   })
 
-  it('validates if the court number is too large', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent()
-    // Select court order radio to show the court order number text-field
+  it('emits invalid if court order numbed is too long', async () => {
+    await wrapper.setProps({
+      validate: true
+    })
+
+    // check the court order radio button to show the court order number text-field
     const radio = wrapper.find('#court-order-radio')
-    radio.setChecked(true)
-    await Vue.nextTick()
-    // Input text into text-field
+    await radio.setChecked(true)
+
+    // set text-field value
     const input = wrapper.find('#court-order-number-input')
-    input.setValue('123456789012345678901')
+    await input.setValue('123456789012345678901')
 
     expect(wrapper.emitted('courtNumberChange').pop()[0]).toEqual('123456789012345678901')
-    expect(wrapper.emitted('radioButtonChange').pop()[0]).toEqual('courtOrder')
+    expect(wrapper.emitted('approvalTypeChange').pop()[0]).toEqual('courtOrder')
     expect(wrapper.emitted('valid').pop()[0]).toEqual(false)
-    wrapper.destroy()
   })
 
-  it('loads draft data correctly when court order selected', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent('1234-567890')
-    expect(wrapper.vm.$data.courtOrderNumberText).toBe('1234-567890')
-    expect(wrapper.vm.$data.approvalTypeSelected).toEqual('courtOrder')
-    wrapper.destroy()
-  })
+  it('loads initial data when court order is selected', async () => {
+    const wrapper2 = mount(ApprovalType, {
+      propsData: {
+        courtOrderNumber: '1234-567890',
+        approvedByCourtOrder: true,
+        validate: true
+      },
+      vuetify,
+      localVue
+    })
+    const vm2 = wrapper2.vm
 
-  it('loads draft data correctly when approved by registrar selected', () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent(
-      '',
-      true
-    )
+    expect(vm2.$data.courtOrderNumberText).toBe('1234-567890')
+    expect(vm2.$data.approvalTypeSelected).toEqual('courtOrder')
+    expect(wrapper2.emitted('courtNumberChange').pop()[0]).toEqual('1234-567890')
+    expect(wrapper2.emitted('valid').pop()[0]).toEqual(true)
 
-    expect(wrapper.vm.$data.courtOrderNumberText).toBe('')
-    expect(wrapper.vm.$data.approvalTypeSelected).toBe('registrar')
-    wrapper.destroy()
+    wrapper2.destroy()
   })
 
-  it('component emits events (dates) when approved by registrar selected', async () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent(
-      '',
-      true,
-      '2023-02-05',
-      '2023-01-19'
-    )
-    await Vue.nextTick()
-
-    expect(wrapper.emitted('update:noticeDate').pop()[0]).toEqual('2023-02-05')
-    expect(wrapper.emitted('update:applicationDate').pop()[0]).toEqual('2023-01-19')
-    wrapper.destroy()
-  })
+  it('loads initial data when registrar is selected', async () => {
+    const wrapper2 = mount(ApprovalType, {
+      propsData: {
+        approvedByRegistrar: true,
+        noticeDate: '2023-02-05',
+        applicationDate: '2023-01-19',
+        validate: true
+      },
+      vuetify,
+      localVue
+    })
+    const vm2 = wrapper2.vm
 
-  it('loads draft data correctly when court order selected when draft is extension', () => {
-    const wrapper: Wrapper<ApprovalType> = createDefaultComponent('1234-567890', false, '', '', 'restoration', true)
-    expect(wrapper.vm.$data.courtOrderNumberText).toBe('1234-567890')
-    expect(wrapper.vm.$data.approvalTypeSelected).toEqual('courtOrder')
-    wrapper.destroy()
+    expect(vm2.$data.approvalTypeSelected).toBe('registrar')
+    expect(vm2.$data.noticeDateText).toBe('2023-02-05')
+    expect(vm2.$data.applicationDateText).toBe('2023-01-19')
+    expect(wrapper2.emitted('update:noticeDate').pop()[0]).toEqual('2023-02-05')
+    expect(wrapper2.emitted('update:applicationDate').pop()[0]).toEqual('2023-01-19')
+    expect(wrapper2.emitted('valid').pop()[0]).toEqual(true)
+
+    wrapper2.destroy()
   })
 })