Add E2E tests.

woocommerce · Oct 4, 2024 · 4173593 · 4173593
1 parent 6fce3e6
commit 4173593
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 28 deletions.
diff --git a/js/src/components/google-combo-account-card/account-creation-description/index.js b/js/src/components/google-combo-account-card/account-creation-description/index.js
@@ -106,15 +106,15 @@ const AccountCreationDescription = ( {
 							'Merchant Center ID: %s',
 							'google-listings-and-ads'
 						),
-						googleMCAccount.id
+						googleMCAccount?.id
 					) }
 				/>
 				<AccountInfo
 					account={ googleAdsAccount }
 					text={ sprintf(
 						// Translators: %s is the Google Ads ID
 						__( 'Google Ads ID: %s', 'google-listings-and-ads' ),
-						googleAdsAccount.id
+						googleAdsAccount?.id
 					) }
 				/>
 			</>

diff --git a/js/src/components/google-combo-account-card/connect-account-card.js b/js/src/components/google-combo-account-card/connect-account-card.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -13,12 +18,22 @@ import './connect-account-card.scss';
  * @param {string} props.helperText The helper text for the account card.
  * @param {JSX.Element} props.body The content for the body of the account card.
  * @param {JSX.Element} props.footer The content for the footer of the account card.
+ * @param {string} props.className Additional class names for the account card.
  * @return {JSX.Element} ConnectAccountCard component.
  */
