import { load } from "./testAppDef"

describe("initialiseApp", () => {
  it("should populate simple div with initial props", async () => {
    const { dom } = await load({
      _component: "testlib/div",
      className: "my-test-class",
    })

    expect(dom.window.document.body.children.length).toBe(1)
    const child = dom.window.document.body.children[0]
    expect(child.className).toBe("my-test-class")
  })

  it("should populate child component with props", async () => {
    const { dom } = await load({
      _component: "testlib/div",
      _children: [
        {
          _component: "testlib/h1",
          text: "header one",
        },
        {
          _component: "testlib/h1",
          text: "header two",
        },
      ],
    })

    const rootDiv = dom.window.document.body.children[0]

    expect(rootDiv.children.length).toBe(2)
    expect(rootDiv.children[0].tagName).toBe("H1")
    expect(rootDiv.children[0].innerText).toBe("header one")
    expect(rootDiv.children[1].tagName).toBe("H1")
    expect(rootDiv.children[1].innerText).toBe("header two")
  })

  it("should append children when told to do so", async () => {
    const { dom } = await load({
      _component: "testlib/div",
      _children: [
        {
          _component: "testlib/h1",
          text: "header one",
        },
        {
          _component: "testlib/h1",
          text: "header two",
        },
      ],
      append: true,
    })

    const rootDiv = dom.window.document.body.children[0]

    expect(rootDiv.children.length).toBe(3)
    expect(rootDiv.children[0].tagName).toBe("DIV")
    expect(rootDiv.children[0].className).toBe("default-child")
    expect(rootDiv.children[1].tagName).toBe("H1")
    expect(rootDiv.children[1].innerText).toBe("header one")
    expect(rootDiv.children[2].tagName).toBe("H1")
    expect(rootDiv.children[2].innerText).toBe("header two")
  })
})