Bytter ut gammel komponent med problemer til ny (#5402)

navikt · Dec 7, 2023 · 15ac054 · 15ac054
1 parent de0f3f8
commit 15ac054
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 64 deletions.
diff --git a/packages/prosess-vedtak-tilbakekreving/src/components/TilbakekrevingVedtakForm.spec.tsx b/packages/prosess-vedtak-tilbakekreving/src/components/TilbakekrevingVedtakForm.spec.tsx
@@ -41,7 +41,7 @@ test('<TilbakekrevingVedtakForm> skal vise tekstfelt for begrunnelse og godkjenn
     { messages },
   );
 
-  expect(screen.getByRole('heading')).toHaveTextContent('Vedtaksbrev');
+  expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Vedtaksbrev');
   expect(screen.getByText('Til godkjenning')).not.toBeDisabled();
   expect(screen.getByRole('link')).toHaveTextContent('Forhåndsvis brev');
 });

diff --git a/...s-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.spec.tsx b/...s-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
-
+import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/src/test-utils';
+import { screen } from '@testing-library/react';
 import TilbakekrevingEditerVedtaksbrevPanel from './TilbakekrevingEditerVedtaksbrevPanel';
 
 describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
@@ -74,7 +73,7 @@ describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
   ];
 
   it('skal vise tekstfelt for begrunnelse og godkjenningsknapp', () => {
-    const wrapper = shallow(
+    renderWithIntlAndReduxForm(
       <TilbakekrevingEditerVedtaksbrevPanel
         vedtaksbrevAvsnitt={vedtaksbrevAvsnitt}
         formName="testForm"
@@ -86,18 +85,16 @@ describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
       />,
     );
 
-    const paneler = wrapper.find(Ekspanderbartpanel);
-    expect(paneler).toHaveLength(3);
-    expect(paneler.first().prop('tittel')).toEqual('Du må betale tilbake foreldrepenger');
-    expect(paneler.first().prop('apen')).toBe(false);
-    expect(paneler.at(1).prop('tittel')).toEqual('Perioden fra og med 10. april 2019 til og med 14. april 2019');
-    expect(paneler.at(1).prop('apen')).toBe(false);
-    expect(paneler.last().prop('tittel')).toEqual('Hvordan betale tilbake pengene du skylder');
-    expect(paneler.last().prop('apen')).toBe(false);
+    expect(screen.getByText('Du må betale tilbake foreldrepenger', { selector: 'h3' })).toBeInTheDocument();
+    expect(
+      screen.getByText('Perioden fra og med 10. april 2019 til og med 14. april 2019', { selector: 'h3' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Hvordan betale tilbake pengene du skylder', { selector: 'h3' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { expanded: false })).toHaveLength(3);
   });
 
   it('skal automatisk åpne panel som ikke har obligatorisk verdi utfylt', () => {
-    const wrapper = shallow(
+    renderWithIntlAndReduxForm(
       <TilbakekrevingEditerVedtaksbrevPanel
         vedtaksbrevAvsnitt={vedtaksbrevAvsnitt}
         formName="testForm"
@@ -109,11 +106,8 @@ describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
       />,
     );
 
-    const paneler = wrapper.find(Ekspanderbartpanel);
-    expect(paneler).toHaveLength(3);
-    expect(paneler.at(0).prop('apen')).toBe(true);
-    expect(paneler.at(1).prop('apen')).toBe(true);
-    expect(paneler.at(2).prop('apen')).toBe(false);
+    expect(screen.getAllByRole('button', { expanded: false })).toHaveLength(1);
+    expect(screen.getAllByRole('button', { expanded: true })).toHaveLength(2);
   });
 
   it('skal sette opp initial values for form', () => {

diff --git a/...rosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.tsx b/...rosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.tsx
@@ -1,4 +1,4 @@
-import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
+import { ExpansionCard } from '@navikt/ds-react';
 import { Element, Normaltekst, Undertittel } from 'nav-frontend-typografi';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -47,43 +47,49 @@ const TilbakekrevingEditerVedtaksbrevPanel = ({
         avsnitt.avsnittstype === underavsnittType.OPPSUMMERING && fritekstOppsummeringPakrevdMenIkkeUtfylt;
       return (
         <React.Fragment key={avsnitt.avsnittstype + avsnitt.fom}>
-          <Ekspanderbartpanel
-            className={harPeriodeSomManglerObligatoriskVerdi || visApen ? styles.panelMedGulmarkering : styles.panel}
-            tittel={
-              avsnitt.overskrift ? (
-                avsnitt.overskrift
-              ) : (
-                <FormattedMessage id="TilbakekrevingEditerVedtaksbrevPanel.LovhjemlerOgKlagerettOverskrift" />
-              )
-            }
-            apen={harPeriodeSomManglerObligatoriskVerdi || visApen}
+          <ExpansionCard
+            size="small"
+            aria-label={avsnitt.overskrift}
+            className={harPeriodeSomManglerObligatoriskVerdi || visApen ? styles.panelMedGulmarkering : ''}
+            defaultOpen={harPeriodeSomManglerObligatoriskVerdi || visApen}
           >
-            {underavsnitter.map((underavsnitt: any) => (
-              <React.Fragment key={underavsnitt.underavsnittstype + underavsnitt.overskrift + underavsnitt.brødtekst}>
-                {underavsnitt.overskrift && <Element>{underavsnitt.overskrift}</Element>}
-                {underavsnitt.brødtekst && <Normaltekst>{underavsnitt.brødtekst}</Normaltekst>}
-                {underavsnitt.fritekstTillatt && (
-                  <>
-                    <VerticalSpacer eightPx />
-                    <TilbakekrevingVedtakUtdypendeTekstPanel
-                      type={
-                        underavsnitt.underavsnittstype
-                          ? `${periode}.${underavsnitt.underavsnittstype}`
-                          : avsnitt.avsnittstype
-                      }
-                      formName={formName}
-                      readOnly={readOnly}
-                      behandlingId={behandlingId}
-                      behandlingVersjon={behandlingVersjon}
-                      fritekstPakrevet={underavsnitt.fritekstPåkrevet}
-                      maximumLength={erRevurderingTilbakekrevingFeilBeløpBortfalt ? 10000 : null}
-                    />
-                  </>
+            <ExpansionCard.Header>
+              <ExpansionCard.Title size="small">
+                {avsnitt.overskrift ? (
+                  avsnitt.overskrift
+                ) : (
+                  <FormattedMessage id="TilbakekrevingEditerVedtaksbrevPanel.LovhjemlerOgKlagerettOverskrift" />
                 )}
-                <VerticalSpacer eightPx />
-              </React.Fragment>
-            ))}
-          </Ekspanderbartpanel>
+              </ExpansionCard.Title>
+            </ExpansionCard.Header>
+            <ExpansionCard.Content>
+              {underavsnitter.map((underavsnitt: any) => (
+                <React.Fragment key={underavsnitt.underavsnittstype + underavsnitt.overskrift + underavsnitt.brødtekst}>
+                  {underavsnitt.overskrift && <Element>{underavsnitt.overskrift}</Element>}
+                  {underavsnitt.brødtekst && <Normaltekst>{underavsnitt.brødtekst}</Normaltekst>}
+                  {underavsnitt.fritekstTillatt && (
+                    <>
+                      <VerticalSpacer eightPx />
+                      <TilbakekrevingVedtakUtdypendeTekstPanel
+                        type={
+                          underavsnitt.underavsnittstype
+                            ? `${periode}.${underavsnitt.underavsnittstype}`
+                            : avsnitt.avsnittstype
+                        }
+                        formName={formName}
+                        readOnly={readOnly}
+                        behandlingId={behandlingId}
+                        behandlingVersjon={behandlingVersjon}
+                        fritekstPakrevet={underavsnitt.fritekstPåkrevet}
+                        maximumLength={erRevurderingTilbakekrevingFeilBeløpBortfalt ? 10000 : null}
+                      />
+                    </>
+                  )}
+                  <VerticalSpacer eightPx />
+                </React.Fragment>
+              ))}
+            </ExpansionCard.Content>
+          </ExpansionCard>
           <VerticalSpacer eightPx />
         </React.Fragment>
       );

diff --git a/...vedtak-tilbakekreving/src/components/brev/tilbakekrevingEditerVedtaksbrevPanel.module.css b/...vedtak-tilbakekreving/src/components/brev/tilbakekrevingEditerVedtaksbrevPanel.module.css
@@ -2,14 +2,6 @@
   max-width: 1000px;
 }
 
-.panel {
-  border: 1px solid black;
-  padding: 1px 1px 1px 1px;
-}
-
 .panelMedGulmarkering {
-  border: 1px solid black;
-  border-left-color: #fa3;
-  border-left-width: 5px;
-  padding: 1px 1px 1px 1px;
+  border-left: 5px solid #fa3;
 }