feat: make select elements compatible with form element component (#171)

* feat: added select element compatibility * test: raised global coverage * chore: add select value to demo form machine Co-authored-by: Stijn Taelemans <[email protected]>
useid · Jun 20, 2022 · 05d2b67 · 05d2b67
1 parent 22ff867
commit 05d2b67
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/packages/dgt-components/demo/demo.component.ts b/packages/dgt-components/demo/demo.component.ts
@@ -43,30 +43,39 @@ const emailValidator: FormValidator<{ email: string }> = async (context, event)
 
 };
 
+export type DemoFormModel = {
+  email: string,
+  textareaField: string,
+  select: string,
+};
+
 export class DemoComponent extends RxLitElement {
 
   // eslint-disable-next-line max-len
-  private formMachine: StateMachine<FormContext<{ email: string, textareaField: string }>, FormStateSchema<{ email: string, textareaField: string }>, FormEvent, FormState<{ email: string, textareaField: string }>>;
+  private formMachine: StateMachine<FormContext<DemoFormModel>, FormStateSchema<DemoFormModel>, FormEvent, FormState<DemoFormModel>>;
   // eslint-disable-next-line max-len
-  private formActor: Interpreter<FormContext<{ email: string, textareaField: string }>, FormStateSchema<{ email: string, textareaField: string }>, FormEvent, FormState<{ email: string, textareaField: string }>>;
+  private formActor: Interpreter<FormContext<DemoFormModel>, FormStateSchema<DemoFormModel>, FormEvent, FormState<DemoFormModel>>;
 
   private translator: Translator;
 
   constructor() {
     super();
 
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    this.formMachine = createMachine<FormContext<{ email: string, textareaField: string }>, FormEvent, FormState<{ email: string, textareaField: string }>>(formMachine<{ email: string, textareaField: string }>(emailValidator)).withContext({
-      data: { email: '', textareaField: '' },
-      original: { email: '', textareaField: '' },
+    this.formMachine = createMachine<FormContext<DemoFormModel>, FormEvent, FormState<DemoFormModel>>(formMachine<DemoFormModel>(emailValidator)).withContext({
+      data: { email: '', textareaField: '', select: 'first' },
+      original: { email: '', textareaField: '', select: 'first' },
     });
 
     // eslint-disable-next-line no-console,@typescript-eslint/no-unsafe-assignment
-    this.formActor = interpret(this.formMachine, { devTools: true }).onTransition((s) => console.log(s.value));
+    this.formActor = interpret(this.formMachine, { devTools: true }).onTransition((s) => {
+      console.log(s.value);
+      console.log('data', s.context.data)
+    });
     this.formActor.start();
 
     define('checkbox-component', CheckboxComponent);
-    define('form-element', hydrate(FormElementComponent)(this.formActor));
+    define('form-element', FormElementComponent);
 
     // create single translator
     setTranslatorFactory(new MemoryTranslatorFactory);
@@ -114,12 +123,25 @@ export class DemoComponent extends RxLitElement {
     <h1>form element component</h1>
     <form>
       <input placeholder="non form-element input field">
-      <form-element field="email">
+      <form-element field="email" .actor=${this.formActor}>
         <input slot="input" type="email" name="email" id="email" placeholder="enter e-mail address">
       </form-element>
-      <form-element field="textareaField">
+      <form-element field="textareaField" .actor=${this.formActor}>
         <textarea slot="input">GRA</textarea>
       </form-element>
+      <form-element field="select" .actor=${this.formActor}>
+        <select required slot="input" name="select" id="select">
+          <option value="first">first</option>
+          <option value="second">second</option>
+        </select>
+      </form-element>
+      <div>
+        <select id="non-form-select">
+          <option value="non">non</option>
+          <option value="form">form</option>
+          <option value="select">select</option>
+        </select>
+      </div>
       <button>Continue</button>
     </form>
 

diff --git a/packages/dgt-components/lib/components/forms/form-element.component.ts b/packages/dgt-components/lib/components/forms/form-element.component.ts
@@ -19,7 +19,7 @@ export class FormElementComponent<T> extends RxLitElement {
    * All input elements slotted in the form element.
    */
   @internalProperty()
-  inputs: (HTMLInputElement | HTMLTextAreaElement)[];
+  inputs: (HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement)[] = [];
 
   /**
    * The slot element which contains the input field.
@@ -177,8 +177,9 @@ export class FormElementComponent<T> extends RxLitElement {
     }
 
     this.inputs = slot.assignedNodes({ flatten: true })?.filter(
-      (element) => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement,
-    ).map((element) => element as HTMLInputElement | HTMLTextAreaElement);
+      (element) => element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement
+      || element instanceof HTMLSelectElement,
+    ).map((element) => element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement);
 
     this.inputs?.forEach((element) => {
 

diff --git a/packages/dgt-components/package.json b/packages/dgt-components/package.json
@@ -93,10 +93,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 76.19,
+        "branches": 76.33,
         "functions": 74.01,
-        "lines": 88.11,
-        "statements": 88.5
+        "lines": 88.97,
+        "statements": 89.22
       }
     },
     "coveragePathIgnorePatterns": [
@@ -107,4 +107,4 @@
       "<rootDir>/demo/"
     ]
   }
-}
+}