test(davinci-client): improve form field tests

Author: cerebrl

e2e/davinci-app/components/combobox.ts

@@ -1,4 +1,4 @@
-import type { SingleSelectCollector, Updater } from '@forgerock/davinci-client/types';
+import type { MultiSelectCollector, Updater } from '@forgerock/davinci-client/types';
 
 /**
  * Creates a group of checkboxes with single-select behavior (like radio buttons)
@@ -7,9 +7,9 @@ import type { SingleSelectCollector, Updater } from '@forgerock/davinci-client/t
  * @param {SingleSelectCollector} collector - Contains the options and configuration
  * @param {Updater} updater - Function to call when selection changes
  */
-export default function checkboxComponent(
+export default function multiValueComponent(
   formEl: HTMLFormElement,
-  collector: SingleSelectCollector,
+  collector: MultiSelectCollector,
   updater: Updater,
 ) {
   // Create a container for the checkboxes
@@ -22,17 +22,19 @@ export default function checkboxComponent(
   groupLabel.className = 'checkbox-group-label';
   containerDiv.appendChild(groupLabel);
 
-  // Track the currently selected checkbox
-  let selectedCheckbox: HTMLInputElement | null = null;
+  const values: string[] = [];
+  let index = 0;
 
   // Create checkboxes for each option
   for (const option of collector.output.options) {
     const wrapper = document.createElement('div');
     wrapper.className = 'checkbox-wrapper';
 
+    index += 1;
+
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
-    checkbox.id = `${collector.output.key}-${option.value}`;
+    checkbox.id = `${collector.output.key}-${index}`;
     checkbox.name = collector.output.key || 'checkbox-field';
     checkbox.value = option.value;
 
@@ -46,22 +48,16 @@ export default function checkboxComponent(
 
       // If this checkbox is being checked
       if (target.checked) {
-        // Uncheck the previously selected checkbox if there was one
-        if (selectedCheckbox && selectedCheckbox !== target) {
-          selectedCheckbox.checked = false;
-        }
-
-        // Update the selected checkbox reference
-        selectedCheckbox = target;
-
-        console.log(event.target);
-        // Call the updater with the selected value
-        updater(target.value);
+        values.push(target.value);
       } else {
-        // If the user is trying to uncheck the selected checkbox,
-        // prevent that to maintain a selected state
-        target.checked = true;
+        // If this checkbox is being unchecked
+        const index = values.indexOf(target.value);
+        if (index > -1) {
+          values.splice(index, 1);
+        }
       }
+      console.log(values);
+      updater(values);
     });
 
     wrapper.appendChild(checkbox);
@@ -71,28 +67,4 @@ export default function checkboxComponent(
 
   // Append the container to the form
   formEl.appendChild(containerDiv);
-
-  // Add some basic styling
-  const style = document.createElement('style');
-  style.textContent = `
-    .checkbox-container {
-      margin-bottom: 15px;
-    }
-
-    .checkbox-group-label {
-      font-weight: bold;
-      margin-bottom: 8px;
-    }
-
-    .checkbox-wrapper {
-      margin-bottom: 5px;
-      display: flex;
-      align-items: center;
-    }
-
-    .checkbox-wrapper input[type="checkbox"] {
-      margin-right: 8px;
-    }
-  `;
-  document.head.appendChild(style);
 }

e2e/davinci-app/components/checkbox.ts e2e/davinci-app/components/multi-value.tse2e/davinci-app/components/checkbox.ts renamed to e2e/davinci-app/components/multi-value.ts

@@ -6,7 +6,7 @@ import type { SingleSelectCollector, Updater } from '@forgerock/davinci-client/t
  * @param {SingleSelectCollector} collector - Contains the dropdown options and configuration
  * @param {Updater} updater - Function to call when selection changes
  */
-export default function dropdownComponent(
+export default function singleValueComponent(
   formEl: HTMLFormElement,
   collector: SingleSelectCollector,
   updater: Updater,
@@ -21,13 +21,6 @@ export default function dropdownComponent(
   selectEl.name = collector.output.key || 'dropdown-field';
   selectEl.id = collector.output.key || 'dropdown-field';
 
-  // Add a default/placeholder option
-  const defaultOption = document.createElement('option');
-  defaultOption.value = '';
-  defaultOption.textContent = 'Please select...';
-  defaultOption.selected = true;
-  selectEl.appendChild(defaultOption);
-
   // Add all options from the data
   for (const option of collector.output.options) {
     const optionEl = document.createElement('option');
@@ -41,29 +34,10 @@ export default function dropdownComponent(
     // Properly type the event target
     const target = event.target as HTMLSelectElement;
     const selectedValue = target.value;
-    updater(selectedValue); // Call the updater with the selected value
+    updater(selectedValue);
   });
 
   // Append elements to the form
   formEl.appendChild(labelEl);
   formEl.appendChild(selectEl);
-
-  // Add some basic styling
-  const style = document.createElement('style');
-  style.textContent = `
-    .dropdown-label {
-      display: block;
-      margin-bottom: 5px;
-      font-weight: bold;
-    }
-
-    select {
-      padding: 8px;
-      width: 100%;
-      border-radius: 4px;
-      border: 1px solid #ccc;
-      margin-bottom: 15px;
-    }
-  `;
-  document.head.appendChild(style);
 }

e2e/davinci-app/components/dropdown.ts …e/davinci-app/components/single-value.tse2e/davinci-app/components/dropdown.ts renamed to e2e/davinci-app/components/single-value.ts e2e/davinci-app/components/dropdown.ts renamed to e2e/davinci-app/components/single-value.ts

@@ -2,13 +2,15 @@ import type {
   TextCollector,
   ValidatedTextCollector,
   Updater,
+  Validator,
 } from '@forgerock/davinci-client/types';
 import { dotToCamelCase } from '../helper.js';
 
-export default function usernameComponent(
+export default function textComponent(
   formEl: HTMLFormElement,
   collector: TextCollector | ValidatedTextCollector,
   updater: Updater,
+  validator: Validator,
 ) {
   const collectorKey = dotToCamelCase(collector.output.key);
   const label = document.createElement('label');
@@ -23,10 +25,32 @@ export default function usernameComponent(
   formEl?.appendChild(label);
   formEl?.appendChild(input);
 
-  formEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
-    const error = updater((event.target as HTMLInputElement).value);
-    if (error && 'error' in error) {
-      console.error(error.error.message);
-    }
-  });
+  if (collector.category === 'ValidatedSingleValueCollector') {
+    formEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
+      const result = validator((event.target as HTMLInputElement).value);
+      const errorEl = formEl?.querySelector(`.${collectorKey}-error`);
+
+      if (Array.isArray(result) && result.length && !errorEl) {
+        const errorEl = document.createElement('div');
+        errorEl.className = `${collectorKey}-error`;
+        errorEl.innerText = result.join(', ');
+        formEl?.querySelector(`#${collectorKey}`)?.after(errorEl);
+      } else if (Array.isArray(result) && result.length) {
+        return;
+      } else {
+        formEl.querySelector(`.${collectorKey}-error`)?.remove();
+        const error = updater((event.target as HTMLInputElement).value);
+        if (error && 'error' in error) {
+          console.error(error.error.message);
+        }
+      }
+    });
+  } else {
+    formEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
+      const error = updater((event.target as HTMLInputElement).value);
+      if (error && 'error' in error) {
+        console.error(error.error.message);
+      }
+    });
+  }
 }

e2e/davinci-app/components/text.ts

@@ -5,16 +5,15 @@ import { davinci } from '@forgerock/davinci-client';
 
 import type { DaVinciConfig, RequestMiddleware } from '@forgerock/davinci-client/types';
 
-import usernameComponent from './components/text.js';
+import textComponent from './components/text.js';
 import passwordComponent from './components/password.js';
 import submitButtonComponent from './components/submit-button.js';
 import protect from './components/protect.js';
 import flowLinkComponent from './components/flow-link.js';
 import socialLoginButtonComponent from './components/social-login-button.js';
 import { serverConfigs } from './server-configs.js';
-import dropdownComponent from './components/dropdown.js';
-import comboboxComponent from './components/combobox.js';
-import radioComponent from './components/radio.js';
+import singleValueComponent from './components/single-value.js';
+import multiValueComponent from './components/multi-value.js';
 
 const qs = window.location.search;
 const searchParams = new URLSearchParams(qs);
@@ -150,7 +149,6 @@ const urlParams = new URLSearchParams(window.location.search);
 
     const collectors = davinciClient.getCollectors();
     collectors.forEach((collector) => {
-      console.log(collector);
       if (collector.type === 'TextCollector' && collector.name === 'protectsdk') {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         collector;
@@ -160,10 +158,11 @@ const urlParams = new URLSearchParams(window.location.search);
           davinciClient.update(collector), // Returns an update function for this collector
         );
       } else if (collector.type === 'TextCollector') {
-        usernameComponent(
+        textComponent(
           formEl, // You can ignore this; it's just for rendering
           collector, // This is the plain object of the collector
           davinciClient.update(collector), // Returns an update function for this collector
+          davinciClient.validate(collector), // Returns a validate function for this collector
         );
       } else if (collector.type === 'PasswordCollector') {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
@@ -192,15 +191,10 @@ const urlParams = new URLSearchParams(window.location.search);
           }),
           renderForm, // Ignore this; it's just for re-rendering the form
         );
-      } else if (
-        collector.type === 'SingleSelectCollector' &&
-        collector.input.type === 'DROPDOWN'
-      ) {
-        dropdownComponent(formEl, collector, davinciClient.update(collector));
-      } else if (collector.type === 'SingleSelectCollector' && collector.input.type === 'RADIO') {
-        radioComponent(formEl, collector, davinciClient.update(collector));
-      } else if (collector.type === 'MultiSelectCollector' && collector.input.type === 'COMBOBOX') {
-        comboboxComponent(formEl, collector, davinciClient.update(collector));
+      } else if (collector.type === 'SingleSelectCollector') {
+        singleValueComponent(formEl, collector, davinciClient.update(collector));
+      } else if (collector.type === 'MultiSelectCollector') {
+        multiValueComponent(formEl, collector, davinciClient.update(collector));
       }
     });
 

e2e/davinci-app/main.ts

@@ -104,6 +104,14 @@ button:focus-visible {
   text-decoration: underline;
 }
 
+.checkbox-wrapper input,
+.checkbox-wrapper label {
+  display: inline-block;
+  width: auto;
+  vertical-align: middle;
+  margin-right: 0.5em;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

e2e/davinci-app/style.css

@@ -11,6 +11,7 @@ const config: PlaywrightTestConfig = {
   timeout: 30000,
   use: {
     baseURL,
+    headless: false,
     ignoreHTTPSErrors: true,
     geolocation: { latitude: 24.9884, longitude: -87.3459 },
     bypassCSP: true,