chore(journey-client): address feedback and file/directory renaming

Author: cerebrl

.gitignore

@@ -19,6 +19,7 @@ packages/**/coverage/
 node_modules/
 tests/**/app/index.js*
 tests/**/ie11/ie-bundle.js*
+
 # Out-TSC directories (TypeScript output)
 **/out-tsc/*
 out-tsc/
@@ -32,6 +33,7 @@ out-tsc/
 
 # Test code
 tests/**/app/index.js*
+e2e/**/.env.e2e
 test-results
 
 # Environment files
@@ -53,7 +55,7 @@ vite.config.*.timestamp*
 .netrc
 
 # ignore this in CI please.
-# Nx stuff we get in CI that we dont want to commit
+# Nx stuff we get in CI that we don't want to commit
 code
 terminalOutput
 outputs/*
@@ -82,4 +84,4 @@ test-output
 
 # Gemini local knowledge base files
 GEMINI.md
-**/GEMINI.md
+**/GEMINI.md

e2e/davinci-suites/.env.e2e

@@ -7,7 +7,7 @@
 import type { PasswordCallback } from '@forgerock/journey-client/types';
 
 export default function passwordComponent(
-  formEl: HTMLFormElement,
+  journeyEl: HTMLDivElement,
   callback: PasswordCallback,
   idx: number,
 ) {
@@ -21,10 +21,10 @@ export default function passwordComponent(
   input.id = collectorKey;
   input.name = collectorKey;
 
-  formEl?.appendChild(label);
-  formEl?.appendChild(input);
+  journeyEl?.appendChild(label);
+  journeyEl?.appendChild(input);
 
-  formEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
+  journeyEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
     callback.setPassword((event.target as HTMLInputElement).value);
   });
 }

e2e/journey-app/components/password.ts

@@ -7,7 +7,7 @@
 import type { NameCallback } from '@forgerock/journey-client/types';
 
 export default function textComponent(
-  formEl: HTMLFormElement,
+  journeyEl: HTMLDivElement,
   callback: NameCallback,
   idx: number,
 ) {
@@ -21,10 +21,10 @@ export default function textComponent(
   input.id = collectorKey;
   input.name = collectorKey;
 
-  formEl?.appendChild(label);
-  formEl?.appendChild(input);
+  journeyEl?.appendChild(label);
+  journeyEl?.appendChild(input);
 
-  formEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
+  journeyEl?.querySelector(`#${collectorKey}`)?.addEventListener('input', (event) => {
     callback.setName((event.target as HTMLInputElement).value);
   });
 }

e2e/journey-app/components/text.ts

@@ -16,7 +16,8 @@
           <img src="./public/typescript.svg" class="logo vanilla" alt="TypeScript logo" />
         </a>
         <form id="form">
-          <div class="error-div"></div>
+          <div id="error-container"></div>
+          <div id="journey-container"></div>
         </form>
       </div>
     </div>

e2e/journey-app/index.html

@@ -43,7 +43,8 @@ const requestMiddleware: RequestMiddleware[] = [
 
 (async () => {
   const journeyClient = await journey({ config, requestMiddleware });
-  const formEl = document.getElementById('form') as HTMLFormElement;
+  const errorEl = document.getElementById('error') as HTMLDivElement;
+  const journeyEl = document.getElementById('journey') as HTMLDivElement;
 
   let step = await journeyClient.start();
 
@@ -54,7 +55,7 @@ const requestMiddleware: RequestMiddleware[] = [
 
     const session = step.getSessionToken();
 
-    formEl.innerHTML = `
+    journeyEl.innerHTML = `
       <h2>Complete</h2>
       <span>Session:</span>
       <pre data-testid="sessionToken" id="sessionToken">${session}</pre>
@@ -79,17 +80,16 @@ const requestMiddleware: RequestMiddleware[] = [
     }
 
     const error = step.payload.message;
-    const errorDiv = formEl.querySelector('#error-div');
-    if (errorDiv) {
-      errorDiv.innerHTML = `
+    if (errorEl) {
+      errorEl.innerHTML = `
         <pre>${error}</pre>
         `;
     }
   }
 
   // Represents the main render function for app
   async function renderForm() {
-    formEl.innerHTML = '';
+    journeyEl.innerHTML = '';
 
     if (step?.type !== 'Step') {
       throw new Error('Expected step to be defined and of type Step');
@@ -99,22 +99,22 @@ const requestMiddleware: RequestMiddleware[] = [
 
     const header = document.createElement('h2');
     header.innerText = formName || '';
-    formEl.appendChild(header);
+    journeyEl.appendChild(header);
 
     const callbacks = step.callbacks;
 
     callbacks.forEach((callback, idx) => {
       if (callback.getType() === 'NameCallback') {
         const cb = callback as NameCallback;
         textComponent(
-          formEl, // You can ignore this; it's just for rendering
+          journeyEl, // You can ignore this; it's just for rendering
           cb, // This callback class
           idx,
         );
       } else if (callback.getType() === 'PasswordCallback') {
         const cb = callback as PasswordCallback;
         passwordComponent(
-          formEl, // You can ignore this; it's just for rendering
+          journeyEl, // You can ignore this; it's just for rendering
           cb, // This callback class
           idx,
         );
@@ -125,10 +125,10 @@ const requestMiddleware: RequestMiddleware[] = [
     submitBtn.type = 'submit';
     submitBtn.id = 'submitButton';
     submitBtn.innerText = 'Submit';
-    formEl.appendChild(submitBtn);
+    journeyEl.appendChild(submitBtn);
   }
 
-  formEl.addEventListener('submit', async (event) => {
+  journeyEl.addEventListener('submit', async (event) => {
     event.preventDefault();
 
     if (step?.type !== 'Step') {

e2e/journey-app/main.ts

@@ -7,6 +7,7 @@
 
 import { expect, test } from '@playwright/test';
 import { asyncEvents } from './utils/async-events.js';
+import { username, password } from './utils/demo-user.js';
 
 test('Test happy paths on test page', async ({ page }) => {
   const { navigate } = asyncEvents(page);
@@ -23,8 +24,8 @@ test('Test happy paths on test page', async ({ page }) => {
   expect(page.url()).toBe('http://localhost:5829/');
 
   // Perform basic login
-  await page.getByLabel('User Name').fill('demouser');
-  await page.getByLabel('Password').fill('U.QPDWEN47ZMyJhCDmhGLK*nr');
+  await page.getByLabel('User Name').fill(username);
+  await page.getByLabel('Password').fill(password);
   await page.getByRole('button', { name: 'Submit' }).click();
   await expect(page.getByText('Complete')).toBeVisible();
 

e2e/journey-suites/.env.e2e

@@ -32,7 +32,7 @@ export function asyncEvents(page) {
       }
       const clientIdStorage = originStorage?.localStorage.find((item) => item.name === clientId);
 
-      if (clientIdStorage && typeof clientIdStorage.value !== 'string' && !clientIdStorage.value) {
+      if (!clientIdStorage || typeof clientIdStorage.value !== 'string' || !clientIdStorage.value) {
         return null;
       }
       try {

e2e/journey-suites/src/basic.test.ts

@@ -5,4 +5,4 @@
  * of the MIT license. See the LICENSE file for details.
  */
 
-export * from './lib/journey-client.js';
+export * from './lib/journey.store.js';