add theme switch and unsupported block tests

Author: abrehamgezahegn

typescript/eslint.config.js

@@ -97,9 +97,7 @@ module.exports = [
       "coverage/**",
       ".jest/**",
       "scripts/**",
-      "tests/**",
       "**/generated/**",
-      "src/serialization/**",
     ],
   },
 ];

typescript/src/renderer/components/BlockRenderer.tsx

@@ -225,8 +225,12 @@ export const BlockRenderer: React.FC<BlockRendererProps> = ({
   // Fallback for unsupported block types
   console.warn("Unsupported block type:", block?.type);
   return (
-    <div className="notion-unsupported-block" data-block-type={block?.type}>
-      <span>Unsupported block type: {block?.type}</span>
+    <div
+      className="notion-unsupported-block"
+      data-block-type={block?.type}
+      role="alert"
+    >
+      <span>Error Unsupported block type: {block?.type}</span>
     </div>
   );
 };

typescript/tests/BlockRenderer.test.tsx

@@ -31,6 +31,7 @@ const createPageWithBlocks = (blocks: any[]) => ({
 describe("JsonDocRenderer - All Block Types", () => {
   it("renders page title correctly", () => {
     render(<JsonDocRenderer page={mockPageWithAllBlocks} />);
+
     expect(
       screen.getByText("Test Page with All Block Types")
     ).toBeInTheDocument();
@@ -49,6 +50,8 @@ describe("JsonDocRenderer - All Block Types", () => {
     const page = createPageWithBlocks([mockBlocks.heading_1]);
     render(<JsonDocRenderer page={page} />);
 
+    screen.debug();
+
     expect(screen.getByText("Main Heading")).toBeInTheDocument();
   });
 

typescript/tests/ThemeSwitching.test.tsx

@@ -0,0 +1,87 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { JsonDocRenderer } from "../src/renderer/JsonDocRenderer";
+import { mockBlocks, mockPageWithAllBlocks } from "./fixtures/test-blocks";
+
+// Helper to create a simple page for theme testing
+const createSimplePage = () => ({
+  object: "page",
+  id: "theme-test-page",
+  properties: {
+    title: {
+      type: "title",
+      title: [
+        {
+          href: null,
+          type: "text",
+          text: { link: null, content: "Theme Test Page" },
+          annotations: {},
+          plain_text: "Theme Test Page",
+        },
+      ],
+    },
+  },
+  children: [mockBlocks.paragraph],
+});
+
+const JSON_DOC_ROOT_TEST_ID = "jsondoc-renderer-root";
+
+describe("JsonDocRenderer - Theme Switching", () => {
+  const simplePage = createSimplePage();
+
+  it("renders with light theme by default", () => {
+    const { container } = render(<JsonDocRenderer page={simplePage} />);
+
+    const rendererDiv = screen.getByTestId(JSON_DOC_ROOT_TEST_ID);
+    expect(rendererDiv).toHaveClass("jsondoc-theme-light");
+    expect(rendererDiv).not.toHaveClass("jsondoc-theme-dark");
+  });
+
+  it("renders with light theme when explicitly set", () => {
+    const { container } = render(
+      <JsonDocRenderer page={simplePage} theme="light" />
+    );
+
+    const rendererDiv = screen.getByTestId(JSON_DOC_ROOT_TEST_ID);
+    expect(rendererDiv).toHaveClass("jsondoc-theme-light");
+    expect(rendererDiv).not.toHaveClass("jsondoc-theme-dark");
+  });
+
+  it("renders with dark theme when theme prop is set to dark", () => {
+    const { container } = render(
+      <JsonDocRenderer page={simplePage} theme="dark" />
+    );
+
+    const rendererDiv = screen.getByTestId(JSON_DOC_ROOT_TEST_ID);
+    expect(rendererDiv).toHaveClass("jsondoc-theme-dark");
+    expect(rendererDiv).not.toHaveClass("jsondoc-theme-light");
+  });
+
+  it("handles undefined theme prop gracefully", () => {
+    const { container } = render(
+      <JsonDocRenderer page={simplePage} theme={undefined} />
+    );
+
+    const rendererDiv = screen.getByTestId(JSON_DOC_ROOT_TEST_ID);
+    expect(rendererDiv).toHaveClass("jsondoc-theme-light");
+  });
+
+  it("theme persists across different block types", () => {
+    const { container } = render(
+      <JsonDocRenderer page={mockPageWithAllBlocks} theme="dark" />
+    );
+
+    const rendererDiv = screen.getByTestId(JSON_DOC_ROOT_TEST_ID);
+    expect(rendererDiv).toHaveClass("jsondoc-theme-dark");
+
+    // Verify various block types are still rendered
+    expect(screen.getByText("This is a paragraph with")).toBeInTheDocument();
+    expect(screen.getByText("First bullet point")).toBeInTheDocument();
+    expect(
+      screen.getByText('console.log("Hello, World!");')
+    ).toBeInTheDocument();
+  });
+});

typescript/tests/UnsupportedBlockHandling.test.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { JsonDocRenderer } from "../src/renderer/JsonDocRenderer";
+import { mockBlocks } from "./fixtures/test-blocks";
+
+// Helper to create a page with specific blocks
+const createPageWithBlocks = (blocks: any[]) => ({
+  object: "page",
+  id: "test-page",
+  properties: {
+    title: {
+      type: "title",
+      title: [
+        {
+          href: null,
+          type: "text",
+          text: { link: null, content: "Test Page" },
+          annotations: {},
+          plain_text: "Test Page",
+        },
+      ],
+    },
+  },
+  children: blocks,
+});
+
+describe("Unsupported Block Handling", () => {
+  // Mock console.warn to test logging behavior
+  const originalConsoleWarn = console.warn;
+  beforeEach(() => {
+    console.warn = vi.fn();
+  });
+  afterEach(() => {
+    console.warn = originalConsoleWarn;
+  });
+
+  const warningMsg = expect.stringMatching(/Unsupported block type:/);
+
+  it("renders fallback UI for unsupported block types", () => {
+    const page = createPageWithBlocks([mockBlocks.unsupported_with_content]);
+    const { container } = render(<JsonDocRenderer page={page} />);
+
+    // Should still render fallback UI regardless of block content
+    expect(
+      screen.getByText(/Unsupported block type: ai_block/)
+    ).toBeInTheDocument();
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+  });
+
+  it("renders unsupported blocks with children gracefully", () => {
+    const page = createPageWithBlocks([mockBlocks.unsupported_with_children]);
+    const { container } = render(<JsonDocRenderer page={page} />);
+
+    // Should show fallback for the unsupported parent block
+    expect(
+      screen.getByText(/Unsupported block type: template_block/)
+    ).toBeInTheDocument();
+
+    expect(
+      container.querySelector('[data-block-type="template_block"]')
+    ).toBeInTheDocument();
+
+    // Children should not be rendered within unsupported block fallback
+    expect(
+      screen.queryByText(/Content inside unsupported block/)
+    ).not.toBeInTheDocument();
+  });
+
+  it("handles multiple unsupported blocks without breaking renderer", () => {
+    const page = createPageWithBlocks([
+      mockBlocks.unsupported_single,
+      mockBlocks.paragraph, // Mix with supported block
+      mockBlocks.unsupported_with_content,
+      mockBlocks.heading_1, // Another supported block
+      mockBlocks.unsupported_with_children,
+    ]);
+    const { container } = render(<JsonDocRenderer page={page} />);
+
+    // All unsupported blocks should have fallback UI
+    expect(
+      screen.getByText(/Unsupported block type: custom_widget/)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Unsupported block type: ai_block/)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(/Unsupported block type: template_block/)
+    ).toBeInTheDocument();
+
+    // Supported blocks should still render normally
+    expect(screen.getByText(/This is a paragraph with/)).toBeInTheDocument();
+    expect(screen.getByText(/Main Heading/)).toBeInTheDocument();
+
+    // Check all unsupported blocks have correct CSS class
+    expect(screen.getAllByRole("alert")).toHaveLength(3);
+
+    // Verify all warnings were logged
+    expect(console.warn).toHaveBeenCalledTimes(3);
+    expect(console.warn).toHaveBeenCalledWith(warningMsg, "custom_widget");
+    expect(console.warn).toHaveBeenCalledWith(warningMsg, "ai_block");
+    expect(console.warn).toHaveBeenCalledWith(warningMsg, "template_block");
+  });
+});

typescript/tests/fixtures/test-blocks.ts

@@ -454,6 +454,59 @@ export const mockBlocks: Record<
       expression: "E = mc^2",
     },
   },
+
+  // Mock unsupported block types for testing fallback behavior
+  unsupported_single: {
+    object: "block",
+    id: "unsupported-1",
+    type: "custom_widget" as any,
+    created_time: "2025-06-24T09:44:12.014249Z",
+    has_children: false,
+  },
+
+  unsupported_with_content: {
+    object: "block",
+    id: "unsupported-2",
+    type: "ai_block" as any,
+    created_time: "2025-06-24T09:44:12.014249Z",
+    has_children: false,
+    // @ts-expect-error
+    ai_block: {
+      prompt: "Generate something amazing",
+    },
+  },
+
+  unsupported_with_children: {
+    object: "block",
+    id: "unsupported-3",
+    type: "template_block" as any,
+    created_time: "2025-06-24T09:44:12.014249Z",
+    has_children: true,
+    template_block: {
+      template_id: "template-123",
+    },
+    children: [
+      {
+        object: "block",
+        id: "h1-1",
+        // @ts-ignore
+        type: "paragraph",
+        created_time: "2025-06-24T09:44:12.014249Z",
+        has_children: false,
+        // @ts-ignore
+        heading_1: {
+          rich_text: [
+            {
+              type: "text",
+              text: { content: "Main Heading" },
+              annotations: {},
+              plain_text: "Main Heading",
+            },
+          ],
+        },
+      },
+    ],
+  },
 };
 
 // Complete page with all block types for comprehensive testing

typescript/tsconfig.json

@@ -1,4 +1,6 @@
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
+
   "compilerOptions": {
     "target": "es2022",
     "module": "NodeNext",
@@ -16,6 +18,8 @@
     "resolveJsonModule": true,
     "sourceMap": true,
     "allowJs": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     // "noUncheckedIndexedAccess": true,
     "baseUrl": ".",
     "paths": {