import { describe, it, expect } from "vitest";
import { App, Component } from "../src/index";
import { reactive } from "../src/reactivity/reactive";

describe("App", () => {
  it("should mount a simple component and update reactive data", () => {
    const app = new App();
    const component: Component = {
      template: "<div>{{ message }}</div>",
      props: { message: { default: "Hello" } },
      main(props) {
        return reactive({ message: props.message });
      },
    };

    const root = document.createElement("div");
    app.mount(component, root);

    expect(root.innerHTML).toBe("<div>Hello</div>");

    const { scope } = app.root.context;
    scope.message = "World";

    expect(root.innerHTML).toBe("<div>World</div>");
  });
});