chore: fixes-for-form-fields

form-field validations were not being sent in requests.

Author: ryanbas21

e2e/davinci-app/components/password.ts

@@ -1,4 +1,5 @@
 import type { PasswordCollector, Updater } from '@forgerock/davinci-client/types';
+import { dotToCamelCase } from '../helper.js';
 
 export default function passwordComponent(
   formEl: HTMLFormElement,
@@ -8,19 +9,21 @@ export default function passwordComponent(
   const label = document.createElement('label');
   const input = document.createElement('input');
 
-  label.htmlFor = collector.output.key;
+  label.htmlFor = dotToCamelCase(collector.output.key);
   label.innerText = collector.output.label;
   input.type = 'password';
-  input.id = collector.output.key;
-  input.name = collector.output.key;
+  input.id = dotToCamelCase(collector.output.key);
+  input.name = dotToCamelCase(collector.output.key);
 
   formEl?.appendChild(label);
   formEl?.appendChild(input);
 
-  formEl?.querySelector(`#${collector.output.key}`)?.addEventListener('blur', (event: Event) => {
-    const error = updater((event.target as HTMLInputElement).value);
-    if (error && 'error' in error) {
-      console.error(error.error.message);
-    }
-  });
+  formEl
+    ?.querySelector(`#${dotToCamelCase(collector.output.key)}`)
+    ?.addEventListener('blur', (event: 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

@@ -3,13 +3,14 @@ import type {
   ValidatedTextCollector,
   Updater,
 } from '@forgerock/davinci-client/types';
+import { dotToCamelCase } from '../helper.js';
 
 export default function usernameComponent(
   formEl: HTMLFormElement,
   collector: TextCollector | ValidatedTextCollector,
   updater: Updater,
 ) {
-  const collectorKey = collector.output.key;
+  const collectorKey = dotToCamelCase(collector.output.key);
   const label = document.createElement('label');
   const input = document.createElement('input');
 

e2e/davinci-app/helper.ts

@@ -0,0 +1,8 @@
+export function dotToCamelCase(str: string) {
+  return str
+    .split('.')
+    .map((part: string, index: number) =>
+      index === 0 ? part.toLowerCase() : part.charAt(0).toUpperCase() + part.slice(1).toLowerCase(),
+    )
+    .join('');
+}

e2e/davinci-app/tsconfig.app.json

@@ -5,7 +5,7 @@
     "moduleResolution": "Bundler"
   },
   "exclude": ["**/*.spec.ts", "**/*.test.ts"],
-  "include": ["./main.ts", "components/**/*.ts"],
+  "include": ["./*.ts", "components/**/*.ts"],
   "references": [
     {
       "path": "../../packages/davinci-client/tsconfig.lib.json"

e2e/davinci-suites/src/form-fields.test.ts

@@ -24,8 +24,6 @@ test('Should render form fields', async ({ page }) => {
   const data = parsedData.parameters.data;
   expect(data.actionKey).toBe('submit');
   expect(data.formData).toEqual({
-    // leaving this here because it should be fixed and we would have a failing test when we do fix import {  } from "// to remind us to update the test"
-    ['undefined']: '',
     ['text-input-key']: 'This is some text',
     ['dropdown-field-key']: '',
     ['radio-group-key']: '',
@@ -39,29 +37,31 @@ test('should render form validation fields', async ({ page }) => {
   await expect(page.locator('#form')).toContainText('Form Validation');
   await page.getByRole('button', { name: 'Form Validation' }).click();
   await expect(page.getByRole('heading', { name: 'Form Fields Validation' })).toBeVisible();
-  await expect(page.getByText('Username')).toBeVisible();
-  await expect(page.getByRole('textbox', { name: 'Username' })).toBeVisible();
-  await expect(page.getByText('Email Address')).toBeVisible();
-  await expect(page.getByRole('textbox', { name: 'Email Address' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
-  await page.getByRole('textbox', { name: 'Username' }).click();
+
   await page.getByRole('textbox', { name: 'Username' }).fill('sdk-user');
   await expect(page.getByRole('textbox', { name: 'Username' })).toHaveValue('sdk-user');
-  await page.getByRole('textbox', { name: 'Email Address' }).click();
+
+  const password = page.getByRole('textbox', { name: 'Password' });
+  await password.type('password');
+  await expect(password).toHaveValue('password');
+
   await page.getByRole('textbox', { name: 'Email Address' }).fill('[email protected]');
   await expect(page.getByRole('textbox', { name: 'Email Address' })).toHaveValue(
     '[email protected]',
   );
+
   const requestPromise = page.waitForRequest((request) => request.url().includes('/customForm'));
   await page.getByRole('button', { name: 'Submit' }).click();
+
   const request = await requestPromise;
   const parsedData = JSON.parse(request.postData());
+
   const data = parsedData.parameters.data;
+
   expect(data.actionKey).toBe('submit');
   expect(data.formData).toEqual({
-    ['undefined']: '',
-    'user.username': '',
-    'user.password': '',
-    'user.email': '',
+    'user.username': 'sdk-user',
+    'user.password': 'password',
+    'user.email': '[email protected]',
   });
 });

packages/davinci-client/src/lib/client.store.ts

@@ -136,13 +136,19 @@ export async function davinci({ config }: { config: DaVinciConfig }) {
         };
       }
 
-      if (collectorToUpdate.category !== 'SingleValueCollector') {
-        console.error('Collector is not a SingleValueCollector and cannot be updated');
+      if (
+        collectorToUpdate.category !== 'SingleValueCollector' &&
+        collectorToUpdate.category !== 'ValidatedSingleValueCollector'
+      ) {
+        console.error(
+          'Collector is not a SingleValueCollector or ValidatedSingleValueCollector and cannot be updated',
+        );
         return function () {
           return {
             type: 'internal_error',
             error: {
-              message: 'Collector is not a SingleValueCollector and cannot be updated',
+              message:
+                'Collector is not a SingleValueCollector or ValidatedSingleValueCollector and cannot be updated',
               type: 'state_error',
             },
           };
@@ -151,6 +157,7 @@ export async function davinci({ config }: { config: DaVinciConfig }) {
 
       return function (value: string, index?: number) {
         try {
+          console.log('the value', value);
           store.dispatch(nodeSlice.actions.update({ id, value, index }));
           return null;
         } catch (err) {

packages/davinci-client/src/lib/davinci.utils.ts

@@ -23,7 +23,9 @@ import type { ContinueNode } from './node.types.js';
 export function transformSubmitRequest(node: ContinueNode): DaVinciRequest {
   // Filter out ActionCollectors as they are not used in form submissions
   const collectors = node.client?.collectors?.filter(
-    (collector) => collector.category === 'SingleValueCollector',
+    (collector) =>
+      collector.category === 'SingleValueCollector' ||
+      collector.category === 'ValidatedSingleValueCollector',
   );
 
   const formData = collectors?.reduce<{

packages/davinci-client/src/lib/node.reducer.ts

@@ -92,6 +92,7 @@ export const nodeCollectorReducer = createReducer(initialCollectorValues, (build
 
             // *Some* collectors may have default or existing data to display
             const data = action.payload.formData[field.key];
+
             // Match specific collectors
             switch (field.type) {
               case 'CHECKBOX':
@@ -165,7 +166,10 @@ export const nodeCollectorReducer = createReducer(initialCollectorValues, (build
         throw new Error('Value argument cannot be undefined');
       }
 
-      if (collector.category === 'SingleValueCollector') {
+      if (
+        collector.category === 'SingleValueCollector' ||
+        collector.category === 'ValidatedSingleValueCollector'
+      ) {
         if (Array.isArray(action.payload.value)) {
           throw new Error('SingleValueCollector does not accept an array');
         }