@marimo-team/frontend 0.23.1-dev9 → 0.23.1

package/src/core/islands/__tests__/islands-harness.test.ts

@@ -0,0 +1,348 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { afterEach, describe, expect, it } from "vitest";
+import { ISLAND_DATA_ATTRIBUTES } from "@/core/islands/constants";
+import {
+  extractIslandCodeFromEmbed,
+  parseIslandElement,
+  parseIslandElementsIntoApps,
+  parseMarimoIslandApps,
+} from "../parse";
+import {
+  buildIslandHTML,
+  createIslandHarness,
+  type IslandHarness,
+} from "./test-utils.tsx";
+
+let harness: IslandHarness;
+
+afterEach(() => {
+  harness?.cleanup();
+});
+
+// ============================================================================
+// Reactive vs Non-Reactive Parsing
+// ============================================================================
+
+describe("reactive vs non-reactive islands", () => {
+  it("should parse reactive islands into apps with code", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+        { reactive: true, code: "y = 2", output: "<div>2</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(1);
+    expect(apps[0].cells).toHaveLength(2);
+    expect(apps[0].cells[0].code).toBe("x = 1");
+    expect(apps[0].cells[1].code).toBe("y = 2");
+  });
+
+  it("should skip non-reactive islands during parsing (no code sent to kernel)", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+        { reactive: false, output: "<div>static content</div>" },
+        { reactive: true, code: "y = 2", output: "<div>2</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(1);
+    // Only the 2 reactive islands become cells
+    expect(apps[0].cells).toHaveLength(2);
+    expect(apps[0].cells[0].code).toBe("x = 1");
+    expect(apps[0].cells[1].code).toBe("y = 2");
+  });
+
+  it("should not set data-cell-idx on non-reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+        { reactive: false, output: "<div>static</div>" },
+      ]),
+    );
+
+    parseMarimoIslandApps(harness.container);
+
+    const [reactiveIsland, nonReactiveIsland] = harness.islands;
+
+    // Reactive island gets a cell index
+    expect(reactiveIsland.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX)).toBe(
+      "0",
+    );
+    // Non-reactive island does NOT get a cell index
+    expect(
+      nonReactiveIsland.getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+  });
+
+  it("should handle all-non-reactive islands (empty app list)", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: false, output: "<div>static 1</div>" },
+        { reactive: false, output: "<div>static 2</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(0);
+  });
+});
+
+// ============================================================================
+// extractIslandCodeFromEmbed
+// ============================================================================
+
+describe("extractIslandCodeFromEmbed with harness", () => {
+  it("should return code for reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: 'mo.md("hello")', output: "<div>hello</div>" },
+      ]),
+    );
+
+    const code = extractIslandCodeFromEmbed(harness.islands[0]);
+    expect(code).toBe('mo.md("hello")');
+  });
+
+  it("should return empty string for non-reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        {
+          reactive: false,
+          code: 'mo.md("hello")',
+          output: "<div>hello</div>",
+        },
+      ]),
+    );
+
+    const code = extractIslandCodeFromEmbed(harness.islands[0]);
+    expect(code).toBe("");
+  });
+});
+
+// ============================================================================
+// parseIslandElement
+// ============================================================================
+
+describe("parseIslandElement with harness", () => {
+  it("should return cell data for reactive island with output and code", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+      ]),
+    );
+
+    const result = parseIslandElement(harness.islands[0]);
+    expect(result).not.toBeNull();
+    expect(result!.code).toBe("x = 1");
+    expect(result!.output).toBe("<div>1</div>");
+  });
+
+  it("should return null for non-reactive island (code is empty)", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([{ reactive: false, output: "<div>static</div>" }]),
+    );
+
+    const result = parseIslandElement(harness.islands[0]);
+    expect(result).toBeNull();
+  });
+});
+
+// ============================================================================
+// Multi-app parsing
+// ============================================================================
+
+describe("multi-app parsing with harness", () => {
+  it("should group islands by app-id", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { appId: "app-1", reactive: true, code: "a = 1", output: "<div/>" },
+        { appId: "app-2", reactive: true, code: "b = 2", output: "<div/>" },
+        { appId: "app-1", reactive: true, code: "c = 3", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(2);
+
+    const app1 = apps.find((a) => a.id === "app-1")!;
+    const app2 = apps.find((a) => a.id === "app-2")!;
+
+    expect(app1.cells).toHaveLength(2);
+    expect(app1.cells[0].code).toBe("a = 1");
+    expect(app1.cells[1].code).toBe("c = 3");
+
+    expect(app2.cells).toHaveLength(1);
+    expect(app2.cells[0].code).toBe("b = 2");
+  });
+
+  it("should assign sequential cell indices within each app", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { appId: "app-1", reactive: true, code: "a", output: "<div/>" },
+        { appId: "app-1", reactive: true, code: "b", output: "<div/>" },
+        { appId: "app-1", reactive: true, code: "c", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps[0].cells.map((c) => c.idx)).toEqual([0, 1, 2]);
+  });
+
+  it("should skip non-reactive islands in cell index assignment", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "a = 1", output: "<div/>" },
+        { reactive: false, output: "<div>static</div>" },
+        { reactive: true, code: "b = 2", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps[0].cells).toHaveLength(2);
+    expect(apps[0].cells[0].idx).toBe(0);
+    expect(apps[0].cells[1].idx).toBe(1);
+
+    // Verify DOM: reactive islands get indices, non-reactive does not
+    expect(
+      harness.islands[0].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBe("0");
+    expect(
+      harness.islands[1].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+    expect(
+      harness.islands[2].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBe("1");
+  });
+});
+
+// ============================================================================
+// Mixed reactive/non-reactive scenarios (regression tests)
+// ============================================================================
+
+describe("mixed reactive/non-reactive island scenarios", () => {
+  it("should handle the generate.py demo pattern: reactive + non-reactive + display_code", () => {
+    // Mirrors the "Island Features" section of generate.py
+    harness = createIslandHarness(
+      buildIslandHTML([
+        // Section header (reactive)
+        {
+          reactive: true,
+          code: 'mo.md("## Display Code")',
+          output: "<div><h2>Display Code</h2></div>",
+        },
+        // display_code island (reactive)
+        {
+          reactive: true,
+          code: 'mo.md("You can show the code")',
+          output: "<div>You can show the code</div>",
+          displayCode: true,
+        },
+        // Non-reactive section header
+        {
+          reactive: true,
+          code: 'mo.md("## Non-Reactive Islands")',
+          output: "<div><h2>Non-Reactive Islands</h2></div>",
+        },
+        // Non-reactive island — the one that was crashing
+        {
+          reactive: false,
+          code: 'mo.md("This island is non-reactive")',
+          output:
+            "<div>This island is non-reactive - it runs once and doesn't update</div>",
+        },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+
+    // Only 3 reactive islands become cells
+    expect(apps).toHaveLength(1);
+    expect(apps[0].cells).toHaveLength(3);
+
+    // Non-reactive island (index 3) has no cell-idx
+    expect(
+      harness.islands[3].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+    expect(
+      harness.islands[3].getAttribute(ISLAND_DATA_ATTRIBUTES.REACTIVE),
+    ).toBe("false");
+  });
+
+  it("should handle non-reactive island at the start", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: false, output: "<div>static header</div>" },
+        { reactive: true, code: "x = 1", output: "<div>1</div>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(1);
+    expect(apps[0].cells).toHaveLength(1);
+    expect(apps[0].cells[0].code).toBe("x = 1");
+    expect(apps[0].cells[0].idx).toBe(0);
+
+    // First island (non-reactive) has no index
+    expect(
+      harness.islands[0].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBeNull();
+    // Second island (reactive) gets index 0
+    expect(
+      harness.islands[1].getAttribute(ISLAND_DATA_ATTRIBUTES.CELL_IDX),
+    ).toBe("0");
+  });
+
+  it("should handle alternating reactive and non-reactive islands", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "a = 1", output: "<div/>" },
+        { reactive: false, output: "<div>static</div>" },
+        { reactive: true, code: "b = 2", output: "<div/>" },
+        { reactive: false, output: "<div>static</div>" },
+        { reactive: true, code: "c = 3", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps[0].cells).toHaveLength(3);
+    expect(apps[0].cells.map((c) => c.code)).toEqual([
+      "a = 1",
+      "b = 2",
+      "c = 3",
+    ]);
+    expect(apps[0].cells.map((c) => c.idx)).toEqual([0, 1, 2]);
+  });
+});
+
+// ============================================================================
+// parseIslandElementsIntoApps (direct element-level tests)
+// ============================================================================
+
+describe("parseIslandElementsIntoApps with mixed elements", () => {
+  it("should preserve DOM order for cell indices", () => {
+    harness = createIslandHarness(
+      buildIslandHTML([
+        { reactive: true, code: "first", output: "<div/>" },
+        { reactive: true, code: "second", output: "<div/>" },
+        { reactive: true, code: "third", output: "<div/>" },
+      ]),
+    );
+
+    const apps = parseIslandElementsIntoApps(harness.islands);
+    expect(apps[0].cells.map((c) => c.code)).toEqual([
+      "first",
+      "second",
+      "third",
+    ]);
+  });
+
+  it("should handle empty container", () => {
+    harness = createIslandHarness("");
+    const apps = parseMarimoIslandApps(harness.container);
+    expect(apps).toHaveLength(0);
+  });
+});