Skip to content

Commit

Permalink
update Tax Number component and add tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Patrick Wang authored and Patrick Wang committed Nov 10, 2023
1 parent 68623ac commit de0fe45
Show file tree
Hide file tree
Showing 11 changed files with 198 additions and 183 deletions.
27 changes: 17 additions & 10 deletions btr-web/btr-common-components/cypress/e2e/pages/examples/form/full-name.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,64 @@
describe('forms -> preferred name -> validate that the preferred name component work inside example form', () => {
let en: any

beforeEach(() => {
// load the English version of the language file
cy.readFile('lang/en.json').then((json) => {
en = json
})

// navigate to index page and check footer and header exist
cy.visit('/examples/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')
expect(err.message).to.include(en.errors.validation.fullName.maxLengthExceeded)
return false
})

const invalidLongName = 'a'.repeat(151)
const validLongName = ' ' + 'a'.repeat(150) + ' '

cy.get('#testFullName').type(invalidLongName).blur()
cy.contains('The legal name must not exceed 150 characters').should('exist')
cy.contains(en.errors.validation.fullName.maxLengthExceeded).should('exist')

cy.get('#testFullName').clear().type(validLongName).blur()
cy.contains('The legal name must not exceed 150 characters').should('not.exist')
cy.contains(en.errors.validation.fullName.maxLengthExceeded).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')
expect(err.message).to.include(en.errors.validation.fullName.empty)
return false
})

const singleCharacter = 'a'
cy.get('#testFullName').type(singleCharacter).blur()
cy.contains('The legal name should contain at least one character').should('not.exist')
cy.contains(en.errors.validation.fullName.empty).should('not.exist')

cy.get('#testFullName').clear().blur()
cy.contains('The legal name should contain at least one character').should('exist')
cy.contains(en.errors.validation.fullName.empty).should('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 characters')
expect(err.message).to.include(en.errors.validation.fullName.specialCharacter)
return false
})

const invalidName = 'first - last'
const validName = 'first last'

cy.get('#testFullName').type(invalidName).blur()
cy.contains('The legal name should not contain special characters').should('exist')
cy.contains(en.errors.validation.fullName.specialCharacter).should('exist')

cy.get('#testFullName').clear().type(validName).blur()
cy.contains('The legal name should not contain special characters').should('not.exist')
cy.contains(en.errors.validation.fullName.specialCharacter).should('not.exist')
})

