test: extract validation tests into individual file (#6263)

packages/custom-field/test/custom-field.test.js

@@ -103,71 +103,6 @@ describe('custom field', () => {
     });
   });
 
-  describe('required', () => {
-    beforeEach(() => {
-      customField.required = true;
-    });
-
-    it('should set invalid to false by default', () => {
-      expect(customField.invalid).to.be.false;
-    });
-
-    it('should become invalid on validate call when empty', () => {
-      expect(customField.invalid).to.be.false;
-      customField.validate();
-      expect(customField.invalid).to.be.true;
-    });
-
-    it('should become valid after receiving a non-empty value from "change" event', () => {
-      customField.inputs[0].value = 'foo';
-      dispatchChange(customField.inputs[0]);
-      expect(customField.invalid).to.be.false;
-    });
-
-    it('should become invalid after receiving an empty value from "change" event', () => {
-      customField.value = 'foo';
-      customField.inputs[0].value = '';
-      dispatchChange(customField.inputs[0]);
-      expect(customField.invalid).to.be.true;
-    });
-  });
-
-  describe('validation', () => {
-    it('should check validity on validate', () => {
-      const spy = sinon.spy(customField, 'checkValidity');
-      customField.validate();
-      expect(spy.called).to.be.true;
-    });
-
-    it('should run validation on input change', () => {
-      const spy = sinon.spy(customField, 'checkValidity');
-      customField.inputs[0].value = 'foo';
-      dispatchChange(customField.inputs[0]);
-      expect(spy.called).to.be.true;
-    });
-
-    it('should fire a validated event on validation success', () => {
-      const validatedSpy = sinon.spy();
-      customField.addEventListener('validated', validatedSpy);
-      customField.validate();
-
-      expect(validatedSpy.calledOnce).to.be.true;
-      const event = validatedSpy.firstCall.args[0];
-      expect(event.detail.valid).to.be.true;
-    });
-
-    it('should fire a validated event on validation failure', () => {
-      const validatedSpy = sinon.spy();
-      customField.addEventListener('validated', validatedSpy);
-      customField.required = true;
-      customField.validate();
-
-      expect(validatedSpy.calledOnce).to.be.true;
-      const event = validatedSpy.firstCall.args[0];
-      expect(event.detail.valid).to.be.false;
-    });
-  });
-
   describe('custom parser and formatter', () => {
     it('should use custom parser if that exists', async () => {
       customField.parseValue = (value) => {

packages/custom-field/test/validation.test.js

@@ -0,0 +1,90 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import sinon from 'sinon';
+import '../src/vaadin-custom-field.js';
+import { dispatchChange } from './helpers.js';
+
+describe('validation', () => {
+  let customField;
+
+  describe('basic', () => {
+    beforeEach(async () => {
+      customField = fixtureSync(`
+        <vaadin-custom-field>
+          <input type="text" />
+          <input type="number" />
+        </vaadin-custom-field>
+      `);
+      await nextRender();
+    });
+
+    it('should check validity on validate', () => {
+      const spy = sinon.spy(customField, 'checkValidity');
+      customField.validate();
+      expect(spy.called).to.be.true;
+    });
+
+    it('should run validation on input change', () => {
+      const spy = sinon.spy(customField, 'checkValidity');
+      customField.inputs[0].value = 'foo';
+      dispatchChange(customField.inputs[0]);
+      expect(spy.called).to.be.true;
+    });
+
+    it('should fire a validated event on validation success', () => {
+      const validatedSpy = sinon.spy();
+      customField.addEventListener('validated', validatedSpy);
+      customField.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.true;
+    });
+
+    it('should fire a validated event on validation failure', () => {
+      const validatedSpy = sinon.spy();
+      customField.addEventListener('validated', validatedSpy);
+      customField.required = true;
+      customField.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.false;
+    });
+  });
+
+  describe('required', () => {
+    beforeEach(async () => {
+      customField = fixtureSync(`
+        <vaadin-custom-field required>
+          <input type="text" />
+          <input type="number" />
+        </vaadin-custom-field>
+      `);
+      await nextRender();
+    });
+
+    it('should set invalid to false by default', () => {
+      expect(customField.invalid).to.be.false;
+    });
+
+    it('should become invalid on validate call when empty', () => {
+      expect(customField.invalid).to.be.false;
+      customField.validate();
+      expect(customField.invalid).to.be.true;
+    });
+
+    it('should become valid after receiving a non-empty value from "change" event', () => {
+      customField.inputs[0].value = 'foo';
+      dispatchChange(customField.inputs[0]);
+      expect(customField.invalid).to.be.false;
+    });
+
+    it('should become invalid after receiving an empty value from "change" event', () => {
+      customField.value = 'foo';
+      customField.inputs[0].value = '';
+      dispatchChange(customField.inputs[0]);
+      expect(customField.invalid).to.be.true;
+    });
+  });
+});

packages/email-field/test/email-field-lit.test.js → packages/email-field/test/validation-lit.test.js

@@ -1,2 +1,2 @@
 import '../src/vaadin-lit-email-field.js';
-import './email-field.common.js';
+import './validation.common.js';

packages/email-field/test/email-field-polymer.test.js → packages/email-field/test/validation-polymer.test.js

@@ -1,2 +1,2 @@
 import '../src/vaadin-email-field.js';
-import './email-field.common.js';
+import './validation.common.js';

packages/email-field/test/email-field.common.js → packages/email-field/test/validation.common.js

@@ -30,10 +30,10 @@ const invalidAddresses = [
   'email@example',
 ];
 
-describe('email-field', () => {
-  describe('default', () => {
-    let emailField;
+describe('validation', () => {
+  let emailField;
 
+  describe('basic', () => {
     beforeEach(async () => {
       emailField = fixtureSync('<vaadin-email-field></vaadin-email-field>');
       await nextRender();
@@ -60,11 +60,31 @@ describe('email-field', () => {
         });
       });
     });
+
+    it('should fire a validated event on validation success', () => {
+      const validatedSpy = sinon.spy();
+      emailField.addEventListener('validated', validatedSpy);
+      emailField.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.true;
+    });
+
+    it('should fire a validated event on validation failure', async () => {
+      const validatedSpy = sinon.spy();
+      emailField.addEventListener('validated', validatedSpy);
+      emailField.required = true;
+      await nextUpdate(emailField);
+      emailField.validate();
+
+      expect(validatedSpy.calledOnce).to.be.true;
+      const event = validatedSpy.firstCall.args[0];
+      expect(event.detail.valid).to.be.false;
+    });
   });
 
   describe('custom pattern', () => {
-    let emailField;
-
     beforeEach(async () => {
       emailField = fixtureSync('<vaadin-email-field pattern=".+@example.com"></vaadin-email-field>');
       await nextRender();
@@ -75,85 +95,56 @@ describe('email-field', () => {
     });
   });
 
-  describe('initial validation', () => {
-    let field, validateSpy;
+  describe('initial', () => {
+    let validateSpy;
 
     beforeEach(() => {
-      field = document.createElement('vaadin-email-field');
-      validateSpy = sinon.spy(field, 'validate');
+      emailField = document.createElement('vaadin-email-field');
+      validateSpy = sinon.spy(emailField, 'validate');
     });
 
     afterEach(() => {
-      field.remove();
+      emailField.remove();
     });
 
     it('should not validate without value', async () => {
-      document.body.appendChild(field);
+      document.body.appendChild(emailField);
       await nextRender();
       expect(validateSpy.called).to.be.false;
     });
 
     describe('with value', () => {
       beforeEach(() => {
-        field.value = 'foo@example.com';
+        emailField.value = 'foo@example.com';
       });
 
       it('should validate by default', async () => {
-        document.body.appendChild(field);
+        document.body.appendChild(emailField);
         await nextRender();
         expect(validateSpy.calledOnce).to.be.true;
       });
 
       it('should validate when using a custom pattern', async () => {
-        field.pattern = '.+@example.com';
-        document.body.appendChild(field);
+        emailField.pattern = '.+@example.com';
+        document.body.appendChild(emailField);
         await nextRender();
         expect(validateSpy.calledOnce).to.be.true;
       });
 
       it('should not validate when pattern is unset', async () => {
-        field.pattern = '';
-        document.body.appendChild(field);
+        emailField.pattern = '';
+        document.body.appendChild(emailField);
         await nextRender();
         expect(validateSpy.called).to.be.false;
       });
 
       it('should not validate when pattern is unset and the field has invalid', async () => {
-        field.pattern = '';
-        field.invalid = true;
-        document.body.appendChild(field);
+        emailField.pattern = '';
+        emailField.invalid = true;
+        document.body.appendChild(emailField);
         await nextRender();
         expect(validateSpy.called).to.be.false;
       });
     });
   });
-
-  describe('validation', () => {
-    let field, validatedSpy;
-
-    beforeEach(async () => {
-      field = fixtureSync('<vaadin-email-field></vaadin-email-field>');
-      await nextRender();
-      validatedSpy = sinon.spy();
-      field.addEventListener('validated', validatedSpy);
-    });
-
-    it('should fire a validated event on validation success', () => {
-      field.validate();
-
-      expect(validatedSpy.calledOnce).to.be.true;
-      const event = validatedSpy.firstCall.args[0];
-      expect(event.detail.valid).to.be.true;
-    });
-
-    it('should fire a validated event on validation failure', async () => {
-      field.required = true;
-      await nextUpdate(field);
-      field.validate();
-
-      expect(validatedSpy.calledOnce).to.be.true;
-      const event = validatedSpy.firstCall.args[0];
-      expect(event.detail.valid).to.be.false;
-    });
-  });
 });