@railtownai/railtracks-visualizer 0.0.2 → 0.0.4

package/dist/cjs/hooks/useApi.js

@@ -0,0 +1,108 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApi = void 0;
+const react_1 = require("react");
+// Base URL for the API
+const API_BASE = "/api";
+const useApi = () => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    // Function to list all JSON files in the .railtracks directory
+    const listJsonFiles = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        setError(null);
+        try {
+            console.log("Fetching files from:", `${API_BASE}/files`);
+            const response = yield fetch(`${API_BASE}/files`);
+            console.log("Response status:", response.status);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const files = yield response.json();
+            console.log("Files received:", files);
+            return files;
+        }
+        catch (err) {
+            console.error("Error fetching files:", err);
+            const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+            const apiError = {
+                message: errorMessage,
+                status: err instanceof Error && "status" in err ? err.status : undefined
+            };
+            setError(apiError);
+            return [];
+        }
+        finally {
+            setLoading(false);
+        }
+    }), []);
+    // Function to load a specific JSON file
+    const loadJsonFile = (0, react_1.useCallback)((filename) => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = yield fetch(`${API_BASE}/json/${filename}`);
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const data = yield response.json();
+            return data;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+            const apiError = {
+                message: errorMessage,
+                status: err instanceof Error && "status" in err ? err.status : undefined
+            };
+            setError(apiError);
+            return null;
+        }
+        finally {
+            setLoading(false);
+        }
+    }), []);
+    // Function to trigger a frontend refresh
+    const triggerRefresh = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = yield fetch(`${API_BASE}/refresh`, {
+                method: "POST"
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const result = yield response.json();
+            return result;
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+            const apiError = {
+                message: errorMessage,
+                status: err instanceof Error && "status" in err ? err.status : undefined
+            };
+            setError(apiError);
+            return null;
+        }
+        finally {
+            setLoading(false);
+        }
+    }), []);
+    return {
+        loading,
+        error,
+        listJsonFiles,
+        loadJsonFile,
+        triggerRefresh
+    };
+};
+exports.useApi = useApi;

package/dist/cjs/hooks/useFlowData.js

@@ -0,0 +1,53 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlowData = void 0;
+const react_1 = require("react");
+const useApi_1 = require("./useApi");
+const useFlowData = () => {
+    const { listJsonFiles, loadJsonFile, loading: apiLoading, error: apiError } = (0, useApi_1.useApi)();
+    const [state, setState] = (0, react_1.useState)({
+        availableFiles: [],
+        currentFile: null,
+        flowData: null,
+        loading: false,
+        error: null
+    });
+    // Load available files on mount
+    (0, react_1.useEffect)(() => {
+        loadAvailableFiles();
+    }, []);
+    const loadAvailableFiles = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        const files = yield listJsonFiles();
+        setState((prev) => (Object.assign(Object.assign({}, prev), { availableFiles: files })));
+    }), [listJsonFiles]);
+    const loadFile = (0, react_1.useCallback)((filename) => __awaiter(void 0, void 0, void 0, function* () {
+        setState((prev) => (Object.assign(Object.assign({}, prev), { loading: true, error: null })));
+        try {
+            const data = yield loadJsonFile(filename);
+            if (data) {
+                setState((prev) => (Object.assign(Object.assign({}, prev), { currentFile: filename, flowData: data, loading: false, error: null })));
+            }
+            else {
+                setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false, error: "Failed to load file data" })));
+            }
+        }
+        catch (err) {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { loading: false, error: err instanceof Error ? err.message : "Unknown error occurred" })));
+        }
+    }), [loadJsonFile]);
+    const refreshFiles = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield loadAvailableFiles();
+    }), [loadAvailableFiles]);
+    return Object.assign(Object.assign({}, state), { loading: state.loading || apiLoading, error: state.error || (apiError === null || apiError === void 0 ? void 0 : apiError.message) || null, loadFile,
+        refreshFiles });
+};
+exports.useFlowData = useFlowData;

package/dist/cjs/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalTimeline = exports.Timeline = exports.Node = exports.FileSelector = exports.Edge = exports.App = exports.AgenticFlowVisualizer = exports.Visualizer = void 0;
+// Library entry point for npm package
+var Visualizer_1 = require("./Visualizer");
+Object.defineProperty(exports, "Visualizer", { enumerable: true, get: function () { return __importDefault(Visualizer_1).default; } });
+var AgenticFlowVisualizer_1 = require("./AgenticFlowVisualizer");
+Object.defineProperty(exports, "AgenticFlowVisualizer", { enumerable: true, get: function () { return __importDefault(AgenticFlowVisualizer_1).default; } });
+var App_1 = require("./App");
+Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(App_1).default; } });
+// Export components
+var Edge_1 = require("./components/Edge");
+Object.defineProperty(exports, "Edge", { enumerable: true, get: function () { return Edge_1.Edge; } });
+var FileSelector_1 = require("./components/FileSelector");
+Object.defineProperty(exports, "FileSelector", { enumerable: true, get: function () { return FileSelector_1.FileSelector; } });
+var Node_1 = require("./components/Node");
+Object.defineProperty(exports, "Node", { enumerable: true, get: function () { return Node_1.Node; } });
+var Timeline_1 = require("./components/Timeline");
+Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return Timeline_1.Timeline; } });
+var VerticalTimeline_1 = require("./components/VerticalTimeline");
+Object.defineProperty(exports, "VerticalTimeline", { enumerable: true, get: function () { return VerticalTimeline_1.VerticalTimeline; } });
+// Export hooks
+__exportStar(require("./hooks"), exports);

