display normalized name in the input field (#26)

* update code style to remove warnings and errors * display normalized name in the input field --------- Co-authored-by: Patrick Wang <[email protected]>
bcgov · Oct 17, 2023 · dde646a · dde646a
1 parent 944c688
commit dde646a
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 76 deletions.
diff --git a/btr-web/btr-common-components/components/bcros/inputs/FullNameField.vue b/btr-web/btr-common-components/components/bcros/inputs/FullNameField.vue
@@ -1,25 +1,32 @@
 <template>
-    <UFormGroup :label="label" name="fullName">
-      <UInput
-        :id="id"
-        type="text"
-        v-bind="$attrs"
-        :value="modelValue"
-        color="gray"
-        class="border-b-[2px] bg-gray-100"
-        variant="none"
-        @input="$emit('update:modelValue', $event.target.value)"
-      />
-    </UFormGroup>
-  </template>
-
-  <script setup lang="ts">
-  
-  defineEmits<{(e: 'update:modelValue', value: string): void}>()
-  defineProps({
-    label: { type: [String], default: '' },
-    id: { type: String, required: true },
-    modelValue: { type: String, default: '' }
-  })
-  </script>
-
+  <UFormGroup :label="label" name="fullName">
+    <UInput
+      :id="id"
+      type="text"
+      v-bind="$attrs"
+      :value="modelValue"
+      color="gray"
+      class="border-b-[2px] bg-gray-100"
+      variant="none"
+      @input="$emit('update:modelValue', $event.target.value)"
+      @blur="normalizeInput"
+    />
+  </UFormGroup>
+</template>
+
+<script setup lang="ts">
+import { normalizeName } from '~/utils/validation/form_inputs'
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>()
+
+const props = defineProps({
+  label: { type: [String], default: '' },
+  id: { type: String, required: true },
+  modelValue: { type: String, default: '' }
+})
+
+const normalizeInput = () => {
+  const normalizedValue = normalizeName(props.modelValue)
+  emit('update:modelValue', normalizedValue)
+}
+</script>
diff --git a/btr-web/btr-common-components/cypress/e2e/pages/examples/form.cy.ts b/btr-web/btr-common-components/cypress/e2e/pages/examples/form.cy.ts
@@ -33,75 +33,88 @@ describe('forms -> validate that form component work inside form', () => {
   it('test the validation rule for the maximum name length', () => {
     cy.on('uncaught:exception', (err) => {
       expect(err.message).to.include('The legal name must not exceed 150 characters')
-      return false;
+      return false
     })
 
-    const email = '[email protected]';
-    const invalidLongName = 'a'.repeat(151);
-    const validLongName = '  ' + 'a'.repeat(150) + '  ';
-    cy.get('#testEmail').type(email);
+    const email = '[email protected]'
+    const invalidLongName = 'a'.repeat(151)
+    const validLongName = '  ' + 'a'.repeat(150) + '  '
+    cy.get('#testEmail').type(email)
 
-    cy.get('#testFullName').type(invalidLongName);
-    cy.get('#exampleSubmitButton').click();
-    cy.contains('The legal name must not exceed 150 characters').should('exist');
+    cy.get('#testFullName').type(invalidLongName)
+    cy.get('#exampleSubmitButton').click()
+    cy.contains('The legal name must not exceed 150 characters').should('exist')
 
-    cy.get('#testFullName').clear().type(validLongName).blur();
-    cy.get('#exampleSubmitButton').click();
-    cy.contains('The legal name must not exceed 150 characters').should('not.exist');
-  });
+    cy.get('#testFullName').clear().type(validLongName).blur()
+    cy.get('#exampleSubmitButton').click()
+    cy.contains('The legal name must not exceed 150 characters').should('not.exist')
+  })
 
 
   it('test the validation rule for the minimum name length', () => {
     cy.on('uncaught:exception', (err) => {
       expect(err.message).to.include('The legal name should contain at least one character')
-      return false;
+      return false
     })
 
-    const email = '[email protected]';
-    const singleCharacter = 'a';
-    cy.get('#testEmail').type(email);
+    const email = '[email protected]'
+    const singleCharacter = 'a'
+    cy.get('#testEmail').type(email)
 
-    cy.get('#exampleSubmitButton').click();
-    cy.contains('The legal name should contain at least one character').should('exist');
+    cy.get('#exampleSubmitButton').click()
+    cy.contains('The legal name should contain at least one character').should('exist')
 
-    cy.get('#testFullName').type(singleCharacter).blur();
-    cy.get('#exampleSubmitButton').click();
-    cy.contains('The legal name should contain at least one character').should('not.exist');
-  });
+    cy.get('#testFullName').type(singleCharacter).blur()
+    cy.get('#exampleSubmitButton').click()
+    cy.contains('The legal name should contain at least one character').should('not.exist')
+  })
 
 
   it('test the validation rule for special character', () => {
     cy.on('uncaught:exception', (err) => {
       expect(err.message).to.include('The legal name should not contain special character')
-      return false;
+      return false
     })
 
-    const email = '[email protected]';
-    const invalidName = 'first - last';
-    const validName = 'first last';
-    cy.get('#testEmail').type(email);
+    const email = '[email protected]'
+    const invalidName = 'first - last'
+    const validName = 'first last'
+    cy.get('#testEmail').type(email)
 
-    cy.get('#testFullName').type(invalidName);
-    cy.get('#exampleSubmitButton').click();
-    cy.contains('The legal name should not contain special character').should('exist');
+    cy.get('#testFullName').type(invalidName)
+    cy.get('#exampleSubmitButton').click()
+    cy.contains('The legal name should not contain special character').should('exist')
 
-    cy.get('#testFullName').clear().type(validName).blur();
-    cy.get('#exampleSubmitButton').click();
-    cy.contains('The legal name should not contain special character').should('not.exist');
-  });
+    cy.get('#testFullName').clear().type(validName).blur()
+    cy.get('#exampleSubmitButton').click()
+    cy.contains('The legal name should not contain special character').should('not.exist')
+  })
 
 
   it('the full name field should accept UTF-8 characters', () => {
     cy.contains('Full Legal Name:')
-    const email = '[email protected]';
-    cy.get('#testEmail').type(email);
+    const email = '[email protected]'
+    cy.get('#testEmail').type(email)
 
-    const name1 = 'François';
-    const name2 = 'José 玛丽';
+    const name1 = 'François'
+    const name2 = 'José 玛丽'
 
-    cy.get('#testFullName').type(name1);
-    cy.get('#exampleSubmitButton').click();
-    cy.get('#testFullName').clear().type(name2).blur();
-    cy.get('#exampleSubmitButton').click();
+    cy.get('#testFullName').type(name1)
+    cy.get('#exampleSubmitButton').click()
+    cy.get('#testFullName').clear().type(name2).blur()
+    cy.get('#exampleSubmitButton').click()
+  });
+
+
+  it('the displayed name should be normalized', () => {
+    const email = '[email protected]'
+    cy.get('#testEmail').type(email)
+
+    const name = '    First name   M    Last   name    '
+    const normailizeName = 'First name M Last name'
+    cy.get('#testFullName').type(name)
+    cy.get('#testFullName').invoke('val').should('eq', name)
+    cy.get('#testFullName').blur()
+    cy.get('#testFullName').invoke('val').should('eq', normailizeName)
   });
 })
