From ce14200370c5c539424ae0a67d22edb073230e4a Mon Sep 17 00:00:00 2001
From: Sedat <s.beser@inpsyde.com>
Date: Mon, 10 Feb 2025 14:21:07 +0300
Subject: [PATCH] Visual test- Enable manually connection

Visual test for enabling manual connection added
---
 .../02-dashboard-ui/visual-default-ui.spec.ts | 10 +++++++
 tests/qa/utils/admin/pcp-onboarding.ts        | 28 ++++++++++++++-----
 tests/qa/utils/frontend/paypal-ui.ts          |  4 ++-
 3 files changed, 34 insertions(+), 8 deletions(-)

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 f1256eba3..0c8f067b8 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 - Settings - Onboarding - See advanced options - Manually Connect by clicking on label - Default UI @percy', async ( {
+		pcpOnboarding,
+		percy,
+	}, testInfo ) => {
+		await pcpOnboarding.visit();
+		await pcpOnboarding.openAdvancedOptions();
+		await pcpOnboarding.enableManuallyConnect();
+		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..380932752 100644
--- a/tests/qa/utils/admin/pcp-onboarding.ts
+++ b/tests/qa/utils/admin/pcp-onboarding.ts
@@ -36,20 +36,24 @@ 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' } );
 
+	enableManuallyConnectLabel = () =>
+		this.page.getByText( 'Manually Connect' );
+
+	enableManuallyConnectToggle = () =>
+		this.page.locator( '.components-form-toggle' ).nth( 1 );
+
 	// 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 +79,15 @@ export class PcpOnboarding extends PcpAdminPage {
 		}
 	};
 
+	disableManuallyConnect = async () => {
+		const isChecked = await this.enableManuallyConnectToggle().getAttribute(
+			'class'
+		);
+		const isToggleChecked = isChecked.includes( 'is-checked' );
+		if ( isToggleChecked ) {
+			await this.enableManuallyConnectLabel().click();
+		}
+	};
+
 	// 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;