Merge pull request #62 from bcgov/5715-Invalid-dates-should-be-reject…

…ed-by-the-DatePicker

5715 invalid dates should be rejected by the date picker

frontend/package.json

@@ -20,7 +20,7 @@
     "keycloak-js": "^15.0.2",
     "vue": "^3.2.13",
     "vue-router": "4",
-    "vue3-date-time-picker": "2.5.0",
+    "vue3-date-time-picker": "2.8.0",
     "vuex": "next"
   },
   "devDependencies": {

frontend/src/components/coverage/enrollment/NameSearch.vue

@@ -39,7 +39,8 @@ import GenderRadioButtonGroup from '../../ui/GenderRadioButtonGroup.vue'
 import useVuelidate from '@vuelidate/core'
 import dayjs from 'dayjs'
 import { API_DATE_FORMAT } from '../../../util/constants'
-import { required } from '@vuelidate/validators'
+import { validateDOB, VALIDATE_DOB_MESSAGE } from '../../../util/validators'
+import { required, helpers } from '@vuelidate/validators'
 
 export default {
   name: 'NameSearch',
@@ -107,6 +108,7 @@ export default {
       secondName: {},
       dateOfBirth: {
         required,
+        validateDOB: helpers.withMessage(VALIDATE_DOB_MESSAGE, validateDOB),
       },
       gender: {
         required,

frontend/src/components/coverage/enrollment/ResidentDetailsWithoutPHN.vue

@@ -145,7 +145,18 @@
 import AppSelect from '../../ui/AppSelect.vue'
 import GenderRadioButtonGroup from '../../ui/GenderRadioButtonGroup.vue'
 import useVuelidate from '@vuelidate/core'
-import { validateGroupNumber, validateGroupMemberNumber, validateDepartmentNumber, validateTelephone, VALIDATE_GROUP_NUMBER_MESSAGE, VALIDATE_GROUP_MEMBER_NUMBER_MESSAGE, VALIDATE_DEPARTMENT_NUMBER_MESSAGE, VALIDATE_TELEPHONE_MESSAGE } from '../../../util/validators'
+import {
+  validateGroupNumber,
+  validateGroupMemberNumber,
+  validateDepartmentNumber,
+  validateDOB,
+  validateTelephone,
+  VALIDATE_GROUP_NUMBER_MESSAGE,
+  VALIDATE_GROUP_MEMBER_NUMBER_MESSAGE,
+  VALIDATE_DEPARTMENT_NUMBER_MESSAGE,
+  VALIDATE_DOB_MESSAGE,
+  VALIDATE_TELEPHONE_MESSAGE,
+} from '../../../util/validators'
 import { required, helpers } from '@vuelidate/validators'
 import dayjs from 'dayjs'
 import { API_DATE_FORMAT, IMMIGRATION_CODES, PROVINCES, PRIOR_RESIDENCES } from '../../../util/constants'
@@ -307,6 +318,7 @@ export default {
       secondName: {},
       dateOfBirth: {
         required,
+        validateDOB: helpers.withMessage(VALIDATE_DOB_MESSAGE, validateDOB),
       },
       gender: {
         required,

frontend/tests/e2e/tests/eligibility/CoverageStatusCheckTest.js

@@ -1,8 +1,8 @@
 import { ClientFunction, Selector } from 'testcafe'
 
-import { SITE_UNDER_TEST } from '../../configuration'
 import AlertPage from '../../pages/AlertPage'
 import CoverageStatusCheckPage from '../../pages/eligibility/CoverageStatusCheckPage'
+import { SITE_UNDER_TEST } from '../../configuration'
 import { regularAccUser } from '../../roles/roles'
 
 const ERROR_MESSAGE = 'Please correct errors before submitting'
@@ -59,12 +59,29 @@ test('Check invalid phn format validation', async (t) => {
     .contains(ERROR_MESSAGE)
 })
 
+test('Check when invalid date required fields validation still triggered', async (t) => {
+  await t
+    // Given an invalid month in the date of birth the widget should revert to being empty
+    .typeText(CoverageStatusCheckPage.phnInput, '9306448169')
+    .typeText(CoverageStatusCheckPage.dateOfBirthInput, '19903303')
+    .pressKey('tab')
+    .pressKey('tab')
+    // When I click the submit button
+    .click(CoverageStatusCheckPage.submitButton)
+    // I expect an error message stating the page had errors and individual error messages for the DOB required field
+    .expect(CoverageStatusCheckPage.errorText.nth(0).textContent)
+    .contains(DOB_REQUIRED_MESSAGE)
+    .expect(AlertPage.alertBannerText.textContent)
+    .contains(ERROR_MESSAGE)
+})
+
 test('Check date of birth in future validation', async (t) => {
   await t
     // Given a date of birth entered in the future
     .typeText(CoverageStatusCheckPage.phnInput, '9306448169')
     .typeText(CoverageStatusCheckPage.dateOfBirthInput, '20391103')
     .pressKey('tab')
+    .pressKey('tab')
     // When I click the submit button
     .click(CoverageStatusCheckPage.submitButton)
     // I expect an error message stating the page had errors and an individual error message for the DoB format
@@ -166,6 +183,57 @@ test('Check properly filled form passes validation for an eligible PHN', async (
     .eql('')
 })
 
+test('Check invalid date does not overwrite previous entry', async (t) => {
+  const dateOfService = '20211201'
+  await t
+    // Given the page is filled out correctly
+    .typeText(CoverageStatusCheckPage.phnInput, '9347984074')
+    // and a valid date is entered
+    .typeText(CoverageStatusCheckPage.dateOfBirthInput, '19850915')
+    .pressKey('tab')
+    // entering an invalid date should cause it to be ignored and the previous value kept
+    .typeText(CoverageStatusCheckPage.dateOfBirthInput, '19850945')
+    .pressKey('tab')
+    .expect(CoverageStatusCheckPage.dateOfBirthInput.value)
+    .eql('19850915')
+    // The date input doesn't seem to take a new value without clearing the original value
+    .selectText(CoverageStatusCheckPage.dateOfServiceInput)
+    .pressKey('delete')
+    .typeText(CoverageStatusCheckPage.dateOfServiceInput, dateOfService)
+    .pressKey('tab')
+    // When I click the submit button
+    .expect(CoverageStatusCheckPage.dateOfServiceInput.value)
+    .notEql('')
+    .click(CoverageStatusCheckPage.submitButton)
+    // I expect a success message
+    .expect(AlertPage.alertBannerText.textContent)
+    .contains(SUCCESS_MESSAGE)
+    // And the results to be populated
+    .expect(CoverageStatusCheckPage.result.exists)
+    .ok()
+    .expect(CoverageStatusCheckPage.resultRow1.exists)
+    .ok()
+    .expect(CoverageStatusCheckPage.resultRow1.child('div').nth(0).child('span').textContent)
+    .eql('9347984074')
+    .expect(CoverageStatusCheckPage.resultRow1.child('div').nth(1).child('span').textContent)
+    .eql('GENUS ACRIDOTHERESXC, MOHAMMED-ALIMXB ANJUMXI')
+    .expect(CoverageStatusCheckPage.resultRow1.child('div').nth(2).child('span').textContent)
+    .eql('19850915')
+    .expect(CoverageStatusCheckPage.resultRow1.child('div').nth(3).child('span').textContent)
+    .eql('MALE')
+
+    .expect(CoverageStatusCheckPage.resultRow2.exists)
+    .ok()
+    .expect(CoverageStatusCheckPage.resultRow2.child('div').nth(0).child('span').textContent)
+    .eql(dateOfService)
+    .expect(CoverageStatusCheckPage.resultRow2.child('div').nth(1).child('span').textContent)
+    .eql('YES')
+    .expect(CoverageStatusCheckPage.resultRow2.child('div').nth(2).child('span').textContent)
+    .eql('')
+    .expect(CoverageStatusCheckPage.resultRow2.child('div').nth(3).child('span').textContent)
+    .eql('')
+})
+
 test('Check Subsidy Insured Service CheckBox check and uncheck work', async (t) => {
   await makeVisible('checkSubsidyInsuredService')
   await t