brut-js 0.0.1

package/specs/AjaxSubmit.spec.js

@@ -0,0 +1,241 @@
+import { withHTML, readRequestBodyIntoString, waitForSetTimeout } from "../src/testing/index.js"
+
+describe("<brut-ajax-submit>", () => {
+  withHTML(`
+    <form action="http://example.net/foo" method="POST">
+      <input required type="text" name="some-text">
+      <input required type="number" name="some-number">
+      <brut-ajax-submit submitted-lifetime="10">
+        <button>Submit</button>
+      </brut-ajax-submit>
+    </form>
+  `).onFetch( "/foo", [
+    { then: { status: 200 }},
+  ]
+  ).test("submits the form, setting various attributes during the lifecycle", ({document,assert,fetchRequests}) => {
+    const element = document.querySelector("brut-ajax-submit")
+    const button  = element.querySelector("button")
+    const text    = document.querySelector("input[name=some-text]")
+    const number  = document.querySelector("input[name=some-number]")
+
+    let okReceived = false
+    element.addEventListener("brut:submitok", () => {
+      okReceived = true
+    })
+
+    text.value   = "Some Text"
+    number.value = "11"
+
+    button.click()
+    assert(element.getAttribute("requesting") != null)
+
+    const promises = fetchRequests.
+      filter( (fetchRequest) => fetchRequest.promiseReturned ).
+      map( (fetchRequest) => fetchRequest.promiseReturned )
+
+    return Promise.all(promises).then( () => {
+      assert(okReceived)
+      assert(element.getAttribute("requesting") == null)
+      assert(element.getAttribute("submitted") != null)
+      waitForSetTimeout(11).then( () => {
+        assert(element.getAttribute("submitted") == null)
+        return readRequestBodyIntoString(fetchRequests[0]).then( (string) => {
+          const params = new URLSearchParams(string)
+          assert.equal(params.get("some-text"),"Some Text")
+          assert.equal(params.get("some-number"),"11")
+        })
+      })
+
+    })
+  }).test("does not submit the form if it's invalid", ({document,assert,fetchRequests}) => {
+
+    const form    = document.querySelector("form")
+    const element = form.querySelector("brut-ajax-submit")
+    const button  = element.querySelector("button")
+    const text    = form.querySelector("input[name=some-text]")
+    const number  = form.querySelector("input[name=some-number]")
+
+    let okReceived = false
+    element.addEventListener("brut:submitok", () => {
+      okReceived = true
+    })
+
+    const isValid = form.reportValidity()
+    assert(!isValid)
+
+    button.click()
+
+    assert.equal(fetchRequests.length,0)
+    assert(!okReceived)
+  })
+  withHTML(`
+    <form action="http://example.net/foo" method="POST">
+      <input required type="text" name="some-text">
+      <input required type="number" name="some-number">
+      <brut-ajax-submit submitted-lifetime="10">
+        <button>Submit</button>
+      </brut-ajax-submit>
+    </form>
+  `).onFetch( "/foo", [
+    { then: { status: 500 }},
+    { then: { status: 200 }},
+  ]
+  ).test("submits the form after a retry", ({document,assert,fetchRequests}) => {
+    const element = document.querySelector("brut-ajax-submit")
+    const button  = element.querySelector("button")
+    const text    = document.querySelector("input[name=some-text]")
+    const number  = document.querySelector("input[name=some-number]")
+
+    let okReceived = 0
+    element.addEventListener("brut:submitok", () => {
+      okReceived++
+    })
+
+    text.value   = "Some Text"
+    number.value = "11"
+
+    button.click()
+    return waitForSetTimeout(5).then( () => {
+
+      const promises = fetchRequests.
+        filter( (fetchRequest) => fetchRequest.promiseReturned ).
+        map( (fetchRequest) => fetchRequest.promiseReturned )
+
+      return Promise.all(promises).then( () => {
+        assert.equal(okReceived,1)
+        return readRequestBodyIntoString(fetchRequests[1]).then( (string) => {
+          const params = new URLSearchParams(string)
+          assert.equal(params.get("some-text"),"Some Text")
+          assert.equal(params.get("some-number"),"11")
+        })
+      })
+    })
+  })
+  withHTML(`
+    <form action="http://example.net/foo" method="POST">
+      <input required type="text" name="some-text">
+      <input required type="number" name="some-number">
+      <brut-ajax-submit submitted-lifetime="10" max-retry-attempts=2>
+        <button>Submit</button>
+      </brut-ajax-submit>
+    </form>
+  `).onFetch( "/foo", [
+    { then: { status: 500 }},
+    { then: { status: 500 }},
+    { then: { status: 500 }},
+  ]
+  ).test("when too many failures, submits the form the old-fashioned way", ({document,assert,fetchRequests}) => {
+    const form    = document.querySelector("form")
+    const element = form.querySelector("brut-ajax-submit")
+    const button  = element.querySelector("button")
+    const text    = form.querySelector("input[name=some-text]")
+    const number  = form.querySelector("input[name=some-number]")
+
+    let okReceived = 0
+    element.addEventListener("brut:submitok", () => {
+      okReceived++
+    })
+
+    text.value   = "Some Text"
+    number.value = "11"
+
+    let submitted = false
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+
+    button.click()
+    return waitForSetTimeout(50).then( () => {
+
+      const promises = fetchRequests.
+        filter( (fetchRequest) => fetchRequest.promiseReturned ).
+        map( (fetchRequest) => fetchRequest.promiseReturned )
+
+      return Promise.all(promises).then( () => {
+        assert.equal(okReceived,0)
+        assert(submitted)
+      })
+    })
+  })
+  withHTML(`
+    <form action="http://example.net/foo" method="POST">
+
+      <input required type="text" name="some-text">
+      <brut-constraint-violation-messages server-side input-name="some-text">
+      </brut-constraint-violation-messages>
+
+      <input required type="number" name="some-number">
+      <brut-constraint-violation-messages server-side input-name="some-number">
+      </brut-constraint-violation-messages>
+
+      <brut-ajax-submit submitted-lifetime="10">
+        <button>Submit</button>
+      </brut-ajax-submit>
+    </form>
+  `).onFetch( "/foo", [
+    {
+      then: {
+        status: 422,
+        text: `
+<brut-constraint-violation-message input-name="some-text">
+A sever-side error
+</brut-constraint-violation-message>
+<brut-constraint-violation-message input-name="some-text">
+Another sever-side error
+</brut-constraint-violation-message>
+<brut-constraint-violation-message input-name="some-other-text">
+Irrelevant server-side error
+</brut-constraint-violation-message>
+<brut-constraint-violation-message>
+Error that should be ignored
+</brut-constraint-violation-message>
+<div>element that should be ignored</div>
+        `
+      }
+    },
+  ]
+  ).test("when we get a 422, parses the result from the server", ({document,window,assert,fetchRequests}) => {
+    const form    = document.querySelector("form")
+    const element = form.querySelector("brut-ajax-submit")
+    const button  = element.querySelector("button")
+    const text    = form.querySelector("input[name=some-text]")
+    const number  = form.querySelector("input[name=some-number]")
+
+    let okReceived = 0
+    element.addEventListener("brut:submitok", () => {
+      okReceived++
+    })
+
+    text.value   = "Some Text"
+    number.value = "11"
+
+    button.click()
+    return waitForSetTimeout(5).then( () => {
+
+      const promises = fetchRequests.
+        filter( (fetchRequest) => fetchRequest.promiseReturned ).
+        map( (fetchRequest) => fetchRequest.promiseReturned )
+
+      return Promise.all(promises).then( () => {
+        assert.equal(okReceived,0)
+        const textFieldErrors = form.querySelectorAll("brut-constraint-violation-messages[input-name='some-text'] brut-constraint-violation-message")
+        assert.equal(2,textFieldErrors.length)
+
+        let error = Array.from(textFieldErrors).find( (e) => e.textContent.trim() == "A sever-side error" )
+        assert(error)
+        error = Array.from(textFieldErrors).find( (e) => e.textContent.trim() == "Another sever-side error" )
+        assert(error)
+
+        const numberFieldErrors = form.querySelectorAll("brut-constraint-violation-messages[input-name=some-number] brut-constraint-violation-message")
+        assert.equal(0,numberFieldErrors.length)
+
+        assert(text.validity.customError)
+        assert(!number.validity.customError)
+
+        text.dispatchEvent(new window.Event("change"))
+        assert(!text.validity.customError)
+      })
+    })
+  })
+})

