add test for wrongly ordered page nums

Author: abrehamgezahegn

typescript/tests/BlockRenderer.test.tsx

@@ -6,27 +6,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect } from "vitest";
 import { JsonDocRenderer } from "../src/renderer/JsonDocRenderer";
 import { mockBlocks, mockPageWithAllBlocks } 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,
-});
+import { createPageWithBlocks } from "./utils/helpers";
 
 describe("JsonDocRenderer - All Block Types", () => {
   it("renders page title correctly", () => {
@@ -208,9 +188,6 @@ describe("JsonDocRenderer - All Block Types", () => {
     const page = createPageWithBlocks([mockBlocks.paragraph]);
     const { container } = render(<JsonDocRenderer page={page} />);
 
-    // Debug: Print the HTML structure
-    // screen.debug();
-
     // Test bold annotation
     const boldText = screen.getByText("bold text");
     expect(boldText).toBeInTheDocument();
@@ -246,4 +223,56 @@ describe("JsonDocRenderer - All Block Types", () => {
     expect(screen.getByText("Header 1")).toBeInTheDocument();
     expect(screen.getByText("Content in first column")).toBeInTheDocument();
   });
+
+  it("incorrect block page number shouldn't break the rendering", () => {
+    // Test misordered page numbers (3, 1, 2)
+    const blocksWithMisorderedPages = [
+      {
+        ...mockBlocks.paragraph,
+        metadata: {
+          origin: {
+            file_id: "test-file",
+            page_num: 3,
+          },
+        },
+      },
+      {
+        ...mockBlocks.heading_1,
+        metadata: {
+          origin: {
+            file_id: "test-file",
+            page_num: 1,
+          },
+        },
+      },
+      {
+        ...mockBlocks.heading_2,
+        metadata: {
+          origin: {
+            file_id: "test-file",
+            page_num: 2,
+          },
+        },
+      },
+    ];
+
+    const pageWithMisorderedBlocks = createPageWithBlocks(
+      blocksWithMisorderedPages
+    );
+
+    // This should not throw an error or break rendering
+    expect(() => {
+      render(<JsonDocRenderer page={pageWithMisorderedBlocks} />);
+    }).not.toThrow();
+
+    // Verify that content still renders despite misordered page numbers
+    expect(screen.getByText(/This is a paragraph with/)).toBeInTheDocument();
+    expect(screen.getByText(/Main Heading/)).toBeInTheDocument();
+    expect(screen.getByText(/Subheading/)).toBeInTheDocument();
+
+    // Verify page delimiters are rendered in the order they appear
+    expect(screen.getByText(/Page 3/)).toBeInTheDocument();
+    expect(screen.getByText(/Page 1/)).toBeInTheDocument();
+    expect(screen.getByText(/Page 2/)).toBeInTheDocument();
+  });
 });

typescript/tests/ThemeSwitching.test.tsx

@@ -5,32 +5,12 @@ 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],
-});
+import { createPageWithBlocks } from "./utils/helpers";
 
 const JSON_DOC_ROOT_TEST_ID = "jsondoc-renderer-root";
 
 describe("JsonDocRenderer - Theme Switching", () => {
-  const simplePage = createSimplePage();
+  const simplePage = createPageWithBlocks([mockBlocks.paragraph]);
 
   it("renders with light theme by default", () => {
     const { container } = render(<JsonDocRenderer page={simplePage} />);

typescript/tests/UnsupportedBlockHandling.test.tsx

@@ -3,27 +3,7 @@ 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,
-});
+import { createPageWithBlocks } from "./utils/helpers";
 
 describe("Unsupported Block Handling", () => {
   // Mock console.warn to test logging behavior

typescript/tests/fixtures/test-blocks.ts

@@ -18,10 +18,7 @@ import {
   Page,
 } from "@/models/generated";
 
-// Mock data for all block types to test comprehensive rendering
-export const mockBlocks: Record<
-  string,
-  | Block
+type AllBlocks =
   | ParagraphBlock
   | Heading1Block
   | Heading2Block
@@ -36,8 +33,12 @@ export const mockBlocks: Record<
   | ToggleBlock
   | TableBlock
   | ColumnListBlock
-  | EquationBlock
-> = {
+  | EquationBlock;
+
+type BlockType = Block["type"];
+
+// Mock data for all block types to test comprehensive rendering
+export const mockBlocks: Record<BlockType, AllBlocks> = {
   paragraph: {
     object: "block",
     id: "para-1",
@@ -428,6 +429,7 @@ export const mockBlocks: Record<
             type: "paragraph",
             created_time: "2025-06-24T09:44:12.014249Z",
             has_children: false,
+            // @ts-expect-error
             paragraph: {
               rich_text: [
                 {
@@ -470,7 +472,6 @@ export const mockBlocks: Record<
     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",
     },

typescript/tests/test-cases.md

@@ -1,7 +1,7 @@
 <!-- - page title highlighting work -->
 <!-- - block highlighting should work -->
 <!-- - invalid backref shouldn't trigger highlighting -->
-- incorrect block page number shouldn't break the rendering
+<!-- - incorrect block page number shouldn't break the rendering -->
 <!-- - make sure all blocks are rendered -->
 <!-- - make sure numbered lists are correctly labeled -->
 <!-- - make sure bad page is gracefully handled -->

typescript/tests/utils/helpers.ts

@@ -0,0 +1,20 @@
+// Helper to create a page with specific blocks
+export 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,
+});