@esmx/router-vue/dist/use.test.mjs

Vue integration for @esmx/router - A universal router that works seamlessly with both Vue 2.7+ and Vue 3

import { Router, RouterMode } from "@esmx/router";
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import { nextTick } from "vue";
import { createApp, h } from "vue";
import { useProvideRouter, useRoute, useRouter } from "./use.mjs";
describe("Router Vue Integration", () => {
  let app;
  let router;
  let mountPoint;
  beforeEach(async () => {
    router = new Router({
      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/")
    });
    await router.replace("/initial");
    mountPoint = document.createElement("div");
    mountPoint.id = "app";
    document.body.appendChild(mountPoint);
  });
  afterEach(() => {
    if (app) {
      app.unmount();
    }
    document.body.removeChild(mountPoint);
    router.destroy();
  });
  describe("Router and Route Access", () => {
    it("should provide router and route access", async () => {
      let routerResult;
      let routeResult;
      const TestApp = {
        setup() {
          useProvideRouter(router);
          routerResult = useRouter();
          routeResult = useRoute();
          return () => h("div", "Test App");
        }
      };
      app = createApp(TestApp);
      app.mount("#app");
      expect(routerResult).toEqual(router);
      expect(routeResult).toBeDefined();
      expect(routeResult == null ? void 0 : routeResult.path).toBe("/initial");
    });
  });
  describe("Route Reactivity", () => {
    it("should update route properties when route changes", async () => {
      let routeRef;
      const TestApp = {
        setup() {
          useProvideRouter(router);
          routeRef = useRoute();
          return () => h("div", routeRef == null ? void 0 : routeRef.path);
        }
      };
      app = createApp(TestApp);
      app.mount("#app");
      expect(routeRef == null ? void 0 : routeRef.path).toBe("/initial");
      const initialRouteRef = routeRef;
      await router.replace("/new-route");
      await nextTick();
      expect(routeRef).toBe(initialRouteRef);
      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-route");
    });
    it("should update route params when route changes", async () => {
      var _a;
      let routeRef;
      const TestApp = {
        setup() {
          useProvideRouter(router);
          routeRef = useRoute();
          return () => {
            var _a2;
            return h("div", [
              h("span", routeRef == null ? void 0 : routeRef.path),
              h("span", ((_a2 = routeRef == null ? void 0 : routeRef.params) == null ? void 0 : _a2.id) || "no-id")
            ]);
          };
        }
      };
      app = createApp(TestApp);
      app.mount("#app");
      await router.replace("/user/123");
      await nextTick();
      expect(routeRef == null ? void 0 : routeRef.path).toBe("/user/123");
      expect((_a = routeRef == null ? void 0 : routeRef.params) == null ? void 0 : _a.id).toBe("123");
    });
    it("should automatically update view when route changes", async () => {
      const renderCount = { value: 0 };
      let routeRef;
      const TestApp = {
        setup() {
          useProvideRouter(router);
          routeRef = useRoute();
          return () => {
            renderCount.value++;
            return h("div", routeRef == null ? void 0 : routeRef.path);
          };
        }
      };
      app = createApp(TestApp);
      app.mount("#app");
      const initialRenderCount = renderCount.value;
      expect(routeRef == null ? void 0 : routeRef.path).toBe("/initial");
      await router.replace("/new-route");
      await nextTick();
      expect(renderCount.value).toBeGreaterThan(initialRenderCount);
      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-route");
      const previousRenderCount = renderCount.value;
      await router.replace("/new-path");
      await nextTick();
      expect(renderCount.value).toBeGreaterThan(previousRenderCount);
      expect(routeRef == null ? void 0 : routeRef.path).toBe("/new-path");
    });
  });
  describe("Nested Components", () => {
    it("should provide route context to child components", async () => {
      let parentRoute;
      let childRoute;
      const ChildComponent = {
        setup() {
          childRoute = useRoute();
          return () => h("div", "Child: " + (childRoute == null ? void 0 : childRoute.path));
        }
      };
      const ParentComponent = {
        setup() {
          parentRoute = useRoute();
          return () => h("div", [
            h("span", "Parent: " + (parentRoute == null ? void 0 : parentRoute.path)),
            h(ChildComponent)
          ]);
        }
      };
      const TestApp = {
        setup() {
          useProvideRouter(router);
          return () => h(ParentComponent);
        }
      };
      app = createApp(TestApp);
      app.mount("#app");
      expect(parentRoute).toBeDefined();
      expect(childRoute).toBeDefined();
      expect(parentRoute == null ? void 0 : parentRoute.path).toBe("/initial");
      expect(childRoute == null ? void 0 : childRoute.path).toBe("/initial");
      await router.replace("/new-path");
      await nextTick();
      expect(parentRoute == null ? void 0 : parentRoute.path).toBe("/new-path");
      expect(childRoute == null ? void 0 : childRoute.path).toBe("/new-path");
    });
  });
});