meno-core 1.0.0

package/lib/client/ErrorBoundary.test.tsx

@@ -0,0 +1,595 @@
+import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
+import { ErrorBoundary, withErrorBoundary } from "./ErrorBoundary";
+import { createElement as h, Component, useState } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { flushPromises, wait } from "../test-utils/helpers/asyncHelpers";
+
+// Mock console.error to avoid noise in test output
+const originalConsoleError = console.error;
+let consoleErrorMock: ReturnType<typeof mock>;
+
+beforeEach(() => {
+  consoleErrorMock = mock(() => {});
+  console.error = consoleErrorMock;
+});
+
+afterEach(() => {
+  console.error = originalConsoleError;
+});
+
+// Helper to create test container
+function createTestContainer() {
+  const div = document.createElement("div");
+  document.body.appendChild(div);
+  return div;
+}
+
+function cleanupContainer(container: HTMLElement) {
+  try {
+    document.body.removeChild(container);
+  } catch (e) {
+    // Already removed
+  }
+}
+
+// Component that throws an error when rendered
+function ThrowingComponent({ error }: { error: Error }) {
+  throw error;
+}
+
+// Component that throws conditionally
+class ConditionallyThrowingComponent extends Component<{ shouldThrow: boolean; error: Error }> {
+  render() {
+    if (this.props.shouldThrow) {
+      throw this.props.error;
+    }
+    return h("div", null, "Safe content");
+  }
+}
+
+describe("ErrorBoundary - Error catching", () => {
+  describe("Component render errors", () => {
+    test("should catch errors thrown during render and display fallback UI", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const testError = new Error("Test render error");
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          componentName: "TestComponent",
+          children: h(ThrowingComponent, { error: testError })
+        });
+
+        root.render(errorBoundary);
+        await wait(10); // Wait for React to process error
+
+        // Verify fallback UI is displayed with error message
+        expect(container.textContent).toContain("Component Error");
+        expect(container.textContent).toContain("TestComponent");
+        expect(container.textContent).toContain("Test render error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("should render children when no error occurs", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          componentName: "TestComponent",
+          children: h("div", null, "Safe content")
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Should render the safe content
+        expect(container.textContent).toContain("Safe content");
+        // Should NOT show error UI
+        expect(container.textContent).not.toContain("Component Error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("getDerivedStateFromError should return correct state shape", () => {
+      const error = new Error("Test error");
+      const state = ErrorBoundary.getDerivedStateFromError(error);
+
+      expect(state?.hasError).toBe(true);
+      expect(state?.error).toBe(error);
+    });
+
+    test("should call onError callback when error is caught", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+      const onErrorMock = mock(() => {});
+
+      try {
+        const testError = new Error("Callback test error");
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          onError: onErrorMock,
+          children: h(ThrowingComponent, { error: testError })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Verify onError callback was called with the error
+        expect(onErrorMock).toHaveBeenCalled();
+        const callArgs = onErrorMock.mock.calls[0];
+        expect(callArgs[0]).toBe(testError);
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+
+  describe("Page level errors", () => {
+    test("should display page-level error UI when level is page", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const testError = new Error("Page rendering failed");
+        const errorBoundary = h(ErrorBoundary, {
+          level: "page",
+          children: h(ThrowingComponent, { error: testError })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Should show page-level error UI
+        expect(container.textContent).toContain("Page Rendering Error");
+        expect(container.textContent).toContain("Page rendering failed");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("should render page content when no error occurs", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "page",
+          children: h("div", null, "Page content")
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        expect(container.textContent).toContain("Page content");
+        expect(container.textContent).not.toContain("Page Rendering Error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+
+  describe("Custom fallback UI", () => {
+    test("should use custom fallback when provided", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const testError = new Error("Custom error");
+        const customFallback = (error: Error) => h("div", null, `Custom fallback: ${error.message}`);
+
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          fallback: customFallback,
+          children: h(ThrowingComponent, { error: testError })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Should show custom fallback
+        expect(container.textContent).toContain("Custom fallback: Custom error");
+        // Should NOT show default error UI
+        expect(container.textContent).not.toContain("Component Error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+
+  describe("Error state management", () => {
+    test("getDerivedStateFromError should set hasError to true", () => {
+      const error = new Error("Test");
+      const state = ErrorBoundary.getDerivedStateFromError(error);
+
+      expect(state?.hasError).toBe(true);
+      expect(state?.error).toBe(error);
+    });
+
+    test("should handle different error types", () => {
+      const typeError = new TypeError("Type error");
+      const refError = new ReferenceError("Reference error");
+      const syntaxError = new SyntaxError("Syntax error");
+
+      expect(ErrorBoundary.getDerivedStateFromError(typeError)?.error).toBeInstanceOf(TypeError);
+      expect(ErrorBoundary.getDerivedStateFromError(refError)?.error).toBeInstanceOf(ReferenceError);
+      expect(ErrorBoundary.getDerivedStateFromError(syntaxError)?.error).toBeInstanceOf(SyntaxError);
+    });
+
+    test("should handle null errors gracefully", () => {
+      const state = ErrorBoundary.getDerivedStateFromError(null as any);
+
+      expect(state?.hasError).toBe(true);
+    });
+  });
+});
+
+describe("ErrorBoundary - Error display", () => {
+  describe("Error message rendering", () => {
+    test("should display error message in fallback UI", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          children: h(ThrowingComponent, { error: new Error("Specific error message") })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        expect(container.textContent).toContain("Specific error message");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("should handle errors without messages", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          children: h(ThrowingComponent, { error: new Error() })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Should still show error UI even without message
+        expect(container.textContent).toContain("Component Error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+
+  describe("Component name display", () => {
+    test("should display componentName in error UI", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          componentName: "MyCustomComponent",
+          children: h(ThrowingComponent, { error: new Error("Error") })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        expect(container.textContent).toContain("MyCustomComponent");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("should display generic error when componentName is not provided", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "component",
+          children: h(ThrowingComponent, { error: new Error("Error") })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        expect(container.textContent).toContain("Component Error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+
+  describe("Error level handling", () => {
+    test("should render component-level UI by default", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          // No level prop - should default to 'component'
+          children: h(ThrowingComponent, { error: new Error("Test") })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Component-level shows "Component Error"
+        expect(container.textContent).toContain("Component Error");
+        // Should NOT show page-level error
+        expect(container.textContent).not.toContain("Page Rendering Error");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("should log error to console with correct level", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const errorBoundary = h(ErrorBoundary, {
+          level: "page",
+          componentName: "TestPage",
+          children: h(ThrowingComponent, { error: new Error("Log test") })
+        });
+
+        root.render(errorBoundary);
+        await wait(10);
+
+        // Verify console.error was called
+        expect(consoleErrorMock).toHaveBeenCalled();
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+});
+
+describe("ErrorBoundary - withErrorBoundary utility", () => {
+  describe("Error catching", () => {
+    test("should catch synchronous errors in render function", () => {
+      const throwingFn = () => {
+        throw new Error("Render error");
+      };
+
+      // Should not throw - returns an ErrorBoundary element instead
+      const result = withErrorBoundary(throwingFn, {
+        componentName: "TestComponent"
+      });
+
+      // Result should be a React element (ErrorBoundary)
+      expect(result).toBeDefined();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should return result when no error occurs", () => {
+      const successFn = () => "Success";
+
+      const result = withErrorBoundary(successFn);
+
+      expect(result).toBe("Success");
+    });
+
+    test("should render wrapped component content when no error", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const successFn = () => h("div", null, "Wrapped content");
+        const wrapped = withErrorBoundary(successFn, {
+          componentName: "WrappedComponent"
+        });
+
+        root.render(wrapped);
+        await wait(10);
+
+        expect(container.textContent).toContain("Wrapped content");
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+
+    test("should render error boundary when function throws", async () => {
+      const container = createTestContainer();
+      const root = createRoot(container);
+
+      try {
+        const throwingFn = () => {
+          throw new Error("Sync error");
+        };
+        const wrapped = withErrorBoundary(throwingFn, {
+          componentName: "FailingComponent"
+        });
+
+        root.render(wrapped);
+        await wait(10);
+
+        // withErrorBoundary catches sync errors and returns an ErrorBoundary
+        // The ErrorBoundary renders with null children when an error was caught
+        expect(container.innerHTML).toBeDefined();
+      } finally {
+        root.unmount();
+        cleanupContainer(container);
+      }
+    });
+  });
+
+  describe("Error handling options", () => {
+    test("should pass options to the error boundary", () => {
+      const onErrorMock = mock(() => {});
+
+      const throwingFn = () => {
+        throw new Error("Test error");
+      };
+
+      const result = withErrorBoundary(throwingFn, {
+        componentName: "TestComponent",
+        level: "page",
+        onError: onErrorMock
+      });
+
+      // Result is an ErrorBoundary element with the provided props
+      expect(result).toBeDefined();
+    });
+
+    test("should use default options when not provided", () => {
+      const successFn = () => h("div", null, "Content");
+
+      const result = withErrorBoundary(successFn);
+
+      // Should work without options
+      expect(result).toBeDefined();
+    });
+  });
+});
+
+describe("ErrorBoundary - Error types", () => {
+  test("should catch and display TypeError", async () => {
+    const container = createTestContainer();
+    const root = createRoot(container);
+
+    try {
+      const errorBoundary = h(ErrorBoundary, {
+        level: "component",
+        children: h(ThrowingComponent, { error: new TypeError("Type mismatch") })
+      });
+
+      root.render(errorBoundary);
+      await wait(10);
+
+      expect(container.textContent).toContain("Type mismatch");
+      expect(container.textContent).toContain("Component Error");
+    } finally {
+      root.unmount();
+      cleanupContainer(container);
+    }
+  });
+
+  test("should catch and display ReferenceError", async () => {
+    const container = createTestContainer();
+    const root = createRoot(container);
+
+    try {
+      const errorBoundary = h(ErrorBoundary, {
+        level: "component",
+        children: h(ThrowingComponent, { error: new ReferenceError("undefined variable") })
+      });
+
+      root.render(errorBoundary);
+      await wait(10);
+
+      expect(container.textContent).toContain("undefined variable");
+    } finally {
+      root.unmount();
+      cleanupContainer(container);
+    }
+  });
+
+  test("should display custom error messages clearly", async () => {
+    const container = createTestContainer();
+    const root = createRoot(container);
+
+    try {
+      const errorBoundary = h(ErrorBoundary, {
+        level: "component",
+        children: h(ThrowingComponent, { error: new Error("Invalid component definition: Missing structure") })
+      });
+
+      root.render(errorBoundary);
+      await wait(10);
+
+      expect(container.textContent).toContain("Invalid component definition: Missing structure");
+    } finally {
+      root.unmount();
+      cleanupContainer(container);
+    }
+  });
+});
+
+describe("ErrorBoundary - Multiple instances", () => {
+  test("should isolate errors to their own boundary", async () => {
+    const container = createTestContainer();
+    const root = createRoot(container);
+
+    try {
+      // Create a parent with two error boundaries - one throws, one doesn't
+      const app = h("div", null,
+        h(ErrorBoundary, {
+          level: "component",
+          componentName: "ThrowingChild",
+          children: h(ThrowingComponent, { error: new Error("Child error") })
+        }),
+        h(ErrorBoundary, {
+          level: "component",
+          componentName: "SafeChild",
+          children: h("div", null, "Safe content")
+        })
+      );
+
+      root.render(app);
+      await wait(10);
+
+      // Both should be in the DOM
+      expect(container.textContent).toContain("Component Error");
+      expect(container.textContent).toContain("Safe content");
+    } finally {
+      root.unmount();
+      cleanupContainer(container);
+    }
+  });
+
+  test("should handle nested error boundaries", async () => {
+    const container = createTestContainer();
+    const root = createRoot(container);
+
+    try {
+      // Outer boundary catches errors that inner boundary doesn't handle
+      const app = h(ErrorBoundary, {
+        level: "page",
+        children: h(ErrorBoundary, {
+          level: "component",
+          componentName: "InnerComponent",
+          children: h(ThrowingComponent, { error: new Error("Inner error") })
+        })
+      });
+
+      root.render(app);
+      await wait(10);
+
+      // Inner boundary should catch the error
+      expect(container.textContent).toContain("Component Error");
+      expect(container.textContent).toContain("Inner error");
+      // Should NOT show page-level error since inner boundary caught it
+      expect(container.textContent).not.toContain("Page Rendering Error");
+    } finally {
+      root.unmount();
+      cleanupContainer(container);
+    }
+  });
+});