Breaking: adding in async based step validation so it can be bound to an API (#15)

Author: haydenmcp

mtz-wizard-step-behavior.html

@@ -21,7 +21,7 @@
         type: Boolean,
         value: false,
         reflectToAttribute: true,
-        notify: true
+        notify: true,
       },
       /* Used to track the dirty state of the form, if there is one */
       dirty: {
@@ -45,7 +45,6 @@
       /* The validity state of the element */
       invalid: {
         type: Boolean,
-        readOnly: true,
         reflectToAttribute: true,
         notify: true,
         value: false
@@ -129,19 +128,21 @@
      */
     reset() {
       if (this.form) this.form.reset();
-      this._setInvalid(false);
+      this.invalid = false;
       this._setDirty(false);
     },
     /**
      * Validates all the required elements (custom and native) in the form, if one exists, and checks step validity.
+     * NOTE: this method is a promise so validation for the step in custom implementations can rely on async validation
+     *  via things like API services.
      *
-     * @return {Boolean}
+     * @return {Promise} - resolves with a Boolean that says if the wizard is valid or not
      */
     validate() {
       const validForm = !this.form || this.form.validate();
       const valid = !this.required || validForm;
-      this._setInvalid(!valid);
-      return valid;
+      this.invalid = !valid;
+      return Promise.resolve(valid);
     },
     /**
      * Sets the dirty state to true.

mtz-wizard-step-errors-behavior.html

@@ -24,11 +24,6 @@
        * @type {Object.<{step: String, field: String, code: String, message: String}>}
        */
       errors: Array,
-      /* The attribute to set to true when an element is in error state */
-      invalidAttribute: {
-        type: String,
-        value: 'invalid'
-      },
       /*  The attribute to key off of when doing the lookup for fields within the form */
       keyAttribute: {
         type: String,
@@ -64,16 +59,14 @@
     },
     /**
      * Looks up each element based on the keyAttr for the associated error then sets the error message based on
-     *  messageAttr and toggles on the invalidAttr flag.
+     *  messageAttr and toggles on the invalid flag.
      * @private
      *
      * @param {Object[]} errors
      * @param {String} [messageAttr = this.errorMessageAttribute] - the attribute to set the message on
-     * @param {String} [invalidAttr = this.invalidAttribute] - the attribute to toggle for invalid state
      * @param {String} [keyAttr = this.keyAttribute] - the attribute to lookup on
      */
-    __setErrorState(errors, messageAttr = this.errorMessageAttribute, invalidAttr = this.invalidAttribute,
-      keyAttr = this.keyAttribute) {
+    __setErrorState(errors, messageAttr = this.errorMessageAttribute, keyAttr = this.keyAttribute) {
       if (!errors) return;
 
       errors.forEach((error) => {
@@ -82,16 +75,19 @@
           const field = this.form.querySelector(`[${keyAttr}="${error.field}"]`);
           if (!field) return;
 
+          // Store the original state for later
           field.originalErrorMessage = field[messageAttr];
+          // Update our invalid state and associated messaging
           field[messageAttr] = error.message;
-          // Required to get the UI to update properly
           field.setAttribute(messageAttr, error.message);
-          field[invalidAttr] = true;
+          field.invalid = true;
+          field.setAttribute('invalid', '');
 
           field.addEventListener('invalid-changed', this.__revertErrorMessage);
         }
       });
       this.set('errors', null);
+      this.invalid = true;
     },
   }];
 </script>

mtz-wizard.html

