IS-2853: Enable search only on fodselsdato (#557)

Author: vetlesolgaard

src/components/sokperson/SokPerson.tsx

@@ -51,7 +51,7 @@ function logSokPersonResults(amount: number) {
 }
 
 export default function SokPerson() {
-  const [nameInitials, setNameInitials] = useState<string>('');
+  const [initials, setInitials] = useState<string>('');
   const [birthdate, setBirthdate] = useState<string>('');
   const {
     mutate,
@@ -72,15 +72,15 @@ export default function SokPerson() {
     }
   };
 
-  const validInitials = (initials: string): boolean => {
-    return initials.length <= 3 && initials.length > 1;
+  const isValidInitials = (initials: string): boolean => {
+    return initials === '' || (initials.length <= 3 && initials.length > 1);
   };
 
   const handleSubmit = () => {
     const parsedBirthdate = parseBirthdate(birthdate);
-    if (validInitials(nameInitials) && !!parsedBirthdate) {
+    if (isValidInitials(initials) && !!parsedBirthdate) {
       const requestDTO: SokDTO = {
-        initials: nameInitials.toLowerCase(),
+        initials: initials.toLowerCase(),
         birthdate: parsedBirthdate,
       };
       mutate(requestDTO, {
@@ -92,8 +92,8 @@ export default function SokPerson() {
     }
   };
 
-  const invalidInitials = isFormError && !validInitials(nameInitials);
-  const invalidBirthdate = isFormError && parseBirthdate(birthdate) === null;
+  const isInvalidInitials = isFormError && !isValidInitials(initials);
+  const isInvalidBirthdate = isFormError && parseBirthdate(birthdate) === null;
 
   return (
     <>
@@ -115,16 +115,16 @@ export default function SokPerson() {
                 description="AB"
                 htmlSize={10}
                 type="text"
-                onChange={(e) => setNameInitials(e.target.value)}
-                error={invalidInitials}
+                onChange={(e) => setInitials(e.target.value)}
+                error={isFormError && !isValidInitials(initials)}
               />
               <TextField
                 label="Fødselsdato"
                 description="ddmmåå"
                 htmlSize={14}
                 type="text"
                 onChange={(e) => setBirthdate(e.target.value)}
-                error={invalidBirthdate}
+                error={isInvalidBirthdate}
               />
               <Button
                 loading={isLoading}
@@ -134,12 +134,12 @@ export default function SokPerson() {
                 Søk
               </Button>
             </HStack>
-            {invalidInitials && (
+            {isInvalidInitials && (
               <ErrorMessage size="small">
                 {texts.validation.initials}
               </ErrorMessage>
             )}
-            {invalidBirthdate && (
+            {isInvalidBirthdate && (
               <ErrorMessage size="small">
                 {texts.validation.birthdate}
               </ErrorMessage>

src/mocks/data/personoversiktEnhetMock.ts

@@ -149,7 +149,7 @@ export const personoversiktEnhetMock: PersonOversiktStatusDTO[] = [
   {
     ...behandletPerson,
     fnr: '59999933333',
-    navn: '',
+    navn: 'Navn Navnesen',
     fodselsdato: new Date('1990-01-01'),
     enhet: '0316',
     veilederIdent: 'Z101010',

test/components/SokPersonTest.tsx

@@ -46,15 +46,24 @@ describe('SokPerson', () => {
     expect(screen.getByRole('button', { name: 'Søk' })).to.exist;
   });
 
-  it('should render validation errors for fields', async () => {
+  it('should render validation error for fodselsdato not initials', async () => {
     renderSokPerson();
 
     await userEvent.click(screen.getByRole('button', { name: 'Søk' }));
 
-    expect(screen.getByText('Vennligst angi gyldige initialer')).to.exist;
     expect(screen.getByText('Vennligst angi en gyldig fødselsdato')).to.exist;
+    expect(screen.queryByText('Vennligst angi gyldige initialer')).to.not.exist;
   });
+  it('should render validation error for initialer when blank and too many characters', async () => {
+    renderSokPerson();
 
+    const initialsInput = screen.getByRole('textbox', { name: 'Initialer' });
+    fireEvent.change(initialsInput, { target: { value: ' ' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Søk' }));
+    expect(screen.getByText('Vennligst angi gyldige initialer')).to.exist;
+    fireEvent.change(initialsInput, { target: { value: 'ABCD' } });
+    expect(screen.getByText('Vennligst angi gyldige initialer')).to.exist;
+  });
   it('should send correct parameters', async () => {
     renderSokPerson();