diff --git a/tests/qa/package.json b/tests/qa/package.json index cc937571e..ca66a66bf 100644 --- a/tests/qa/package.json +++ b/tests/qa/package.json @@ -40,7 +40,7 @@ "lint:md": "wp-scripts lint-md-docs ./**/*.md README.md", "lint:md:fix": "wp-scripts lint-md-docs --fix ./**/*.md README.md", "lint:js": "wp-scripts lint-js **/*.{ts,tsx,mjs} **/.*/*.{ts,tsx,mjs}", - "lint:js:fix": "wp-scripts lint-js --resolve-plugins-relative-to ./ --fix ./**/*.{ts,tsx,mjs} ./**/.*/*.{ts,tsx,mjs}", + "lint:js:fix": "wp-scripts lint-js --resolve-plugins-relative-to ./ --fix './**/*.{ts,tsx,mjs}'", "all": "npx playwright test --workers=1 --project \"all\"" }, "eslintConfig": { diff --git a/tests/qa/tests/02-dashboard-ui/visual-default-ui.spec.ts b/tests/qa/tests/02-dashboard-ui/visual-default-ui.spec.ts index b475c64aa..373f06cdb 100644 --- a/tests/qa/tests/02-dashboard-ui/visual-default-ui.spec.ts +++ b/tests/qa/tests/02-dashboard-ui/visual-default-ui.spec.ts @@ -75,6 +75,16 @@ test.describe.serial( () => { await pcpOnboarding.page.waitForLoadState(); await percy.takeSnapshot( testInfo.title, percyConfig ); } ); + + test( 'PCP-0000 | Settings - Onboarding - Enable Sandbox mode - Default UI @percy', async ( { + pcpOnboarding, + percy, + }, testInfo ) => { + await pcpOnboarding.visit(); + await pcpOnboarding.openAdvancedOptions(); + await pcpOnboarding.enableSandboxMode(); + await percy.takeSnapshot( testInfo.title, percyConfig ); + } ); } ); test( 'PCP-0000 | Settings - Badge values per country @percy', async ( { diff --git a/tests/qa/utils/admin/pcp-onboarding.ts b/tests/qa/utils/admin/pcp-onboarding.ts index 04268a925..4981cc6ef 100644 --- a/tests/qa/utils/admin/pcp-onboarding.ts +++ b/tests/qa/utils/admin/pcp-onboarding.ts @@ -36,20 +36,22 @@ export class PcpOnboarding extends PcpAdminPage { this.page.locator( 'input[type="checkbox"][value="physical"]' ); enableOptionalPaymentMethodsRadio = () => - this.page.locator( - 'input.ppcp-r__radio-value[value="true"]' - ); + this.page.locator( 'input.ppcp-r__radio-value[value="true"]' ); disableOptionalPaymentMethodsRadio = () => - this.page.locator( - 'input.ppcp-r__radio-value[value="false"]' - ); + this.page.locator( 'input.ppcp-r__radio-value[value="false"]' ); connectToPayPalButton = () => this.page.getByRole( 'button', { name: 'Connect to PayPal' } ); + enableSandboxModeLabel = () => this.page.getByText( 'Enable Sandbox Mode' ); + enableSandboxModeToggle = () => + this.page.locator( '.components-form-toggle' ).first(); + // Actions isCurrentStep = async ( title: Pcp.Admin.Onboarding.StepTitle ) => { - await this.page.waitForFunction(() => !!document.querySelector('button.is-title')); + await this.page.waitForFunction( + () => !! document.querySelector( 'button.is-title' ) + ); return await this.pageTitle( String( title ) ).isVisible(); }; @@ -75,5 +77,16 @@ export class PcpOnboarding extends PcpAdminPage { } }; + enableSandboxMode = async () => { + const isChecked = await this.enableSandboxModeToggle().getAttribute( + 'class' + ); + const isToggleChecked = isChecked.includes( 'is-checked' ); + if ( ! isToggleChecked ) { + await this.enableSandboxModeLabel().click(); + await this.page.waitForLoadState( 'networkidle' ); + } + }; + // Assertions } diff --git a/tests/qa/utils/frontend/paypal-ui.ts b/tests/qa/utils/frontend/paypal-ui.ts index ae16b0e60..ce0e8dbc0 100644 --- a/tests/qa/utils/frontend/paypal-ui.ts +++ b/tests/qa/utils/frontend/paypal-ui.ts @@ -489,7 +489,9 @@ export class PayPalUI { openPayPalPupup = async ( dataFundingSource: string = 'paypal' ) => { const popupPromise = this.page.waitForEvent( 'popup' ); - await expect( this.fundingSourceButton( dataFundingSource ) ).toBeVisible(); + await expect( + this.fundingSourceButton( dataFundingSource ) + ).toBeVisible(); await this.fundingSourceButton( dataFundingSource ).click(); const popup = await popupPromise;