♻️ Trekker ut ScanningGuide til egen komponentog fikser test

navikt · Oct 12, 2023 · 3fc2d05 · 3fc2d05
1 parent b1cd264
commit 3fc2d05
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git a/components/pageComponents/standard/Vedlegg/Vedlegg.tsx b/components/pageComponents/standard/Vedlegg/Vedlegg.tsx
@@ -1,40 +1,29 @@
 import { Soknad } from 'types/Soknad';
-import React, { useEffect, useRef, useState } from 'react';
-import { Alert, BodyLong, BodyShort, Heading, Label, ReadMore, Textarea } from '@navikt/ds-react';
+import React, { useEffect } from 'react';
+import { Alert, BodyLong, BodyShort, Heading, Label, Textarea } from '@navikt/ds-react';
 import { completeAndGoToNextStep, useStepWizard } from 'context/stepWizardContextV2';
 import { addVedlegg, deleteVedlegg, updateSøknadData } from 'context/soknadContextCommon';
 import { useSoknadContextStandard } from 'context/soknadContextStandard';
 import { useDebounceLagreSoknad } from 'hooks/useDebounceLagreSoknad';
-import { scrollRefIntoView } from 'utils/dom';
-import { FileInput, LucaGuidePanel, ScanningGuide } from '@navikt/aap-felles-react';
+import { FileInput, LucaGuidePanel } from '@navikt/aap-felles-react';
 import { useIntl } from 'react-intl';
 import SoknadFormWrapperNew from '../../../SoknadFormWrapper/SoknadFormWrapperNew';
 import { SøknadValidationError } from '../../../schema/FormErrorSummaryNew';
 import { logSkjemastegFullførtEvent } from '../../../../utils/amplitude';
 import { AttachmentType } from '../AndreUtbetalinger/AndreUtbetalinger';
 import { AVBRUTT_STUDIE_VEDLEGG } from '../Student/Student';
 import { setFocusOnErrorSummary } from '../../../schema/FormErrorSummary';
