brut-js 0.0.1

package/specs/Form.spec.js

@@ -0,0 +1,136 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-form>", () => {
+  withHTML(`
+    <brut-form>
+      <form>
+        <label>
+          <input required type="text" name="text">
+          <brut-constraint-violation-messages>
+          </brut-constraint-violation-messages>
+        </label>
+        <label>
+          <input required type="number" name="number">
+          <brut-constraint-violation-messages>
+          </brut-constraint-violation-messages>
+        </label>
+        <input type="submit">Save</input>
+        <brut-ajax-submit>
+          <button>Save Ajaxily</button>
+        </brut-ajax-submit>
+      </form>
+    </brut-form>
+  `).test("sets data-submitted on submit with invalid form + updates messages", ({window,document,assert}) => {
+
+    const brutForm         = document.querySelector("brut-form")
+    const form             = brutForm.querySelector("form")
+    const button           = form.querySelector("input[type=submit]")
+    const textFieldLabel   = form.querySelector("label:has(input[type=text])")
+    const numberFieldLabel = form.querySelector("label:has(input[type=number])")
+
+    let submitted  = false
+    let gotInvalid = false
+    let gotValid   = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    brutForm.addEventListener("brut:valid", () => {
+      gotValid = true
+    })
+    brutForm.addEventListener("brut:invalid", () => {
+      gotInvalid = true
+    })
+
+    button.click()
+
+    assert(!submitted)
+    assert(!gotValid)
+    assert(gotInvalid)
+    assert(form.dataset["submitted"] != null)
+
+    let error = textFieldLabel.querySelector("brut-constraint-violation-message[key='general.cv.fe.valueMissing']")
+    assert(error)
+    error = numberFieldLabel.querySelector("brut-constraint-violation-message[key='general.cv.fe.valueMissing']")
+    assert(error)
+
+    const textField = textFieldLabel.querySelector("input")
+    textField.value = "Some Value"
+    textField.dispatchEvent(new window.Event("input"))
+
+    submitted       = false
+    gotInvalid      = false
+    gotValid        = false
+
+    button.click()
+
+    assert(!submitted)
+    assert(!gotValid)
+    assert(gotInvalid)
+    assert(form.dataset["submitted"] != null)
+
+    error = textFieldLabel.querySelector("brut-constraint-violation-message[key='general.cv.fe.valueMissing']")
+    assert(!error)
+    error = numberFieldLabel.querySelector("brut-constraint-violation-message[key='general.cv.fe.valueMissing']")
+    assert(error)
+
+    const numberField = numberFieldLabel.querySelector("input")
+    numberField.value = "99"
+    numberField.dispatchEvent(new window.Event("input"))
+
+    submitted       = false
+    gotInvalid      = false
+    gotValid        = false
+
+    button.click()
+
+    assert(submitted)
+  }).test("Works with ajax submissions to keep errors consistent", ({window,document,assert}) => {
+
+    const brutForm         = document.querySelector("brut-form")
+    const form             = brutForm.querySelector("form")
+    const ajaxSubmit       = form.querySelector("brut-ajax-submit")
+    const textFieldLabel   = form.querySelector("label:has(input[type=text])")
+    const numberFieldLabel = form.querySelector("label:has(input[type=number])")
+
+    const textField = textFieldLabel.querySelector("input")
+    textField.value = "Some Value"
+    textField.dispatchEvent(new window.Event("input"))
+
+    const numberField = numberFieldLabel.querySelector("input")
+    numberField.value = "99"
+    numberField.dispatchEvent(new window.Event("input"))
+
+    let submitted  = false
+    let gotInvalid = false
+    let gotValid   = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    brutForm.addEventListener("brut:valid", () => {
+      gotValid = true
+    })
+    brutForm.addEventListener("brut:invalid", () => {
+      gotInvalid = true
+    })
+
+    ajaxSubmit.dispatchEvent(new window.Event("brut:submitinvalid"))
+
+    assert(!submitted)
+    assert(!gotValid)
+    assert(gotInvalid)
+
+    submitted  = false
+    gotInvalid = false
+    gotValid   = false
+
+    ajaxSubmit.dispatchEvent(new window.Event("brut:submitok"))
+
+    assert(!submitted)
+    assert(gotValid)
+    assert(!gotInvalid)
+  })
+})

package/specs/I18nTranslation.spec.js

@@ -0,0 +1,19 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-i18n-translation>", () => {
+  withHTML(`
+    <brut-i18n-translation key="greeting" value="Hello %{username}"></brut-i18n-translation>
+  `).test("Produces a translation", ({document,assert}) => {
+    const element = document.querySelector("brut-i18n-translation")
+    const translation = element.translation({username: "Pat"})
+    assert.equal(translation,"Hello Pat")
+  }).test("Ignores replacements not in the translation", ({document,assert}) => {
+    const element = document.querySelector("brut-i18n-translation")
+    const translation = element.translation({username: "Pat", email: "pat@example.com"})
+    assert.equal(translation,"Hello Pat")
+  }).test("Missing replacements raise an error", ({document,assert}) => {
+    const element = document.querySelector("brut-i18n-translation")
+    const code = () => { element.translation() }
+    assert.throws(code,/reading 'username'/)
+  })
+})

