83 lines
3.4 KiB
TypeScript
83 lines
3.4 KiB
TypeScript
|
import { act } from "react";
|
||
|
|
import { createRoot, type Root } from "react-dom/client";
|
||
|
|
import { afterEach, beforeEach, describe, expect, it } from "vitest";
|
||
|
|
import { TreeShellHost } from "./tree-shell-host";
|
||
|
|
|
||
|
|
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||
|
|
|
||
|
|
describe("tree-shell-host", () => {
|
||
|
|
let container: HTMLDivElement;
|
||
|
|
let root: Root;
|
||
|
|
let previousLegacyFlag: string | undefined;
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
previousLegacyFlag = process.env.NEXT_PUBLIC_TREE_SHELL_LEGACY_IFRAME_HOST;
|
||
|
|
delete process.env.NEXT_PUBLIC_TREE_SHELL_LEGACY_IFRAME_HOST;
|
||
|
|
container = document.createElement("div");
|
||
|
|
document.body.appendChild(container);
|
||
|
|
root = createRoot(container);
|
||
|
|
});
|
||
|
|
|
||
|
|
afterEach(() => {
|
||
|
|
act(() => {
|
||
|
|
root.unmount();
|
||
|
|
});
|
||
|
|
container.remove();
|
||
|
|
if (previousLegacyFlag === undefined) {
|
||
|
|
delete process.env.NEXT_PUBLIC_TREE_SHELL_LEGACY_IFRAME_HOST;
|
||
|
|
} else {
|
||
|
|
process.env.NEXT_PUBLIC_TREE_SHELL_LEGACY_IFRAME_HOST = previousLegacyFlag;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function renderHost() {
|
||
|
|
act(() => {
|
||
|
|
root.render(
|
||
|
|
<TreeShellHost
|
||
|
|
mode="page"
|
||
|
|
surfaceTestId="sidebar-page-tree-shell"
|
||
|
|
rendererFamily="rust_family"
|
||
|
|
workspaceId="ws_1"
|
||
|
|
>
|
||
|
|
<div data-testid="legacy-react-fallback">旧 React fallback</div>
|
||
|
|
</TreeShellHost>,
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
it("rust_family 默认选择 Rust/WASM DOM shell host，不能进入 iframe_srcdoc", () => {
|
||
|
|
renderHost();
|
||
|
|
|
||
|
|
const surface = container.querySelector('[data-testid="sidebar-page-tree-shell"]');
|
||
|
|
const rustHost = container.querySelector('[data-testid="sidebar-page-tree-shell-rust-host"]');
|
||
|
|
const domHost = container.querySelector('[data-testid="sidebar-page-tree-shell-dom-host"]');
|
||
|
|
|
||
|
|
expect(surface?.getAttribute("data-tree-host-implementation")).toBe("rust_wasm_dom_shell_host");
|
||
|
|
expect(surface?.getAttribute("data-tree-renderer-contract")).toBe("rust_renderer_input_v1");
|
||
|
|
expect(rustHost?.getAttribute("data-tree-host-implementation")).toBe("rust_wasm_dom_shell_host");
|
||
|
|
expect(domHost?.getAttribute("data-tree-browser-bridge")).toBe("dom_wasm");
|
||
|
|
expect(domHost?.getAttribute("data-tree-runtime-artifact-host")).toBe("rust_tree_shell_runtime_artifact_v1");
|
||
|
|
expect(container.querySelector('[data-testid="sidebar-page-tree-shell-rust-iframe"]')).toBeNull();
|
||
|
|
expect(container.querySelector('[data-tree-browser-bridge="iframe_srcdoc"]')).toBeNull();
|
||
|
|
expect(container.querySelector('[data-testid="legacy-react-fallback"]')).toBeNull();
|
||
|
|
});
|
||
|
|
|
||
|
|
it("只有显式 legacy flag 才允许进入旧 TreeShellIframeHost", async () => {
|
||
|
|
process.env.NEXT_PUBLIC_TREE_SHELL_LEGACY_IFRAME_HOST = "1";
|
||
|
|
|
||
|
|
await act(async () => {
|
||
|
|
renderHost();
|
||
|
|
await Promise.resolve();
|
||
|
|
});
|
||
|
|
|
||
|
|
const surface = container.querySelector('[data-testid="sidebar-page-tree-shell"]');
|
||
|
|
const iframe = container.querySelector('[data-testid="sidebar-page-tree-shell-rust-iframe"]');
|
||
|
|
|
||
|
|
expect(surface?.getAttribute("data-tree-host-implementation")).toBe("rust_runtime_artifact_host");
|
||
|
|
expect(container.querySelector('[data-testid="sidebar-page-tree-shell-dom-host"]')).toBeNull();
|
||
|
|
expect(iframe).not.toBeNull();
|
||
|
|
expect(iframe?.getAttribute("data-tree-browser-bridge")).toBe("iframe_srcdoc");
|
||
|
|
expect(iframe?.getAttribute("srcdoc")).toContain('"browserBridge":"iframe_srcdoc"');
|
||
|
|
});
|
||
|
|
});
|