-const ConnectAccountCard = ( { title, helperText, body, footer } ) => {
+const ConnectAccountCard = ( {
+	title,
+	helperText,
+	body,
+	footer,
+	className = '',
+} ) => {
 	return (
 		<AccountCard
-			className="gla-google-combo-service-account-card"
+			className={ classNames(
+				'gla-google-combo-service-account-card',
+				className
+			) }
 			title={ title }
 			helper={ helperText }
 		>

diff --git a/js/src/components/google-combo-account-card/connect-ads/connect-ads.js b/js/src/components/google-combo-account-card/connect-ads/connect-ads.js
@@ -94,6 +94,7 @@ const ConnectAds = () => {
 
 	return (
 		<ConnectAccountCard
+			className="gla-google-combo-service-account-card--ads"
 			title={ __(
 				'Connect to existing Google Ads account',
 				'google-listings-and-ads'

diff --git a/js/src/components/google-combo-account-card/connected-google-combo-account-card.js b/js/src/components/google-combo-account-card/connected-google-combo-account-card.js
@@ -68,7 +68,7 @@ const ConnectedGoogleComboAccountCard = () => {
 	};
 
 	return (
-		<div className="gla-google-combo-account-card">
+		<div className="gla-google-combo-account-card gla-account-card">
 			<AccountCard
 				appearance={ APPEARANCE.GOOGLE }
 				className="gla-google-combo-account-card--connected"

diff --git a/tests/e2e/specs/setup-mc/step-1-accounts.test.js b/tests/e2e/specs/setup-mc/step-1-accounts.test.js
@@ -242,10 +242,12 @@ test.describe( 'Set up accounts', () => {
 			await setupAdsAccountPage.fulfillAdsAccounts(
 				[
 					[],
-					{
-						id: 78787878,
-						name: 'gla',
-					},
+					[
+						{
+							id: 78787878,
+							name: 'gla',
+						},
+					],
 				],
 				200,
 				[ 'GET' ]
@@ -254,12 +256,14 @@ test.describe( 'Set up accounts', () => {
 			await setupAdsAccountPage.fulfillMCAccounts(
 				[
 					[],
-					{
-						id: 5432178,
-						name: null,
-						subaccount: null,
-						domain: null,
-					},
+					[
+						{
+							id: 5432178,
+							name: null,
+							subaccount: null,
+							domain: null,
+						},
+					],
 				],
 				200,
 				'GET'
@@ -339,10 +343,12 @@ test.describe( 'Set up accounts', () => {
 			await setupAdsAccountPage.fulfillAdsAccounts(
 				[
 					[],
-					{
-						id: 78787878,
-						name: 'gla',
-					},
+					[
+						{
+							id: 78787878,
+							name: 'gla',
+						},
+					],
 				],
 				200,
 				[ 'GET' ]
@@ -351,12 +357,14 @@ test.describe( 'Set up accounts', () => {
 			await setupAdsAccountPage.fulfillMCAccounts(
 				[
 					[],
-					{
-						id: 5432178,
-						name: null,
-						subaccount: null,
-						domain: null,
-					},
+					[
+						{
+							id: 5432178,
+							name: null,
+							subaccount: null,
+							domain: null,
+						},
+					],
 				],
 				200,
 				'GET'
@@ -407,6 +415,143 @@ test.describe( 'Set up accounts', () => {
 		} );
 	} );
 
+	test.describe( 'Google Ads card aabrakadarbra', () => {
+		test.beforeAll( async () => {
+			// Mock Jetpack as connected
+			await setUpAccountsPage.mockJetpackConnected(
+				'Test user',
+				'[email protected]'
+			);
+
+			await setUpAccountsPage.fulfillMCAccounts( [
+				[
+					{
+						id: 5432178,
+						name: null,
+						subaccount: null,
+						domain: null,
+					},
+				],
+			] );
+
+			await setUpAccountsPage.fulfillAdsAccounts( [
+				[
+					{
+						id: 111111,
+						name: 'gla',
+					},
+					{
+						id: 222222,
+						name: 'gla',
+					},
+					{
+						id: 333333,
+						name: 'gla',
+					},
+				],
+			] );
+
+			await setUpAccountsPage.mockAdsAccountDisconnected();
+			await setUpAccountsPage.mockGoogleConnected();
+			await setUpAccountsPage.mockMCConnected();
+			await setUpAccountsPage.goto();
+		} );
+
+		test( 'should see the Google Ads card with the correct title and body', async () => {
+			const googleAdsAccountCard =
+				setUpAccountsPage.getGoogleAdsAccountCard();
+
+			await expect(
+				googleAdsAccountCard.getByText(
+					'Connect to existing Google Ads account',
+					{ exact: true }
+				)
+			).toBeVisible();
+
+			await expect(
+				googleAdsAccountCard.getByText(
+					'Required to set up conversion measurement for your store.',
+					{ exact: true }
+				)
+			).toBeVisible();
+
+			await expect(
+				googleAdsAccountCard.getByRole( 'button', { name: 'Connect' } )
+			).toBeDisabled();
+		} );
+
+		test( 'should see the button as enabled when selects the account from dropdown', async () => {
+			const googleAdsAccountCard =
+				setUpAccountsPage.getGoogleAdsAccountCard();
+
+			const adsAccountDropdown = googleAdsAccountCard.locator( 'select' );
+			await adsAccountDropdown.selectOption( '111111' );
+
+			await expect(
+				googleAdsAccountCard.getByRole( 'button', { name: 'Connect' } )
+			).toBeEnabled();
+		} );
+
+		test( 'should send an API request to connect existing Google Ads account', async () => {
+			const googleAdsAccountCard =
+				setUpAccountsPage.getGoogleAdsAccountCard();
+
+			await setUpAccountsPage.fulfillAdsAccounts(
+				{
+					id: 111111,
+				},
+				200,
+				[ 'POST' ]
+			);
+
+			await setUpAccountsPage.fulfillAdsAccountStatus(
+				{
+					has_access: true,
+				},
+				200,
+				[ 'GET' ]
+			);
+
+			await setUpAccountsPage.fulfillAdsConnection(
+				{
+					id: 111111,
+					status: 'connected',
+				},
+				200,
+				[ 'GET' ]
+			);
+
+			await googleAdsAccountCard
+				.getByRole( 'button', { name: 'Connect' } )
+				.click();
+		} );
+
+		test( 'should display the Ads ID in account card description', async () => {
+			await setUpAccountsPage.fulfillAdsAccounts(
+				[
+					[
+						{
+							id: 111111,
+						},
+					],
+				],
+				200,
+				[ 'GET' ]
+			);
+
+			const googleAdsAccountCard =
+				setUpAccountsPage.getGoogleAdsAccountCard();
+
+			await expect(
+				googleAdsAccountCard.getByText( 'Google Ads ID: 111111' )
+			).toBeVisible();
+
+			await expect(
+				googleAdsAccountCard.getByRole( 'button', { name: 'Connect' } )
+			).not.toBeVisible();
+		} );
+	} );
+
 	test.describe( 'Continue button', () => {
 		test.beforeAll( async () => {
 			// Mock Jetpack as connected

diff --git a/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js b/tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
@@ -258,9 +258,9 @@ export default class SetUpAccountsPage extends MockRequests {
 	 */
 	getGoogleAdsAccountCard() {
 		return this.getAccountCards( {
-			has: this.page.locator( '.gla-account-card__title', {
-				hasText: 'Google Ads',
-			} ),
+			has: this.page.locator(
+				'.gla-google-combo-service-account-card--ads'
+			),
 		} ).first();
 	}