@@ -31,6 +31,7 @@
         active: {
           type: Boolean,
           value: false,
+          reflectToAttribute: true,
         },
         /* The attribute to use to match the selection key against */
         attrForSelected: {
@@ -147,12 +148,19 @@
        * Runs the validation logic on all steps with a form bound to them.
        *
        * @param {HTMLElement[]} [steps = this.steps]
-       * @return {Boolean}
+       * @return {Promise} - resolves with a Boolean that says if the wizard is valid or not
        */
       validate(steps = this.steps) {
-        return (steps || []).reduce((prev, step) => {
-          return prev && (step.validate ? step.validate() : true);
-        }, true);
+        return Promise.all((steps || []).
+          map((step) => {
+            return Promise.resolve(!step.validate || step.validate());
+          })).
+          then((promises) => {
+            return promises.every(Boolean);
+          }).
+          catch(() => {
+            return false;
+          });
       },
       /**
        * Sets the fallback selection as the first item.

test/mtz-wizard-step_test.html

@@ -16,7 +16,6 @@
     <link rel="import" href="../demo/demo-shadow-form.html">
   </head>
   <body>
-
     <test-fixture id="basic">
       <template>
         <mtz-wizard-step></mtz-wizard-step>
@@ -114,7 +113,7 @@
         /* Public Methods */
         describe('reset()', () => {
           it('should set invalid to false', () => {
-            element._setInvalid(true);
+            element.invalid = true;
             expect(element.invalid).to.equal(true);
             element.reset();
             expect(element.invalid).to.equal(false);
@@ -139,13 +138,17 @@
         });
         describe('validate()', () => {
           it('should return true when no form and !required', () => {
-            expect(element.validate()).to.equal(true);
-            expect(element.invalid).to.equal(false);
+            return element.validate().then((valid) => {
+              expect(valid).to.be.true;
+              expect(element.invalid).to.be.false;
+            });
           });
           it('should return true when no form and required', () => {
             element.required = true;
-            expect(element.validate()).to.equal(true);
-            expect(element.invalid).to.equal(false);
+            return element.validate().then((valid) => {
+              expect(valid).to.be.true;
+              expect(element.invalid).to.be.false;
+            });
           });
 
           describe('when there is a form', () => {
@@ -162,12 +165,16 @@
 
               it('should return true when required', () => {
                 element.required = true;
-                expect(element.validate()).to.equal(true);
-                expect(element.invalid).to.equal(false);
+                return element.validate().then((valid) => {
+                  expect(valid).to.be.true;
+                  expect(element.invalid).to.be.false;
+                });
               });
               it('should return true when !required', () => {
-                expect(element.validate()).to.equal(true);
-                expect(element.invalid).to.equal(false);
+                return element.validate().then((valid) => {
+                  expect(valid).to.be.true;
+                  expect(element.invalid).to.be.false;
+                });
               });
             });
             describe('and form.validate() fails', () => {
@@ -177,12 +184,16 @@
 
               it('should return false when required', () => {
                 element.required = true;
-                expect(element.validate()).to.equal(false);
-                expect(element.invalid).to.equal(true);
+                return element.validate().then((valid) => {
+                  expect(valid).to.be.false;
+                  expect(element.invalid).to.be.true;
+                });
               });
               it('should return true when !required', () => {
-                expect(element.validate()).to.equal(true);
-                expect(element.invalid).to.equal(false);
+                return element.validate().then((valid) => {
+                  expect(valid).to.be.true;
+                  expect(element.invalid).to.be.false;
+                });
               });
             });
           });
@@ -229,7 +240,7 @@
             });
           });
         });
-        describe('__setErrorState(errors, messageAttr, invalidAttr, keyAttr)', () => {
+        describe('__setErrorState(errors, messageAttr, keyAttr)', () => {
           const badFieldError = {
             step: 'step',
             field: 'bad-field',
@@ -278,14 +289,18 @@
             element.__setErrorState([goodFieldError]);
             expect(input[element.errorMessageAttribute]).to.equal(goodFieldError.message);
           });
-          it('should set field[invalidAttr] to true', () => {
+          it('should set field.invalid to true', () => {
             element.__setErrorState([goodFieldError]);
-            expect(input[element.invalidAttribute]).to.be.true;
+            expect(input.invalid).to.be.true;
           });
           it('should bind an event listener for invalid-changed', () => {
             element.__setErrorState([goodFieldError]);
             expect(spy).calledWith('invalid-changed', element.__revertErrorMessage);
           });
+          it('should flag this step as invalid', () => {
+            element.__setErrorState([goodFieldError]);
+            expect(element.invalid).to.be.true;
+          });
         });
         describe('__updateDirty()', () => {
           it('should set dirty to true', () => {

test/mtz-wizard_test.html

@@ -223,12 +223,16 @@
               ];
             });
 
-            it('should return false if any step fails validation', () => {
-              expect(element.validate(steps)).to.equal(false);
+            it('should resolve false if any step fails validation', () => {
+              return element.validate(steps).then((valid) => {
+                expect(valid).to.be.false;
+              });
             });
-            it('should return true if all steps pass validation', () => {
-              steps[1].validate = () => true;
-              expect(element.validate(steps)).to.equal(true);
+            it('should resolve true if all steps pass validation', () => {
+              steps[1].validate = () => Promise.resolve(true);
+              return element.validate(steps).then((valid) => {
+                expect(valid).to.be.true;
+              });
             });
           });
           describe('without validatable steps', () => {
@@ -239,8 +243,10 @@
               ];
             });
 
-            it('should return true', () => {
-              expect(element.validate(steps)).to.equal(true);
+            it('should resolve true', () => {
+              return element.validate(steps).then((valid) => {
+                expect(valid).to.be.true;
+              });
             });
           });
         });