@esmx/router-vue 3.0.0-rc.29 → 3.0.0-rc.31

package/src/use.test.ts

@@ -1,616 +1,217 @@
-import { type Route, type RouteConfig, Router, RouterMode } from '@esmx/router';
+import { type Route, 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', () => {
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+import { createApp, h } from 'vue';
+import { useProvideRouter, useRoute, useRouter } from './use';
+
+describe('Router Vue Integration', () => {
+    let app: ReturnType<typeof createApp>;
     let router: Router;
-    let testContainer: HTMLElement;
+    let mountPoint: 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
+        // Create a real Router instance
         router = new Router({
-            root: '#test-app',
-            routes,
             mode: RouterMode.memory,
+            routes: [
+                { path: '/initial', component: {} },
+                { path: '/new-route', component: {} },
+                { path: '/user/:id', component: {} },
+                { path: '/new-path', component: {} }
+            ],
             base: new URL('http://localhost:3000/')
         });
 
-        // Initialize router to root path
-        await router.replace('/');
+        // Ensure navigation to initial route is complete
+        await router.replace('/initial');
+
+        // Create mount point
+        mountPoint = document.createElement('div');
+        mountPoint.id = 'app';
+        document.body.appendChild(mountPoint);
     });
 
     afterEach(() => {
-        // Clean up test environment
-        if (testContainer.parentNode) {
-            testContainer.parentNode.removeChild(testContainer);
-        }
-
-        // Destroy router
-        if (router) {
-            router.destroy();
+        if (app) {
+            app.unmount();
         }
-    });
-
-    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();
-            });
-        });
-    });
+        document.body.removeChild(mountPoint);
 
-    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);
-            });
-        });
+        // Clean up router
+        router.destroy();
     });
 
-    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);
+    describe('Router and Route Access', () => {
+        it('should provide router and route access', async () => {
+            let routerResult: Router | undefined;
+            let routeResult: Route | undefined;
 
-            app.unmount();
-        });
-
-        it('should provide router context and return current route from getRoute', async () => {
-            let currentRoute: Route | null = null;
-
-            const app = createApp({
+            const TestApp = {
                 setup() {
                     useProvideRouter(router);
-                    return () => '<div>App</div>';
+                    routerResult = useRouter();
+                    routeResult = useRoute();
+                    return () => h('div', 'Test App');
                 }
-            });
-
-            const vm = app.mount(testContainer);
-            currentRoute = getRoute(vm);
+            };
 
-            expect(currentRoute).toBeTruthy();
-            expect(currentRoute!.path).toBe('/');
-            expect(currentRoute!.meta.title).toBe('Home');
+            app = createApp(TestApp);
+            app.mount('#app');
 
-            app.unmount();
+            // Check retrieved objects
+            expect(routerResult).toEqual(router);
+            expect(routeResult).toBeDefined();
+            expect(routeResult?.path).toBe('/initial');
         });
     });
 
-    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');
-                }
-            });
+    describe('Route Reactivity', () => {
+        it('should update route properties when route changes', async () => {
+            let routeRef: Route | undefined;
 
-            // Parent component that provides router
-            const ParentComponent = defineComponent({
-                name: 'ParentComponent',
-                components: { ChildComponent },
+            const TestApp = {
                 setup() {
                     useProvideRouter(router);
-                    return () => h(ChildComponent);
+                    routeRef = useRoute();
+                    return () => h('div', routeRef?.path);
                 }
-            });
-
-            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');
-                }
-            });
+            app = createApp(TestApp);
+            app.mount('#app');
 
-            const MiddleComponent = defineComponent({
-                name: 'MiddleComponent',
-                components: { DeepChildComponent },
-                setup() {
-                    return () => h(DeepChildComponent);
-                }
-            });
+            // Initial state
+            expect(routeRef?.path).toBe('/initial');
 
-            const TopComponent = defineComponent({
-                name: 'TopComponent',
-                components: { MiddleComponent },
-                setup() {
-                    useProvideRouter(router);
-                    return () => h(MiddleComponent);
-                }
-            });
+            // Save reference to check identity
+            const initialRouteRef = routeRef;
 
-            const app = createApp(TopComponent);
-            app.mount(testContainer);
+            // Navigate to new route
+            await router.replace('/new-route');
             await nextTick();
 
-            expect(deepChildRouter).toBe(router);
-            app.unmount();
+            // Check that reference is preserved but properties are updated
+            expect(routeRef).toBe(initialRouteRef);
+            expect(routeRef?.path).toBe('/new-route');
         });
-    });
-
-    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 update route params when route changes', async () => {
+            let routeRef: Route | undefined;
 
