@jshookmcp/jshook 0.1.9 → 0.2.1

package/dist/tests/server/domains/browser/framework-state-coverage.test.js

@@ -0,0 +1,382 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FrameworkStateHandlers } from '../../../../src/server/domains/browser/handlers/framework-state.js';
+function getTextContent(response) {
+    const first = response.content[0];
+    expect(first).toBeDefined();
+    expect(first?.type).toBe('text');
+    if (!first || first.type !== 'text') {
+        throw new Error('Expected text tool response');
+    }
+    return first.text;
+}
+function parseJson(response) {
+    return JSON.parse(getTextContent(response));
+}
+describe('FrameworkStateHandlers — coverage expansion', () => {
+    let page;
+    let getActivePage;
+    let handlers;
+    beforeEach(() => {
+        vi.clearAllMocks();
+        page = {
+            evaluate: vi.fn(),
+        };
+        getActivePage = vi.fn(async () => page);
+        handlers = new FrameworkStateHandlers({ getActivePage });
+    });
+    describe('evaluate function — safeSerialize', () => {
+        it('handles null values in state (undefined becomes null via JSON)', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'App', state: [null, null, 42] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.found).toBe(true);
+            expect(body.states[0].state).toEqual([null, null, 42]);
+        });
+        it('handles deeply nested state objects', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{
+                        component: 'DeepComponent',
+                        state: [{
+                                level1: {
+                                    level2: {
+                                        level3: {
+                                            level4: { deep: true },
+                                        },
+                                    },
+                                },
+                            }],
+                    }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.found).toBe(true);
+            expect(body.states[0].state[0].level1.level2.level3.level4.deep).toBe(true);
+        });
+        it('handles arrays in state', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{
+                        component: 'ListComponent',
+                        state: [{ items: [1, 2, 3, 4, 5] }],
+                    }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states[0].state[0].items).toEqual([1, 2, 3, 4, 5]);
+        });
+        it('handles empty state arrays', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'Empty', state: [] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states[0].state).toEqual([]);
+        });
+    });
+    describe('framework auto-detection', () => {
+        it('detects React framework via __reactFiber key', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'ReactApp', state: [{ count: 1 }] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'auto' }));
+            expect(body.detected).toBe('react');
+        });
+        it('detects Vue 3 framework via __vueParentComponent key', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue3',
+                states: [{ component: 'VueApp', setupState: { loaded: true }, data: null }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'auto' }));
+            expect(body.detected).toBe('vue3');
+        });
+        it('detects Vue 2 framework via __vue__ key', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue2',
+                states: [{ component: 'Vue2App', data: { msg: 'hello' } }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'auto' }));
+            expect(body.detected).toBe('vue2');
+        });
+        it('returns auto when no framework detected', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'auto',
+                states: [],
+                found: false,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.detected).toBe('auto');
+            expect(body.found).toBe(false);
+        });
+    });
+    describe('explicit framework specification', () => {
+        it('extracts react state when framework is explicitly react', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'ExplicitReact', state: [{ x: 1 }] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'react' }));
+            expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+                framework: 'react',
+                selector: '',
+                maxDepth: 5,
+            });
+            expect(body.detected).toBe('react');
+        });
+        it('extracts vue3 state with setupState and data', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue3',
+                states: [{
+                        component: 'Dashboard',
+                        setupState: { loading: false, items: [] },
+                        data: { legacyField: 'value' },
+                    }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue3' }));
+            expect(body.states[0].setupState.loading).toBe(false);
+            expect(body.states[0].data.legacyField).toBe('value');
+        });
+        it('extracts vue2 state with $data', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue2',
+                states: [{
+                        component: 'OldApp',
+                        data: { todos: ['a', 'b', 'c'] },
+                    }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue2' }));
+            expect(body.states[0].data.todos).toEqual(['a', 'b', 'c']);
+        });
+    });
+    describe('custom selector', () => {
+        it('uses provided CSS selector to find root element', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'TargetComponent', state: [{ v: 1 }] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({
+                selector: '#my-custom-root',
+                framework: 'react',
+            }));
+            expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+                framework: 'react',
+                selector: '#my-custom-root',
+                maxDepth: 5,
+            });
+            expect(body.found).toBe(true);
+        });
+        it('uses [data-reactroot] as fallback when no selector and no #root/#app', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [],
+                found: false,
+            });
+            await handlers.handleFrameworkStateExtract({});
+            expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+                framework: 'auto',
+                selector: '',
+                maxDepth: 5,
+            });
+        });
+    });
+    describe('custom maxDepth', () => {
+        it('limits tree traversal depth', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'ShallowApp', state: [{ s: 1 }] }],
+                found: true,
+            });
+            await handlers.handleFrameworkStateExtract({ maxDepth: 1 });
+            expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+                framework: 'auto',
+                selector: '',
+                maxDepth: 1,
+            });
+        });
+        it('uses 0 as maxDepth to only get root state', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'Root', state: [{ root: true }] }],
+                found: true,
+            });
+            await handlers.handleFrameworkStateExtract({ maxDepth: 0 });
+            expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+                framework: 'auto',
+                selector: '',
+                maxDepth: 0,
+            });
+        });
+    });
+    describe('error handling', () => {
+        it('returns error when page.evaluate throws a TypeError', async () => {
+            page.evaluate.mockRejectedValueOnce(new TypeError('Cannot read properties'));
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.success).toBe(false);
+            expect(body.error).toBe('Cannot read properties');
+        });
+        it('returns error when page.evaluate throws a non-Error value', async () => {
+            page.evaluate.mockRejectedValueOnce(42);
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.success).toBe(false);
+            expect(body.error).toBe('42');
+        });
+        it('returns error when page.evaluate throws null', async () => {
+            page.evaluate.mockRejectedValueOnce(null);
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.success).toBe(false);
+            expect(body.error).toBe('null');
+        });
+        it('returns error when page.evaluate throws undefined', async () => {
+            page.evaluate.mockRejectedValueOnce(undefined);
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.success).toBe(false);
+            expect(body.error).toBe('undefined');
+        });
+        it('returns error when getActivePage rejects with non-Error', async () => {
+            getActivePage.mockRejectedValueOnce('network error');
+            handlers = new FrameworkStateHandlers({ getActivePage });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.success).toBe(false);
+            expect(body.error).toBe('network error');
+        });
+    });
+    describe('multiple components extraction', () => {
+        it('extracts state from multiple React components at different levels', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [
+                    { component: 'App', state: [{ theme: 'dark' }] },
+                    { component: 'Header', state: [{ title: 'My App' }] },
+                    { component: 'Sidebar', state: [{ collapsed: false }] },
+                    { component: 'Counter', state: [{ count: 42, max: 100 }] },
+                ],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states).toHaveLength(4);
+            expect(body.states[0].component).toBe('App');
+            expect(body.states[3].state[0].count).toBe(42);
+        });
+        it('extracts state from Vue3 components with children', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue3',
+                states: [
+                    { component: 'Root', setupState: { appReady: true }, data: null },
+                    { component: 'ChildA', setupState: { items: [1, 2] }, data: null },
+                    { component: 'ChildB', setupState: null, data: { msg: 'hello' } },
+                ],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue3' }));
+            expect(body.states).toHaveLength(3);
+            expect(body.states[0].setupState.appReady).toBe(true);
+            expect(body.states[2].data.msg).toBe('hello');
+        });
+        it('extracts state from Vue2 components with $children', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue2',
+                states: [
+                    { component: 'RootVm', data: { name: 'root' } },
+                    { component: 'ChildVm', data: { items: ['x'] } },
+                ],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue2' }));
+            expect(body.states).toHaveLength(2);
+            expect(body.states[1].data.items).toEqual(['x']);
+        });
+    });
+    describe('result structure', () => {
+        it('always returns content array with exactly one text element', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'auto',
+                states: [],
+                found: false,
+            });
+            const response = await handlers.handleFrameworkStateExtract({});
+            expect(response.content).toHaveLength(1);
+            expect(response.content[0]?.type).toBe('text');
+        });
+        it('error response always contains content array with text element', async () => {
+            page.evaluate.mockRejectedValueOnce(new Error('fail'));
+            const response = await handlers.handleFrameworkStateExtract({});
+            expect(response.content).toHaveLength(1);
+            expect(response.content[0]?.type).toBe('text');
+        });
+        it('result JSON is properly indented with 2 spaces', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [],
+                found: false,
+            });
+            const response = await handlers.handleFrameworkStateExtract({});
+            const text = getTextContent(response);
+            expect(text).toContain('\n  ');
+        });
+        it('error JSON is properly indented with 2 spaces', async () => {
+            page.evaluate.mockRejectedValueOnce(new Error('fail'));
+            const response = await handlers.handleFrameworkStateExtract({});
+            const text = getTextContent(response);
+            expect(text).toContain('\n  ');
+        });
+    });
+    describe('special state values', () => {
+        it('handles boolean state values', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'Toggle', state: [true, false] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states[0].state).toEqual([true, false]);
+        });
+        it('handles string state values', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'Input', state: ['hello world'] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states[0].state).toEqual(['hello world']);
+        });
+        it('handles numeric state values', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'Counter', state: [0, 3.14, -1] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states[0].state).toEqual([0, 3.14, -1]);
+        });
+        it('handles anonymous component names', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'react',
+                states: [{ component: 'anonymous', state: [{ x: 1 }] }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+            expect(body.states[0].component).toBe('anonymous');
+        });
+        it('handles unknown component names in Vue', async () => {
+            page.evaluate.mockResolvedValueOnce({
+                detected: 'vue3',
+                states: [{ component: 'unknown', setupState: { y: 2 }, data: null }],
+                found: true,
+            });
+            const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue3' }));
+            expect(body.states[0].component).toBe('unknown');
+        });
+    });
+});

