import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import MasterDetail from "../MasterDetail.vue";

describe("MasterDetail", () => {
  it("renders list + listHeader slots", () => {
    const wrapper = mount(MasterDetail, {
      slots: {
        listHeader: '<div class="lh">header</div>',
        list: '<div class="l">items</div>',
      },
    });
    expect(wrapper.find(".lh").exists()).toBe(true);
    expect(wrapper.find(".l").exists()).toBe(true);
  });

  it("falls back to the empty slot when detail is absent", () => {
    const wrapper = mount(MasterDetail, {
      slots: {
        list: '<div class="l">items</div>',
        empty: "pick something",
      },
    });
    // ScrollArea injects its own <style> block — assert on contains, not equality.
    expect(wrapper.get("[data-testid=detail-pane]").text()).toContain("pick something");
  });

  it("renders detail slot when provided", () => {
    const wrapper = mount(MasterDetail, {
      slots: {
        list: '<div class="l">items</div>',
        detail: '<div class="d">selected detail</div>',
        empty: "pick something",
      },
    });
    expect(wrapper.find(".d").exists()).toBe(true);
    // When `detail` is provided, the empty fallback never renders.
    expect(wrapper.findAll(".d")).toHaveLength(1);
  });
});