From 76ca89b12c065c44c784af08a4796d3e20bc7efe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 17 Sep 2024 21:10:31 +0100
Subject: [PATCH] test: Add coverage for GraphError

---
 .../src/components/Error/ErrorFallback.tsx    |  2 +-
 .../src/components/Error/GraphError.test.tsx  | 81 +++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 editor.planx.uk/src/components/Error/GraphError.test.tsx

diff --git a/editor.planx.uk/src/components/Error/ErrorFallback.tsx b/editor.planx.uk/src/components/Error/ErrorFallback.tsx
index 71aef0f689..ad9e822d91 100644
--- a/editor.planx.uk/src/components/Error/ErrorFallback.tsx
+++ b/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 }) => {
diff --git a/editor.planx.uk/src/components/Error/GraphError.test.tsx b/editor.planx.uk/src/components/Error/GraphError.test.tsx
new file mode 100644
index 0000000000..ec79de8dfc
--- /dev/null
+++ b/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();
+});