EY-4157: Alt slettes ved fjerning av ett element (#1460)

* Ikke bruk conditional rendering med useFieldArray og bytt ut remove med setValue * Nullstill verdier som er hidden * Update snapshots * Lag tester i cypress for å verifisere at det fungerer * Legg sammen ifs i cypress test * Fast dato i meromsituasjonendin.test
navikt · Sep 9, 2024 · 40d1c40 · 40d1c40
1 parent 11981e2
commit 40d1c40
Show file tree

Hide file tree

Showing 9 changed files with 3,023 additions and 433 deletions.
diff --git a/apps/omstillingsstoenad-ui/cypress/e2e/enkel_soeknadsflyt.cy.js b/apps/omstillingsstoenad-ui/cypress/e2e/enkel_soeknadsflyt.cy.js
@@ -130,33 +130,72 @@ describe('Skal gå igjennom hele søknaden uten feil', () => {
         selectValue(merOmSituasjonenDin.jobbStatus)
 
         merOmSituasjonenDin.arbeidsforhold.map((arbeid, idx) => {
+            const midlertidigAnsatt = idx === 0
+
+            if (!midlertidigAnsatt) cy.get('[data-testid=legg-til-arbeidsforhold-knapp]').click()
+
             const baseId = `arbeidsforhold\[${idx}\].`
 
             getById(baseId + 'arbeidsgiver').type(arbeid.arbeidsgiver)
 
             selectValueForId(baseId + 'ansettelsesforhold', arbeid.ansettelsesforhold)
 
-            getById(baseId + 'arbeidsmengde.svar').type(arbeid.arbeidsmengde.svar)
-            getById(baseId + 'arbeidsmengde.type')
-                .find('select')
-                .select(arbeid.arbeidsmengde.type)
+            if (midlertidigAnsatt) {
+                getById(baseId + 'arbeidsmengde.svar')
+                    .last()
+                    .type(arbeid.arbeidsmengde.svar)
 
-            selectValueForId(baseId + 'midlertidig.svar', arbeid.midlertidig.svar)
-            getById(baseId + 'midlertidig.sluttdatoVelger').type(
-                format(arbeid.midlertidig.sluttdatoVelger, 'dd.MM.yyyy')
-            )
+                getById(baseId + 'arbeidsmengde.type')
+                    .find('select')
+                    .select(arbeid.arbeidsmengde.type)
+
+                selectValueForId(baseId + 'midlertidig.svar', arbeid.midlertidig.svar)
+
+                getById(baseId + 'midlertidig.sluttdatoVelger').type(
+                    format(arbeid.midlertidig.sluttdatoVelger, 'dd.MM.yyyy')
+                )
+            } else {
+                getById(baseId + 'arbeidsmengde.svar')
+                    .first()
+                    .type(arbeid.arbeidsmengde.svar)
+            }
 
             selectValueForId(
                 baseId + 'forventerEndretArbeidssituasjon.svar',
                 arbeid.forventerEndretArbeidssituasjon.svar
             )
-            getById(baseId + 'forventerEndretArbeidssituasjon.beskrivelse').type(
-                arbeid.forventerEndretArbeidssituasjon.beskrivelse
-            )
+
+            if (midlertidigAnsatt)
+                getById(baseId + 'forventerEndretArbeidssituasjon.beskrivelse').type(
+                    arbeid.forventerEndretArbeidssituasjon.beskrivelse
+                )
 
             // selectValueForId(baseId + 'sagtOppEllerRedusert.svar', arbeid.sagtOppEllerRedusert.svar)
         })
 
+        // --------------------------------------------------------------
+        // Sjekk at arbeidsforhold 2 beholdes hvis man sletter den første
+        cy.get('[data-testid=fjern-arbeidsforhold-knapp]').first().click()
+
+        getById('arbeidsforhold[0].arbeidsgiver').should(
+            'have.value',
+            merOmSituasjonenDin.arbeidsforhold[1].arbeidsgiver
+        )
+
+        getById('arbeidsforhold[0].ansettelsesforhold')
+            .find(`[value="${merOmSituasjonenDin.arbeidsforhold[1].ansettelsesforhold}"]`)
+            .should('be.checked')
+
+        getById('arbeidsforhold[0].arbeidsmengde.svar').should(
+            'have.value',
+            merOmSituasjonenDin.arbeidsforhold[1].arbeidsmengde.svar
+        )
+
+        getById('arbeidsforhold[0].forventerEndretArbeidssituasjon.svar')
+            .find(`[value="${merOmSituasjonenDin.arbeidsforhold[1].forventerEndretArbeidssituasjon.svar}"]`)
+            .should('be.checked')
+        // --------------------------------------------------------------
+
         selectValue(merOmSituasjonenDin.utdanning.hoyesteFullfoerteUtdanning)
 
         a11yCheck()

diff --git a/apps/omstillingsstoenad-ui/src/assets/dummy-soeknad.json b/apps/omstillingsstoenad-ui/src/assets/dummy-soeknad.json
@@ -110,6 +110,16 @@
         "sagtOppEllerRedusert": {
           "svar": "sagtOppEllerRedusert.oppsagt"
         }
+      },
+      {
+        "arbeidsgiver": "Bananskreller AS",
+        "ansettelsesforhold": "stillingType.fast",
+        "arbeidsmengde" : {
+          "svar": "50"
+        },
+        "forventerEndretArbeidssituasjon": {
+          "svar": "radiobuttons.nei"
+        }
       }
     ]
   },

