test(journey-client): ported legacy Journey tests to new Client

e2e/journey-app/callback-map.ts

@@ -0,0 +1,157 @@
+/*
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+
+import type {
+  AttributeInputCallback,
+  BaseCallback,
+  ChoiceCallback,
+  ConfirmationCallback,
+  DeviceProfileCallback,
+  HiddenValueCallback,
+  KbaCreateCallback,
+  MetadataCallback,
+  NameCallback,
+  PasswordCallback,
+  PingOneProtectEvaluationCallback,
+  PingOneProtectInitializeCallback,
+  PollingWaitCallback,
+  ReCaptchaCallback,
+  ReCaptchaEnterpriseCallback,
+  RedirectCallback,
+  SelectIdPCallback,
+  SuspendedTextOutputCallback,
+  TermsAndConditionsCallback,
+  TextInputCallback,
+  TextOutputCallback,
+  ValidatedCreatePasswordCallback,
+  ValidatedCreateUsernameCallback,
+} from '@forgerock/journey-client/types';
+
+import {
+  attributeInputComponent,
+  choiceComponent,
+  confirmationComponent,
+  deviceProfileComponent,
+  hiddenValueComponent,
+  kbaCreateComponent,
+  metadataComponent,
+  passwordComponent,
+  pingProtectEvaluationComponent,
+  pingProtectInitializeComponent,
+  pollingWaitComponent,
+  recaptchaComponent,
+  recaptchaEnterpriseComponent,
+  redirectComponent,
+  selectIdpComponent,
+  suspendedTextOutputComponent,
+  termsAndConditionsComponent,
+  textInputComponent,
+  textOutputComponent,
+  validatedPasswordComponent,
+  validatedUsernameComponent,
+} from './components/index.js';
+
+/**
+ * Renders a callback component based on its type
+ * @param journeyEl - The container element to append the component to
+ * @param callback - The callback instance
+ * @param idx - Index for generating unique IDs
+ */
+export function renderCallback(
+  journeyEl: HTMLDivElement,
+  callback: BaseCallback,
+  idx: number,
+): void {
+  switch (callback.getType()) {
+    case 'BooleanAttributeInputCallback':
+    case 'NumberAttributeInputCallback':
+    case 'StringAttributeInputCallback':
+      attributeInputComponent(
+        journeyEl,
+        callback as AttributeInputCallback<string | number | boolean>,
+        idx,
+      );
+      break;
+    case 'ChoiceCallback':
+      choiceComponent(journeyEl, callback as ChoiceCallback, idx);
+      break;
+    case 'ConfirmationCallback':
+      confirmationComponent(journeyEl, callback as ConfirmationCallback, idx);
+      break;
+    case 'DeviceProfileCallback':
+      deviceProfileComponent(journeyEl, callback as DeviceProfileCallback, idx);
+      break;
+    case 'HiddenValueCallback':
+      hiddenValueComponent(journeyEl, callback as HiddenValueCallback, idx);
+      break;
+    case 'KbaCreateCallback':
+      kbaCreateComponent(journeyEl, callback as KbaCreateCallback, idx);
+      break;
+    case 'MetadataCallback':
+      metadataComponent(journeyEl, callback as MetadataCallback, idx);
+      break;
+    case 'NameCallback':
+      textInputComponent(journeyEl, callback as NameCallback, idx);
+      break;
+    case 'PasswordCallback':
+      passwordComponent(journeyEl, callback as PasswordCallback, idx);
+      break;
+    case 'PingOneProtectEvaluationCallback':
+      pingProtectEvaluationComponent(journeyEl, callback as PingOneProtectEvaluationCallback, idx);
+      break;
+    case 'PingOneProtectInitializeCallback':
+      pingProtectInitializeComponent(journeyEl, callback as PingOneProtectInitializeCallback, idx);
+      break;
+    case 'PollingWaitCallback':
+      pollingWaitComponent(journeyEl, callback as PollingWaitCallback, idx);
+      break;
+    case 'ReCaptchaCallback':
+      recaptchaComponent(journeyEl, callback as ReCaptchaCallback, idx);
+      break;
+    case 'ReCaptchaEnterpriseCallback':
+      recaptchaEnterpriseComponent(journeyEl, callback as ReCaptchaEnterpriseCallback, idx);
+      break;
+    case 'RedirectCallback':
+      redirectComponent(journeyEl, callback as RedirectCallback, idx);
+      break;
+    case 'SelectIdPCallback':
+      selectIdpComponent(journeyEl, callback as SelectIdPCallback, idx);
+      break;
+    case 'SuspendedTextOutputCallback':
+      suspendedTextOutputComponent(journeyEl, callback as SuspendedTextOutputCallback, idx);
+      break;
+    case 'TermsAndConditionsCallback':
+      termsAndConditionsComponent(journeyEl, callback as TermsAndConditionsCallback, idx);
+      break;
+    case 'TextInputCallback':
+      textInputComponent(journeyEl, callback as TextInputCallback, idx);
+      break;
+    case 'TextOutputCallback':
+      textOutputComponent(journeyEl, callback as TextOutputCallback, idx);
+      break;
+    case 'ValidatedCreatePasswordCallback':
+      validatedPasswordComponent(journeyEl, callback as ValidatedCreatePasswordCallback, idx);
+      break;
+    case 'ValidatedCreateUsernameCallback':
+      validatedUsernameComponent(journeyEl, callback as ValidatedCreateUsernameCallback, idx);
+      break;
+    default:
+      console.warn(`Unknown callback type: ${callback.getType()}`);
+      break;
+  }
+}
+
+/**
+ * Renders all callbacks in a step
+ * @param journeyEl - The container element to append components to
+ * @param callbacks - Array of callback instances
+ */
+export function renderCallbacks(journeyEl: HTMLDivElement, callbacks: BaseCallback[]): void {
+  callbacks.forEach((callback, idx) => {
+    renderCallback(journeyEl, callback, idx);
+  });
+}

