validity tests

test/src/unit/mwc-textfield.test.ts

@@ -25,20 +25,32 @@ const basic = html`
   <mwc-textfield></mwc-textfield>
 `;
 
-const required = html`
+const validationRequired = html`
   <mwc-textfield label="I am required" required></mwc-textfield>
 `;
 
+const validationPattern = html`
+  <mwc-textfield pattern="[0-9]+" value="dogs"></mwc-textfield>
+`;
+
+const reqInitialVal = html`
+  <mwc-textfield
+      label="I am required"
+      required
+      validateOnInitialRender>
+  </mwc-textfield>
+`;
+
 const isUiInvalid =
     (element: TextField) => {
       return !!element.shadowRoot!.querySelector(`.${cssClasses.INVALID}`);
     }
 
 suite('mwc-textfield:', () => {
-  let element: TextField;
   let fixt: TestFixture;
 
   suite('basic', () => {
+    let element: TextField;
     setup(async () => {
       fixt = await fixture(basic);
 
@@ -64,19 +76,123 @@ suite('mwc-textfield:', () => {
   });
 
   suite('validation', () => {
-    suiteSetup(async () => {
-      fixt = await fixture(required);
-      element = fixt.root.querySelector('mwc-textfield')!;
-      await element.updateComplete;
-    });
-
     test('required invalidates on blur', async () => {
+      fixt = await fixture(validationRequired);
+      const element = fixt.root.querySelector('mwc-textfield')!;
+
       expect(isUiInvalid(element)).to.be.false;
       element.focus();
       element.blur();
       expect(isUiInvalid(element)).to.be.true;
     });
 
+    test('validity & checkValidity do not trigger ui', async () => {
+      fixt = await fixture(validationPattern);
+      const element = fixt.root.querySelector('mwc-textfield')!;
+
+      assert.isFalse(isUiInvalid(element));
+
+      let invalidCalled = false;
+      element.addEventListener('invalid', () => invalidCalled = true);
+
+      const validity = element.validity;
+
+      assert.isTrue(validity.patternMismatch);
+      assert.isFalse(validity.valid);
+      assert.isFalse(invalidCalled);
+      assert.isFalse(isUiInvalid(element));
+
+      const checkValidity = element.checkValidity();
+
+      assert.isFalse(checkValidity);
+      assert.isTrue(invalidCalled);
+      assert.isFalse(isUiInvalid(element));
+    });
+
+    test('setCustomValidity', async () => {
+      fixt = await fixture(basic);
+      const element = fixt.root.querySelector('mwc-textfield')!;
+
+      assert.isFalse(isUiInvalid(element));
+      assert.isEmpty(element.validationMessage);
+
+      const validationMsgProp = 'set on prop';
+      element.validationMessage = validationMsgProp;
+      assert.isFalse(isUiInvalid(element));
+      assert.equal(element.validationMessage, validationMsgProp);
+
+      const validationMsgFn = 'set by setCustomValidity';
+      element.setCustomValidity(validationMsgFn);
+
+      assert.equal(element.validationMessage, validationMsgFn);
+
+      const validity = element.validity;
+      assert.isTrue(validity.customError);
+      assert.isFalse(validity.valid);
+    });
+
+    test('validity transform', async () => {
+      fixt = await fixture(validationPattern);
+      const element = fixt.root.querySelector('mwc-textfield')!;
+
+      assert.isFalse(element.checkValidity());
+
+      const transformFn =
+      (value: string, vState: ValidityState): Partial<ValidityState> => {
+        if (value.includes('dogs')) {
+          return {valid: true}
+        } else if (vState.valid) {
+          const numberifiedValue = Number(value);
+          if (numberifiedValue > 5) {
+            return {valid: false, rangeOverflow: true}
+          }
+        }
+
+        return {};
+      };
+
+      element.validityTransform = transformFn;
+
+      let validity = element.validity;
+      // true because dogs
+      assert.isTrue(validity.valid);
+      assert.isTrue(validity.patternMismatch);
+      assert.isTrue(element.checkValidity());
+
+      element.value = '6';
+      await element.updateComplete;
+      validity = element.validity;
+      // false because > 5
+      assert.isFalse(validity.valid);
+      assert.isTrue(validity.rangeOverflow);
+      assert.isFalse(element.reportValidity());
+
+      assert.isTrue(isUiInvalid(element));
+
+      element.value = '1';
+      await element.updateComplete;
+      validity = element.validity;
+      // true because < 5
+      assert.isTrue(validity.valid);
+      assert.isFalse(validity.patternMismatch);
+      assert.isFalse(validity.rangeOverflow);
+      assert.isTrue(element.reportValidity());
+
+      assert.isFalse(isUiInvalid(element));
+    });
+
+    test('initial validation', async () => {
+      fixt = await fixture(reqInitialVal);
+      let element = fixt.root.querySelector('mwc-textfield')!;
+      assert.isTrue(isUiInvalid(element));
+
+      fixt.remove();
+
+      fixt = await fixture(validationRequired);
+      element = fixt.root.querySelector('mwc-textfield')!;
+      assert.isFalse(isUiInvalid(element));
+    });
+
     teardown(() => {
       if (fixt) {
         fixt.remove();