import FillableFields from "fillable_fields"

describe("FillableFields", () => {
  describe("fill", () => {
    it("fills the fields with data from the associated trigger element", () => {
      document.body.innerHTML = `
        <div data-behavior="fillable-fields" data-target="#fields">
          <span data-fillable-field="field1">Foo</span>
          <span data-fillable-field="field2">Bar</span>
        </div>
        <div id="fields">
          <input name="field1">
          <input name="field2">
        </div>
      </form>`

      const element = document.querySelector("[data-behavior=fillable-fields]")
      const field1 = document.querySelector("input[name=field1]")
      const field2 = document.querySelector("input[name=field2]")

      new FillableFields(element).fill()

      expect(field1.value).toBe("Foo")
      expect(field2.value).toBe("Bar")
    })
  })
})