Merge pull request #25 from GemeenteUtrecht/feature/handle-external-a…

…pis-unavailability Handle external apis unavailability
GemeenteUtrecht · Mar 31, 2024 · 252fd04 · 252fd04
2 parents be83dd8 + e4a940f
commit 252fd04
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased](https://github.com/GemeenteUtrecht/bereikbaarheid-frontend/compare/v0.6.0...HEAD)
 
+### Changed
+- show a message when the RDW or PDOK API is not available
+
 
 ## [v0.6.0 - 2024-03-06](https://github.com/GemeenteUtrecht/bereikbaarheid-frontend/compare/v0.5.0...v0.6.0)
 

diff --git a/src/pages/ProhibitorySigns/components/ScenarioWizard/FormRdwInfo/Form.test.tsx b/src/pages/ProhibitorySigns/components/ScenarioWizard/FormRdwInfo/Form.test.tsx
@@ -17,14 +17,14 @@ describe('ProhibitorySignsFormScenarioRdwInfo', () => {
     addressInputEnabled: true,
   }
 
-  const setup = (children: ReactNode) => {
+  const setup = (children: ReactNode, licensePlate: string = 'BXLS14') => {
     return {
       user: userEvent.setup(),
       ...withQueryClient(
         withPageContext(<MemoryRouter>{children}</MemoryRouter>, {
           vehicle: {
             height: 2.34,
-            licensePlate: 'BXLS14',
+            licensePlate: licensePlate,
           } as Vehicle,
         }),
       ),
@@ -39,6 +39,19 @@ describe('ProhibitorySignsFormScenarioRdwInfo', () => {
     ).toBeInTheDocument()
   })
 
+  it('shows an error message when the RDW API is not available', async () => {
+    // suppress Axios console errors
+    jest.spyOn(console, 'error').mockImplementation(jest.fn())
+
+    setup(<ProhibitorySignsFormScenarioRdwInfo {...props} />, 'API500')
+
+    expect(
+      await screen.findByText(
+        'De RDW API is momenteel niet beschikbaar. Probeer het later nog een keer.',
+      ),
+    ).toBeVisible()
+  })
+
   it('shows an error message if the payload exceeds the registered maximum', async () => {
     const { user } = setup(<ProhibitorySignsFormScenarioRdwInfo {...props} />)
 

diff --git a/src/pages/ProhibitorySigns/components/ScenarioWizard/FormRdwInfo/Form.tsx b/src/pages/ProhibitorySigns/components/ScenarioWizard/FormRdwInfo/Form.tsx
@@ -62,7 +62,7 @@ export const ProhibitorySignsFormScenarioRdwInfo = ({
   const { setActiveStepWizard, setShowScenarioWizard, vehicle, setVehicle } =
     useProhibitorySignsPageContext()
   const previousFormStep = addressInputEnabled ? 1 : 0
-  const { rdwDataIsLoading } = useRdwInfo()
+  const { rdwDataIsError, rdwDataIsLoading } = useRdwInfo()
   const validationSchema = useRdwInfoValidationSchema()
   const {
     register,
@@ -88,6 +88,19 @@ export const ProhibitorySignsFormScenarioRdwInfo = ({
     setShowScenarioWizard(false)
   }
 
+  if (rdwDataIsError) {
+    return (
+      <CompactThemeProvider overrides={theme}>
+        <Paragraph>
+          De RDW API is momenteel niet beschikbaar. Probeer het later nog een
+          keer.
+        </Paragraph>
+      </CompactThemeProvider>
+    )
+  }
+
+  if (rdwDataIsLoading) return <LoadingSpinner />
+
   return (
     <CompactThemeProvider overrides={theme}>
       <Paragraph>
@@ -101,75 +114,60 @@ export const ProhibitorySignsFormScenarioRdwInfo = ({
         </Link>
       </Paragraph>
 
-      {rdwDataIsLoading && <LoadingSpinner />}
-
-      {!rdwDataIsLoading && (
-        <>
-          <FormRdwInfoVehicleSummary />
-
-          <FormRdwInfoIntroText />
-
-          <form
-            data-testid="form-scenario-rdw-info"
-            onSubmit={handleSubmit(onSubmit)}
+      <FormRdwInfoVehicleSummary />
+
+      <FormRdwInfoIntroText />
+
+      <form
+        data-testid="form-scenario-rdw-info"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <RdwInfoFormInnerContainer>
+          <RdwInfoFormRow hasMargin={false}>
+            <Column push={4} span={4}>
+              <Paragraph gutterBottom={0} strong>
+                RDW gegevens
+              </Paragraph>
+            </Column>
+            <Column span={4}>
+              <Paragraph gutterBottom={0} strong>
+                Uw gegevens
+              </Paragraph>
+            </Column>
+          </RdwInfoFormRow>
+
+          <FormRdwInfoVehicleCurbWeight errors={errors} register={register} />
+
+          <FormRdwInfoVehiclePayload
+            errors={errors}
+            register={register}
+            setValue={setValue}
+          />
+
+          <FormRdwInfoVehicleTotalWeight errors={errors} register={register} />
+
+          <FormRdwInfoVehicleAxleWeight errors={errors} register={register} />
+
+          <FormRdwInfoVehicleLength errors={errors} register={register} />
+
+          <FormRdwInfoVehicleWidth errors={errors} register={register} />
+        </RdwInfoFormInnerContainer>
+
+        <ScenarioWizardNav>
+          <Button
+            variant="textButton"
+            iconSize={14}
+            iconLeft={<ChevronLeft />}
+            onClick={() => setActiveStepWizard(previousFormStep)}
           >
-            <RdwInfoFormInnerContainer>
-              <RdwInfoFormRow hasMargin={false}>
-                <Column push={4} span={4}>
-                  <Paragraph gutterBottom={0} strong>
-                    RDW gegevens
-                  </Paragraph>
-                </Column>
-                <Column span={4}>
-                  <Paragraph gutterBottom={0} strong>
-                    Uw gegevens
-                  </Paragraph>
-                </Column>
-              </RdwInfoFormRow>
-
-              <FormRdwInfoVehicleCurbWeight
-                errors={errors}
-                register={register}
-              />
-
-              <FormRdwInfoVehiclePayload
-                errors={errors}
-                register={register}
-                setValue={setValue}
-              />
-
-              <FormRdwInfoVehicleTotalWeight
-                errors={errors}
-                register={register}
-              />
-
-              <FormRdwInfoVehicleAxleWeight
-                errors={errors}
-                register={register}
-              />
-
-              <FormRdwInfoVehicleLength errors={errors} register={register} />
-
-              <FormRdwInfoVehicleWidth errors={errors} register={register} />
-            </RdwInfoFormInnerContainer>
-
-            <ScenarioWizardNav>
-              <Button
-                variant="textButton"
-                iconSize={14}
-                iconLeft={<ChevronLeft />}
-                onClick={() => setActiveStepWizard(previousFormStep)}
-              >
-                Vorige
-              </Button>
-
-              <Button variant="secondary" type="submit">
-                Kaart bekijken
-              </Button>
-            </ScenarioWizardNav>
-          </form>
-        </>
-      )}
+            Vorige
+          </Button>
+
+          <Button variant="secondary" type="submit">
+            Kaart bekijken
+          </Button>
+        </ScenarioWizardNav>
+      </form>
     </CompactThemeProvider>
   )
 }
diff --git a/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioAddress/Form.test.tsx b/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioAddress/Form.test.tsx
@@ -113,4 +113,23 @@ describe('ProhibitorySignsFormScenarioAddress', () => {
     expect(await screen.findAllByRole('alert')).toHaveLength(1)
     expect(screen.getByText('Geen adres gevonden')).toBeVisible()
   })
+
+  it('shows an error message when the PDOK API is not available', async () => {
+    const { user } = setup(<ProhibitorySignsFormScenarioAddress />)
+
+    // search for (part of) an address
+    await user.type(
+      screen.getByRole('textbox', {
+        name: /adres van uw bestemming/i,
+      }),
+      'API500',
+    )
+
+    expect(await screen.findAllByRole('alert')).toHaveLength(1)
+    expect(
+      screen.getByText(
+        'De PDOK API is momenteel niet beschikbaar. Hierdoor kan er niet worden gezocht op een adres. Probeer het later nog een keer.',
+      ),
+    ).toBeVisible()
+  })
 })
diff --git a/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioAddress/Form.tsx b/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioAddress/Form.tsx
@@ -85,16 +85,24 @@ export const ProhibitorySignsFormScenarioAddress = () => {
       return
     }
 
-    const search = await suggest(searchString)
-
-    if (search.response.numFound === 0) {
-      setError('searchAddress', {
-        type: 'custom',
-        message: 'Geen adres gevonden',
+    suggest(searchString)
+      .then(search => {
+        if (search.response.numFound === 0) {
+          setError('searchAddress', {
+            type: 'custom',
+            message: 'Geen adres gevonden',
+          })
+        }
+
+        setAddressOptions(search.response.docs)
+      })
+      .catch(() => {
+        setError('searchAddress', {
+          type: 'custom',
+          message:
+            'De PDOK API is momenteel niet beschikbaar. Hierdoor kan er niet worden gezocht op een adres. Probeer het later nog een keer.',
+        })
       })
-    }
-
-    setAddressOptions(search.response.docs)
   }
 
   const onClickAddress = (e: MouseEvent, item: PdokSuggestItem) => {

diff --git a/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioStart/Form.test.tsx b/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioStart/Form.test.tsx
@@ -180,4 +180,41 @@ describe('ProhibitorySignsFormScenarioStart', () => {
       ),
     ).toBeVisible()
   })
+
+  it('shows an error message when the webapp is being rate limited', async () => {
+    const { user } = setup(<ProhibitorySignsFormScenarioStart {...props} />)
+
+    const licensePlateInput = screen.getByLabelText('Kenteken')
+    const vehicleHeightInput = screen.getByLabelText('Hoogte van uw voertuig')
+
+    // https://dev.socrata.com/docs/response-codes.html
+    await user.type(licensePlateInput, 'API429')
+    await user.type(vehicleHeightInput, '1.50')
+    await user.click(screen.getByRole('button'))
+
+    expect(await screen.findAllByRole('alert')).toHaveLength(1)
+    expect(
+      screen.getByText(
+        'De RDW API is momenteel niet beschikbaar. Probeer het later nog een keer.',
+      ),
+    ).toBeVisible()
+  })
+
+  it('shows an error message when the RDW API is not available', async () => {
+    const { user } = setup(<ProhibitorySignsFormScenarioStart {...props} />)
+
+    const licensePlateInput = screen.getByLabelText('Kenteken')
+    const vehicleHeightInput = screen.getByLabelText('Hoogte van uw voertuig')
+
+    await user.type(licensePlateInput, 'API500')
+    await user.type(vehicleHeightInput, '1.50')
+    await user.click(screen.getByRole('button'))
+
+    expect(await screen.findAllByRole('alert')).toHaveLength(1)
+    expect(
+      screen.getByText(
+        'De RDW API is momenteel niet beschikbaar. Probeer het later nog een keer.',
+      ),
+    ).toBeVisible()
+  })
 })
diff --git a/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioStart/ValidationSchema.ts b/src/pages/ProhibitorySigns/components/ScenarioWizard/FormScenarioStart/ValidationSchema.ts
@@ -10,30 +10,38 @@ function isPermittedVehicleType(vehicleType: string) {
 }
 
 const isValidLicensePlate = async (val: string, ctx: z.RefinementCtx) => {
-  const rdwApi = await getVehicle(val)
+  return getVehicle(val)
+    .then(data => {
+      if (data.length === 0) {
+        return ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message:
+            'Kenteken niet gevonden bij RDW. Probeer het nog eens met een geldig Nederlands kenteken',
+        })
+      }
 
-  if (rdwApi.length === 0) {
-    return ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message:
-        'Kenteken niet gevonden bij RDW. Probeer het nog eens met een geldig Nederlands kenteken',
-    })
-  }
+      if (!isPermittedVehicleType(data[0].voertuigsoort)) {
+        return ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Voer een kenteken in van een trekkend voertuig',
+        })
+      }
 
-  if (!isPermittedVehicleType(rdwApi[0].voertuigsoort)) {
-    return ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'Voer een kenteken in van een trekkend voertuig',
+      if (!data[0].toegestane_maximum_massa_voertuig) {
+        return ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `RDW kent geen toegestaan maximum gewicht voor dit voertuig\
+            waardoor u deze kaart niet kan gebruiken.`,
+        })
+      }
     })
-  }
-
-  if (!rdwApi[0].toegestane_maximum_massa_voertuig) {
-    return ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: `RDW kent geen toegestaan maximum gewicht voor dit voertuig\
-        waardoor u deze kaart niet kan gebruiken.`,
+    .catch(() => {
+      return ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          'De RDW API is momenteel niet beschikbaar. Probeer het later nog een keer.',
+      })
     })
