test(davinci-client): e2e tests for agreements, single checkbox, rich text

.gitignore

@@ -100,3 +100,5 @@ GEMINI.md
 
 # Polaris
 .polaris-setup-progress.json
+.polaris
+.playwright-mcp

e2e/davinci-app/components/boolean.ts

@@ -4,37 +4,38 @@
  * This software may be modified and distributed under the terms
  * of the MIT license. See the LICENSE file for details.
  */
-import type { ValidatedBooleanCollector, Updater } from '@forgerock/davinci-client/types';
+import type {
+  ValidatedBooleanCollector,
+  Updater,
+  Validator,
+} from '@forgerock/davinci-client/types';
 
 /**
  * Creates a single checkbox and attaches it to the form
- * @param {HTMLFormElement} formEl - The form element to attach the checkboxes to
+ * @param {HTMLFormElement} formEl - The form element to attach the checkbox to
  * @param {ValidatedBooleanCollector} collector - Contains the configuration
  * @param {Updater} updater - Function to call when selection changes
  */
 export default function booleanComponent(
   formEl: HTMLFormElement,
   collector: ValidatedBooleanCollector,
   updater: Updater<ValidatedBooleanCollector>,
+  validator: Validator<ValidatedBooleanCollector>,
 ) {
-  // Create a container for the checkboxes
+  const collectorKey = collector.output.key;
+
+  // Create a container for the checkbox
   const containerDiv = document.createElement('div');
   containerDiv.className = 'single-checkbox-container';
 
-  // Create a heading/label for the checkbox group
-  const groupLabel = document.createElement('div');
-  groupLabel.textContent = collector.output.label || 'Single Checkbox';
-  groupLabel.className = 'single-checkbox-label';
-  containerDiv.appendChild(groupLabel);
-
-  // Create checkboxes for each option
+  // Create a single checkbox
   const wrapper = document.createElement('div');
   wrapper.className = 'checkbox-wrapper';
 
   const checkbox = document.createElement('input');
   checkbox.type = 'checkbox';
-  checkbox.id = collector.output.key;
-  checkbox.name = collector.output.key || 'single-checkbox-field';
+  checkbox.id = collectorKey;
+  checkbox.name = collectorKey || 'single-checkbox-field';
   checkbox.checked = collector.output.value;
   checkbox.value = 'checked';
 
@@ -44,8 +45,25 @@ export default function booleanComponent(
 
   // Add event listener to handle single-select behavior
   checkbox.addEventListener('change', (event) => {
-    const target = event.target as HTMLInputElement;
-    updater(target.checked);
+    const checked = (event.target as HTMLInputElement).checked;
+    const result = validator(checked);
+    const errorEl = formEl?.querySelector(`.${collectorKey}-error`);
+
+    // Keep collector state aligned with the current UI value
+    const updateError = updater(checked);
+    if (updateError && 'error' in updateError) {
+      console.error(updateError.error.message);
+    }
+
+    // Validate the input
+    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 {
+      formEl.querySelector(`.${collectorKey}-error`)?.remove();
+    }
   });
 
   wrapper.appendChild(checkbox);

e2e/davinci-app/components/text.ts

@@ -16,7 +16,7 @@ export default function textComponent(
   formEl: HTMLFormElement,
   collector: TextCollector | ValidatedTextCollector,
   updater: Updater<TextCollector | ValidatedTextCollector>,
-  validator: Validator,
+  validator: Validator<ValidatedTextCollector>,
 ) {
   const collectorKey = dotToCamelCase(collector.output.key);
   const label = document.createElement('label');

e2e/davinci-app/main.ts

@@ -300,7 +300,12 @@ const urlParams = new URLSearchParams(window.location.search);
       } else if (collector.type === 'MultiSelectCollector') {
         multiValueComponent(formEl, collector, davinciClient.update(collector));
       } else if (collector.type === 'ValidatedBooleanCollector') {
-        booleanComponent(formEl, collector, davinciClient.update(collector));
+        booleanComponent(
+          formEl,
+          collector,
+          davinciClient.update(collector),
+          davinciClient.validate(collector),
+        );
       }
     });
 

e2e/davinci-app/server-configs.ts

@@ -46,13 +46,16 @@ export const serverConfigs: Record<string, DaVinciConfig> = {
         'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
     },
   },
