Skip to content

Forms: E2E test updates for sentence casing Forms UI #104066

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
Jun 9, 2025
Merged

Forms: E2E test updates for sentence casing Forms UI #104066

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
54 changes: 27 additions & 27 deletions packages/calypso-e2e/src/lib/blocks/block-flows/all-form-fields.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class AllFormFieldsFlow implements BlockFlow {
}

// You add an individual input field...
blockSidebarName = 'Text Input Field';
blockSidebarName = 'Text input field';
// ... but a full Form block is added and marked as selected in the editor!
blockEditorSelector = makeSelectorFromBlockName( 'Form' );

Expand All @@ -38,31 +38,31 @@ export class AllFormFieldsFlow implements BlockFlow {
async configure( context: EditorContext ): Promise< void > {
// Determine if we are working with the refactored form fields (released June 2025)
const editorCanvas = await context.editorPage.getEditorCanvas();
const initailBlock = editorCanvas.locator( makeSelectorFromBlockName( 'Text Input Field' ) );
const initailBlock = editorCanvas.locator( makeSelectorFromBlockName( 'Text input field' ) );
const inputChild = initailBlock.locator( '[aria-label="Block: Input"]' );
const isRefactor = ( await inputChild.count() ) > 0;

// Text Input Field is already added by the first step, so let's start by labeling it.
await labelFormFieldBlock( context.addedBlockLocator, {
blockName: 'Text Input Field',
blockName: 'Text input field',
accessibleLabelName: 'Add label…',
labelText: this.addLabelPrefix( 'Text Input Field' ),
labelText: this.addLabelPrefix( 'Text input field' ),
} );
let lastBlockName = 'Text Input Field';
let lastBlockName = 'Text input field';

// Add remaining field blocks, labeling as we go.
const remainingBlocksToAdd = [
[ 'Name Field', 'Add label…' ],
[ 'Email Field', 'Add label…' ],
[ 'Website Field', 'Add label…' ],
[ 'Date Picker', 'Add label…' ],
[ 'Phone Number Field', 'Add label…' ],
[ 'Multi-line Text Field', 'Add label…' ],
[ 'Name field', 'Add label…' ],
[ 'Email field', 'Add label…' ],
[ 'Website field', 'Add label…' ],
[ 'Date picker', 'Add label…' ],
[ 'Phone number field', 'Add label…' ],
[ 'Multi-line text field', 'Add label…' ],
[ 'Checkbox', 'Add label…' ],
[ 'Multiple Choice (Checkbox)', 'Add label' ],
[ 'Single Choice (Radio)', 'Add label' ],
[ 'Dropdown Field', 'Add label' ],
[ 'Terms Consent', 'Add implicit consent message…' ],
[ 'Multiple choice (checkbox)', 'Add label' ],
[ 'Single choice (radio)', 'Add label' ],
[ 'Dropdown field', 'Add label' ],
[ 'Terms consent', 'Add implicit consent message…' ],
];
for ( const [ blockName, accessibleLabelName ] of remainingBlocksToAdd ) {
await this.addFieldBlockToForm( context, blockName, lastBlockName, isRefactor );
Expand All @@ -79,8 +79,8 @@ export class AllFormFieldsFlow implements BlockFlow {
const otherBlocksToLabel = isRefactor
? [
[ 'Button', 'Add text…' ],
[ 'Option', 'Add option…', 'Single Choice (Radio)' ],
[ 'Option', 'Add option…', 'Multiple Choice (Checkbox)' ],
[ 'Option', 'Add option…', 'Single choice (radio)' ],
[ 'Option', 'Add option…', 'Multiple choice (checkbox)' ],
]
: [
[ 'Button', 'Add text…' ],
Expand All @@ -106,28 +106,28 @@ export class AllFormFieldsFlow implements BlockFlow {
*/
async validateAfterPublish( context: PublishedPostContext ): Promise< void > {
const isRefactor = ( await context.page.locator( '.wp-block-jetpack-input' ).count() ) > 0;
const radioName = isRefactor ? 'Option' : 'Single Choice Option';
const checkboxName = isRefactor ? 'Option' : 'Multiple Choice Option';
const radioName = isRefactor ? 'Option' : 'Single choice option';
const checkboxName = isRefactor ? 'Option' : 'Multiple choice option';

await validatePublishedFormFields( context.page, [
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Text Input Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Name Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Email Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Website Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Phone Number Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Multi-line Text Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Text input field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Name field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Email field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Website field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Phone number field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Multi-line text field' ) },
{ type: 'checkbox', accessibleName: this.addLabelPrefix( 'Checkbox' ) },
{ type: 'radio', accessibleName: this.addLabelPrefix( radioName ) },
{ type: 'checkbox', accessibleName: this.addLabelPrefix( checkboxName ) },
{ type: 'button', accessibleName: this.addLabelPrefix( 'Button' ) },
// Currently broken, sadly! See: https://github.com/Automattic/jetpack/issues/30762
// { type: 'combobox', accessibleName: this.addLabelPrefix( 'Dropdown Field' ) },
// { type: 'combobox', accessibleName: this.addLabelPrefix( 'Dropdown field' ) },
] );

// The terms consent is kind of weird because it's applied to a hidden checkbox, so we validate that here.
await context.page
.getByRole( 'checkbox', {
name: this.addLabelPrefix( 'Terms Consent' ),
name: this.addLabelPrefix( 'Terms consent' ),
includeHidden: true,
} )
.first()
Expand Down
12 changes: 6 additions & 6 deletions packages/calypso-e2e/src/lib/blocks/block-flows/contact-form.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ export class ContactFormFlow implements BlockFlow {
// Name and Email are common fields shared amongst all Form patterns.
// So let's make them unique here!
await labelFormFieldBlock( context.addedBlockLocator, {
blockName: 'Name Field',
blockName: 'Name field',
accessibleLabelName: 'Add label…',
labelText: this.addLabelPrefix( 'Name Field' ),
labelText: this.addLabelPrefix( 'Name field' ),
} );
await labelFormFieldBlock( context.addedBlockLocator, {
blockName: 'Email Field',
blockName: 'Email field',
accessibleLabelName: 'Add label…',
labelText: this.addLabelPrefix( 'Email Field' ),
labelText: this.addLabelPrefix( 'Email field' ),
} );
}

Expand All @@ -64,8 +64,8 @@ export class ContactFormFlow implements BlockFlow {
*/
async validateAfterPublish( context: PublishedPostContext ): Promise< void > {
await validatePublishedFormFields( context.page, [
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Name Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Email Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Name field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Email field' ) },
// This is the default label pulled in by the Contact Form pattern.
// It's unique-ish and a good validation of that pattern, so we've left it alone.
{ type: 'textbox', accessibleName: 'Message' },
Expand Down
12 changes: 6 additions & 6 deletions packages/calypso-e2e/src/lib/blocks/block-flows/form-patterns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ export class FormPatternsFlow implements BlockFlow {
// Name and Email are common fields shared amongst all Form patterns.
// So let's make them unique here!
await labelFormFieldBlock( newParentBlockLocator, {
blockName: 'Name Field',
blockName: 'Name field',
accessibleLabelName: 'Add label…',
labelText: this.addLabelPrefix( 'Name Field' ),
labelText: this.addLabelPrefix( 'Name field' ),
} );
await labelFormFieldBlock( newParentBlockLocator, {
blockName: 'Email Field',
blockName: 'Email field',
accessibleLabelName: 'Add label…',
labelText: this.addLabelPrefix( 'Email Field' ),
labelText: this.addLabelPrefix( 'Email field' ),
} );
}

Expand Down Expand Up @@ -111,8 +111,8 @@ export class FormPatternsFlow implements BlockFlow {
*/
async validateAfterPublish( context: PublishedPostContext ): Promise< void > {
await validatePublishedFormFields( context.page, [
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Name Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Email Field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Name field' ) },
{ type: 'textbox', accessibleName: this.addLabelPrefix( 'Email field' ) },
...this.validationData.otherExpectedFields,
] );
}
Expand Down