brut 0.17.0 → 0.18.0

data/brut-js/specs/ConfirmSubmit.spec.js

@@ -1,224 +0,0 @@
-import { withHTML } from "./SpecHelper.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" required minlength="3" value="abcd">
-      </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)
-    })
-    withHTML(`
-    <form>
-      <input type="text" name="text" required minlength="3">
-      <brut-confirm-submit message='You sure?'>
-        <button>Save</button>
-        <input type="submit" value="Submit">
-      </brut-confirm-submit>
-    </form>
-    `).test("Does not show if form is invalid", ({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(!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)
-    })
-  })
-})

data/brut-js/specs/ConstraintViolationMessage.spec.js

@@ -1,33 +0,0 @@
-import { withHTML } from "./SpecHelper.js"
-
-describe("<brut-cv>", () => {
-  withHTML(`
-    <brut-i18n-translation key="problem" value="%{field} has a problem"></brut-i18n-translation>
-
-    <brut-cv input-name="some-field" key="problem"></brut-cv>
-  `).test("Inserts using 'this field' as the placeholder", ({document,assert}) => {
-    const element = document.querySelector("brut-cv")
-    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="cv.this_field" value="THAT FIELD"></brut-i18n-translation>
-
-    <brut-cv input-name="some-field" key="problem"></brut-cv>
-  `).test("Inserts using the this_field key as the placeholder", ({document,assert}) => {
-    const element = document.querySelector("brut-cv")
-    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="cv.this_field"               value="THAT FIELD"></brut-i18n-translation>
-    <brut-i18n-translation key="cv.cs.fieldNames.some-field" value="Some Field"></brut-i18n-translation>
-
-    <brut-cv input-name="some-field" key="problem"></brut-cv>
-  `).test("Inserts using the this_field key as the placeholder", ({document,assert}) => {
-    const element = document.querySelector("brut-cv")
-    assert.equal(element.textContent,"Some Field has a problem")
-  })
-})

data/brut-js/specs/ConstraintViolationMessages.spec.js

@@ -1,32 +0,0 @@
-import { withHTML } from "./SpecHelper.js"
-
-describe("<brut-cv-messages>", () => {
-  withHTML(`
-    <brut-i18n-translation key="cv.cs.patternMismatch" value="%{field} does not match the pattern"></brut-i18n-translation>
-    <brut-i18n-translation key="cv.cs.rangeOverflow" value="%{field} is above the range"></brut-i18n-translation>
-
-    <brut-cv-messages input-name="some-field"></brut-cv-messages>
-  `).test("Inserts constraint violation messages based on validity state", ({document,assert}) => {
-    const element = document.querySelector("brut-cv-messages")
-
-    const validityState = {
-      patternMismatch: true,
-      rangeOverflow: true,
-      customError: true,
-    }
-    const inputName = "some-field"
-
-    element.createMessages({validityState,inputName})
-
-    const brutCvElements = element.querySelectorAll("brut-cv")
-    assert.equal(brutCvElements.length, 2)
-    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"))
-    assert.equal(brutCvElements[0].getAttribute("client-side"),"")
-    assert.equal(brutCvElements[1].getAttribute("client-side"),"")
-
-    element.clearClientSideMessages()
-    assert.equal(element.textContent,"")
-  })
-
-})

data/brut-js/specs/CopyToClipboard.spec.js

@@ -1,35 +0,0 @@
-import { withHTML } from "./SpecHelper.js"
-
-class FakeClipboard {
-  constructor() {
-    this.resolver = null
-    this.writeTextPromise = new Promise( (resolve) => {
-      this.resolver = resolve
-    })
-  }
-  writeText(text) {
-    this.text = text
-    return this.writeTextPromise
-  }
-}
-describe("<brut-copy-to-clipboard>", () => {
-  withHTML(`
-  <pre><code id="code">dx/exec bin/setup</code></pre>
-  <brut-copy-to-clipboard element="code" show-warnings="code">
-    <button>Copy</button>
-  </brut-copy-to-clipboard>
-  `).test("clicking the button copies it to the clipboard", ({window,document,assert}) => {
-
-    const button = document.querySelector("button")
-    const code   = document.getElementById("code")
-
-    const clipboard = new FakeClipboard()
-    window.navigator.clipboard = clipboard
-
-    button.click()
-    clipboard.resolver()
-    return clipboard.writeTextPromise.then( () => {
-      assert.equal(code.textContent,clipboard.text)
-    })
-  })
-})

data/brut-js/specs/Form.spec.js

@@ -1,137 +0,0 @@
-import { withHTML } from "./SpecHelper.js"
-
-describe("<brut-form>", () => {
-  withHTML(`
-    <brut-form>
-      <form>
-        <label>
-          <input required type="text" name="text">
-          <brut-cv-messages input-name="text">
-          </brut-cv-messages>
-        </label>
-        <label>
-          <input required type="number" name="number">
-          <brut-cv-messages input-name="number">
-          </brut-cv-messages>
-        </label>
-        <input type="submit">Save</input>
-        <brut-ajax-submit>
-          <button>Save Ajaxily</button>
-        </brut-ajax-submit>
-      </form>
-    </brut-form>
-  `).test("sets submitted-invalid 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
-    })
-    assert.equal(brutForm.getAttribute("submitted-invalid"),null)
-
-    button.click()
-
-    assert(!submitted)
-    assert(!gotValid)
-    assert(gotInvalid)
-    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
-
-    let error = textFieldLabel.querySelector("brut-cv[key='cv.cs.valueMissing']")
-    assert(error)
-    error = numberFieldLabel.querySelector("brut-cv[key='cv.cs.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.equal(brutForm.getAttribute("submitted-invalid"),"")
-
-    error = textFieldLabel.querySelector("brut-cv[key='cv.cs.valueMissing']")
-    assert(!error)
-    error = numberFieldLabel.querySelector("brut-cv[key='cv.cs.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)
-  })
-})