+import { ScanningGuide } from './scanningguide/ScanningGuide';
 
 interface Props {
   onBackClick: () => void;
 }
 
 const Vedlegg = ({ onBackClick }: Props) => {
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
   const { søknadState, søknadDispatch } = useSoknadContextStandard();
-  const { stepWizardDispatch, currentStepIndex } = useStepWizard();
-  const { stepList } = useStepWizard();
+  const { stepWizardDispatch, currentStepIndex, stepList } = useStepWizard();
   const debouncedLagre = useDebounceLagreSoknad<Soknad>();
-  const { locale } = useIntl();
-
-  const [scanningGuideOpen, setScanningGuideOpen] = useState(false);
-  const scanningGuideElement = useRef(null);
-
-  useEffect(() => {
-    if (scanningGuideOpen) {
-      if (scanningGuideElement?.current != null) scrollRefIntoView(scanningGuideElement);
-    }
-  }, [scanningGuideOpen]);
 
   useEffect(() => {
     debouncedLagre(søknadState, stepList, {});
@@ -56,7 +45,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
   return (
     <SoknadFormWrapperNew
       onNext={() => {
-        if (!errors) {
+        if (errors.length === 0) {
           logSkjemastegFullførtEvent(currentStepIndex ?? 0);
           completeAndGoToNextStep(stepWizardDispatch);
         } else {
@@ -95,18 +84,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           <BodyLong>{formatMessage({ id: 'søknad.vedlegg.ingenVedlegg.alert.text3' })}</BodyLong>
         </Alert>
       )}
-      <div>
-        <BodyLong>{formatMessage({ id: 'søknad.vedlegg.vedleggPåPapir.text' })}</BodyLong>
-        <ReadMore
-          header={formatMessage({ id: 'søknad.vedlegg.vedleggPåPapir.readMore.title' })}
-          type={'button'}
-          open={scanningGuideOpen}
-          onClick={() => setScanningGuideOpen(!scanningGuideOpen)}
-          ref={scanningGuideElement}
-        >
-          <ScanningGuide locale={locale} />
-        </ReadMore>
-      </div>
+      <ScanningGuide />
 
       {søknadState?.requiredVedlegg?.find((e) => e.type === AVBRUTT_STUDIE_VEDLEGG) && (
         <FileInput
@@ -125,6 +103,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           files={søknadState.søknad?.vedlegg?.AVBRUTT_STUDIE || []}
         />
       )}
+
       {søknadState?.requiredVedlegg?.find((e) => e.type === AttachmentType.LØNN_OG_ANDRE_GODER) && (
         <FileInput
           locale={locale}
@@ -142,6 +121,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           files={søknadState.søknad?.vedlegg?.LØNN_OG_ANDRE_GODER || []}
         />
       )}
+
       {søknadState?.requiredVedlegg?.find((e) => e.type === AttachmentType.UTLANDSSTØNAD) && (
         <FileInput
           locale={locale}
@@ -159,6 +139,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           files={søknadState.søknad?.vedlegg?.UTLANDSSTØNAD || []}
         />
       )}
+
       {søknadState.requiredVedlegg?.find((e) => e.type === AttachmentType.LÅN) && (
         <FileInput
           locale={locale}
@@ -176,6 +157,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           files={søknadState.søknad?.vedlegg?.LÅN || []}
         />
       )}
+
       {søknadState.requiredVedlegg?.find((e) => e.type === AttachmentType.SYKESTIPEND) && (
         <FileInput
           locale={locale}
@@ -193,6 +175,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           files={søknadState.søknad?.vedlegg?.SYKESTIPEND || []}
         />
       )}
+
       {søknadState?.søknad?.manuelleBarn?.map((barn) => {
         const requiredVedlegg = søknadState?.requiredVedlegg.find(
           (e) => e?.type === `barn-${barn.internId}`
@@ -221,6 +204,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
           />
         );
       })}
+
       <FileInput
         locale={locale}
         heading={formatMessage({ id: 'søknad.vedlegg.andreVedlegg.title' })}
@@ -236,6 +220,7 @@ const Vedlegg = ({ onBackClick }: Props) => {
         uploadUrl="/aap/soknad/api/vedlegg/lagre/"
         files={søknadState.søknad?.vedlegg?.ANNET || []}
       />
+
       <Textarea
         value={søknadState.søknad?.tilleggsopplysninger}
         name={`tilleggsopplysninger`}

diff --git a/components/pageComponents/standard/Vedlegg/scanningguide/ScanningGuide.tsx b/components/pageComponents/standard/Vedlegg/scanningguide/ScanningGuide.tsx
@@ -0,0 +1,31 @@
+import { BodyLong, ReadMore } from '@navikt/ds-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { scrollRefIntoView } from '../../../../../utils/dom';
+import { ScanningGuide as ScanningGuideAAP } from '@navikt/aap-felles-react';
+
+export const ScanningGuide = () => {
+  const { formatMessage, locale } = useIntl();
+  const [scanningGuideOpen, setScanningGuideOpen] = useState(false);
+  const scanningGuideElement = useRef(null);
+
+  useEffect(() => {
+    if (scanningGuideOpen) {
+      if (scanningGuideElement?.current != null) scrollRefIntoView(scanningGuideElement);
+    }
+  }, [scanningGuideOpen]);
+  return (
+    <div>
+      <BodyLong>{formatMessage({ id: 'søknad.vedlegg.vedleggPåPapir.text' })}</BodyLong>
+      <ReadMore
+        header={formatMessage({ id: 'søknad.vedlegg.vedleggPåPapir.readMore.title' })}
+        type={'button'}
+        open={scanningGuideOpen}
+        onClick={() => setScanningGuideOpen(!scanningGuideOpen)}
+        ref={scanningGuideElement}
+      >
+        <ScanningGuideAAP locale={locale} />
+      </ReadMore>
+    </div>
+  );
+};
diff --git a/tests/unhappypath.spec.ts b/tests/unhappypath.spec.ts
@@ -480,7 +480,7 @@ test('at alle feilmeldinger skal dukke opp', async ({ page }) => {
   await expect(
     page.getByRole('heading', { name: 'Fødselsattest eller adopsjonsbevis' })
   ).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Annen dokumentasjon' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Andre vedlegg' })).toBeVisible();
   await page.getByRole('button', { name: 'Neste steg' }).click();
 
   // Steg 9