brut-js 0.0.2 → 0.0.5

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "brut-js",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "type": "module",
   "keywords": [ "WebComponents", "Custom Elements" ],
   "bugs": {
     "url": "https://github.com/thirdtank/brut-js/issues",
     "email": "davec@naildrivin5.com"
   },
-  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./testing": "./src/testing/index.js"
+  },
   "repository": "https://github.com/thirdtank/brut-js",
   "author": {
     "name": "David Copeland",

package/specs/AjaxSubmit.spec.js

@@ -1,4 +1,4 @@
-import { withHTML, readRequestBodyIntoString, waitForSetTimeout } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-ajax-submit>", () => {
   withHTML(`
@@ -12,7 +12,9 @@ describe("<brut-ajax-submit>", () => {
   `).onFetch( "/foo", [
     { then: { status: 200 }},
   ]
-  ).test("submits the form, setting various attributes during the lifecycle", ({document,assert,fetchRequests}) => {
+  ).test("submits the form, setting various attributes during the lifecycle", 
+         ({document,assert,fetchRequests,waitForSetTimeout,readRequestBodyIntoString}) => {
+
     const element = document.querySelector("brut-ajax-submit")
     const button  = element.querySelector("button")
     const text    = document.querySelector("input[name=some-text]")
@@ -80,7 +82,8 @@ describe("<brut-ajax-submit>", () => {
     { then: { status: 500 }},
     { then: { status: 200 }},
   ]
-  ).test("submits the form after a retry", ({document,assert,fetchRequests}) => {
+  ).test("submits the form after a retry",
+        ({document,assert,fetchRequests,waitForSetTimeout,readRequestBodyIntoString}) => {
     const element = document.querySelector("brut-ajax-submit")
     const button  = element.querySelector("button")
     const text    = document.querySelector("input[name=some-text]")
@@ -124,7 +127,7 @@ describe("<brut-ajax-submit>", () => {
     { then: { status: 500 }},
     { then: { status: 500 }},
   ]
-  ).test("when too many failures, submits the form the old-fashioned way", ({document,assert,fetchRequests}) => {
+  ).test("when too many failures, submits the form the old-fashioned way", ({document,assert,fetchRequests, waitForSetTimeout}) => {
     const form    = document.querySelector("form")
     const element = form.querySelector("brut-ajax-submit")
     const button  = element.querySelector("button")
@@ -195,7 +198,7 @@ Error that should be ignored
       }
     },
   ]
-  ).test("when we get a 422, parses the result from the server", ({document,window,assert,fetchRequests}) => {
+  ).test("when we get a 422, parses the result from the server", ({document,window,assert,fetchRequests,waitForSetTimeout}) => {
     const form    = document.querySelector("form")
     const element = form.querySelector("brut-ajax-submit")
     const button  = element.querySelector("button")

package/specs/Autosubmit.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-autosubmit>", () => {
   withHTML(`

package/specs/ConfirmSubmit.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-confirm-submit>", () => {
   describe("without an explicit dialog", () => {

package/specs/ConstraintViolationMessage.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-constraint-violation-message>", () => {
   withHTML(`

package/specs/ConstraintViolationMessages.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-constraint-violation-messages>", () => {
   withHTML(`

package/specs/Form.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-form>", () => {
   withHTML(`
@@ -133,4 +133,48 @@ describe("<brut-form>", () => {
     assert(gotValid)
     assert(!gotInvalid)
   })
+  withHTML(`
+    <brut-form>
+      <form>
+        <label>
+          <input required type="text" name="text">
+        </label>
+        <brut-constraint-violation-messages input-name='text'>
+        </brut-constraint-violation-messages>
+        <input type="submit">Save</input>
+      </form>
+    </brut-form>
+  `).test("locates the messages for errors based on name", ({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])")
+
+    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 = brutForm.querySelector("brut-constraint-violation-message[input-name='text'][key='general.cv.fe.valueMissing']")
+    assert(error)
+
+  })
 })

package/specs/I18nTranslation.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-i18n-translation>", () => {
   withHTML(`

package/specs/LocaleDetection.spec.js

@@ -1,4 +1,4 @@
-import { withHTML, readRequestBodyIntoJSON } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-locale-detection>", () => {
   withHTML(`
@@ -6,7 +6,7 @@ describe("<brut-locale-detection>", () => {
   `).onFetch( "/locale", [
     { then: { status: 200 }},
   ]
-  ).test("Receives the locale and timeZone from the browser", ({document,assert,fetchRequests}) => {
+  ).test("Receives the locale and timeZone from the browser", ({document,assert,fetchRequests,readRequestBodyIntoJSON}) => {
 
     assert.equal(1,fetchRequests.length)
     return readRequestBodyIntoJSON(fetchRequests[0]).then( (json) => {

package/specs/Message.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-message>", () => {
   withHTML(`

package/specs/SpecHelper.js

@@ -0,0 +1,23 @@
+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,
+}

package/specs/Tabs.spec.js

@@ -1,4 +1,4 @@
-import { withHTML } from "../src/testing/index.js"
+import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-tabs>", () => {
   withHTML(`

package/specs/public/js/bundle.js

@@ -978,9 +978,24 @@
     #updateErrorMessages(event) {
       const element = event.target;
       const selector = `${ConstraintViolationMessages_default.tagName}:not([server-side])`;
-      const errorLabels = element.parentNode.querySelectorAll(selector);
+      let errorLabels = element.parentNode.querySelectorAll(selector);
+      if (errorLabels.length == 0) {
+        if (element.name && element.form) {
+          const moreGeneralSelector = `${ConstraintViolationMessages_default.tagName}[input-name='${element.name}']:not([server-side])`;
+          errorLabels = element.form.querySelectorAll(moreGeneralSelector);
+          if (errorLabels.length == 0) {
+            this.logger.warn(`Did not find any elements matching ${selector} or ${moreGeneralSelector}, so no error messages will be shown`);
+          }
+        } else {
+          this.logger.warn(
+            "Did not find any elements matching %s and the form element has %s %s",
+            selector,
+            element.name ? "no name" : "a name, but",
+            element.form ? "no form" : "though has a form"
+          );
+        }
+      }
       if (errorLabels.length == 0) {
-        this.logger.warn(`Did not find any elements matching ${selector}, so no error messages will be shown`);
         return;
       }
       let anyErrors = false;