package/specs/LocaleDetection.spec.js

@@ -0,0 +1,22 @@
+import { withHTML, readRequestBodyIntoJSON } from "../src/testing/index.js"
+
+describe("<brut-locale-detection>", () => {
+  withHTML(`
+    <brut-locale-detection timeout-before-ping-ms="0" url="http://example.net/locale"></brut-locale-detection>
+  `).onFetch( "/locale", [
+    { then: { status: 200 }},
+  ]
+  ).test("Receives the locale and timeZone from the browser", ({document,assert,fetchRequests}) => {
+
+    assert.equal(1,fetchRequests.length)
+    return readRequestBodyIntoJSON(fetchRequests[0]).then( (json) => {
+      assert.equal(json["locale"],"en-US")
+      assert.equal(json["timeZone"],"UTC")
+    })
+  })
+  withHTML(`
+    <brut-locale-detection locale-from-server="en-US" timezone-from-server="UTC" timeout-before-ping-ms="0" url="http://example.net/locale"></brut-locale-detection>
+  `).test("makes no calls to fetch", ({document,assert,fetchRequests}) => {
+    assert.equal(fetchRequests.length,0)
+  })
+})

package/specs/Message.spec.js

@@ -0,0 +1,15 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-message>", () => {
+  withHTML(`
+    <brut-i18n-translation key="greeting" value="Hello Everyone!"></brut-i18n-translation>
+    <brut-message key="greeting"></brut-message>
+    <brut-message key="non-existent"></brut-message>
+  `).test("Inserts the translation", ({document,assert}) => {
+    const element = document.querySelector("brut-message[key=greeting]")
+    assert.equal(element.textContent,"Hello Everyone!")
+  }).test("Does nothing if the key is not found", ({document,assert}) => {
+    const element = document.querySelector("brut-message[key=non-existent]")
+    assert.equal(element.textContent,"")
+  })
+})

package/specs/Tabs.spec.js

@@ -0,0 +1,41 @@
+import { withHTML } from "../src/testing/index.js"
+
+describe("<brut-tabs>", () => {
+  withHTML(`
+ <brut-tabs tab-selection-pushes-and-restores-state>
+   <a role="tab" aria-selected="true"  tabindex="0"  aria-controls="inbox-panel"  id="inbox-tab"
+      href="?tab=inbox">Inbox</a>
+   <a role="tab" aria-selected="false" tabindex="-1" aria-controls="drafts-panel" id="drafts-tab"
+      href="?tab=drafts">Drafts</a>
+   <a role="tab" aria-selected="false" tabindex="-1" aria-controls="spam-panel"   id="spam-tab"
+      href="?tab=spam">Spam</a>
+ </brut-tabs>
+ <section role="tabpanel" tabindex="0"  id="inbox-panel">
+   <h3>Inbox</h3>
+ </section>
+ <section role="tabpanel" tabindex="0" id="drafts-panel" hidden>
+   <h3>Drafts</h3>
+ </section>
+ <section role="tabpanel" tabindex="0" id="spam-panel"   hidden>
+   <h3>Spam</h3>
+ </section>
+  `).test("Clicking on a tab sets all attributes properly", ({document,window,assert}) => {
+
+    const selectedTab         = document.querySelector("[role=tab][aria-selected=true]")
+    const selectedTabPanel    = document.getElementById(selectedTab.getAttribute("aria-controls"))
+
+    const unselectedTab       = document.querySelector("[role=tab][aria-selected=false]")
+    const unselectedTabPanel  = document.getElementById(unselectedTab.getAttribute("aria-controls"))
+
+    unselectedTab.click()
+
+    assert.equal(selectedTab.getAttribute("aria-selected"),"false")
+    assert.equal(selectedTab.getAttribute("tabindex"),"-1")
+    assert(selectedTabPanel.getAttribute("hidden") != null)
+
+    assert.equal(unselectedTab.getAttribute("aria-selected"),"true")
+    assert.equal(unselectedTab.getAttribute("tabindex"),"0")
+    assert(unselectedTabPanel.getAttribute("hidden") == null)
+    assert.equal(window.history.state["tabId"],unselectedTab.getAttribute("id"))
+  })
+})

package/specs/config/asset_metadata.json

@@ -0,0 +1,7 @@
+{
+  "asset_metadata": {
+    ".js": {
+      "/js/bundle.js":"/js/bundle.js"
+    }
+  }
+}