@esmx/router-vue 3.0.0-rc.17 → 3.0.0-rc.19

package/src/use.test.ts

@@ -0,0 +1,616 @@
+import { type Route, type RouteConfig, Router, RouterMode } from '@esmx/router';
+/**
+ * @vitest-environment happy-dom
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import {
+    createApp,
+    defineComponent,
+    getCurrentInstance,
+    h,
+    nextTick,
+    ref
+} from 'vue';
+import {
+    type VueInstance,
+    getRoute,
+    getRouter,
+    useLink,
+    useProvideRouter,
+    useRoute,
+    useRouter
+} from './use';
+
+describe('use.ts - Vue Router Integration', () => {
+    let router: Router;
+    let testContainer: HTMLElement;
+
+    beforeEach(async () => {
+        // Create test container
+        testContainer = document.createElement('div');
+        testContainer.id = 'test-app';
+        document.body.appendChild(testContainer);
+
+        // Create test routes
+        const routes: RouteConfig[] = [
+            {
+                path: '/',
+                component: defineComponent({ template: '<div>Home</div>' }),
+                meta: { title: 'Home' }
+            },
+            {
+                path: '/about',
+                component: defineComponent({ template: '<div>About</div>' }),
+                meta: { title: 'About' }
+            }
+        ];
+
+        // Create router instance
+        router = new Router({
+            root: '#test-app',
+            routes,
+            mode: RouterMode.memory,
+            base: new URL('http://localhost:3000/')
+        });
+
+        // Initialize router to root path
+        await router.replace('/');
+    });
+
+    afterEach(() => {
+        // Clean up test environment
+        if (testContainer.parentNode) {
+            testContainer.parentNode.removeChild(testContainer);
+        }
+
+        // Destroy router
+        if (router) {
+            router.destroy();
+        }
+    });
+
+    describe('Error Handling - Context Not Found', () => {
+        const contextNotFoundError =
+            '[@esmx/router-vue] Router context not found. ' +
+            'Please ensure useProvideRouter() is called in a parent component.';
+
+        const contextErrorTestCases = [
+            {
+                name: 'getRouter called without router context',
+                test: () => {
+                    const app = createApp({ template: '<div>Test</div>' });
+                    const vm = app.mount(testContainer);
+                    const result = () => getRouter(vm);
+                    app.unmount();
+                    return result;
+                }
+            },
+            {
+                name: 'getRoute called without router context',
+                test: () => {
+                    const app = createApp({ template: '<div>Test</div>' });
+                    const vm = app.mount(testContainer);
+                    const result = () => getRoute(vm);
+                    app.unmount();
+                    return result;
+                }
+            }
+        ];
+
+        contextErrorTestCases.forEach(({ name, test }) => {
+            it(`should throw error when ${name}`, () => {
+                expect(test()).toThrow(contextNotFoundError);
+            });
+        });
+
+        const compositionContextErrorTestCases = [
+            {
+                name: 'useRouter called without router context',
+                setupFn: () => {
+                    expect(() => useRouter()).toThrow(contextNotFoundError);
+                }
+            },
+            {
+                name: 'useRoute called without router context',
+                setupFn: () => {
+                    expect(() => useRoute()).toThrow(contextNotFoundError);
+                }
+            },
+            {
+                name: 'useLink called without router context',
+                setupFn: () => {
+                    expect(() =>
+                        useLink({
+                            to: '/about',
+                            type: 'push',
+                            exact: 'include'
+                        })
+                    ).toThrow(contextNotFoundError);
+                }
+            }
+        ];
+
+        compositionContextErrorTestCases.forEach(({ name, setupFn }) => {
+            it(`should throw error when ${name}`, () => {
+                const TestComponent = defineComponent({
+                    setup() {
+                        setupFn();
+                        return () => '<div>Test</div>';
+                    }
+                });
+
+                const app = createApp(TestComponent);
+                app.mount(testContainer);
+                app.unmount();
+            });
+        });
+    });
+
+    describe('Error Handling - Setup Only', () => {
+        const setupOnlyTestCases = [
+            {
+                name: 'useRouter called outside setup()',
+                fn: () => useRouter(),
+                expectedError:
+                    '[@esmx/router-vue] useRouter() can only be called during setup()'
+            },
+            {
+                name: 'useRoute called outside setup()',
+                fn: () => useRoute(),
+                expectedError:
+                    '[@esmx/router-vue] useRoute() can only be called during setup()'
+            },
+            {
+                name: 'useLink called outside setup()',
+                fn: () =>
+                    useLink({
+                        to: '/about',
+                        type: 'push',
+                        exact: 'include'
+                    }),
+                expectedError:
+                    '[@esmx/router-vue] useRouter() can only be called during setup()'
+            },
+            {
+                name: 'useProvideRouter called outside setup()',
+                fn: () => useProvideRouter(router),
+                expectedError:
+                    '[@esmx/router-vue] useProvideRouter() can only be called during setup()'
+            }
+        ];
+
+        setupOnlyTestCases.forEach(({ name, fn, expectedError }) => {
+            it(`should throw error when ${name}`, () => {
+                expect(fn).toThrow(expectedError);
+            });
+        });
+    });
+
+    describe('Basic Functionality', () => {
+        it('should provide router context and return router instance from getRouter', async () => {
+            let routerInstance: Router | null = null;
+
+            const app = createApp({
+                setup() {
+                    useProvideRouter(router);
+                    return () => '<div>App</div>';
+                }
+            });
+
+            const vm = app.mount(testContainer);
+            routerInstance = getRouter(vm);
+
+            expect(routerInstance).toBe(router);
+            expect(routerInstance).toBeInstanceOf(Router);
+
+            app.unmount();
+        });
+
+        it('should provide router context and return current route from getRoute', async () => {
+            let currentRoute: Route | null = null;
+
+            const app = createApp({
+                setup() {
+                    useProvideRouter(router);
+                    return () => '<div>App</div>';
+                }
+            });
+
+            const vm = app.mount(testContainer);
+            currentRoute = getRoute(vm);
+
+            expect(currentRoute).toBeTruthy();
+            expect(currentRoute!.path).toBe('/');
+            expect(currentRoute!.meta.title).toBe('Home');
+
+            app.unmount();
+        });
+    });
+
+    describe('Setup() Support - useRouter in setup()', () => {
+        it('should allow useRouter to work in setup() via provide/inject', async () => {
+            let routerInstance: Router | null = null;
+            let childRoute: Route | null = null;
+
+            // Child component that uses router in setup()
+            const ChildComponent = defineComponent({
+                name: 'ChildComponent',
+                setup() {
+                    // This should now work in setup() thanks to provide/inject
+                    routerInstance = useRouter();
+                    childRoute = useRoute();
+
+                    expect(routerInstance).toBe(router);
+                    expect(childRoute.path).toBe('/');
+
+                    return () => h('div', 'Child Component');
+                }
+            });
+
+            // Parent component that provides router
+            const ParentComponent = defineComponent({
+                name: 'ParentComponent',
+                components: { ChildComponent },
+                setup() {
+                    useProvideRouter(router);
+                    return () => h(ChildComponent);
+                }
+            });
+
+            const app = createApp(ParentComponent);
+            app.mount(testContainer);
+            await nextTick();
+
+            // Verify that setup() calls succeeded
+            expect(routerInstance).toBe(router);
+            expect(childRoute).toBeTruthy();
+            expect(childRoute!.path).toBe('/');
+
+            app.unmount();
+        });
+
+        it('should work with nested components in setup()', async () => {
+            let deepChildRouter: Router | null = null;
+
+            const DeepChildComponent = defineComponent({
+                name: 'DeepChildComponent',
+                setup() {
+                    // Should work even in deeply nested components
+                    deepChildRouter = useRouter();
+                    expect(deepChildRouter).toBe(router);
+                    return () => h('div', 'Deep Child');
+                }
+            });
+
+            const MiddleComponent = defineComponent({
+                name: 'MiddleComponent',
+                components: { DeepChildComponent },
+                setup() {
+                    return () => h(DeepChildComponent);
+                }
+            });
+
+            const TopComponent = defineComponent({
+                name: 'TopComponent',
+                components: { MiddleComponent },
+                setup() {
+                    useProvideRouter(router);
+                    return () => h(MiddleComponent);
+                }
+            });
+
+            const app = createApp(TopComponent);
+            app.mount(testContainer);
+            await nextTick();
+
+            expect(deepChildRouter).toBe(router);
+            app.unmount();
+        });
+    });
+
+    describe('Component Hierarchy Context Finding - Investigation', () => {
+        it('should investigate component hierarchy traversal with logging', async () => {
+            let childRouterResult: Router | null = null;
+            let parentVmInstance: VueInstance | null = null;
+            let childVmInstance: VueInstance | null = null;
+
+            // Create a child component that doesn't have direct router context
+            const ChildComponent = defineComponent({
+                name: 'ChildComponent',
+                setup(_, { expose }) {
+                    // Get current instance for investigation
+                    const instance = getCurrentInstance();
+                    childVmInstance = instance?.proxy || null;
+
+                    try {
+                        // This should trigger hierarchy traversal
+                        childRouterResult = useRouter();
+                    } catch (error: unknown) {
+                        expect((error as Error).message).toContain(
+                            'Router context not found'
+                        );
+                    }
+
+                    expose({ childVmInstance });
+                    return () => '<div>Child Component</div>';
+                }
+            });
+
+            // Create a parent component that provides router context
+            const ParentComponent = defineComponent({
+                name: 'ParentComponent',
+                components: { ChildComponent },
+                setup(_, { expose }) {
+                    // Get current instance for investigation
+                    const instance = getCurrentInstance();
+                    parentVmInstance = instance?.proxy || null;
+
+                    // Provide router context at parent level
+                    useProvideRouter(router);
+
+                    expose({ parentVmInstance });
+                    return () => h(ChildComponent);
+                }
+            });
+
+            const app = createApp(ParentComponent);
+            const mountedApp = app.mount(testContainer);
+            await nextTick();
+
+            // Investigate the actual component relationship
+            if (childVmInstance && parentVmInstance) {
+                // Check if router context exists on parent
+                const parentHasContext =
+                    !!(parentVmInstance as Record<symbol, unknown>)[
+                        Symbol.for('router-context')
+                    ] ||
+                    Object.getOwnPropertySymbols(parentVmInstance).some((sym) =>
+                        sym.toString().includes('router-context')
+                    );
+                expect(parentHasContext).toBe(true);
+            }
+
+            // The test expectation
+            if (childRouterResult) {
+                expect(childRouterResult).toBe(router);
+            }
+
+            app.unmount();
+        });
+
+        it('should investigate direct getRouter call with component instances', async () => {
+            let parentInstance: VueInstance | null = null;
+            let childInstance: VueInstance | null = null;
+
+            const ChildComponent = defineComponent({
+                name: 'ChildComponent',
+                setup() {
+                    const instance = getCurrentInstance();
+                    childInstance = instance?.proxy || null;
+                    return () => '<div>Child</div>';
+                }
+            });
+
+            const ParentComponent = defineComponent({
+                name: 'ParentComponent',
+                components: { ChildComponent },
+                setup() {
+                    const instance = getCurrentInstance();
+                    parentInstance = instance?.proxy || null;
+                    useProvideRouter(router);
+                    return () => h(ChildComponent);
+                }
+            });
+
+            const app = createApp(ParentComponent);
+            app.mount(testContainer);
+            await nextTick();
+
+            if (childInstance && parentInstance) {
+                try {
+                    const routerFromChild = getRouter(childInstance);
+                    expect(routerFromChild).toBe(router);
+                } catch (error: unknown) {
+                    expect((error as Error).message).toContain(
+                        'Router context not found'
+                    );
+                }
+            }
+
+            app.unmount();
+        });
+    });
+
+    describe('Navigation', () => {
+        it('should handle router navigation correctly', async () => {
+            const app = createApp({
+                setup() {
+                    useProvideRouter(router);
+                    return () => '<div>App</div>';
+                }
+            });
+
+            app.mount(testContainer);
+
+            // Initial route
+            expect(router.route.path).toBe('/');
+            expect(router.route.meta.title).toBe('Home');
+
+            // Navigate to different route
+            await router.push('/about');
+
+            // Route should be updated
+            expect(router.route.path).toBe('/about');
+            expect(router.route.meta.title).toBe('About');
+
+            app.unmount();
+        });
+    });
+
+    describe('Composition API Integration', () => {
+        it('should work with composition API functions in same component', async () => {
+            let compositionRouter: Router | null = null;
+            let compositionRoute: Route | null = null;
+            let linkResolver: ReturnType<typeof useLink> | null = null;
+
+            const TestComponent = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+
+                    compositionRouter = useRouter();
+                    compositionRoute = useRoute();
+                    linkResolver = useLink({
+                        to: '/about',
+                        type: 'push',
+                        exact: 'include'
+                    });
+
+                    return () => '<div>Test Component</div>';
+                }
+            });
+
+            const app = createApp(TestComponent);
+            app.mount(testContainer);
+            await nextTick();
+
+            // Test useRouter result
+            expect(compositionRouter).toBe(router);
+
+            // Test useRoute result
+            expect(compositionRoute).toBeTruthy();
+            expect(compositionRoute!.path).toBe('/');
+            expect(compositionRoute!.meta.title).toBe('Home');
+
+            // Test useLink result
+            expect(linkResolver).toBeTruthy();
+            expect(linkResolver!.value).toBeTruthy();
+
+            const link = linkResolver!.value;
+            expect(link).toHaveProperty('attributes');
+            expect(link).toHaveProperty('getEventHandlers');
+            expect(link).toHaveProperty('isActive');
+
+            app.unmount();
+        });
+
+        it('should handle route updates reactively', async () => {
+            let routeRef: Route | null = null;
+
+            const TestComponent = defineComponent({
+                setup() {
+                    useProvideRouter(router);
+                    const route = useRoute();
+                    routeRef = route;
+                    return () => `<div>Current: ${route.path}</div>`;
+                }
+            });
+
+            const app = createApp(TestComponent);
+            app.mount(testContainer);
+            await nextTick();
+
+            // Initial route
+            expect(routeRef).toBeTruthy();
+            expect(routeRef!.path).toBe('/');
+
+            // Navigate and check if route is updated
+            await router.push('/about');
+            await nextTick();
+
+            expect(routeRef!.path).toBe('/about');
+
+            app.unmount();
+        });
+    });
+
+    describe('Deep Component Hierarchy', () => {
+        it('should cover deep component hierarchy traversal (multi-level parent chain)', async () => {
+            // This test specifically targets lines 59-60: the while loop continuation in findRouterContext
+            // Create: GrandParent (has router) -> Parent (no router) -> Child (needs router)
+
+            let childRouterResult: Router | null = null;
+
+            const ChildComponent = defineComponent({
+                name: 'ChildComponent',
+                setup() {
+                    // This will trigger the while loop in findRouterContext
+                    // First check: parent (no context) -> continue loop (lines 59-60)
+                    // Second check: grandparent (has context) -> found!
+                    return () => h('div', 'Deep Child');
+                }
+            });
+
+            const ParentComponent = defineComponent({
+                name: 'ParentComponent',
+                setup() {
+                    // This parent does NOT provide router context
+                    // So child will need to traverse up to grandparent
+                    return () => h(ChildComponent);
+                }
+            });
+
+            const GrandParentComponent = defineComponent({
+                name: 'GrandParentComponent',
+                setup() {
+                    useProvideRouter(router);
+                    return () => h(ParentComponent);
+                }
+            });
+
+            const app = createApp(GrandParentComponent);
+            const mountedApp = app.mount(testContainer);
+            await nextTick();
+
+            // Manually traverse the component tree to find the deep child
+            // This simulates what happens when getRouter is called on a deeply nested component
+            const deepChildInstance = mountedApp;
+
+            // Create a mock deep child instance with proper parent chain
+            const mockDeepChild = {
+                $parent: {
+                    // This is the middle parent (no router context)
+                    $parent: mountedApp // This is the grandparent (has router context)
+                }
+            };
+
+            // This call will traverse: Child -> Parent (no context) -> GrandParent (has context)
+            // This should hit lines 59-60 (current = current.$parent; })
+            childRouterResult = getRouter(mockDeepChild as VueInstance);
+
+            expect(childRouterResult).toBe(router);
+            expect(childRouterResult).toBeInstanceOf(Router);
+
+            app.unmount();
+        });
+
+        it('should handle component hierarchy traversal with manual parent chain setup', () => {
+            // Create a chain: Root (has router) -> Middle (no router) -> Leaf (needs router)
+            // This ensures the while loop executes multiple iterations
+
+            const app = createApp({
+                setup() {
+                    useProvideRouter(router);
+                    return () => h('div', 'Root');
+                }
+            });
+
+            const rootInstance = app.mount(testContainer);
+
+            // Create a mock component hierarchy that requires traversal
+            const leafInstance = {
+                $parent: {
+                    // Middle level - no router context
+                    $parent: rootInstance // Root level - has router context
+                }
+            };
+
+            // This should traverse the parent chain and find the router in the root
+            const foundRouter = getRouter(leafInstance as VueInstance);
+
+            expect(foundRouter).toBe(router);
+            expect(foundRouter).toBeInstanceOf(Router);
+
+            app.unmount();
+        });
+    });
+});