package/dist/tests/server/domains/browser/framework-state.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/server/domains/browser/framework-state.test.js

@@ -0,0 +1,234 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { FrameworkStateHandlers } from '../../../../src/server/domains/browser/handlers/framework-state.js';
+function getTextContent(response) {
+    const first = response.content[0];
+    expect(first).toBeDefined();
+    expect(first?.type).toBe('text');
+    if (!first || first.type !== 'text') {
+        throw new Error('Expected text tool response');
+    }
+    return first.text;
+}
+function parseJson(response) {
+    return JSON.parse(getTextContent(response));
+}
+describe('FrameworkStateHandlers', () => {
+    let page;
+    let getActivePage;
+    let handlers;
+    beforeEach(() => {
+        vi.clearAllMocks();
+        page = {
+            evaluate: vi.fn(),
+        };
+        getActivePage = vi.fn(async () => page);
+        handlers = new FrameworkStateHandlers({ getActivePage });
+    });
+    it('uses default extract options when args are omitted', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'react',
+            states: [{ component: 'App', state: [{ count: 1 }] }],
+            found: true,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+        expect(getActivePage).toHaveBeenCalledOnce();
+        expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+            framework: 'auto',
+            selector: '',
+            maxDepth: 5,
+        });
+        expect(body).toEqual({
+            detected: 'react',
+            states: [{ component: 'App', state: [{ count: 1 }] }],
+            found: true,
+        });
+    });
+    it('passes explicit extract options through to page.evaluate', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'vue3',
+            states: [{ component: 'Root', setupState: { ready: true }, data: { count: 2 } }],
+            found: true,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({
+            framework: 'vue3',
+            selector: '#app',
+            maxDepth: 2,
+        }));
+        expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+            framework: 'vue3',
+            selector: '#app',
+            maxDepth: 2,
+        });
+        expect(body.detected).toBe('vue3');
+        expect(body.found).toBe(true);
+    });
+    it('returns an error payload when page evaluation fails with Error', async () => {
+        page.evaluate.mockRejectedValueOnce(new Error('framework explode'));
+        const body = parseJson(await handlers.handleFrameworkStateExtract({
+            framework: 'react',
+        }));
+        expect(body.success).toBe(false);
+        expect(body.error).toBe('framework explode');
+    });
+    it('returns an error payload when page evaluation fails with string', async () => {
+        page.evaluate.mockRejectedValueOnce('string error');
+        const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+        expect(body.success).toBe(false);
+        expect(body.error).toBe('string error');
+    });
+    it('returns an error payload when getActivePage rejects', async () => {
+        getActivePage.mockRejectedValueOnce(new Error('no page'));
+        handlers = new FrameworkStateHandlers({ getActivePage });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+        expect(body.success).toBe(false);
+        expect(body.error).toBe('no page');
+    });
+    it('returns react state with multiple components', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'react',
+            states: [
+                { component: 'App', state: [{ theme: 'dark' }] },
+                { component: 'Counter', state: [{ count: 42 }] },
+            ],
+            found: true,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+        expect(body.detected).toBe('react');
+        expect(body.found).toBe(true);
+        expect(body.states).toHaveLength(2);
+        expect(body.states[0]?.component).toBe('App');
+        const counterState = body.states[1]?.state?.[0];
+        expect(counterState?.count).toBe(42);
+    });
+    it('returns vue2 state correctly', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'vue2',
+            states: [{ component: 'MainApp', data: { items: [1, 2, 3] } }],
+            found: true,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue2' }));
+        expect(body.detected).toBe('vue2');
+        const data = body.states[0]?.data;
+        expect(data?.items).toEqual([1, 2, 3]);
+    });
+    it('returns empty states when no framework detected', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'auto',
+            states: [],
+            found: false,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+        expect(body.detected).toBe('auto');
+        expect(body.found).toBe(false);
+        expect(body.states).toEqual([]);
+    });
+    it('uses default maxDepth when only framework is specified', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'react',
+            states: [],
+            found: false,
+        });
+        await handlers.handleFrameworkStateExtract({ framework: 'react' });
+        expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+            framework: 'react',
+            selector: '',
+            maxDepth: 5,
+        });
+    });
+    it('uses default framework when only selector is specified', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'auto',
+            states: [],
+            found: false,
+        });
+        await handlers.handleFrameworkStateExtract({ selector: '.container' });
+        expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+            framework: 'auto',
+            selector: '.container',
+            maxDepth: 5,
+        });
+    });
+    it('uses default selector when only maxDepth is specified', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'auto',
+            states: [],
+            found: false,
+        });
+        await handlers.handleFrameworkStateExtract({ maxDepth: 3 });
+        expect(page.evaluate).toHaveBeenCalledWith(expect.any(Function), {
+            framework: 'auto',
+            selector: '',
+            maxDepth: 3,
+        });
+    });
+    it('wraps result in content array with type text', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'react',
+            states: [],
+            found: false,
+        });
+        const response = await handlers.handleFrameworkStateExtract({});
+        expect(response.content).toHaveLength(1);
+        const content = response.content[0];
+        expect(content).toBeDefined();
+        expect(content?.type).toBe('text');
+        if (!content || content.type !== 'text') {
+            throw new Error('Expected text response');
+        }
+        expect(() => JSON.parse(content.text)).not.toThrow();
+    });
+    it('wraps error result in content array with type text', async () => {
+        page.evaluate.mockRejectedValueOnce(new Error('fail'));
+        const response = await handlers.handleFrameworkStateExtract({});
+        expect(response.content).toHaveLength(1);
+        const content = response.content[0];
+        expect(content).toBeDefined();
+        expect(content?.type).toBe('text');
+        if (!content || content.type !== 'text') {
+            throw new Error('Expected text response');
+        }
+        const parsed = JSON.parse(content.text);
+        expect(parsed.success).toBe(false);
+    });
+    it('handles nested state objects from React', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'react',
+            states: [
+                {
+                    component: 'Form',
+                    state: [
+                        {
+                            fields: { name: 'test', email: 'a@b.com' },
+                            errors: {},
+                            isValid: true,
+                        },
+                    ],
+                },
+            ],
+            found: true,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({}));
+        expect(body.found).toBe(true);
+        const formState = body.states[0]?.state?.[0];
+        expect(formState?.fields.name).toBe('test');
+        expect(formState?.isValid).toBe(true);
+    });
+    it('handles Vue3 setupState + data combo', async () => {
+        page.evaluate.mockResolvedValueOnce({
+            detected: 'vue3',
+            states: [
+                {
+                    component: 'Dashboard',
+                    setupState: { loading: false, data: [1, 2] },
+                    data: { legacy: true },
+                },
+            ],
+            found: true,
+        });
+        const body = parseJson(await handlers.handleFrameworkStateExtract({ framework: 'vue3' }));
+        const setupState = body.states[0]?.setupState;
+        const data = body.states[0]?.data;
+        expect(setupState?.loading).toBe(false);
+        expect(data?.legacy).toBe(true);
+    });
+});

package/dist/tests/server/domains/browser/handlers-impl-additional.test.d.ts

@@ -0,0 +1 @@
+export {};