diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 187616b17e979884045e7102fb03c87215cab31a..29406fd97ec63da451454724b93a77d7496638f6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,7 @@
"@navikt/fnrvalidator": "^1.1.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
- "@testing-library/user-event": "^12.8.3",
+ "@testing-library/user-event": "^13.2.1",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.24",
"@types/react": "^17.0.20",
@@ -3073,6 +3073,159 @@
"url": "https://github.com/sponsors/gregberge"
}
},
+ "node_modules/@testing-library/dom": {
+ "version": "8.6.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.6.0.tgz",
+ "integrity": "sha512-EDBMEWK8IVpNF7B7C1knb0lLB4Si9RWte/YTEi6CqmqUK5CYCoecwOOG9pEijU/H6s3u0drUxH5sKT07FCgFIg==",
+ "peer": true,
+ "dependencies": {
+ "@babel/code-frame": "^7.10.4",
+ "@babel/runtime": "^7.12.5",
+ "@types/aria-query": "^4.2.0",
+ "aria-query": "^4.2.2",
+ "chalk": "^4.1.0",
+ "dom-accessibility-api": "^0.5.6",
+ "lz-string": "^1.4.4",
+ "pretty-format": "^27.0.2"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "peer": true,
+ "dependencies": {
+ "regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/@jest/types": {
+ "version": "27.1.1",
+ "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.1.1.tgz",
+ "integrity": "sha512-yqJPDDseb0mXgKqmNqypCsb85C22K1aY5+LUxh7syIM9n/b0AsaltxNy+o6tt29VcfGDpYEve175bm3uOhcehA==",
+ "peer": true,
+ "dependencies": {
+ "@types/istanbul-lib-coverage": "^2.0.0",
+ "@types/istanbul-reports": "^3.0.0",
+ "@types/node": "*",
+ "@types/yargs": "^16.0.0",
+ "chalk": "^4.0.0"
+ },
+ "engines": {
+ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/@types/yargs": {
+ "version": "16.0.4",
+ "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+ "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+ "peer": true,
+ "dependencies": {
+ "@types/yargs-parser": "*"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "peer": true,
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "peer": true,
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "peer": true,
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "peer": true
+ },
+ "node_modules/@testing-library/dom/node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "peer": true,
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/pretty-format": {
+ "version": "27.2.0",
+ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.0.tgz",
+ "integrity": "sha512-KyJdmgBkMscLqo8A7K77omgLx5PWPiXJswtTtFV7XgVZv2+qPk6UivpXXO+5k6ZEbWIbLoKdx1pZ6ldINzbwTA==",
+ "peer": true,
+ "dependencies": {
+ "@jest/types": "^27.1.1",
+ "ansi-regex": "^5.0.0",
+ "ansi-styles": "^5.0.0",
+ "react-is": "^17.0.1"
+ },
+ "engines": {
+ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+ "peer": true,
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/@testing-library/dom/node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "peer": true,
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/@testing-library/jest-dom": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
@@ -3292,9 +3445,9 @@
}
},
"node_modules/@testing-library/user-event": {
- "version": "12.8.3",
- "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
- "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
+ "version": "13.2.1",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.2.1.tgz",
+ "integrity": "sha512-cczlgVl+krjOb3j1625usarNEibI0IFRJrSWX9UsJ1HKYFgCQv9Nb7QAipUDXl3Xdz8NDTsiS78eAkPSxlzTlw==",
"dependencies": {
"@babel/runtime": "^7.12.5"
},
@@ -24103,6 +24256,124 @@
"loader-utils": "^2.0.0"
}
},
+ "@testing-library/dom": {
+ "version": "8.6.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.6.0.tgz",
+ "integrity": "sha512-EDBMEWK8IVpNF7B7C1knb0lLB4Si9RWte/YTEi6CqmqUK5CYCoecwOOG9pEijU/H6s3u0drUxH5sKT07FCgFIg==",
+ "peer": true,
+ "requires": {
+ "@babel/code-frame": "^7.10.4",
+ "@babel/runtime": "^7.12.5",
+ "@types/aria-query": "^4.2.0",
+ "aria-query": "^4.2.2",
+ "chalk": "^4.1.0",
+ "dom-accessibility-api": "^0.5.6",
+ "lz-string": "^1.4.4",
+ "pretty-format": "^27.0.2"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.15.4",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+ "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "peer": true,
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ },
+ "@jest/types": {
+ "version": "27.1.1",
+ "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.1.1.tgz",
+ "integrity": "sha512-yqJPDDseb0mXgKqmNqypCsb85C22K1aY5+LUxh7syIM9n/b0AsaltxNy+o6tt29VcfGDpYEve175bm3uOhcehA==",
+ "peer": true,
+ "requires": {
+ "@types/istanbul-lib-coverage": "^2.0.0",
+ "@types/istanbul-reports": "^3.0.0",
+ "@types/node": "*",
+ "@types/yargs": "^16.0.0",
+ "chalk": "^4.0.0"
+ }
+ },
+ "@types/yargs": {
+ "version": "16.0.4",
+ "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
+ "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
+ "peer": true,
+ "requires": {
+ "@types/yargs-parser": "*"
+ }
+ },
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "peer": true,
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
+ "chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "peer": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "peer": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "peer": true
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "peer": true
+ },
+ "pretty-format": {
+ "version": "27.2.0",
+ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.0.tgz",
+ "integrity": "sha512-KyJdmgBkMscLqo8A7K77omgLx5PWPiXJswtTtFV7XgVZv2+qPk6UivpXXO+5k6ZEbWIbLoKdx1pZ6ldINzbwTA==",
+ "peer": true,
+ "requires": {
+ "@jest/types": "^27.1.1",
+ "ansi-regex": "^5.0.0",
+ "ansi-styles": "^5.0.0",
+ "react-is": "^17.0.1"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+ "peer": true
+ }
+ }
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "peer": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ }
+ }
+ },
"@testing-library/jest-dom": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
@@ -24266,9 +24537,9 @@
}
},
"@testing-library/user-event": {
- "version": "12.8.3",
- "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
- "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
+ "version": "13.2.1",
+ "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.2.1.tgz",
+ "integrity": "sha512-cczlgVl+krjOb3j1625usarNEibI0IFRJrSWX9UsJ1HKYFgCQv9Nb7QAipUDXl3Xdz8NDTsiS78eAkPSxlzTlw==",
"requires": {
"@babel/runtime": "^7.12.5"
},
diff --git a/frontend/package.json b/frontend/package.json
index e4753e74dffc366db42b2344c3d431cb553ad185..53dfa6f17ce3fa29f11e3b06d554f9ac7ecc47bb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
"@navikt/fnrvalidator": "^1.1.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
- "@testing-library/user-event": "^12.8.3",
+ "@testing-library/user-event": "^13.2.1",
"@types/jest": "^26.0.24",
"@types/node": "^12.20.24",
"@types/react": "^17.0.20",
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 4c2ab711ff2501d634315c3041da3394a142b2eb..08e5ee6737da8f0139ee233c6b66b1aa9e204dbd 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -17,5 +17,11 @@
"staging": "Staging",
"firstName": "First name",
"lastName": "Last name",
- "dateOfBirth": "Date of birth"
+ "dateOfBirth": "Date of birth",
+ "nationalIdNumber": "National ID number",
+ "validation": {
+ "lastNameRequired": "Last name required",
+ "invalidIdNumber": "Invalid national ID number",
+ "nationalIdNumberRequired": "National ID number required"
+ }
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index 11a25642f5fb9b4214464761810703467700b845..f8de38b7b816b3ab9c3d765557fcdeffaafa361b 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -17,5 +17,11 @@
"staging": "Staging",
"firstName": "Fornavn",
"lastName": "Etternavn",
- "dateOfBirth": "Fødselsdato"
+ "dateOfBirth": "Fødselsdato",
+ "nationalIdNumber": "Fødselsnummer",
+ "validation": {
+ "lastNameRequired": "Etternavn er påkrevd",
+ "invalidIdNumber": "Ugyldig fødselsnummer",
+ "nationalIdNumberRequired": "Fødselsnummer er påkrevd"
+ }
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index 21039b90560962d4338ef53f60348eb0d8edba48..f0b3ac636097e7d4f397108b41ee27995e58718d 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -18,5 +18,11 @@
"staging": "Staging",
"firstName": "Fornamn",
"lastName": "Etternamn",
- "dateOfBirth": "Fødselsdato"
+ "dateOfBirth": "Fødselsdato",
+ "nationalIdNumber": "Fødselsnummer",
+ "validation": {
+ "lastNameRequired": "Etternamn er påkrevd",
+ "invalidIdNumber": "Ugyldig fødselsnummer",
+ "nationalIdNumberRequired": "Fødselsnummer er påkrevd"
+ }
}
diff --git a/frontend/src/routes/register/index.test.tsx b/frontend/src/routes/register/index.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d755926653b553d1783c4d8268d5f03eb6dc5ddd
--- /dev/null
+++ b/frontend/src/routes/register/index.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { render, waitFor, screen } from '@testing-library/react'
+import i18n from 'i18next'
+import { ThemeProvider } from 'styled-components/macro'
+import { initReactI18next } from 'react-i18next'
+import userEvent from '@testing-library/user-event'
+import Register from './index'
+import mainTheme from '../../themes/main'
+
+
+i18n
+ .use(initReactI18next)
+ .init({
+ lng: 'en',
+ fallbackLng: 'en',
+
+ // Have a common namespace used around the full app
+ ns: ['translations'],
+ defaultNS: 'translations',
+
+ debug: false,
+
+ resources: { en: { translations: {} } },
+ })
+
+test('Validation message showing if last name is missing', async () => {
+ render(
+ <ThemeProvider theme={mainTheme}>
+ <Register />
+ </ThemeProvider>)
+
+ const firstNamePlaceholder = i18n.t('common:firstName').toString()
+ const firstNameComponent = screen.getByPlaceholderText(firstNamePlaceholder)
+ expect(firstNameComponent).toBeInTheDocument()
+
+ userEvent.type(firstNameComponent, 'Test')
+
+ // Try to submit the form and check that the validation message is showing
+ const submitButton = screen.getByRole('button')
+ userEvent.click(submitButton)
+
+ const validationLastName = i18n.t('common:validation.lastNameRequired').toString()
+ await waitFor(() => screen.getByText(validationLastName))
+
+ const validationMessage = screen.getByText(validationLastName)
+ expect(validationMessage).toBeInTheDocument()
+})
\ No newline at end of file
diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx
index 629080bdea3a7580c42a5e41c25f53a569aa1c94..d6b8b40d54935e42a31e628d7026c193fd20083f 100644
--- a/frontend/src/routes/register/index.tsx
+++ b/frontend/src/routes/register/index.tsx
@@ -40,7 +40,7 @@ export default function Register() {
control,
handleSubmit,
// setValue,
- // formState: { errors },
+ formState : {errors}
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
@@ -52,9 +52,12 @@ export default function Register() {
placeholder={t('common:firstName')}
/>
<StyledInput
- {...register(`last_name`)}
+ {...register(`last_name`, {
+ required: t('common:validation.lastNameRequired').toString()
+ })}
placeholder={t('common:lastName')}
/>
+ {errors.last_name && <span>{errors.last_name.message}</span>}
<Controller
name="date_of_birth"
control={control}