package/specs/Autosubmit.spec.js

@@ -0,0 +1,127 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-autosubmit>", () => {
+  withHTML(`
+    <form id="form-1">
+      <brut-autosubmit>
+        <select name="status">
+          <option value="draft">Draft</option>
+          <option value="ready">Ready</option>
+          <option value="published">Published</option>
+         </select>
+         <textarea></textarea>
+         <input type="text" id="input-1">
+         <input type="text" id="input-2" form="form-2">
+      </brut-autosubmit>
+      <button>Save</button>
+    </form>
+    <form id="form-2">
+      <button>Save</button>
+    </form>
+  `).test("<select> 'change' event submits the form", ({window,document,assert}) => {
+
+    const form   = document.getElementById("form-1")
+    const select = form.querySelector("select")
+
+    let submitted = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    const event = new window.Event("change",{})
+    select.dispatchEvent(event)
+    assert(submitted)
+  }).test("<textarea> 'change' event submits the form", ({window,document,assert}) => {
+
+    const form     = document.getElementById("form-1")
+    const textarea = form.querySelector("textarea")
+
+    let submitted = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    const event = new window.Event("change",{})
+    textarea.dispatchEvent(event)
+    assert(submitted)
+  }).test("<input> 'change' event submits the form", ({window,document,assert}) => {
+
+    const form  = document.getElementById("form-1")
+    const input = document.getElementById("input-1")
+
+    let submitted = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    const event = new window.Event("change",{})
+    input.dispatchEvent(event)
+    assert(submitted)
+  }).test("<select> 'input' event does not submit the form", ({window,document,assert}) => {
+
+    const form   = document.getElementById("form-1")
+    const select = form.querySelector("select")
+
+    let submitted = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    const event = new window.Event("input",{})
+    select.dispatchEvent(event)
+    assert(!submitted)
+  }).test("<textarea> 'input' event does not submit the form", ({window,document,assert}) => {
+
+    const form     = document.getElementById("form-1")
+    const textarea = form.querySelector("textarea")
+
+    let submitted = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    const event = new window.Event("input",{})
+    textarea.dispatchEvent(event)
+    assert(!submitted)
+  }).test("<input> 'input' event does not submit the form", ({window,document,assert}) => {
+
+    const form  = document.getElementById("form-1")
+    const input = document.getElementById("input-1")
+
+    let submitted = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    const event = new window.Event("input",{})
+    input.dispatchEvent(event)
+    assert(!submitted)
+  }).test("'change' event for element related to another form does nothing", ({window,document,assert}) => {
+
+    const form1 = document.getElementById("form-1")
+    const form2 = document.getElementById("form-1")
+    const input = document.getElementById("input-2")
+
+    let submitted1 = false
+    let submitted2 = false
+
+    form1.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted1 = true
+    })
+    form2.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted2 = true
+    })
+    const event = new window.Event("input",{})
+    input.dispatchEvent(event)
+    assert(!submitted1)
+    assert(!submitted2)
+  })
+})