package/dist/cjs/test/Visualizer.test.js

@@ -0,0 +1,257 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const vitest_1 = require("vitest");
+const react_2 = require("@testing-library/react");
+const Visualizer_1 = __importDefault(require("../Visualizer"));
+// Mock ReactFlow and its provider since we're testing the wrapper, not ReactFlow itself
+vitest_1.vi.mock("reactflow", () => ({
+    ReactFlowProvider: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "react-flow-provider", children: children })),
+    useReactFlow: () => ({
+        fitView: vitest_1.vi.fn(),
+        getNodes: vitest_1.vi.fn(() => []),
+        getEdges: vitest_1.vi.fn(() => [])
+    })
+}));
+// Mock the AgenticFlowVisualizer component
+vitest_1.vi.mock("../AgenticFlowVisualizer", () => ({
+    default: ({ flowData, width, height, className }) => ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "agentic-flow-visualizer", "data-width": width || "", "data-height": height || "", "data-classname": className || "", "data-has-flow-data": !!flowData, children: ["AgenticFlowVisualizer Mock", !flowData && (0, jsx_runtime_1.jsx)("div", { "data-testid": "no-data-state", children: "No flow data available" })] }))
+}));
+// Mock data for testing
+const mockFlowData = {
+    nodes: [
+        {
+            identifier: "node-1",
+            node_type: "agent",
+            stamp: {
+                step: 1,
+                time: 1634567890,
+                identifier: "stamp-1"
+            },
+            details: {
+                internals: {
+                    llm_details: [
+                        {
+                            model_name: "gpt-4",
+                            model_provider: "openai",
+                            input: [{ role: "user", content: "test" }],
+                            output: { role: "assistant", content: "response" },
+                            input_tokens: 10,
+                            output_tokens: 5,
+                            total_cost: 0.001,
+                            system_fingerprint: "test-fingerprint"
+                        }
+                    ]
+                }
+            },
+            parent: null
+        },
+        {
+            identifier: "node-2",
+            node_type: "tool",
+            stamp: {
+                step: 2,
+                time: 1634567891,
+                identifier: "stamp-2"
+            },
+            details: {
+                internals: {
+                    llm_details: []
+                }
+            },
+            parent: null
+        }
+    ],
+    edges: [
+        {
+            identifier: "edge-1",
+            source: "node-1",
+            target: "node-2",
+            stamp: {
+                step: 2,
+                time: 1634567891,
+                identifier: "edge-stamp-1"
+            },
+            details: {
+                input_args: [],
+                output: null
+            },
+            parent: null
+        }
+    ],
+    stamps: [
+        {
+            step: 1,
+            time: 1634567890,
+            identifier: "stamp-1"
+        },
+        {
+            step: 2,
+            time: 1634567891,
+            identifier: "stamp-2"
+        }
+    ]
+};
+(0, vitest_1.describe)("Visualizer", () => {
+    (0, vitest_1.beforeEach)(() => {
+        vitest_1.vi.clearAllMocks();
+    });
+    (0, vitest_1.describe)("Component Rendering", () => {
+        (0, vitest_1.it)("renders successfully without any props", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, {}));
+            (0, vitest_1.expect)(react_2.screen.getByTestId("react-flow-provider")).toBeInTheDocument();
+            (0, vitest_1.expect)(react_2.screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        (0, vitest_1.it)("wraps AgenticFlowVisualizer with ReactFlowProvider", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData }));
+            const provider = react_2.screen.getByTestId("react-flow-provider");
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(provider).toBeInTheDocument();
+            (0, vitest_1.expect)(provider).toContainElement(visualizer);
+        });
+        (0, vitest_1.it)("renders with valid flow data", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-has-flow-data", "true");
+            (0, vitest_1.expect)(react_2.screen.queryByTestId("no-data-state")).not.toBeInTheDocument();
+        });
+        (0, vitest_1.it)("handles null flow data gracefully", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: null }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-has-flow-data", "false");
+        });
+        (0, vitest_1.it)("handles undefined flow data gracefully", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: undefined }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-has-flow-data", "false");
+        });
+    });
+    (0, vitest_1.describe)("Props Forwarding", () => {
+        (0, vitest_1.it)("forwards flowData prop correctly", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-has-flow-data", "true");
+        });
+        (0, vitest_1.it)("forwards width prop correctly", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData, width: "800px" }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-width", "800px");
+        });
+        (0, vitest_1.it)("forwards height prop correctly", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData, height: 600 }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-height", "600");
+        });
+        (0, vitest_1.it)("forwards className prop correctly", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData, className: "custom-class" }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-classname", "custom-class");
+        });
+        (0, vitest_1.it)("forwards all props together correctly", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData, width: "100%", height: "500px", className: "test-visualizer" }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-has-flow-data", "true");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-width", "100%");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-height", "500px");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-classname", "test-visualizer");
+        });
+        (0, vitest_1.it)("uses default values when optional props are not provided", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-width", "");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-height", "");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-classname", "");
+        });
+    });
+    (0, vitest_1.describe)("Integration as NPM Package Component", () => {
+        (0, vitest_1.it)("can be imported and used as a standalone component", () => {
+            // This test ensures the component works when imported by users
+            const TestApp = () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "My App" }), (0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData })] }));
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(TestApp, {}));
+            (0, vitest_1.expect)(react_2.screen.getByText("My App")).toBeInTheDocument();
+            (0, vitest_1.expect)(react_2.screen.getByTestId("react-flow-provider")).toBeInTheDocument();
+            (0, vitest_1.expect)(react_2.screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        (0, vitest_1.it)("works in a React component with state", () => __awaiter(void 0, void 0, void 0, function* () {
+            const TestComponent = () => {
+                const [data, setData] = react_1.default.useState(null);
+                react_1.default.useEffect(() => {
+                    // Simulate loading data
+                    setTimeout(() => setData(mockFlowData), 100);
+                }, []);
+                return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setData(null), children: "Clear Data" }), (0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: data })] }));
+            };
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+            // Initially no data
+            (0, vitest_1.expect)(react_2.screen.getByTestId("agentic-flow-visualizer")).toHaveAttribute("data-has-flow-data", "false");
+            // Wait for data to load
+            yield (0, react_2.waitFor)(() => {
+                (0, vitest_1.expect)(react_2.screen.getByTestId("agentic-flow-visualizer")).toHaveAttribute("data-has-flow-data", "true");
+            });
+        }));
+        (0, vitest_1.it)("handles multiple instances on the same page", () => {
+            (0, react_2.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData, className: "visualizer-1" }), (0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: null, className: "visualizer-2" })] }));
+            const visualizers = react_2.screen.getAllByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizers).toHaveLength(2);
+            (0, vitest_1.expect)(visualizers[0]).toHaveAttribute("data-classname", "visualizer-1");
+            (0, vitest_1.expect)(visualizers[0]).toHaveAttribute("data-has-flow-data", "true");
+            (0, vitest_1.expect)(visualizers[1]).toHaveAttribute("data-classname", "visualizer-2");
+            (0, vitest_1.expect)(visualizers[1]).toHaveAttribute("data-has-flow-data", "false");
+        });
+    });
+    (0, vitest_1.describe)("Error Handling", () => {
+        (0, vitest_1.it)("handles malformed flow data gracefully", () => {
+            const malformedData = {
+                nodes: null,
+                edges: undefined
+            };
+            (0, vitest_1.expect)(() => {
+                (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: malformedData }));
+            }).not.toThrow();
+            (0, vitest_1.expect)(react_2.screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        (0, vitest_1.it)("handles empty flow data", () => {
+            const emptyData = {
+                nodes: [],
+                edges: [],
+                stamps: []
+            };
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: emptyData }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-has-flow-data", "true");
+        });
+    });
+    (0, vitest_1.describe)("TypeScript Compatibility", () => {
+        (0, vitest_1.it)("accepts correct prop types", () => {
+            // This test ensures TypeScript compatibility
+            const props = {
+                flowData: mockFlowData,
+                width: "100%",
+                height: 600,
+                className: "test-class"
+            };
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, Object.assign({}, props)));
+            (0, vitest_1.expect)(react_2.screen.getByTestId("agentic-flow-visualizer")).toBeInTheDocument();
+        });
+        (0, vitest_1.it)("works with partial props", () => {
+            // Test that optional props work correctly
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(Visualizer_1.default, { flowData: mockFlowData, width: "50%" }));
+            const visualizer = react_2.screen.getByTestId("agentic-flow-visualizer");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-width", "50%");
+            (0, vitest_1.expect)(visualizer).toHaveAttribute("data-height", "");
+        });
+    });
+});

package/dist/cjs/test/setup.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
+const vitest_1 = require("vitest");
+// Mock ResizeObserver for React Flow components
+globalThis.ResizeObserver = class ResizeObserver {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+};
+// Mock window.matchMedia
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vitest_1.vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vitest_1.vi.fn(), // deprecated
+        removeListener: vitest_1.vi.fn(), // deprecated
+        addEventListener: vitest_1.vi.fn(),
+        removeEventListener: vitest_1.vi.fn(),
+        dispatchEvent: vitest_1.vi.fn()
+    }))
+});