import { describe, expect, it } from "vitest";
import { mount, type VueWrapper } from "@vue/test-utils";
import { vuetify } from "./setup.vuetify";

import App from "~/App.vue";

describe("App.vue", () => {
  const wrapper: VueWrapper = mount(App, {
    global: {
      plugins: [vuetify],
      stubs: {
        HeaderNavBar: true,
        FooterComponent: true,
        RouterView: true,
      },
    },
  });

  describe("Component Structure", () => {
    it("renders the component", () => {
      expect(wrapper.exists()).toBe(true);
    });

    it("renders v-app as the root element", () => {
      expect(wrapper.find(".v-application").exists()).toBe(true);
    });

    it("renders HeaderNavBar component", () => {
      expect(wrapper.findComponent({ name: "HeaderNavBar" }).exists()).toBe(true);
    });

    it("renders FooterComponent component", () => {
      expect(wrapper.findComponent({ name: "FooterComponent" }).exists()).toBe(true);
    });

    it("renders v-main element", () => {
      expect(wrapper.find(".v-main").exists()).toBe(true);
    });

    it("renders v-container inside v-main", () => {
      const main = wrapper.find(".v-main");
      expect(main.find(".v-container").exists()).toBe(true);
    });

    it("renders RouterView component", () => {
      expect(wrapper.findComponent({ name: "RouterView" }).exists()).toBe(true);
    });
  });
});