Skip to content

SDKS-4200: Support pre-filled phone field #396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 8, 2025
Merged

SDKS-4200: Support pre-filled phone field #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shiny-crabs-wish.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@forgerock/davinci-client': minor
---

Added support for pre-filled phone number and country code
5 changes: 4 additions & 1 deletion e2e/davinci-app/components/object-value.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,10 @@ export default function objectValueComponent(
return;
}

updater({ phoneNumber: selectedValue, countryCode: collector.input.value.countryCode });
updater({
phoneNumber: selectedValue,
countryCode: collector.output.value?.countryCode || '',
});
});

formEl.appendChild(phoneLabel);
Expand Down
10 changes: 7 additions & 3 deletions e2e/davinci-suites/src/form-fields.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import { expect, test } from '@playwright/test';

import { asyncEvents } from './utils/async-events.js';

// This test is failing due to a new phone number feature flag for pre-filling country codes.
// A fix will be addressed in https://pingidentity.atlassian.net/browse/SDKS-4200
test.skip('Should render form fields', async ({ page }) => {
test('Should render form fields', async ({ page }) => {
const { navigate } = asyncEvents(page);
await navigate('/?clientId=60de77d5-dd2c-41ef-8c40-f8bb2381a359');

Expand All @@ -33,6 +31,8 @@ test.skip('Should render form fields', async ({ page }) => {
await page.locator('#combobox-field-key-3').check();
await page.locator('#combobox-field-key-2').uncheck();

await page.locator('#phone-number-input').fill('1234567890');

await expect(page.getByRole('button', { name: 'Flow Button' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Flow Link' })).toBeVisible();

Expand All @@ -52,6 +52,10 @@ test.skip('Should render form fields', async ({ page }) => {
'dropdown-field-key': 'dropdown-option2-value',
'radio-group-key': 'option2 value',
'combobox-field-key': ['option1 value', 'option3 value'],
'phone-field': {
phoneNumber: '1234567890',
countryCode: 'GB',
},
});
});

Expand Down
197 changes: 94 additions & 103 deletions e2e/davinci-suites/src/phone-number-field.test.ts
View file
Open in desktop
Copy link
Collaborator

@cerebrl cerebrl Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of these tests are growing pretty long and complex. That makes me a bit anxious that they will get more and more fragile.

Copy link
Collaborator Author

@ancheetah ancheetah Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, I also tried to reduce the amount of lines in these tests as much as I could. The last step in the tests, authentication with the registered device, doesn't seem to actually do anything according to the flow other than redirect back to the start of the flow so honestly we could remove the device authentication segment all together.

Copy link
Collaborator

@cerebrl cerebrl Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, let's remove anything that doesn't directly test the collectors themselves ... just to make them a tad more resilient.

Original file line number Diff line number Diff line change
Expand Up @@ -7,115 +7,106 @@
import { expect, test } from '@playwright/test';
import { password } from './utils/demo-user.js';

test('Login - add email device - authenticate with email device', async ({ page }) => {
/** Go to page */
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
test.describe('Device registration tests', () => {
const username = '[email protected]';

expect(page.url()).toContain(
'http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e',
);
/**
* Register a new user
*/
await page.goto('http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
await expect(page.getByRole('button', { name: 'USER_REGISTRATION' })).toBeVisible();
await page.getByRole('button', { name: 'USER_REGISTRATION' }).click();
await page.getByRole('textbox', { name: 'Email' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill('[email protected]');
await page.getByRole('textbox', { name: 'Password' }).fill('U.QPDWEN47ZMyJhCDmhGLK*nr');
await page.getByRole('textbox', { name: 'Given Name' }).fill('demouser');
await page.getByRole('textbox', { name: 'Family Name' }).fill('demouser');
expect(await page.getByRole('button', { name: 'Continue' })).toBeVisible();
await page.getByRole('button', { name: 'Continue' }).click();
await expect(page.getByRole('heading', { name: 'Registration Complete' })).toBeVisible();
await page.getByRole('button').click();
await page.getByRole('button', { name: 'Logout' }).click();
/***
* Login with the new user
**/
await page.goto('http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
await page.getByRole('button', { name: 'USER_LOGIN' }).click();
await page.getByText('SDK Automation - Sign On');
await page.getByRole('textbox', { name: 'Username' }).fill('[email protected]');
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('button', { name: 'Sign On' }).click();
test.afterEach(async ({ page }) => {
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');

/** Register a device */
await page.getByText('Select Test Form');
await page.getByRole('button', { name: 'DEVICE_REGISTRATION' }).click();
await page.getByText('SDK Automation - Device Registration');
await page.getByRole('button', { name: 'Email' }).click();
await page.getByText('SDK Automation - Device Registration');
await page.getByRole('textbox', { name: 'Email Address' }).fill('[email protected]');
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('EMAIL MFA Registered')).toBeVisible();
await page.getByRole('button').click();
await page.getByRole('button', { name: 'USER_LOGIN' }).click();
await page.getByRole('textbox', { name: 'Username' }).fill(username);
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('button', { name: 'Sign On' }).click();

/** Authenticate with the Device */
await page.getByRole('button', { name: 'DEVICE_AUTHENTICATION' }).click();
await page.getByText('SDK Automation - Device Authentication');
await page.getByRole('button', { name: 'Email' }).click();
await page.getByRole('button', { name: 'USER_DELETE' }).click();
await page.getByRole('heading', { name: 'Success' });
await page.getByRole('button', { name: 'Start over' }).click();
});
await page.getByRole('button', { name: 'USER_DELETE' }).click();
await expect(page.getByRole('heading', { name: 'Success' })).toBeVisible();
});

test('Login - add email device - authenticate with email device', async ({ page }) => {
/** Go to page */
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');

expect(page.url()).toContain(
'http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e',
);
await expect(page.getByText('Select Test Form')).toBeVisible();

/**
* Register a new user
*/
await page.getByRole('button', { name: 'USER_REGISTRATION' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill(username);
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('textbox', { name: 'Given Name' }).fill('demouser');
await page.getByRole('textbox', { name: 'Family Name' }).fill('demouser');
await page.getByRole('button', { name: 'Continue' }).click();
await expect(page.getByRole('heading', { name: 'Registration Complete' })).toBeVisible();
await page.getByRole('button', { name: 'Continue' }).click();
await page.getByRole('button', { name: 'Logout' }).click();

/***
* Login with the new user
**/
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
await page.getByRole('button', { name: 'USER_LOGIN' }).click();
await expect(page.getByText('SDK Automation - Sign On')).toBeVisible();
await page.getByRole('textbox', { name: 'Username' }).fill(username);
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('button', { name: 'Sign On' }).click();

// This test is failing due to a new phone number feature flag for pre-filling country codes.
// A fix will be addressed in https://pingidentity.atlassian.net/browse/SDKS-4200
test.skip('Login - add phone device - authenticate with phone device', async ({ page }) => {
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
/***
* Go to page
***/
expect(page.url()).toContain(
'http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0',
);
/** Register a device */
await expect(page.getByText('Select Test Form')).toBeVisible();
await page.getByRole('button', { name: 'DEVICE_REGISTRATION' }).click();
await expect(page.getByText('SDK Automation - Device Registration')).toBeVisible();
await page.getByRole('button', { name: 'Email' }).click();
await page
.getByRole('textbox', { name: 'Email Address' })
.fill('[email protected]');
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('EMAIL MFA Registered')).toBeVisible();
await page.getByRole('button', { name: 'Continue' }).click();
});

/**
* Register a new user
**/
await page.goto('http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
await expect(page.getByRole('button', { name: 'USER_REGISTRATION' })).toBeVisible();
await page.getByRole('button', { name: 'USER_REGISTRATION' }).click();
await page.getByRole('textbox', { name: 'Email' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill('[email protected]');
await page.getByRole('textbox', { name: 'Password' }).fill('U.QPDWEN47ZMyJhCDmhGLK*nr');
await page.getByRole('textbox', { name: 'Given Name' }).fill('demouser');
await page.getByRole('textbox', { name: 'Family Name' }).fill('demouser');
expect(await page.getByRole('button', { name: 'Continue' })).toBeVisible();
await page.getByRole('button', { name: 'Continue' }).click();
await expect(page.getByRole('heading', { name: 'Registration Complete' })).toBeVisible();
await page.getByRole('button').click();
await page.getByRole('button', { name: 'Logout' }).click();
await page.goto('http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
test('Login - add phone device - authenticate with phone device', async ({ page }) => {
/** Go to page */
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
expect(page.url()).toContain(
'http://localhost:5829/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0',
);

/**
* Login with the new user
**/
await page.getByRole('button', { name: 'USER_LOGIN' }).click();
await page.getByText('SDK Automation - Sign On');
await page.getByRole('textbox', { name: 'Username' }).fill('[email protected]');
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('button', { name: 'Sign On' }).click();
/**
* Register a new user
**/
await expect(page.getByText('Select Test Form')).toBeVisible();
await page.getByRole('button', { name: 'USER_REGISTRATION' }).click();
await page.getByRole('textbox', { name: 'Email' }).fill(username);
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('textbox', { name: 'Given Name' }).fill('demouser');
await page.getByRole('textbox', { name: 'Family Name' }).fill('demouser');
await page.getByRole('button', { name: 'Continue' }).click();
await expect(page.getByRole('heading', { name: 'Registration Complete' })).toBeVisible();
await page.getByRole('button', { name: 'Continue' }).click();
await page.getByRole('button', { name: 'Logout' }).click();

/** Register a Device */
await page.getByText('Select Test Form');
await page.getByRole('button', { name: 'DEVICE_REGISTRATION' }).click();
await page.getByText('SDK Automation - Device Registration');
await page.getByRole('button', { name: 'Text Message' }).click();
await expect(page.getByText('SDK Automation - Enter Phone Number')).toBeVisible();
await expect(page.locator('#countryCode')).toBeVisible();
await page.locator('#countryCode').selectOption('1');
await page.getByRole('textbox', { name: 'Enter Phone Number' }).fill('3035550100');
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('SMS/Voice MFA Registered')).toBeVisible();
await page.getByRole('button').click();
/**
* Login with the new user
**/
await page.goto('/?clientId=20dd0ed0-bb9b-4c8f-9a60-9ebeb4b348e0');
await page.getByRole('button', { name: 'USER_LOGIN' }).click();
await expect(page.getByText('SDK Automation - Sign On')).toBeVisible();
await page.getByRole('textbox', { name: 'Username' }).fill(username);
await page.getByRole('textbox', { name: 'Password' }).fill(password);
await page.getByRole('button', { name: 'Sign On' }).click();

/** Authenticate with the Device */
await page.getByRole('button', { name: 'DEVICE_AUTHENTICATION' }).click();
await page.getByText('SDK Automation - Device Authentication');
await page.getByRole('button', { name: 'Text Message' }).click();
await page.getByRole('button', { name: 'USER_DELETE' }).click();
await page.getByRole('heading', { name: 'Success' });
await page.getByRole('button', { name: 'Start over' }).click();
/** Register a Device */
await expect(page.getByText('Select Test Form')).toBeVisible();
await page.getByRole('button', { name: 'DEVICE_REGISTRATION' }).click();
await expect(page.getByText('SDK Automation - Device Registration')).toBeVisible();
await page.getByRole('button', { name: 'Text Message' }).click();
await expect(page.getByText('SDK Automation - Enter Phone Number')).toBeVisible();
await page.getByRole('textbox', { name: 'Enter Phone Number' }).fill('3035550100');
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('SMS/Voice MFA Registered')).toBeVisible();
await page.getByRole('button', { name: 'Continue' }).click();
});
});
2 changes: 1 addition & 1 deletion packages/davinci-client/src/lib/collector.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ export interface PhoneNumberInputValue {
phoneNumber: string;
}

interface PhoneNumberOutputValue {
export interface PhoneNumberOutputValue {
countryCode?: string;
phoneNumber?: string;
}
Expand Down
Loading
Loading