-  '60de77d5-dd2c-41ef-8c40-f8bb2381a359': {
-    clientId: '60de77d5-dd2c-41ef-8c40-f8bb2381a359',
+  /**
+   * Form Fields
+   */
+  'e4ef2896-8d90-4abd-bf0f-7b8034995927': {
+    clientId: 'e4ef2896-8d90-4abd-bf0f-7b8034995927',
     redirectUri: window.location.origin + '/',
     scope: 'openid profile email name revoke',
     serverConfig: {
       wellknown:
-        'https://auth.pingone.ca/02fb4743-189a-4bc7-9d6c-a919edfe6447/as/.well-known/openid-configuration',
+        'https://auth.pingone.ca/356a254c-cba3-4ade-be1a-860136e8df01/as/.well-known/openid-configuration',
     },
   },
   /**

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

@@ -10,9 +10,9 @@ import { asyncEvents } from './utils/async-events.js';
 
 test('Should render form fields', async ({ page }) => {
   const { navigate } = asyncEvents(page);
-  await navigate('/?clientId=60de77d5-dd2c-41ef-8c40-f8bb2381a359');
+  await navigate('/?clientId=e4ef2896-8d90-4abd-bf0f-7b8034995927');
 
-  await expect(page.getByText('Select Test Form')).toBeVisible();
+  await expect(page.getByText('Select Form Fields Test Form')).toBeVisible();
   await page.getByRole('button', { name: 'Form Fields' }).click();
 
   await expect(page.getByText('Form Fields Test')).toBeVisible();
@@ -34,6 +34,32 @@ test('Should render form fields', async ({ page }) => {
   await page.locator('#phone-number-input-1').fill('1234567890');
   await page.locator('#extension-input-1').fill('7890');
 
+  // Rich text should render a link
+  await expect(page.getByRole('link', { name: 'Ping Identity' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Ping Identity' })).toHaveAttribute(
+    'href',
+    'https://www.pingidentity.com',
+  );
+
+  // Agreement title and content should be visible
+  await expect(page.getByRole('heading', { name: 'Terms of Service Agreement' })).toBeVisible();
+  await expect(
+    page.getByText(
+      'This is example agreement text, you can edit this text in the agreements section.',
+    ),
+  ).toBeVisible();
+
+  // Single checkbox default value
+  await expect(page.locator('#single-checkbox-field')).not.toBeChecked();
+  await expect(page.getByText('I agree to the Terms and Conditions')).toBeVisible();
+
+  // Toggle the single checkbox and assert that it is optional by the abscence of an error message
+  await page.locator('#single-checkbox-field').check();
+  await expect(page.locator('#single-checkbox-field')).toBeChecked();
+  await page.locator('#single-checkbox-field').uncheck();
+  await expect(page.locator('#single-checkbox-field')).not.toBeChecked();
+  await expect(page.locator('.single-checkbox-field-error')).not.toBeAttached();
+
   await expect(page.getByRole('button', { name: 'Flow Button' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'Flow Link' })).toBeVisible();
 
@@ -53,20 +79,20 @@ test('Should render form fields', async ({ page }) => {
     'checkbox-field-key': ['option1 value', 'option2 value'],
     'dropdown-field-key': 'dropdown-option2-value',
     'radio-group-key': 'option2 value',
-    'single-checkbox-field': false,
     'combobox-field-key': ['option1 value', 'option3 value'],
     'phone-field': {
       phoneNumber: '1234567890',
       countryCode: 'GB',
       extension: '7890', // Tests PhoneNumberExtensionCollector
     },
+    'single-checkbox-field': false,
   });
 });
 
 test('should render form validation fields', async ({ page }) => {
-  await page.goto('http://localhost:5829/?clientId=60de77d5-dd2c-41ef-8c40-f8bb2381a359');
+  await page.goto('http://localhost:5829/?clientId=e4ef2896-8d90-4abd-bf0f-7b8034995927');
 
-  await expect(page.getByText('Select Test Form')).toBeVisible();
+  await expect(page.getByText('Select Form Fields Test Form')).toBeVisible();
 
   await page.getByRole('button', { name: 'Form Validation' }).click();
 
@@ -80,4 +106,9 @@ test('should render form validation fields', async ({ page }) => {
 
   await page.getByRole('textbox', { name: 'Email Address' }).fill('abc@email.com');
   await expect(page.getByText('Not a valid email')).not.toBeVisible();
+
+  // Toggle the single checkbox to assert error message
+  await page.locator('#single-checkbox-field').check();
+  await page.locator('#single-checkbox-field').uncheck();
+  await expect(page.getByText('Select the checkbox to continue.')).toBeVisible();
 });

packages/davinci-client/api-report/davinci-client.api.md

@@ -284,13 +284,11 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
     resume: (input: {
         continueToken: string;
     }) => Promise<InternalErrorResponse | NodeStates>;
-    start: <QueryParams extends OutgoingQueryParams = OutgoingQueryParams>(options?: StartOptions<QueryParams> | undefined) => Promise<ContinueNode | ErrorNode | StartNode | SuccessNode | FailureNode>;
+    start: <QueryParams extends OutgoingQueryParams = OutgoingQueryParams>(options?: StartOptions<QueryParams> | undefined) => Promise<ContinueNode | ErrorNode | FailureNode | StartNode | SuccessNode>;
     update: <T extends SingleValueCollectors | MultiSelectCollector | ObjectValueCollectors | AutoCollectors>(collector: T) => Updater<T>;
     validate: (collector: SingleValueCollectors | ObjectValueCollectors | MultiValueCollectors | AutoCollectors) => Validator;
     pollStatus: (collector: PollingCollector) => Poller;
     getClient: () => {
-        status: "start";
-    } | {
         action: string;
         collectors: Collectors[];
         description?: string;
@@ -302,22 +300,22 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         description?: string;
         name?: string;
         status: "error";
+    } | {
+        status: "failure";
+    } | {
+        status: "start";
     } | {
         authorization?: {
             code?: string;
             state?: string;
         };
         status: "success";
-    } | {
-        status: "failure";
     } | null;
     getCollectors: () => Collectors[];
     getError: () => DaVinciError | null;
     getErrorCollectors: () => CollectorErrors[];
-    getNode: () => ContinueNode | ErrorNode | StartNode | SuccessNode | FailureNode;
+    getNode: () => ContinueNode | ErrorNode | FailureNode | StartNode | SuccessNode;
     getServer: () => {
-        status: "start";
-    } | {
         _links?: Links;
         id?: string;
         interactionId?: string;
@@ -335,20 +333,22 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
     } | {
         _links?: Links;
         eventName?: string;
+        href?: string;
         id?: string;
         interactionId?: string;
         interactionToken?: string;
-        href?: string;
-        session?: string;
-        status: "success";
+        status: "failure";
+    } | {
+        status: "start";
     } | {
         _links?: Links;
         eventName?: string;
-        href?: string;
         id?: string;
         interactionId?: string;
         interactionToken?: string;
-        status: "failure";
+        href?: string;
+        session?: string;
+        status: "success";
     } | null;
     cache: {
         getLatestResponse: () => ((state: RootState<    {
@@ -382,14 +382,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "data" | "fulfilledTimeStamp"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -406,7 +406,7 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & {
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -423,14 +423,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "error"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -477,14 +477,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "data" | "fulfilledTimeStamp"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -501,7 +501,7 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & {
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -518,14 +518,14 @@ export function davinci<ActionType extends ActionTypes = ActionTypes>(input: {
         } & Omit<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
         }, "error"> & Required<Pick<{
             requestId: string;
             data?: unknown;
-            error?: SerializedError | FetchBaseQueryError | undefined;
+            error?: FetchBaseQueryError | SerializedError | undefined;
             endpointName: string;
             startedTimeStamp: number;
             fulfilledTimeStamp?: number;
@@ -1187,8 +1187,8 @@ value: Record<string, unknown>;
 }, string>;
 
 // @public
-export const nodeCollectorReducer: Reducer<(ValidatedTextCollector | ValidatedBooleanCollector | ValidatedPasswordCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | PhoneNumberExtensionCollector | ProtectCollector | FidoRegistrationCollector | FidoAuthenticationCollector | PollingCollector | TextCollector | PasswordCollector | SingleSelectCollector | UnknownCollector | IdpCollector | FlowCollector | SubmitCollector | ReadOnlyCollector | RichTextCollector | QrCodeCollector | AgreementCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector"> | MultiSelectCollector)[]> & {
-    getInitialState: () => (ValidatedTextCollector | ValidatedBooleanCollector | ValidatedPasswordCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | PhoneNumberExtensionCollector | ProtectCollector | FidoRegistrationCollector | FidoAuthenticationCollector | PollingCollector | TextCollector | PasswordCollector | SingleSelectCollector | UnknownCollector | IdpCollector | FlowCollector | SubmitCollector | ReadOnlyCollector | RichTextCollector | QrCodeCollector | AgreementCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector"> | MultiSelectCollector)[];
+export const nodeCollectorReducer: Reducer<(TextCollector | SingleSelectCollector | PasswordCollector | ValidatedPasswordCollector | ValidatedBooleanCollector | ValidatedTextCollector | ProtectCollector | PollingCollector | FidoRegistrationCollector | FidoAuthenticationCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | PhoneNumberExtensionCollector | UnknownCollector | IdpCollector | FlowCollector | SubmitCollector | ReadOnlyCollector | RichTextCollector | QrCodeCollector | AgreementCollector | MultiSelectCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector">)[]> & {
+    getInitialState: () => (TextCollector | SingleSelectCollector | PasswordCollector | ValidatedPasswordCollector | ValidatedBooleanCollector | ValidatedTextCollector | ProtectCollector | PollingCollector | FidoRegistrationCollector | FidoAuthenticationCollector | DeviceAuthenticationCollector | DeviceRegistrationCollector | PhoneNumberCollector | PhoneNumberExtensionCollector | UnknownCollector | IdpCollector | FlowCollector | SubmitCollector | ReadOnlyCollector | RichTextCollector | QrCodeCollector | AgreementCollector | MultiSelectCollector | ActionCollector<"ActionCollector"> | SingleValueCollector<"SingleValueCollector">)[];
 };
 
 // @public (undocumented)
@@ -1670,9 +1670,7 @@ export type SingleCheckboxField = {
     key: string;
     label: string;
     required: boolean;
-    validation?: {
-        errorMessage: string;
-    };
+    errorMessage?: string;
 };
 
 // @public (undocumented)