Add fieldset/fieldset-validation-element and tests

Author: tcannonfodder

package.json

@@ -14,6 +14,7 @@
     "./plugins/mrujs": "./src/plugins/mrujs.js",
     "./utils": "./src/util.js",
     "./fieldset/rendering": "./src/fieldset/rendering.js",
+    "./fieldset/fieldset-validation-element": "./src/fieldset/fieldset-validation-element.js",
     "./fieldset/util": "./src/fieldset/util.js"
   },
   "scripts": {

src/fieldset/fieldset-validation-element.js

@@ -0,0 +1,68 @@
+import { cloneNodesObserver } from '../util.js'
+import { getErrorListFromContainer, getErrorContainer } from '../error-containers.js'
+
+/**
+ * @class
+ * @classdesc
+ * An abstract class that can be subclassed to provide specific validation
+ * scenarios for a fieldset. For example: {@link MinimumCheckboxValuesFieldsetValidationElement}
+ * is a subclass that validates that at least one value for the field name specified in
+ * this element is present in the `FormData`
+ */
+export class FieldsetValidationElement extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    if(!this.isConnected){ return }
+    this.setupErrorListCloning()
+  }
+
+  /**
+   * Calls {@link cloneNodesObserver} to
+   * clone {@link FieldsetValidationElement#errorContainer} into
+   * {@link FieldsetValidationElement#errorContainerARIA} and keep them in sync.
+   */
+  setupErrorListCloning() {
+    cloneNodesObserver(
+      getErrorListFromContainer(this.errorContainer),
+      getErrorListFromContainer(this.errorContainerARIA)
+    )
+  }
+
+  /**
+   * The `form` of the {@link FieldsetValidationElement#fieldset}
+   */
+  get form() {
+    return this.fieldset.form
+  }
+
+  /**
+   * The element with the ID from the `fieldset` attribute
+   */
+  get fieldset() {
+    return document.getElementById(this.getAttribute(`fieldset`))
+  }
+
+  /**
+   * The `field-name` attribute`
+   */
+  get fieldName() {
+    return this.getAttribute(`field-name`)
+  }
+
+  /**
+   * See {@link getErrorContainer}, uses {@link FieldsetValidationElement#fieldset}
+   */
+  get errorContainer(){
+    return getErrorContainer(this.fieldset);
+  }
+
+  /**
+   * The element with the ID from the `error-container-aria` attribute
+   */
+  get errorContainerARIA(){
+    return document.getElementById(this.getAttribute(`error-container-aria`))
+  }
+}

test/fieldset/fieldset-validation-element.test.js

@@ -0,0 +1,59 @@
+import { html, fixture, assert } from '@open-wc/testing';
+
+import {FieldsetValidationElement} from '@practical-computer/error-handling/fieldset/fieldset-validation-element'
+
+class CustomFieldsetValidationElement extends FieldsetValidationElement {
+  get customProperty() {
+    return "hello"
+  }
+}
+
+if (!window.customElements.get('custom-fieldset-validation')) {
+  window.customElements.define('custom-fieldset-validation', CustomFieldsetValidationElement);
+}
+
+suite('ErrorHandlingElement', async () => {
+  test(`can subclassed`, async() => {
+    const container = await fixture(html`
+      <div>
+        <form id="test-form" aria-describedby='test-form-error-container'>
+          <fieldset id="terms-fieldset" aria-describedby="terms-fieldset-errors">
+            <legend>
+              Terms
+
+              <section id="terms-fieldset-errors-aria">
+                <ul></ul>
+              </section>
+
+            </legend>
+
+            <custom-fieldset-validation fieldset="terms-fieldset" field-name="terms" error-container-aria="terms-fieldset-errors-aria">
+              <input type="checkbox" name="privacy" required>
+              <input type="checkbox" name="service" required>
+            </custom-fieldset-validation>
+
+            <section id="terms-fieldset-errors" data-error-container>
+              <ul>
+                <li data-visible data-error-type="error_1">An ad-hoc error from the initial load</li>
+                <li data-visible data-error-type="error_2">Another ad-hoc error from the initial load</li>
+              </ul>
+            </section>
+          </fieldset>
+        </form>
+
+        <template id="pf-error-list-item-template">
+          <li><span>‼️</span> <span data-error-message></span></li>
+        </template>
+      </div>
+    `)
+
+    const element = container.querySelector(`custom-fieldset-validation`)
+
+    assert.equal(`terms`, element.fieldName)
+    assert.equal(`test-form`, element.form.id)
+    assert.equal(`terms-fieldset`, element.fieldset.id)
+    assert.equal(`terms-fieldset-errors`, element.errorContainer.id)
+    assert.equal(`terms-fieldset-errors-aria`, element.errorContainerARIA.id)
+    assert.equal(`hello`, element.customProperty)
+  })
+})

test/test-runner.test.js

@@ -9,4 +9,5 @@ import './request-processing.test.js';
 import './event-handlers.test.js';
 import './plugins/mrujs.test.js';
 import './fieldset/rendering.test.js';
+import './fieldset/fieldset-validation-element.test.js';
 import './fieldset/util.test.js';