-  }
 }
 
 export const FormScenarioStartValidationSchema = z.object({

diff --git a/src/pages/ProhibitorySigns/hooks/useRdwAxlesInfo.ts b/src/pages/ProhibitorySigns/hooks/useRdwAxlesInfo.ts
@@ -38,6 +38,7 @@ export const useRdwAxlesInfo = () => {
 
   return {
     data: queryResult.data ? parseData(queryResult.data) : undefined,
+    isError: queryResult.isError || queryResult.isLoadingError,
     isLoading: queryResult.isLoading,
   }
 }
diff --git a/src/pages/ProhibitorySigns/hooks/useRdwFuelInfo.ts b/src/pages/ProhibitorySigns/hooks/useRdwFuelInfo.ts
@@ -29,6 +29,7 @@ export const useRdwFuelInfo = () => {
 
   return {
     data: queryResult.data?.map(item => parsedItem(item)),
+    isError: queryResult.isError,
     isLoading: queryResult.isLoading,
   }
 }
diff --git a/src/pages/ProhibitorySigns/hooks/useRdwGeneralInfo.ts b/src/pages/ProhibitorySigns/hooks/useRdwGeneralInfo.ts
@@ -69,6 +69,7 @@ export const useRdwGeneralInfo = () => {
 
   return {
     data: queryResult.data?.map(item => parsedItem(item)),
+    isError: queryResult.isError,
     isLoading: queryResult.isLoading,
   }
 }