e2e/journey-app/components/README.md

@@ -0,0 +1,84 @@
+# Journey App Components
+
+This directory contains UI components for rendering different types of journey callbacks in the e2e test application. Each component follows a consistent pattern and handles the specific requirements of its callback type.
+
+## Available Components
+
+### Input Components
+
+- **`attribute-input.ts`** - `AttributeInputCallback` - Handles string, number, and boolean attribute inputs with appropriate input types
+- **`choice.ts`** - `ChoiceCallback` - Renders a select dropdown with available choices
+- **`confirmation.ts`** - `ConfirmationCallback` - Creates radio buttons for confirmation options
+- **`kba-create.ts`** - `KbaCreateCallback` - Two-field form for creating security questions and answers
+- **`password.ts`** - `PasswordCallback` - Password input field
+- **`text-input.ts`** - `NameCallback`, `TextInputCallback` - Generic text input component
+- **`validated-password.ts`** - `ValidatedCreatePasswordCallback` - Password input with validation
+- **`validated-username.ts`** - `ValidatedCreateUsernameCallback` - Username input with validation
+
+### Output Components
+
+- **`text-output.ts`** - `TextOutputCallback` - Displays text messages
+- **`suspended-text-output.ts`** - `SuspendedTextOutputCallback` - Styled suspension message display
+
+### Interaction Components
+
+- **`redirect.ts`** - `RedirectCallback` - Button to trigger external redirects
+- **`select-idp.ts`** - `SelectIdPCallback` - Radio buttons for identity provider selection
+- **`terms-and-conditions.ts`** - `TermsAndConditionsCallback` - Terms display with acceptance checkbox
+
+### Security Components
+
+- **`recaptcha.ts`** - `ReCaptchaCallback` - reCAPTCHA challenge placeholder
+- **`recaptcha-enterprise.ts`** - `ReCaptchaEnterpriseCallback` - reCAPTCHA Enterprise placeholder
+- **`ping-protect-evaluation.ts`** - `PingOneProtectEvaluationCallback` - Risk assessment display
+- **`ping-protect-initialize.ts`** - `PingOneProtectInitializeCallback` - Protection initialization
+
+### Utility Components
+
+- **`device-profile.ts`** - `DeviceProfileCallback` - Device profiling indicator
+- **`hidden-value.ts`** - `HiddenValueCallback` - Hidden input field
+- **`metadata.ts`** - `MetadataCallback` - Hidden metadata storage
+- **`polling-wait.ts`** - `PollingWaitCallback` - Loading spinner with wait message
+
+## Component Pattern
+
+All components follow this consistent pattern:
+
+```typescript
+export default function componentName(
+  journeyEl: HTMLDivElement,
+  callback: CallbackType,
+  idx: number,
+) {
+  // Create DOM elements
+  // Set up event listeners
+  // Append to journeyEl
+}
+```
+
+### Parameters
+
+- **`journeyEl`** - The container element to append the component to
+- **`callback`** - The callback instance with data and methods
+- **`idx`** - Index for generating unique IDs
+
+### Usage Example
+
+```typescript
+import { choiceComponent } from './components/index.js';
+
+// Render a choice callback
+choiceComponent(containerDiv, choiceCallback, 0);
+```
+
+## Implementation Notes
+
+- All components handle their own styling via inline CSS or style attributes
+- Event listeners are set up to call appropriate callback methods
+- Components generate unique IDs using the callback's input name or a fallback
+- Error handling is implemented where appropriate
+- Console logging is used for debugging and demonstration
+
+## Component States
+
+Some components like reCAPTCHA and PingOne Protect include simulation timeouts for demonstration purposes in the e2e testing environment. In production, these would integrate with actual third-party services.

