update test for uui-form as a form-element wrapper

Author: nielslyngsoe

packages/uui-form/lib/uui-form.test.ts

@@ -1,12 +1,19 @@
-/*
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
 import { UUIFormElement } from './uui-form.element';
 
+const preventSubmit = (e: SubmitEvent) => {
+  e.preventDefault();
+};
+
 describe('UUIFormElement', () => {
   let element: UUIFormElement;
+  let formElement: HTMLFormElement;
 
   beforeEach(async () => {
-    element = await fixture(html` <form is="uui-form"></form> `);
+    element = await fixture(
+      html`<uui-form><form @submit=${preventSubmit}></form></uui-form>`
+    );
+    formElement = element.getFormElement()!;
   });
 
   it('is defined', () => {
@@ -18,81 +25,84 @@ describe('UUIFormElement', () => {
   });
 
   it('set novalidate attribute on form-element', async () => {
-    await expect(element.hasAttribute('novalidate')).to.be.true;
-    await expect(element.getAttribute('novalidate')).to.not.be.null;
-    await expect(element.getAttribute('novalidate')).to.be.empty;
+    await expect(formElement.hasAttribute('novalidate')).to.be.true;
+    await expect(formElement.getAttribute('novalidate')).to.not.be.null;
+    await expect(formElement.getAttribute('novalidate')).to.be.empty;
   });
 
   describe('events', () => {
     describe('submit', () => {
       it('emits a submit event when submitted', async () => {
-        const listener = oneEvent(element, 'submit');
+        const listener = oneEvent(formElement, 'submit');
 
-        element.requestSubmit();
+        formElement.requestSubmit();
 
         const event = await listener;
         expect(event).to.exist;
         expect(event.type).to.equal('submit');
-        expect(event!.target).to.equal(element);
+        expect(event!.target).to.equal(formElement);
       });
     });
   });
 
   describe('Validation', () => {
     let element: UUIFormElement;
+    let formElement: HTMLFormElement;
     let input: HTMLInputElement;
 
     beforeEach(async () => {
       element = await fixture(html`
-        <form is="uui-form">
-          <input type="text" name="my_required_input" required />
-        </form>
+        <uui-form>
+          <form @submit=${preventSubmit}>
+            <input type="text" name="my_required_input" required />
+          </form>
+        </uui-form>
       `);
+      formElement = element.getFormElement()!;
       input = element.querySelector('input') as HTMLInputElement;
     });
 
     it('does not have "submit-invalid" attribute before submission.', async () => {
-      await expect(element.hasAttribute('submit-invalid')).to.be.false;
+      await expect(formElement.hasAttribute('submit-invalid')).to.be.false;
     });
 
     it('has "submit-invalid" attribute if Form Control was invalid at submission.', async () => {
-      const listener = oneEvent(element, 'submit');
+      const listener = oneEvent(formElement, 'submit');
 
-      element.requestSubmit();
+      formElement.requestSubmit();
 
       await listener;
-      await expect(element.hasAttribute('submit-invalid')).to.be.true;
-      await expect(element.getAttribute('submit-invalid')).to.not.be.null;
-      await expect(element.getAttribute('submit-invalid')).to.be.empty;
+      await expect(formElement.hasAttribute('submit-invalid')).to.be.true;
+      await expect(formElement.getAttribute('submit-invalid')).to.not.be.null;
+      await expect(formElement.getAttribute('submit-invalid')).to.be.empty;
     });
 
     it('only has "submit-invalid" attribute if Form Control was invalid at submission.', async () => {
-      const listener = oneEvent(element, 'submit');
+      const listener = oneEvent(formElement, 'submit');
 
       input.value = 'something';
-      element.requestSubmit();
+      formElement.requestSubmit();
 
       await listener;
-      await expect(element.hasAttribute('submit-invalid')).to.be.false;
+      await expect(formElement.hasAttribute('submit-invalid')).to.be.false;
     });
 
     it('"submit-invalid" attribute is removed when form is re-validated and submitted.', async () => {
-      const listener = oneEvent(element, 'submit');
+      const listener = oneEvent(formElement, 'submit');
 
-      element.requestSubmit();
+      formElement.requestSubmit();
 
       await listener;
-      await expect(element.hasAttribute('submit-invalid')).to.be.true;
+      await expect(formElement.hasAttribute('submit-invalid')).to.be.true;
 
-      const listener2 = oneEvent(element, 'submit');
+      const listener2 = oneEvent(formElement, 'submit');
       input.value = 'something';
-      element.requestSubmit();
+      formElement.requestSubmit();
 
       await listener2;
-      await expect(element.hasAttribute('submit-invalid')).to.be.false;
+      await expect(formElement.hasAttribute('submit-invalid')).to.be.false;
     });
   });
 });
-*/
 
 export {};