import { describe, it, expect, beforeEach } from "vitest";
import { App } from "../src/index";
import { RouterPlugin } from "../src/plugins/router";

describe("RouterPlugin", () => {
  let app: App;
  let router: RouterPlugin;

  beforeEach(() => {
    app = new App();
    router = new RouterPlugin([
      {
        path: "/",
        component: { template: "<div>Home</div>" },
      },
      {
        path: "/about",
        component: { template: "<div>About</div>" },
      },
    ]);

    app.use(router);
  });

  it("should render the correct component on route change", () => {
    const root = document.createElement("div");
    root.innerHTML = "<router-view></router-view>";
    document.body.appendChild(root);

    router.compile(root.firstElementChild as Element);

    router.doRouteChange("/");
    expect(root.innerHTML).toContain("<div>Home</div>");

    router.doRouteChange("/about");
    expect(root.innerHTML).toContain("<div>About</div>");
  });
});