e2e/journey-app/components/attribute-input.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type { AttributeInputCallback } from '@forgerock/journey-client/types';
+
+export default function attributeInputComponent(
+  journeyEl: HTMLDivElement,
+  callback: AttributeInputCallback<string | number | boolean>,
+  idx: number,
+) {
+  const collectorKey = callback?.payload?.input?.[0].name || `collector-${idx}`;
+  const label = document.createElement('label');
+  const input = document.createElement('input');
+
+  label.htmlFor = collectorKey;
+  label.innerText = callback.getPrompt();
+
+  // Determine input type based on attribute type
+  const attributeType = callback.getType();
+  if (attributeType === 'BooleanAttributeInputCallback') {
+    input.type = 'checkbox';
+    input.checked = (callback.getInputValue() as boolean) || false;
+  } else if (attributeType === 'NumberAttributeInputCallback') {
+    input.type = 'number';
+    input.value = String(callback.getInputValue() || '');
+  } else {
+    input.type = 'text';
+    input.value = String(callback.getInputValue() || '');
+  }
+
+  input.id = collectorKey;
+  input.name = collectorKey;
+  input.required = callback.isRequired();
+
+  journeyEl?.appendChild(label);
+  journeyEl?.appendChild(input);
+
+  journeyEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
+    const target = event.target as HTMLInputElement;
+    if (attributeType === 'BooleanAttributeInputCallback') {
+      callback.setInputValue(target.checked);
+    } else if (attributeType === 'NumberAttributeInputCallback') {
+      callback.setInputValue(Number(target.value));
+    } else {
+      callback.setInputValue(target.value);
+    }
+  });
+}

e2e/journey-app/components/choice.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type { ChoiceCallback } from '@forgerock/journey-client/types';
+
+export default function choiceComponent(
+  journeyEl: HTMLDivElement,
+  callback: ChoiceCallback,
+  idx: number,
+) {
+  const collectorKey = callback?.payload?.input?.[0].name || `collector-${idx}`;
+  const label = document.createElement('label');
+  const select = document.createElement('select');
+
+  label.htmlFor = collectorKey;
+  label.innerText = callback.getPrompt();
+  select.id = collectorKey;
+  select.name = collectorKey;
+
+  // Add choices as options
+  const choices = callback.getChoices();
+  const defaultChoice = callback.getDefaultChoice();
+
+  choices.forEach((choice, index) => {
+    const option = document.createElement('option');
+    option.value = String(index);
+    option.text = choice;
+    option.selected = index === defaultChoice;
+    select.appendChild(option);
+  });
+
+  journeyEl?.appendChild(label);
+  journeyEl?.appendChild(select);
+
+  journeyEl?.querySelector(`#${collectorKey}`)?.addEventListener('change', (event) => {
+    const selectedIndex = Number((event.target as HTMLSelectElement).value);
+    callback.setChoiceIndex(selectedIndex);
+  });
+}

e2e/journey-app/components/confirmation.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2025 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type { ConfirmationCallback } from '@forgerock/journey-client/types';
+
+export default function confirmationComponent(
+  journeyEl: HTMLDivElement,
+  callback: ConfirmationCallback,
+  idx: number,
+) {
+  const collectorKey = callback?.payload?.input?.[0].name || `collector-${idx}`;
+  const label = document.createElement('label');
+  const container = document.createElement('div');
+
+  label.innerText = callback.getPrompt();
+  container.id = collectorKey;
+
+  // Get options and default option
+  const options = callback.getOptions();
+  const defaultOption = callback.getDefaultOption();
+
+  // Create radio buttons for each option
+  options.forEach((option: string, index: number) => {
+    const radioContainer = document.createElement('div');
+    const radio = document.createElement('input');
+    const radioLabel = document.createElement('label');
+
+    radio.type = 'radio';
+    radio.id = `${collectorKey}-${index}`;
+    radio.name = collectorKey;
+    radio.value = String(index);
+    radio.checked = index === defaultOption;
+
+    radioLabel.htmlFor = `${collectorKey}-${index}`;
+    radioLabel.innerText = option;
+
+    radioContainer.appendChild(radio);
+    radioContainer.appendChild(radioLabel);
+    container.appendChild(radioContainer);
+  });
+
+  journeyEl?.appendChild(label);
+  journeyEl?.appendChild(container);
+
+  // Add event listener for radio button changes
+  journeyEl?.querySelectorAll(`input[name="${collectorKey}"]`)?.forEach((radio) => {
+    radio.addEventListener('change', (event) => {
+      if ((event.target as HTMLInputElement).checked) {
+        const selectedIndex = Number((event.target as HTMLInputElement).value);
+        callback.setOptionIndex(selectedIndex);
+      }
+    });
+  });
+}