test: Fix failing tests which by adding error boundaries

editor.planx.uk/src/@planx/components/PlanningConstraints/Public.test.tsx

@@ -1,5 +1,6 @@
-import { screen } from "@testing-library/react";
+import ErrorFallback from "components/Error/ErrorFallback";
 import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
@@ -9,55 +10,62 @@ import digitalLandResponseMock from "./mocks/digitalLandResponseMock";
 import PlanningConstraints from "./Public";
 
 vi.mock("swr", () => ({
-  default: vi.fn((url: any) => {
+  default: vi.fn((url: () => string) => {
     const isGISRequest = url()?.startsWith(
       `${import.meta.env.VITE_APP_API_URL}/gis/`,
     );
     const isRoadsRequest = url()?.startsWith(
       `${import.meta.env.VITE_APP_API_URL}/roads/`,
     );
 
-    if (isGISRequest) return { data: digitalLandResponseMock } as any;
-    if (isRoadsRequest) return { data: classifiedRoadsResponseMock } as any;
+    if (isGISRequest) return { data: digitalLandResponseMock };
+    if (isRoadsRequest) return { data: classifiedRoadsResponseMock };
 
     return { data: null };
   }),
 }));
 
-it("renders correctly", async () => {
-  const handleSubmit = vi.fn();
+describe("error state", () => {
+  it("renders an error if no addres is present in the passport", async () => {
+    const handleSubmit = vi.fn();
 
-  const { user } = setup(
-    <PlanningConstraints
-      title="Planning constraints"
-      description="Things that might affect your project"
-      fn="property.constraints.planning"
-      disclaimer="This page does not include information about historic planning conditions that may apply to this property."
-      handleSubmit={handleSubmit}
-    />,
-  );
-
-  expect(screen.getByText("Planning constraints")).toBeInTheDocument();
+    const { getByRole, getByTestId } = setup(
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <PlanningConstraints
+          title="Planning constraints"
+          description="Things that might affect your project"
+          fn="property.constraints.planning"
+          disclaimer="This page does not include information about historic planning conditions that may apply to this property."
+          handleSubmit={handleSubmit}
+        />
+        ,
+      </ErrorBoundary>,
+    );
 
-  // TODO mock passport _address so that SWR request is actually triggered to return mock response
-  expect(screen.getByTestId("error-summary-invalid-graph")).toBeInTheDocument();
+    expect(getByTestId("error-summary-invalid-graph")).toBeInTheDocument();
+    expect(getByRole("heading", { name: "Invalid graph" })).toBeInTheDocument();
+  });
 
-  await user.click(screen.getByTestId("continue-button"));
-  expect(handleSubmit).toHaveBeenCalledTimes(1);
+  it("should not have any accessibility violations", async () => {
+    const { container } = setup(
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <PlanningConstraints
+          title="Planning constraints"
+          description="Things that might affect your project"
+          fn="property.constraints.planning"
+          disclaimer="This page does not include information about historic planning conditions that may apply to this property."
+        />
+        ,
+      </ErrorBoundary>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
 
-it("should not have any accessibility violations", async () => {
-  const { container } = setup(
-    <PlanningConstraints
-      title="Planning constraints"
-      description="Things that might affect your project"
-      fn="property.constraints.planning"
-      disclaimer="This page does not include information about historic planning conditions that may apply to this property."
-    />,
-  );
-  const results = await axe(container);
-  expect(results).toHaveNoViolations();
-});
+it.todo("renders correctly");
+
+it.todo("should not have any accessibility violations");
 
 it.todo("fetches classified roads only when we have a siteBoundary"); // using expect(spy).toHaveBeenCalled() ??
 

editor.planx.uk/src/@planx/components/PropertyInformation/Public.test.tsx

@@ -1,6 +1,8 @@
 import { MockedProvider } from "@apollo/client/testing";
 import { screen } from "@testing-library/react";
+import ErrorFallback from "components/Error/ErrorFallback";
 import React from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { setup } from "testUtils";
 import { vi } from "vitest";
 
@@ -18,10 +20,12 @@ const defaultPresentationalProps: PresentationalProps = {
 test("renders a warning for editors if address data is not in state", async () => {
   setup(
     <MockedProvider>
-      <PropertyInformation
-        title="About the property"
-        description="This is the information we currently have about the property"
-      />
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <PropertyInformation
+          title="About the property"
+          description="This is the information we currently have about the property"
+        />
+      </ErrorBoundary>
     </MockedProvider>,
   );
 

editor.planx.uk/src/components/Error/GraphError.tsx

@@ -1,6 +1,5 @@
 import Typography from "@mui/material/Typography";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
 import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import React from "react";
 
@@ -29,12 +28,11 @@ export const GraphErrorComponent: React.FC<{ error: GraphError }> = ({
   error,
 }) => (
   <Card>
-    <CardHeader />
     <ErrorSummaryContainer
       role="status"
       data-testid="error-summary-invalid-graph"
     >
-      <Typography variant="h4" component="h2" gutterBottom>
+      <Typography variant="h4" component="h1" gutterBottom>
         Invalid graph
       </Typography>
       <Typography variant="body2">