package/specs/ConfirmSubmit.spec.js

@@ -0,0 +1,193 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-confirm-submit>", () => {
+  describe("without an explicit dialog", () => {
+    withHTML(`
+    <form>
+      <input type="text" name="text">
+      <brut-confirm-submit message='You sure?'>
+        <button>Save</button>
+        <input type="submit" value="Submit">
+      </brut-confirm-submit>
+    </form>
+    `).test("uses window.confirm and cancels the click on Cancel", ({window,document,assert}) => {
+      const form   = document.querySelector("form")
+      const button = document.querySelector("button")
+
+      let submitted = false
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        submitted = true
+      })
+
+      let shown        = false
+      let messageShown = null
+
+      window.confirm = (message) => {
+        shown = true
+        messageShown = message
+        return false // "Cancel"
+      }
+
+      button.click()
+      assert(shown)
+      assert.equal(messageShown,"You sure?")
+      assert(!submitted)
+    }).test("uses window.confirm and allows the click on OK", ({window,document,assert}) => {
+      const form   = document.querySelector("form")
+      const button = document.querySelector("button")
+
+      let submitted = false
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        submitted = true
+      })
+
+      let shown        = false
+      let messageShown = null
+
+      window.confirm = (message) => {
+        shown = true
+        messageShown = message
+        return true // "OK"
+      }
+
+
+      button.click()
+      assert(shown)
+      assert.equal(messageShown,"You sure?")
+      assert(submitted)
+    }).test("uses window.confirm on submit button", ({window,document,assert}) => {
+      const form   = document.querySelector("form")
+      const button = document.querySelector("input[type=submit]")
+
+      let submitted = false
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        submitted = true
+      })
+
+      let shown        = false
+      let messageShown = null
+
+      window.confirm = (message) => {
+        shown = true
+        messageShown = message
+        return true // "OK"
+      }
+
+
+      button.click()
+      assert(shown)
+      assert.equal(messageShown,"You sure?")
+      assert(submitted)
+    })
+  })
+  describe("with an implicit dialog", () => {
+    withHTML(`
+    <form>
+      <input type="text" name="text">
+      <brut-confirm-submit message='You sure?' show-warnings>
+        <button>Save</button>
+        <input type="submit" value="Submit">
+      </brut-confirm-submit>
+    </form>
+    <brut-confirmation-dialog>
+      <dialog>
+        <h1></h1>
+        <button value="ok">OK</button>
+        <button value="cancel">Cancel</button>
+      </dialog>
+    </brut-confirmation-dialog>
+    `).test("uses the dialog and cancels the click on Cancel", ({window,document,assert}) => {
+      const form   = document.querySelector("form")
+      const button = document.querySelector("button")
+      const dialog = document.querySelector("dialog")
+
+      let submitted = false
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        submitted = true
+      })
+
+      button.click()
+
+      assert(dialog.open)
+      const message = dialog.querySelector("h1").textContent
+      assert.equal(message,"You sure?")
+
+      const cancel = dialog.querySelector("button[value=cancel]")
+      cancel.click()
+
+      assert(!submitted)
+    }).test("uses the dialog and submits the click on OK", ({window,document,assert}) => {
+      const form   = document.querySelector("form")
+      const button = document.querySelector("button")
+      const dialog = document.querySelector("dialog")
+
+      let submitted = false
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        submitted = true
+      })
+
+      button.click()
+
+      assert(dialog.open)
+      const message = dialog.querySelector("h1").textContent
+      assert.equal("You sure?",message)
+
+      const ok = dialog.querySelector("button[value=ok]")
+      assert.equal(ok.textContent,button.textContent)
+      ok.click()
+      assert(submitted)
+    })
+  })
+  describe("with multiple dialogs", () => {
+    withHTML(`
+    <form>
+      <input type="text" name="text">
+      <brut-confirm-submit message='You sure?' dialog="dialog-2" show-warnings>
+        <button>Save</button>
+        <input type="submit" value="Submit">
+      </brut-confirm-submit>
+    </form>
+    <brut-confirmation-dialog id="dialog-1">
+      <dialog>
+        <h1></h1>
+        <button value="ok">OK</button>
+        <button value="cancel">Cancel</button>
+      </dialog>
+    </brut-confirmation-dialog>
+    <brut-confirmation-dialog id="dialog-2">
+      <dialog>
+        <h1></h1>
+        <button value="ok">OK</button>
+        <button value="cancel">Cancel</button>
+      </dialog>
+    </brut-confirmation-dialog>
+    `).test("click event uses the identified dialog", ({window,document,assert}) => {
+      const form   = document.querySelector("form")
+      const button = form.querySelector("button")
+      const dialog = document.getElementById("dialog-2").querySelector("dialog")
+
+      let submitted = false
+      form.addEventListener("submit", (event) => {
+        event.preventDefault()
+        submitted = true
+      })
+
+      button.click()
+
+      assert(dialog.open)
+
+      const message = dialog.querySelector("h1").textContent
+      assert.equal("You sure?",message)
+
+      const ok = dialog.querySelector("button[value=ok]")
+      assert.equal(ok.textContent,button.textContent)
+      ok.click()
+      assert(submitted)
+    })
+  })
+})

