test: Add coverage for GraphError

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

@@ -1,9 +1,9 @@
 import Typography from "@mui/material/Typography";
 import Card from "@planx/components/shared/Preview/Card";
 import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
+import { logger } from "airbrake";
 import React from "react";
 
-import { logger } from "../../airbrake";
 import { GraphErrorComponent, isGraphError } from "./GraphError";
 
 const ErrorFallback: React.FC<{ error: Error }> = ({ error }) => {

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

@@ -0,0 +1,81 @@
+import { logger } from "airbrake";
+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";
+
+import { GraphError } from "./GraphError";
+
+vi.mock("airbrake", () => ({
+  logger: {
+    notify: vi.fn(),
+  },
+}));
+
+const ThrowError: React.FC = () => {
+  throw new Error("Something broke");
+};
+
+const ThrowGraphError: React.FC = () => {
+  throw new GraphError("nodeMustFollowFindProperty");
+};
+
+it("does not render if a child does not throw an error", () => {
+  const { queryByRole } = setup(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <h1>No error</h1>
+    </ErrorBoundary>,
+  );
+  expect(
+    queryByRole("heading", { name: /Invalid graph/ }),
+  ).not.toBeInTheDocument();
+});
+
+it("does not render if a child throws a non-Graph error", () => {
+  const { queryByRole, getByText } = setup(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ThrowError />
+    </ErrorBoundary>,
+  );
+  // ErrorFallback displays...
+  expect(getByText(/Something went wrong/)).toBeInTheDocument();
+  // ...but does not show a GraphError
+  expect(
+    queryByRole("heading", { name: /Invalid graph/ }),
+  ).not.toBeInTheDocument();
+});
+
+it("renders if a child throws an error", () => {
+  const { queryByText, getByRole } = setup(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ThrowGraphError />
+    </ErrorBoundary>,
+  );
+
+  expect(queryByText(/Something went wrong/)).not.toBeInTheDocument();
+  expect(getByRole("heading", { name: /Invalid graph/ })).toBeInTheDocument();
+});
+
+it("does not call Airbrake", () => {
+  const loggerSpy = vi.spyOn(logger, "notify");
+
+  setup(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ThrowGraphError />
+    </ErrorBoundary>,
+  );
+
+  expect(loggerSpy).not.toHaveBeenCalled();
+});
+
+it("should not have accessability violations", async () => {
+  const { container } = setup(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ThrowGraphError />
+    </ErrorBoundary>,
+  );
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});