data/brut-js/specs/I18nTranslation.spec.js

@@ -1,19 +0,0 @@
-import { withHTML } from "./SpecHelper.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'/)
-  })
-})

data/brut-js/specs/LocaleDetection.spec.js

@@ -1,22 +0,0 @@
-import { withHTML } from "./SpecHelper.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,readRequestBodyIntoJSON}) => {
-
-    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)
-  })
-})

data/brut-js/specs/Message.spec.js

@@ -1,15 +0,0 @@
-import { withHTML } from "./SpecHelper.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,"")
-  })
-})

data/brut-js/specs/SpecHelper.js

@@ -1,23 +0,0 @@
-import { createTestBasedOnHTML } from "../src/testing/index.js"
-
-import path from "node:path"
-import fs from "node:fs"
-
-const __dirname = import.meta.dirname
-
-const appRoot = path.resolve(__dirname)
-const publicRoot = path.resolve(appRoot,"public")
-const assetMetadataFilePath = path.resolve(appRoot,"config","asset_metadata.json")
-const assetMetadata = JSON.parse(fs.readFileSync(assetMetadataFilePath))
-
-const withHTML = (html) => {
-  return createTestBasedOnHTML({
-    html,
-    assetMetadata,
-    publicRoot
-  })
-}
-
-export {
-  withHTML,
-}

data/brut-js/specs/Tabs.spec.js

@@ -1,41 +0,0 @@
-import { withHTML } from "./SpecHelper.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"))
-  })
-})

data/brut-js/specs/Toast.spec.js

@@ -1,34 +0,0 @@
-import { withHTML } from "./SpecHelper.js"
-
-describe("<brut-toast>", () => {
-  withHTML(`
-    <div>
-     <brut-i18n-translation key="toast.saved" value="Save successful"></brut-i18n-translation>
-     <brut-toast show-warnings>
-       <div>
-         <output><span>Message here</span></output>
-         <button>Close</button>
-       </div>
-       <button>Close</button>
-     </brut-toast>
-   </div>
-  `).test("setting the key shows the message, then it's removed when closed", ({window,document,assert}) => {
-
-    const toast = document.querySelector("brut-toast")
-    assert(toast, "brut-toast element should be present")
-
-    toast.setAttribute("key", "toast.saved")
-    const output = toast.querySelector("output")
-    assert.equal(output.textContent.trim(), "Save successful")
-    const message = output.querySelector("brut-message")
-    assert(message, "brut-message should be present")
-    console.log(message.outerHTML)
-    assert.equal(message.getAttribute("role"), "status")
-    assert.equal(message.getAttribute("aria-live"), "polite")
-    assert.equal(message.getAttribute("aria-atomic"), "true")
-
-    const button = toast.querySelector("button")
-    button.click()
-    assert.equal(toast.getAttribute("key"), null)
-  })
-})

data/brut-js/specs/config/asset_metadata.json

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