fix input tests

src/components/button/button.test.ts

@@ -5,7 +5,7 @@ import type WaButton from './button.js';
 
 const variants = ['brand', 'success', 'neutral', 'warning', 'danger'];
 
-describe('<wa-button>', () => {
+describe('<wa-button>', async () => {
   describe('accessibility tests', () => {
     variants.forEach(variant => {
       it(`should be accessible when variant is "${variant}"`, async () => {
@@ -277,30 +277,30 @@ describe('<wa-button>', () => {
     });
   });
 
-  runFormControlBaseTests({
-    tagName: 'wa-button',
-    variantName: 'type="button"',
+  await Promise.all([
+    runFormControlBaseTests({
+      tagName: 'wa-button',
+      variantName: 'type="button"',
 
-    init: (control: WaButton) => {
-      control.type = 'button';
-    }
-  });
+      init: (control: WaButton) => {
+        control.type = 'button';
+      }
+    }),
+    runFormControlBaseTests({
+      tagName: 'wa-button',
+      variantName: 'type="submit"',
 
-  runFormControlBaseTests({
-    tagName: 'wa-button',
-    variantName: 'type="submit"',
+      init: (control: WaButton) => {
+        control.type = 'submit';
+      }
+    }),
+    runFormControlBaseTests({
+      tagName: 'wa-button',
+      variantName: 'href="xyz"',
 
-    init: (control: WaButton) => {
-      control.type = 'submit';
-    }
-  });
-
-  runFormControlBaseTests({
-    tagName: 'wa-button',
-    variantName: 'href="xyz"',
-
-    init: (control: WaButton) => {
-      control.href = 'some-url';
-    }
-  });
+      init: (control: WaButton) => {
+        control.href = 'some-url';
+      }
+    })
+  ])
 });

src/components/checkbox/checkbox.test.ts

@@ -353,7 +353,7 @@ describe('<wa-checkbox>', () => {
     });
   });
 
-  describe('indeterminate', () => {
+  describe('indeterminate', async () => {
     it('should render indeterminate icon until checked', async () => {
       const el = await fixture<WaCheckbox>(html`<wa-checkbox indeterminate></wa-checkbox>`);
       let indeterminateIcon = el.shadowRoot!.querySelector('[part~="indeterminate-icon"]')!;
@@ -368,6 +368,6 @@ describe('<wa-checkbox>', () => {
       expect(indeterminateIcon).to.be.null;
     });
 
-    runFormControlBaseTests('wa-checkbox');
+    await runFormControlBaseTests('wa-checkbox');
   });
 });

src/components/color-picker/color-picker.test.ts

@@ -6,7 +6,7 @@ import { serialize } from '../../utilities/form.js';
 import sinon from 'sinon';
 import type WaColorPicker from './color-picker.js';
 
-describe('<wa-color-picker>', () => {
+describe('<wa-color-picker>', async () => {
   describe('when the value changes', () => {
     it('should not emit wa-change or wa-input when the value is changed programmatically', async () => {
       const el = await fixture<WaColorPicker>(html` <wa-color-picker></wa-color-picker> `);
@@ -586,5 +586,5 @@ describe('<wa-color-picker>', () => {
     });
   });
 
-  runFormControlBaseTests('wa-color-picker');
+  await runFormControlBaseTests('wa-color-picker');
 });

src/components/input/input.test.ts

@@ -7,7 +7,7 @@ import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import type WaInput from './input.js';
 
-describe('<wa-input>', () => {
+describe('<wa-input>', async () => {
   it('should pass accessibility tests', async () => {
     const el = await fixture<WaInput>(html` <wa-input label="Name"></wa-input> `);
     await expect(el).to.be.accessible();
@@ -596,5 +596,7 @@ describe('<wa-input>', () => {
     expect(el.checkValidity()).to.be.true;
   });
 
-  runFormControlBaseTests('wa-input');
+  await runFormControlBaseTests('wa-input');
+
 });
+

src/components/radio-group/radio-group.test.ts

@@ -291,7 +291,7 @@ describe('when a size is applied', () => {
   });
 });
 
-describe('when the value changes', () => {
+describe('when the value changes', async () => {
   it('should emit wa-change when toggled with the arrow keys', async () => {
     const radioGroup = await fixture<WaRadioGroup>(html`
       <wa-radio-group>
@@ -406,5 +406,5 @@ describe('when the value changes', () => {
     // expect(radioGroup.querySelector("wa-radio")?.getAttribute("aria-checked")).to.equal("true")
   });
 
-  runFormControlBaseTests('wa-radio-group');
+  await runFormControlBaseTests('wa-radio-group');
 });

src/components/range/range.test.ts

@@ -6,7 +6,7 @@ import { serialize } from '../../utilities/form.js';
 import sinon from 'sinon';
 import type WaRange from './range.js';
 
-describe('<wa-range>', () => {
+describe('<wa-range>', async () => {
   it('should pass accessibility tests', async () => {
     const el = await fixture<WaRange>(html` <wa-range label="Name"></wa-range> `);
     await expect(el).to.be.accessible();
@@ -231,5 +231,5 @@ describe('<wa-range>', () => {
     });
   });
 
-  runFormControlBaseTests('wa-range');
+  await runFormControlBaseTests('wa-range');
 });

src/components/select/select.test.ts

@@ -7,7 +7,7 @@ import sinon from 'sinon';
 import type WaOption from '../option/option.js';
 import type WaSelect from './select.js';
 
-describe('<wa-select>', () => {
+describe('<wa-select>', async () => {
   describe('accessibility', () => {
     it('should pass accessibility tests when closed', async () => {
       const select = await fixture<WaSelect>(html`
@@ -610,5 +610,5 @@ describe('<wa-select>', () => {
     expect(tag.hasAttribute('pill')).to.be.true;
   });
 
-  runFormControlBaseTests('wa-select');
+  await runFormControlBaseTests('wa-select');
 });

src/components/switch/switch.test.ts

@@ -4,7 +4,7 @@ import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import type WaSwitch from './switch.js';
 
-describe('<wa-switch>', () => {
+describe('<wa-switch>', async () => {
   it('should pass accessibility tests', async () => {
     const el = await fixture<WaSwitch>(html` <wa-switch>Switch</wa-switch> `);
     await expect(el).to.be.accessible();
@@ -323,5 +323,5 @@ describe('<wa-switch>', () => {
     expect(window.scrollY).to.equal(0);
   });
 
-  runFormControlBaseTests('wa-switch');
+  await runFormControlBaseTests('wa-switch');
 });

src/components/textarea/textarea.test.ts

@@ -5,7 +5,7 @@ import { serialize } from '../../utilities/form.js';
 import sinon from 'sinon';
 import type WaTextarea from './textarea.js';
 
-describe('<wa-textarea>', () => {
+describe('<wa-textarea>', async () => {
   it('should pass accessibility tests', async () => {
     const el = await fixture<WaTextarea>(html` <wa-textarea label="Name"></wa-textarea> `);
     await expect(el).to.be.accessible();
@@ -306,5 +306,5 @@ describe('<wa-textarea>', () => {
     });
   });
 
-  runFormControlBaseTests('wa-textarea');
+  await runFormControlBaseTests('wa-textarea');
 });

src/internal/test/form-control-base-tests.ts

@@ -4,7 +4,7 @@ import type { WebAwesomeFormControl } from '../webawesome-element.js';
 type CreateControlFn = () => Promise<WebAwesomeFormControl>;
 
 /** Runs a set of generic tests for Web Awesome form controls */
-export function runFormControlBaseTests<T extends WebAwesomeFormControl = WebAwesomeFormControl>(
+export async function runFormControlBaseTests<T extends WebAwesomeFormControl = WebAwesomeFormControl>(
   tagNameOrConfig:
     | string
     | {
@@ -34,7 +34,7 @@ export function runFormControlBaseTests<T extends WebAwesomeFormControl = WebAwe
     return control;
   };
 
-  runAllValidityTests(tagName, displayName, createControl);
+  await runAllValidityTests(tagName, displayName, createControl);
 }
 
 //
@@ -46,120 +46,125 @@ export function runFormControlBaseTests<T extends WebAwesomeFormControl = WebAwe
 //   - `.setCustomValidity(msg)`
 //   - `.getForm()`
 //
-function runAllValidityTests(
+async function runAllValidityTests(
   tagName: string, //
   displayName: string,
   createControl: () => Promise<WebAwesomeFormControl>
 ) {
-  // will be used later to retrieve meta information about the control
-  describe(`Form validity base test for ${displayName}`, async () => {
-    it('should have a property `validity` of type `object`', async () => {
-      const control = await createControl();
-      expect(control).satisfy(() => control.validity !== null && typeof control.validity === 'object');
-    });
-
-    it('should have a property `validationMessage` of type `string`', async () => {
-      const control = await createControl();
-      expect(control).satisfy(() => typeof control.validationMessage === 'string');
-    });
-
-    it('should implement method `checkValidity`', async () => {
-      const control = await createControl();
-      expect(control).satisfies(() => typeof control.checkValidity === 'function');
-    });
-
-    it('should implement method `setCustomValidity`', async () => {
-      const control = await createControl();
-      expect(control).satisfies(() => typeof control.setCustomValidity === 'function');
-    });
-
-    it('should implement method `reportValidity`', async () => {
-      const control = await createControl();
-      expect(control).satisfies(() => typeof control.reportValidity === 'function');
-    });
-
-    it('should be valid initially', async () => {
-      const control = await createControl();
-      expect(control.validity.valid).to.equal(true);
-    });
-
-    it('should make sure that calling `.checkValidity()` will return `true` when valid', async () => {
-      const control = await createControl();
-      expect(control.checkValidity()).to.equal(true);
-    });
-
-    it('should make sure that calling `.reportValidity()` will return `true` when valid', async () => {
-      const control = await createControl();
-      expect(control.reportValidity()).to.equal(true);
-    });
-
-    it('should not emit an `wa-invalid` event when `.checkValidity()` is called while valid', async () => {
-      const control = await createControl();
-      const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
-      expect(emittedEvents.length).to.equal(0);
-    });
-
-    it('should not emit an `wa-invalid` event when `.reportValidity()` is called while valid', async () => {
-      const control = await createControl();
-      const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
-      expect(emittedEvents.length).to.equal(0);
-    });
-
-    // TODO: As soon as `WaRadioGroup` has a property `disabled` this
-    // condition can be removed
-    if (tagName !== 'wa-radio-group') {
-      it('should not emit an `wa-invalid` event when `.checkValidity()` is called in custom error case while disabled', async () => {
+  await new Promise<void>((resolve) => {
+    // will be used later to retrieve meta information about the control
+    describe(`Form validity base test for ${displayName}`, async () => {
+      it('should have a property `validity` of type `object`', async () => {
+        const control = await createControl();
+        expect(control).satisfy(() => control.validity !== null && typeof control.validity === 'object');
+      });
+
+      it('should have a property `validationMessage` of type `string`', async () => {
+        const control = await createControl();
+        expect(control).satisfy(() => typeof control.validationMessage === 'string');
+      });
+
+      it('should implement method `checkValidity`', async () => {
+        const control = await createControl();
+        expect(control).satisfies(() => typeof control.checkValidity === 'function');
+      });
+
+      it('should implement method `setCustomValidity`', async () => {
+        const control = await createControl();
+        expect(control).satisfies(() => typeof control.setCustomValidity === 'function');
+      });
+
+      it('should implement method `reportValidity`', async () => {
+        const control = await createControl();
+        expect(control).satisfies(() => typeof control.reportValidity === 'function');
+      });
+
+      it('should be valid initially', async () => {
+        const control = await createControl();
+        expect(control.validity.valid).to.equal(true);
+      });
+
+      it('should make sure that calling `.checkValidity()` will return `true` when valid', async () => {
+        const control = await createControl();
+        expect(control.checkValidity()).to.equal(true);
+      });
+
+      it('should make sure that calling `.reportValidity()` will return `true` when valid', async () => {
+        const control = await createControl();
+        expect(control.reportValidity()).to.equal(true);
+      });
+
+      it('should not emit an `wa-invalid` event when `.checkValidity()` is called while valid', async () => {
         const control = await createControl();
-        control.setCustomValidity('error');
-        control.disabled = true;
-        await control.updateComplete;
         const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
         expect(emittedEvents.length).to.equal(0);
       });
 
-      it('should not emit an `wa-invalid` event when `.reportValidity()` is called in custom error case while disabled', async () => {
+      it('should not emit an `wa-invalid` event when `.reportValidity()` is called while valid', async () => {
         const control = await createControl();
-        control.setCustomValidity('error');
-        control.disabled = true;
-        await control.updateComplete;
         const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
         expect(emittedEvents.length).to.equal(0);
       });
 
-      it('Should find the correct form when given a form property', async () => {
-        const formId = 'test-form';
-        const form = await fixture(`<form id='${formId}'></form>`);
-        const control = await createControl();
-        expect(control.getForm()).to.equal(null);
-        control.form = 'test-form';
-        await control.updateComplete;
-        expect(control.getForm()).to.equal(form);
-      });
+      // TODO: As soon as `WaRadioGroup` has a property `disabled` this
+      // condition can be removed
+      if (tagName !== 'wa-radio-group') {
+        it('should not emit an `wa-invalid` event when `.checkValidity()` is called in custom error case while disabled', async () => {
+          const control = await createControl();
+          control.setCustomValidity('error');
+          control.disabled = true;
+          await control.updateComplete;
+          const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.checkValidity());
+          expect(emittedEvents.length).to.equal(0);
+        });
 
-      it('Should find the correct form when given a form attribute', async () => {
-        const formId = 'test-form';
-        const form = await fixture(`<form id='${formId}'></form>`);
-        const control = await createControl();
-        expect(control.getForm()).to.equal(null);
-        control.setAttribute('form', 'test-form');
+        it('should not emit an `wa-invalid` event when `.reportValidity()` is called in custom error case while disabled', async () => {
+          const control = await createControl();
+          control.setCustomValidity('error');
+          control.disabled = true;
+          await control.updateComplete;
+          const emittedEvents = checkEventEmissions(control, 'wa-invalid', () => control.reportValidity());
+          expect(emittedEvents.length).to.equal(0);
+        });
 
-        await control.updateComplete;
-        expect(control.getForm()).to.equal(form);
-      });
-    }
+        it('Should find the correct form when given a form property', async () => {
+          const formId = 'test-form';
+          const form = await fixture(`<form id='${formId}'></form>`);
+          const control = await createControl();
+          expect(control.getForm()).to.equal(null);
+          control.form = 'test-form';
+          await control.updateComplete;
+          expect(control.getForm()).to.equal(form);
+        });
 
-    // Run special tests depending on component type
+        it('Should find the correct form when given a form attribute', async () => {
+          const formId = 'test-form';
+          const form = await fixture(`<form id='${formId}'></form>`);
+          const control = await createControl();
+          expect(control.getForm()).to.equal(null);
+          control.setAttribute('form', 'test-form');
 
-    const mode = getMode(await createControl());
+          await control.updateComplete;
+          expect(control.getForm()).to.equal(form);
+        });
+      }
 
-    if (mode === 'slButtonOfTypeButton') {
-      runSpecialTests_slButtonOfTypeButton(createControl);
-    } else if (mode === 'slButtonWithHRef') {
-      runSpecialTests_slButtonWithHref(createControl);
-    } else {
-      runSpecialTests_standard(createControl);
-    }
-  });
+      // Run special tests depending on component type
+
+      const mode = getMode(await createControl());
+
+      if (mode === 'slButtonOfTypeButton') {
+        runSpecialTests_slButtonOfTypeButton(createControl);
+      } else if (mode === 'slButtonWithHRef') {
+        runSpecialTests_slButtonWithHref(createControl);
+      } else {
+        runSpecialTests_standard(createControl);
+      }
+    });
+
+    resolve()
+
+  })
 }
 
 //