Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(NationalIdentityNumber): use onBlurValidator instead of validator #3982

Merged
merged 4 commits into from
Oct 8, 2024
Merged

fix(NationalIdentityNumber): use onBlurValidator instead of validator #3982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca8aac8
chore: use onBlurValidator instead of validator
langz Sep 23, 2024
472ea36
chore: use onBlurValidator instead of validator - tests
langz Oct 4, 2024
667c0a5
chore: adds missing validator logic based on validate
langz Oct 4, 2024
bbb56a2
removes onblur from tests which dont need it
langz Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...portal/src/docs/uilib/extensions/forms/feature-fields/NationalIdentityNumber/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ export const ValidationFunction = () => {
<Field.NationalIdentityNumber
required
value="123"
validator={validator}
onBlurValidator={validator}
validateInitially
/>
)
Expand Down Expand Up @@ -180,7 +180,7 @@ export const ValidationExtendValidator = () => {
<Field.NationalIdentityNumber
required
value="53050129159"
validator={myValidator}
onBlurValidator={myValidator}
validateInitially
/>
)
Expand Down
5 changes: 3 additions & 2 deletions .../dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,9 @@ function NationalIdentityNumber(props: Props) {
mask,
width: props.width ?? 'medium',
inputMode: 'numeric',
validator: validate
? props.validator || dnrAndFnrValidator
validator: validate ? props.validator : undefined,
onBlurValidator: validate
? props.onBlurValidator || dnrAndFnrValidator
: undefined,
exportValidators: { dnrValidator, fnrValidator },
}
Expand Down
115 changes: 60 additions & 55 deletions ...c/extensions/forms/Field/NationalIdentityNumber/__tests__/NationalIdentityNumber.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ import nbNO from '../../../constants/locales/nb-NO'

const nb = nbNO['nb-NO']

async function expectNever(callable: () => unknown): Promise<void> {
await expect(() => waitFor(callable)).rejects.toEqual(expect.anything())
}

describe('Field.NationalIdentityNumber', () => {
it('should render with props', () => {
const props: Props = {}
Expand Down Expand Up @@ -137,10 +133,10 @@ describe('Field.NationalIdentityNumber', () => {
validate={false}
/>
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

fireEvent.blur(document.querySelector('input'))

expect(screen.queryByRole('alert')).toBeNull()
})

it('should not validate custom pattern when validate false', async () => {
Expand All @@ -153,10 +149,10 @@ describe('Field.NationalIdentityNumber', () => {
validate={false}
/>
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

fireEvent.blur(document.querySelector('input'))

expect(screen.queryByRole('alert')).toBeNull()
})

it('should not validate dnum when validate false', async () => {
Expand All @@ -168,10 +164,10 @@ describe('Field.NationalIdentityNumber', () => {
validate={false}
/>
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

fireEvent.blur(document.querySelector('input'))

expect(screen.queryByRole('alert')).toBeNull()
})

it('should not validate fnr when validate false', async () => {
Expand All @@ -183,46 +179,40 @@ describe('Field.NationalIdentityNumber', () => {
validate={false}
/>
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

fireEvent.blur(document.querySelector('input'))

expect(screen.queryByRole('alert')).toBeNull()
})

it('should not validate custom validator when validate false', async () => {
const text = 'Custom Error message'
const validator = jest.fn((value) => {
return value.length < 4 ? new Error(text) : undefined
})
const customValidator: Validator<string> = (value) => {
if (value?.length < 4) {
return new Error('My error')
}
}

render(
<Field.NationalIdentityNumber
value="123"
required
validator={validator}
validator={customValidator}
validateInitially
validate={false}
/>
)

await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})
expect(screen.queryByRole('alert')).toBeNull()
})

it('should not validate extended validator when validate false', async () => {
const invalidFnr = '29040112345'
const invalidFnrBornInApril = '29040112345'

const bornInApril = (value: string) =>
value.substring(2, 4) === '04'
? { status: 'valid' }
: { status: 'invalid' }
const bornInApril = (value: string) => value.substring(2, 4) === '04'

const customValidator: Validator<string> = (value, { validators }) => {
const { dnrValidator, fnrValidator } = validators
const result = bornInApril(value)
if (result.status === 'invalid') {
if (bornInApril(value)) {
return new Error('custom error')
}

Expand All @@ -231,16 +221,14 @@ describe('Field.NationalIdentityNumber', () => {

render(
<Field.NationalIdentityNumber
value={invalidFnr}
value={invalidFnrBornInApril}
validateInitially
validate={false}
validator={customValidator}
/>
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

expect(screen.queryByRole('alert')).toBeNull()
})

describe('should validate Norwegian D number', () => {
Expand All @@ -266,17 +254,23 @@ describe('Field.NationalIdentityNumber', () => {
render(
<Field.NationalIdentityNumber value={dNum} validateInitially />
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

fireEvent.blur(document.querySelector('input'))

expect(screen.queryByRole('alert')).toBeNull()
})

it.each(invalidDNum)('Invalid D number: %s', async (dNum) => {
render(
<Field.NationalIdentityNumber value={dNum} validateInitially />
<Field.NationalIdentityNumber
value={dNum}
validateUnchanged
validateInitially
/>
)

fireEvent.blur(document.querySelector('input'))

await waitFor(() => {
expect(screen.queryByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).toHaveTextContent(
Expand Down Expand Up @@ -314,19 +308,26 @@ describe('Field.NationalIdentityNumber', () => {
render(
<Field.NationalIdentityNumber validateInitially value={fnrNum} />
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

fireEvent.blur(document.querySelector('input'))

expect(screen.queryByRole('alert')).toBeNull()
}
)

it.each(invalidFnrNum)(
'Invalid national identity number(fnr): %s',
async (fnrNum) => {
render(
<Field.NationalIdentityNumber validateInitially value={fnrNum} />
<Field.NationalIdentityNumber
validateInitially
validateUnchanged
value={fnrNum}
/>
)

fireEvent.blur(document.querySelector('input'))

await waitFor(() => {
expect(screen.queryByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).toHaveTextContent(
Expand Down Expand Up @@ -378,20 +379,20 @@ describe('Field.NationalIdentityNumber', () => {
value={fnrNum}
/>
)
await expectNever(() => {
// Can't just waitFor and expect not to be in the document, it would approve the first render before the error might appear async.
expect(screen.queryByRole('alert')).toBeInTheDocument()
})

expect(screen.queryByRole('alert')).toBeNull()
})

it.each(invalidIds)('Invalid identity number: %s', async (id) => {
render(
<Field.NationalIdentityNumber
validator={customValidator}
validateInitially
validateUnchanged
value={id}
/>
)

await waitFor(() => {
expect(screen.queryByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).toHaveTextContent(
Expand All @@ -405,9 +406,11 @@ describe('Field.NationalIdentityNumber', () => {
<Field.NationalIdentityNumber
validator={customValidator}
validateInitially
validateUnchanged
value={dNum}
/>
)

await waitFor(() => {
expect(screen.queryByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).toHaveTextContent(
Expand All @@ -423,9 +426,11 @@ describe('Field.NationalIdentityNumber', () => {
<Field.NationalIdentityNumber
validator={customValidator}
validateInitially
validateUnchanged
value={fnr}
/>
)

await waitFor(() => {
expect(screen.queryByRole('alert')).toBeInTheDocument()
expect(screen.queryByRole('alert')).toHaveTextContent(
Expand Down
Loading