show user-friendly message when API is unreachable

CHANGELOG.md

@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ## [Unreleased](https://github.com/GemeenteUtrecht/bereikbaarheid-frontend/compare/v0.7.7...HEAD)
 
 ### Fixed
+- show user-friendly error message when API is unreachable
 - Restrictions: add tests
 
 

src/pages/ProhibitorySigns/ProhibitorySignsPage.test.tsx

@@ -1,8 +1,11 @@
 import { screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { http, HttpResponse } from 'msw'
 import { generatePath } from 'react-router-dom'
 
+import { ENDPOINT as ENDPOINT_PROHIBITORY_ROADS } from '../../api/nationaalwegenbestand/rvv/wegvakken'
 import { getPathTo } from '../../routes'
+import { server } from '../../../test/server.ts'
 import { withApp } from '../../../test/utils/withApp'
 
 import prohibitoryRoadSectionsData from '../../../test/mocks/nationaalwegenbestand/rvv/wegvakken/data.json'
@@ -31,6 +34,47 @@ describe('ProhibitorySignsPage', () => {
     ).toBeVisible()
   })
 
+  it('shows the error page when the api is unreachable', async () => {
+    const pathToPage = generatePath(getPathTo('ACCESSIBILITY_MAP'))
+    const user = userEvent.setup()
+
+    server.use(
+      http.get(ENDPOINT_PROHIBITORY_ROADS, () => {
+        return HttpResponse.json({}, { status: 503 })
+      }),
+    )
+
+    withApp(pathToPage)
+
+    // wait until page is rendered
+    await screen.findAllByText(/bereikbaarheid/i)
+
+    // fill out the first form
+    await user.type(await screen.findByLabelText('Kenteken'), 'BXLS14')
+    await user.type(
+      await screen.findByLabelText('Hoogte van uw voertuig'),
+      '2.78',
+    )
+
+    // ... but uncheck the address option
+    await user.click(await screen.findByLabelText('Ik wil een adres invoeren'))
+
+    await user.click(screen.getByText('Volgende', { selector: 'button' }))
+
+    // the next step should be the form with RDW information
+    expect(
+      await within(screen.getByRole('dialog')).findByText('RDW gegevens'),
+    ).toBeVisible()
+
+    // complete the wizard
+    await user.click(screen.getByText('Kaart bekijken', { selector: 'button' }))
+
+    // wait until the page is rendered
+    await screen.findByText(/Helaas/)
+
+    expect(screen.getByText(/Er ging iets fout/)).toBeInTheDocument()
+  })
+
   it('renders the map when the wizard is completed', async () => {
     const pathToPage = generatePath(getPathTo('ACCESSIBILITY_MAP'))
     const user = userEvent.setup()

src/pages/ProhibitorySigns/components/MapLayers/ProhibitoryRoadsLayer.tsx

@@ -32,6 +32,7 @@ const ProhibitorySignsProhibitoryRoadsLayer = () => {
         rdwGeneralData![0].derived.vehicleType,
         signal,
       ),
+    useErrorBoundary: true,
   })
 
   useEffect(() => {

src/pages/ProhibitorySigns/components/MapLayers/TrafficSignsLayer.tsx

@@ -40,6 +40,7 @@ const ProhibitorySignsTrafficSignsLayer = () => {
         rdwGeneralData![0].derived.vehicleType,
         signal,
       ),
+    useErrorBoundary: true,
   })
 
   useEffect(() => {

src/pages/ProhibitorySigns/hooks/usePermitsByLocation.ts

@@ -31,6 +31,7 @@ export const usePermitsByLocation = () => {
         signal,
       ),
     staleTime: 1000 * 60 * 10,
+    useErrorBoundary: true,
   })
 
   return {

src/pages/Restrictions/RestrictionsPage.test.tsx

@@ -1,8 +1,11 @@
 import { screen, waitFor, within } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
 import { generatePath } from 'react-router-dom'
 
+import { ENDPOINT as ENDPOINT_PROHIBITORY_ROADS } from '../../api/nationaalwegenbestand/rvv/wegvakken'
 import { getPathTo } from '../../routes'
 import { axleWeightCategories } from './vehiclePropertyCategories.ts'
+import { server } from '../../../test/server.ts'
 import { withApp } from '../../../test/utils/withApp'
 
 import prohibitoryRoadSectionsData from '../../../test/mocks/nationaalwegenbestand/rvv/wegvakken/data.json'
@@ -34,4 +37,21 @@ describe('RestrictionsPage', () => {
       ).toBe(numberOfFeatures),
     )
   })
+
+  it('shows the error page when the api is unreachable', async () => {
+    const pathToPage = generatePath(getPathTo('RESTRICTIONS_MAP'))
+
+    server.use(
+      http.get(ENDPOINT_PROHIBITORY_ROADS, () => {
+        return HttpResponse.json({}, { status: 503 })
+      }),
+    )
+
+    withApp(pathToPage)
+
+    // wait until the page is rendered
+    await screen.findByText(/Helaas/)
+
+    expect(screen.getByText(/Er ging iets fout/)).toBeInTheDocument()
+  })
 })

src/pages/Restrictions/components/MapLayers/VehicleProperty.tsx

@@ -36,6 +36,7 @@ export const RestrictionsMapLayerVehicleProperty = ({
         )
       },
       staleTime: 1000 * 60 * 15,
+      useErrorBoundary: true,
     })),
   })
 

src/routes.test.tsx

@@ -13,4 +13,12 @@ describe('routes', () => {
       await screen.findByTestId('prohibitory-signs-page'),
     ).toBeInTheDocument()
   })
+
+  it('shows the not found page when an nonexistent url is requested', async () => {
+    const pathToPage = generatePath('/does-not-exist')
+
+    withApp(pathToPage)
+
+    expect(screen.getByText('Pagina niet gevonden.')).toBeInTheDocument()
+  })
 })

src/routes.tsx

@@ -15,11 +15,13 @@ export const ROUTES: RouteObject[] = [
     path: '/bereikbaarheid',
     id: 'ACCESSIBILITY_MAP',
     element: <ProhibitorySignsPage />,
+    errorElement: <ErrorPage />,
   },
   {
     path: '/beperkingen',
     id: 'RESTRICTIONS_MAP',
     element: <RestrictionsPage />,
+    errorElement: <ErrorPage />,
   },
   {
     path: '/wegvak/:wegvakId',