diff --git a/apps/omstillingsstoenad-ui/src/components/felles/Datovelger.tsx b/apps/omstillingsstoenad-ui/src/components/felles/Datovelger.tsx
@@ -79,14 +79,17 @@ const Datovelger = ({
                     validate: (date) => !date || isValid(date),
                 }}
                 render={({ field: { onChange, value } }) => {
-                    const { datepickerProps, inputProps } = useDatepicker({
+                    const { datepickerProps, inputProps, setSelected, selectedDay } = useDatepicker({
                         fromDate: minDate ? parseDateMaxMin(minDate) : undefined,
                         toDate: maxDate ? parseDateMaxMin(maxDate) : undefined,
                         locale: i18n.language as DatePickerProps['locale'],
                         inputFormat: 'dd.MM.yyyy',
                         defaultSelected: value ? new Date(value) : undefined,
                         onDateChange: (date) => onChange(formatDate(date)),
                     })
+
+                    if (value === undefined && selectedDay !== undefined) setSelected(undefined)
+
                     return (
                         <DatePicker {...datepickerProps} dropdownCaption>
                             <DatePicker.Input

diff --git a/apps/omstillingsstoenad-ui/src/components/felles/rhf/RHFInput.tsx b/apps/omstillingsstoenad-ui/src/components/felles/rhf/RHFInput.tsx
@@ -35,7 +35,6 @@ export const RHFInput = ({ name, rules, className, valgfri, ...rest }: RHFProps)
         control,
         formState: { errors },
     } = useFormContext()
-
     const error: FieldError = get(errors, name) as FieldError
     const feilmelding = !!error ? t(getTransKey(error)) : undefined
 
@@ -183,7 +182,7 @@ export const RHFValutaInput = ({ name, valgfri, ...rest }: RHFProps) => {
     )
 }
 
-export const RHFProsentInput = ({ name, rules, ...rest }: RHFProps) => {
+export const RHFProsentInput = ({ name, rules, valgfri = false, ...rest }: RHFProps) => {
     const { t } = useTranslation()
     const {
         control,
@@ -205,7 +204,7 @@ export const RHFProsentInput = ({ name, rules, ...rest }: RHFProps) => {
         <Controller
             name={name}
             control={control}
-            rules={{ required: true, pattern: prosentMatcher, ...rules }}
+            rules={{ required: !valgfri, pattern: prosentMatcher, ...rules }}
             render={({ field: { value, onChange } }) => (
                 <TextField
                     id={name}

diff --git a/apps/omstillingsstoenad-ui/src/components/felles/rhf/RHFRadio.tsx b/apps/omstillingsstoenad-ui/src/components/felles/rhf/RHFRadio.tsx
@@ -13,11 +13,13 @@ export const RHFSpoersmaalRadio = ({
     description,
     legend,
     vetIkke,
+    valgfri = false,
 }: {
     name: FieldPath<FieldValues>
     legend?: ReactNode
     description?: ReactNode
     vetIkke?: boolean
+    valgfri?: boolean
 }) => {
     const { t } = useTranslation()
     const defaultRadios = [
@@ -28,7 +30,7 @@ export const RHFSpoersmaalRadio = ({
     if (vetIkke) defaultRadios.push({ children: t(IValg.VET_IKKE), value: IValg.VET_IKKE, required: true })
 
     return (
-        <RHFRadio name={name} legend={legend} description={description}>
+        <RHFRadio name={name} legend={legend} description={description} valgfri={valgfri}>
             {defaultRadios}
         </RHFRadio>
     )
@@ -39,9 +41,10 @@ interface RHFRadioProps extends Omit<RadioGroupProps, 'onChange' | 'children'> {
     description?: ReactNode
     children: RadioProps[]
     rules?: Omit<RegisterOptions<FieldValues, FieldPath<FieldValues>>, 'required'>
+    valgfri?: boolean
 }
 
-export const RHFRadio = ({ name, legend, description, children, rules, ...rest }: RHFRadioProps) => {
+export const RHFRadio = ({ name, legend, description, children, rules, valgfri = false, ...rest }: RHFRadioProps) => {
     const { t } = useTranslation()
     const {
         control,
@@ -56,7 +59,7 @@ export const RHFRadio = ({ name, legend, description, children, rules, ...rest }
             <Controller
                 name={name}
                 control={control}
-                rules={{ required: true, ...rules }}
+                rules={{ required: !valgfri, ...rules }}
                 render={({ field: { value, onChange, name } }) => (
                     <RadioGroup
                         {...rest}

diff --git a/...ngsstoenad-ui/src/components/soknad/5-mer-om-situasjonen-din/MerOmSituasjonenDin.test.jsx b/...ngsstoenad-ui/src/components/soknad/5-mer-om-situasjonen-din/MerOmSituasjonenDin.test.jsx
@@ -1,7 +1,7 @@
 import { act, render, fireEvent } from '@testing-library/react'
 import MerOmSituasjonenDin from './MerOmSituasjonenDin'
 import { describe, expect, it, vi } from 'vitest'
-import {BrowserRouter} from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom'
 
 vi.mock('react-i18next', () => ({
     // this mock makes sure any components using the translate hook can use it without a warning being shown
@@ -31,7 +31,7 @@ const defaultValues = {
                 svar: 'Ja',
                 opplysning: 'Mister kanskje jobben',
             },
-            sagtOppEllerRedusert: 'Reduserer pga vond rygg'
+            sagtOppEllerRedusert: 'Reduserer pga vond rygg',
         },
     ],
 }
@@ -44,13 +44,31 @@ vi.mock('../../../context/soknad/SoknadContext', () => ({
 }))
 
 describe('Mer om situasjonen din', () => {
+    beforeAll(() => {
+        vi.useFakeTimers('modern')
+    })
+
+    afterAll(() => {
+        vi.useRealTimers()
+    })
+
     it('Snapshot', () => {
-        const { container } = render(<BrowserRouter><MerOmSituasjonenDin /></BrowserRouter>)
+        vi.setSystemTime(new Date(2024, 0, 1))
+
+        const { container } = render(
+            <BrowserRouter>
+                <MerOmSituasjonenDin />
+            </BrowserRouter>
+        )
         expect(container).toMatchSnapshot()
     })
 
     it('Skal rendre selvstendig', () => {
-        const { container, getByLabelText } = render(<BrowserRouter><MerOmSituasjonenDin /></BrowserRouter>)
+        const { container, getByLabelText } = render(
+            <BrowserRouter>
+                <MerOmSituasjonenDin />
+            </BrowserRouter>
+        )
         act(() => {
             fireEvent.click(getByLabelText('jobbStatus.selvstendig'))
         })