diff --git a/btr-web/btr-common-components/pages/examples/form.vue b/btr-web/btr-common-components/pages/examples/form.vue
@@ -14,7 +14,12 @@
       :state="state"
       @submit="submit"
     >
-      <BcrosInputsFullNameField id="testFullName" v-model="state.fullName" :label="$t('labels.fullName')" data-cy="testFullName" />
+      <BcrosInputsFullNameField
+        id="testFullName"
+        v-model="state.fullName"
+        :label="$t('labels.fullName')"
+        data-cy="testFullName"
+      />
       <BcrosInputsEmailField
         id="testEmail"
         v-model="state.email"
@@ -36,11 +41,10 @@ import { ref } from 'vue'
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui/dist/runtime/types'
 
-import { normalizeName, validateNameCharacters , validateEmailRfc6532Regex} from '~/utils/validation/form_inputs';
-
+import { normalizeName, validateNameCharacters, validateEmailRfc6532Regex } from '~/utils/validation/form_inputs'
 
-const minNameLength = 1;
-const maxNameLength = 150;
+const minNameLength = 1
+const maxNameLength = 150
 
 const { t } = useI18n()
 const schema = z.object({

diff --git a/btr-web/btr-common-components/utils/validation/form_inputs.ts b/btr-web/btr-common-components/utils/validation/form_inputs.ts
@@ -32,8 +32,8 @@ export const validateEmailRfc6532Regex = (email: string): boolean => {
  * @param {string} name - string representation of the name input
  */
 export const validateNameCharacters = (name: string): boolean => {
-  return /^[\p{L}\p{Zs}]+$/u.test(name);
-};
+  return /^[\p{L}\p{Zs}]+$/u.test(name)
+}
 
 /**
  * Normalizes a name string.
@@ -43,7 +43,7 @@ export const validateNameCharacters = (name: string): boolean => {
 */
 export const normalizeName = (name?: string): string => {
   if (name === undefined) {
-    return '';
+    return ''
   }
-  return name.trim().replace(/\s+/g, ' ');
-};
+  return name.trim().replace(/\s+/g, ' ')
+}