budibase/packages/client/tests/bindingDom.spec.js

import { load } from "./testAppDef"

describe("initialiseApp", () => {
  it("should populate root element prop from store value", async () => {
    const { dom } = await load({
      _component: "testlib/div",
      className: {
        "##bbstate": "divClassName",
        "##bbsource": "store",
        "##bbstatefallback": "default",
      },
    })

    const rootDiv = dom.window.document.body.children[0]
    expect(rootDiv.className).toBe("default")
  })

  it("should update root element from store", async () => {
    const { dom, app } = await load({
      _component: "testlib/div",
      className: {
        "##bbstate": "divClassName",
        "##bbsource": "store",
        "##bbstatefallback": "default",
      },
    })

    app.store.update(s => {
      s.divClassName = "newvalue"
      return s
    })

    const rootDiv = dom.window.document.body.children[0]
    expect(rootDiv.className).toBe("newvalue")
  })

  it("should populate child component with store value", async () => {
    const { dom } = await load({
      _component: "testlib/div",
      _children: [
        {
          _component: "testlib/h1",
          text: {
            "##bbstate": "headerOneText",
            "##bbsource": "store",
            "##bbstatefallback": "header one",
          },
        },
        {
          _component: "testlib/h1",
          text: {
            "##bbstate": "headerTwoText",
            "##bbsource": "store",
            "##bbstatefallback": "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 populate child component with store value", async () => {
    const { dom, app } = await load({
      _component: "testlib/div",
      _children: [
        {
          _component: "testlib/h1",
          text: {
            "##bbstate": "headerOneText",
            "##bbsource": "store",
            "##bbstatefallback": "header one",
          },
        },
        {
          _component: "testlib/h1",
          text: {
            "##bbstate": "headerTwoText",
            "##bbsource": "store",
            "##bbstatefallback": "header two",
          },
        },
      ],
    })

    app.store.update(s => {
      s.headerOneText = "header 1 - new val"
      s.headerTwoText = "header 2 - new val"
      return s
    })

    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 1 - new val")
    expect(rootDiv.children[1].tagName).toBe("H1")
    expect(rootDiv.children[1].innerText).toBe("header 2 - new val")
  })
})