it('the full name field should accept UTF-8 characters', () => {
cy.contains('Full Legal Name:')
cy.contains(en.labels.fullName)
const email = 'abc@email.com'
cy.get('#testEmail').type(email)

Expand Down
31 changes: 16 additions & 15 deletions btr-web/btr-common-components/cypress/e2e/pages/examples/form/preferred-name.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,39 @@
describe('forms -> preferred name -> validate that the preferred name component work inside example form', () => {
let en: any

beforeEach(() => {
// load the English version of the language file
cy.readFile('lang/en.json').then((json) => {
en = json
})

// navigate to index page and check footer and header exist
cy.visit('/examples/form')
})

it('test the validation rule for the maximum length of the preferred name', () => {
cy.on('uncaught:exception', (err) => {
expect(err.message).to.include('The preferred name must not exceed 150 characters')
expect(err.message).to.include(en.errors.validation.preferredName.maxLengthExceeded)
return false
})

const invalidLongName = 'a'.repeat(151)
const validLongName = ' ' + 'a'.repeat(150) + ' '

cy.get('#testPreferredName').type(invalidLongName).blur()
cy.contains('The preferred name must not exceed 150 characters').should('exist')
cy.contains(en.errors.validation.preferredName.maxLengthExceeded).should('exist')

cy.get('#testPreferredName').clear().type(validLongName).blur()
cy.contains('The preferred name must not exceed 150 characters').should('not.exist')
cy.contains(en.errors.validation.preferredName.maxLengthExceeded).should('not.exist')
})

it('preferred name can be empty', () => {
cy.on('uncaught:exception', (err) => {
expect(err.message).to.include('The preferred name should contain at least one character')
return false
})

cy.get('#testPreferredName').clear().blur()
cy.contains('The preferred name should contain at least one character').should('not.exist')
cy.get('#testPreferredName').type('a').clear().blur()
})

it('test the validation rule for special character', () => {
cy.on('uncaught:exception', (err) => {
expect(err.message).to.include('The preferred name should not contain special characters')
expect(err.message).to.include(en.errors.validation.preferredName.specialCharacter)
return false
})

Expand All @@ -42,16 +43,16 @@ describe('forms -> preferred name -> validate that the preferred name component
const unicodeName2 = 'José 玛丽'

cy.get('#testPreferredName').type(invalidName).blur()
cy.contains('The preferred name should not contain special characters').should('exist')
cy.contains(en.errors.validation.preferredName.specialCharacter).should('exist')

cy.get('#testPreferredName').clear().type(validName).blur()
cy.contains('The preferred name should not contain special characters').should('not.exist')
cy.contains(en.errors.validation.preferredName.specialCharacter).should('not.exist')

cy.get('#testPreferredName').clear().type(unicodeName1).blur()
cy.contains('The preferred name should not contain special characters').should('not.exist')
cy.contains(en.errors.validation.preferredName.specialCharacter).should('not.exist')

cy.get('#testPreferredName').clear().type(unicodeName2).blur()
cy.contains('The preferred name should not contain special characters').should('not.exist')
cy.contains(en.errors.validation.preferredName.specialCharacter).should('not.exist')
})

it('the displayed name should be normalized', () => {
Expand Down
5 changes: 0 additions & 5 deletions btr-web/btr-common-components/lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,6 @@
"preferredName": {
"maxLengthExceeded": "The preferred name must not exceed 150 characters",
"specialCharacter": "The preferred name should not contain special characters"
},
"taxNumber": {
"specialCharacter": "The CRA tax number should not contain special characters",
"invalidLength": "The CRA tax number should be 9 digits long",
"invalidNumber": "The CRA tax number is invalid"
}
}
},
Expand Down
14 changes: 0 additions & 14 deletions btr-web/btr-common-components/pages/examples/form.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,20 +68,6 @@
{{ citizenships2 }}
<br>
<br>
<BcrosInputsTaxNumber
id="testTaxNumber"
v-model="state.taxNumber"
:label="$t('labels.taxNumber')"
data-cy="testTaxNumber"
/>
<p>taxNumber: {{ state.taxNumber }}</p>
<BcrosInputsTaxResidency
id="testTaxResidency"
v-model="isTaxResident"
:label="$t('labels.taxResidency')"
data-cy="testTaxResidency"
/>
<p>This person is a Canadian tax resident: {{ isTaxResident }}</p>
<UButton id="exampleSubmitButton" type="submit" data-cy="submit-button">
Submit
</UButton>
Expand Down
153 changes: 39 additions & 114 deletions btr-web/btr-main-app/components/individual-person/AddNew.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,111 +41,8 @@
data-cy="testEmail"
/>
</div>
<div class="text-blue-700 py-5 align-middle">
<a
id="add-person-manually-toggle"
href=""
data-cy="showAddIndividualPersonManually"
class="p-1 underline"
@click.prevent="showAddInfoManually=!showAddInfoManually"
>
<UIcon v-if="showAddInfoManually" name="i-mdi-close" />
{{ showAddInfoManuallyText }}
</a>
</div>
<template v-if="showAddInfoManually">
<div class="flex-col py-5">
<p class="font-bold py-3">
<!-- todo: move this to lang file -->
Beneficial Ownership Assessment
</p>
<p class="text-justify">
<!-- todo: move this to lang file -->
Beneficial Ownership is determined by the control of of shares and/or votes at general meetings,
and control of the right to elect, appoint, or remove directors of the business.

Complete following assessment to determine this person’s beneficial ownership status.
</p>
</div>
<div class="flex-col py-5">
<p class="font-bold py-5">
Control of Shares and Votes
</p>
<p class="text-justify">
Enter the percentage of shares and/or shares entitled to votes at general meetings
this person owns or ultimately controls (or can exercise ultimate effective control over).
</p>
</div>
<div class="flex-col py-5">
<UInput
v-model="percentOfShares"
placeholder="Percent of Shares"
type="text"
variant="none"
class="w-1/5 bg-gray-100 border-b-2 my-5 p-2"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
</template>
</UInput>
<UInput
v-model="percentOfVotes"
placeholder="Percent of Votes"
type="text"
variant="none"
class="w-1/5 bg-gray-100 border-b-2 my-5 p-2"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">%</span>
</template>
</UInput>
</div>
<div>
<p class="font-bold mt-5">
{{ $t('labels.birthdate') }}
</p>
<BcrosInputsDateSelect class="mt-5" :max-date="maxDate" @selection="birthdate = $event" />
</div>

<div class="my-10">
<BcrosInputsAddress
id="addNewPersonLastKnownAddress"
v-model="lastKnownAddress"
:label="$t('labels.lastKnownAddress')"
/>
</div>

<div>
<p class="font-bold py-5">
{{ $t('labels.taxNumber') }}
</p>
<p class="text-justify">
A Social Insurance Number (SIN), an Individual Tax Number (ITN), or a Temporary
Taxation Number (TTN) is required if this person has one.
</p>
<IndividualPersonTaxInfoTaxNumber
id="addNewPersonTaxNumber"
v-model="taxInfoModel"
name="taxNumber"
:label="$t('labels.taxNumber')"
data-cy="testTaxNumber"
/>
</div>

<div>
<p class="font-bold py-5">
{{ $t('labels.taxResidency') }}
</p>
<p class="text-justify">
Indicate if this person is a resident of Canada for Income Tax purposes.
</p>
<IndividualPersonTaxInfoTaxResidency
id="addNewPersonTaxResidency"
v-model="isTaxResident"
/>
</div>
</template>
</UForm>

<div class="text-blue-700 py-5 align-middle">
<a
id="add-person-manually-toggle"
Expand Down Expand Up @@ -229,11 +126,38 @@
id="countriesOfCitizenship"
v-model:canadianCitizenship="citizenshipOrPermanentResidency"
v-model:citizenships="citizenships"
<h1>Here</h1>
<div class="my-10">
1
<BcrosInputsTaxResidency

/>
</div>
<UForm
:schema="schema"
:state="state"
>
<div>
<p class="font-bold py-5">
{{ $t('labels.taxNumber') }}
</p>
<p class="text-justify">
{{ $t('texts.taxNumber') }}
</p>
<IndividualPersonTaxInfoTaxNumber
id="addNewPersonTaxNumber"
v-model="taxInfoModel"
name="taxNumber"
data-cy="testTaxNumber"
/>
</div>
</UForm>
<div>
<p class="font-bold py-5">
{{ $t('labels.taxResidency') }}
</p>
<p class="text-justify">
{{ $t('texts.taxResidency') }}
</p>
<IndividualPersonTaxInfoTaxResidency
id="addNewPersonTaxResidency"
v-model="isTaxResident"
data-cy="testTaxResidency"
/>
</div>
</template>
Expand Down Expand Up @@ -294,7 +218,7 @@ const schema = z.object({
.refine(validateEmailRfc6532Regex, t('errors.validation.email.invalid')),
hasTaxNumber: z.boolean(),
taxNumber: z.union([
z.literal('No Tax Number'),
z.undefined(),
z.string()
.refine(checkSpecialCharacters, t('errors.validation.taxNumber.specialCharacter'))
.refine(checkTaxNumberLength, t('errors.validation.taxNumber.invalidLength'))
Expand All @@ -306,15 +230,16 @@ const state = reactive({
email: undefined,
fullName: undefined,
preferredName1: undefined,
hasTaxNumber: false,
taxNumber: ''
hasTaxNumber: undefined,
taxNumber: undefined
})
// tax number input
const taxInfoModel = computed({
get () {
return {
hasTaxNumber: state.hasTaxNumber || false,
taxNumber: state.taxNumber || ''
hasTaxNumber: state.hasTaxNumber,
taxNumber: state.taxNumber
}
},
set (value) {
Expand Down
Loading

0 comments on commit de0fe45

Please sign in to comment.