package/specs/ConstraintViolationMessage.spec.js

@@ -0,0 +1,33 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-constraint-violation-message>", () => {
+  withHTML(`
+    <brut-i18n-translation key="problem" value="%{field} has a problem"></brut-i18n-translation>
+
+    <brut-constraint-violation-message input-name="some-field" key="problem"></brut-constraint-violation-message>
+  `).test("Inserts using 'this field' as the placeholder", ({document,assert}) => {
+    const element = document.querySelector("brut-constraint-violation-message")
+    assert.equal(element.textContent,"This field has a problem")
+  })
+
+  withHTML(`
+    <brut-i18n-translation key="problem"               value="%{field} has a problem"></brut-i18n-translation>
+    <brut-i18n-translation key="general.cv.this_field" value="THAT FIELD"></brut-i18n-translation>
+
+    <brut-constraint-violation-message input-name="some-field" key="problem"></brut-constraint-violation-message>
+  `).test("Inserts using the this_field key as the placeholder", ({document,assert}) => {
+    const element = document.querySelector("brut-constraint-violation-message")
+    assert.equal(element.textContent,"THAT FIELD has a problem")
+  })
+
+  withHTML(`
+    <brut-i18n-translation key="problem"                             value="%{field} has a problem"></brut-i18n-translation>
+    <brut-i18n-translation key="general.cv.this_field"               value="THAT FIELD"></brut-i18n-translation>
+    <brut-i18n-translation key="general.cv.fe.fieldNames.some-field" value="Some Field"></brut-i18n-translation>
+
+    <brut-constraint-violation-message input-name="some-field" key="problem"></brut-constraint-violation-message>
+  `).test("Inserts using the this_field key as the placeholder", ({document,assert}) => {
+    const element = document.querySelector("brut-constraint-violation-message")
+    assert.equal(element.textContent,"Some Field has a problem")
+  })
+})

package/specs/ConstraintViolationMessages.spec.js

@@ -0,0 +1,27 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-constraint-violation-messages>", () => {
+  withHTML(`
+    <brut-i18n-translation key="general.cv.fe.patternMismatch" value="%{field} does not match the pattern"></brut-i18n-translation>
+    <brut-i18n-translation key="general.cv.fe.rangeOverflow" value="%{field} is above the range"></brut-i18n-translation>
+
+    <brut-constraint-violation-messages input-name="some-field"></brut-constraint-violation-messages>
+  `).test("Inserts constraint violation messages based on validity state", ({document,assert}) => {
+    const element = document.querySelector("brut-constraint-violation-messages")
+
+    const validityState = {
+      patternMismatch: true,
+      rangeOverflow: true,
+    }
+    const inputName = "some-field"
+
+    element.createMessages({validityState,inputName})
+
+    assert.match(element.textContent,new RegExp("This field does not match the pattern","m"))
+    assert.match(element.textContent,new RegExp("This field is above the range","m"))
+
+    element.clearMessages()
+    assert.equal(element.textContent,"")
+  })
+
+})