-        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({
+            const TestApp = {
                 setup() {
                     useProvideRouter(router);
-                    return () => '<div>App</div>';
+                    routeRef = useRoute();
+                    return () =>
+                        h('div', [
+                            h('span', routeRef?.path),
+                            h('span', routeRef?.params?.id || 'no-id')
+                        ]);
                 }
-            });
-
-            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');
+            app = createApp(TestApp);
+            app.mount('#app');
 
-            // Route should be updated
-            expect(router.route.path).toBe('/about');
-            expect(router.route.meta.title).toBe('About');
+            // Navigate to route with params
+            await router.replace('/user/123');
+            await nextTick();
 
-            app.unmount();
+            // Check if params are updated
+            expect(routeRef?.path).toBe('/user/123');
+            expect(routeRef?.params?.id).toBe('123');
         });
-    });
 
-    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;
+        it('should automatically update view when route changes', async () => {
+            // Track render count
+            const renderCount = { value: 0 };
+            let routeRef: Route | undefined;
 
-            const TestComponent = defineComponent({
+            const TestApp = {
                 setup() {
                     useProvideRouter(router);
-
-                    compositionRouter = useRouter();
-                    compositionRoute = useRoute();
-                    linkResolver = useLink({
-                        to: '/about',
-                        type: 'push',
-                        exact: 'include'
-                    });
-
-                    return () => '<div>Test Component</div>';
+                    routeRef = useRoute();
+                    return () => {
+                        renderCount.value++;
+                        return h('div', routeRef?.path);
+                    };
                 }
-            });
-
-            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;
+            app = createApp(TestApp);
+            app.mount('#app');
 
-            const TestComponent = defineComponent({
-                setup() {
-                    useProvideRouter(router);
-                    const route = useRoute();
-                    routeRef = route;
-                    return () => `<div>Current: ${route.path}</div>`;
-                }
-            });
+            // Initial render
+            const initialRenderCount = renderCount.value;
+            expect(routeRef?.path).toBe('/initial');
 
-            const app = createApp(TestComponent);
-            app.mount(testContainer);
+            // Navigate to new route
+            await router.replace('/new-route');
             await nextTick();
 
-            // Initial route
-            expect(routeRef).toBeTruthy();
-            expect(routeRef!.path).toBe('/');
+            // Check if render count increased, confirming view update
+            expect(renderCount.value).toBeGreaterThan(initialRenderCount);
+            expect(routeRef?.path).toBe('/new-route');
 
-            // Navigate and check if route is updated
-            await router.push('/about');
+            // Navigate to another route
+            const previousRenderCount = renderCount.value;
+            await router.replace('/new-path');
             await nextTick();
 
-            expect(routeRef!.path).toBe('/about');
-
-            app.unmount();
+            // Check if render count increased again
+            expect(renderCount.value).toBeGreaterThan(previousRenderCount);
+            expect(routeRef?.path).toBe('/new-path');
         });
     });
 
-    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;
+    describe('Nested Components', () => {
+        it('should provide route context to child components', async () => {
+            let parentRoute: Route | undefined;
+            let childRoute: Route | undefined;
 
-            const ChildComponent = defineComponent({
-                name: 'ChildComponent',
+            const 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');
+                    childRoute = useRoute();
+                    return () => h('div', 'Child: ' + childRoute?.path);
                 }
-            });
+            };
 
-            const ParentComponent = defineComponent({
-                name: 'ParentComponent',
+            const ParentComponent = {
                 setup() {
-                    // This parent does NOT provide router context
-                    // So child will need to traverse up to grandparent
-                    return () => h(ChildComponent);
+                    parentRoute = useRoute();
+                    return () =>
+                        h('div', [
+                            h('span', 'Parent: ' + parentRoute?.path),
+                            h(ChildComponent)
+                        ]);
                 }
-            });
+            };
 
-            const GrandParentComponent = defineComponent({
-                name: 'GrandParentComponent',
+            const TestApp = {
                 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);
+            app = createApp(TestApp);
+            app.mount('#app');
 
-            expect(childRouterResult).toBe(router);
-            expect(childRouterResult).toBeInstanceOf(Router);
+            expect(parentRoute).toBeDefined();
+            expect(childRoute).toBeDefined();
+            expect(parentRoute?.path).toBe('/initial');
+            expect(childRoute?.path).toBe('/initial');
 
-            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);
+            // Navigate to new path
+            await router.replace('/new-path');
+            await nextTick();
 
-            app.unmount();
+            // Both parent and child components should see updates
+            expect(parentRoute?.path).toBe('/new-path');
+            expect(childRoute?.path).toBe('/new-path');
         });
     });
 });