From 4173593daf58f3616cab95b56d2ef93961a167b1 Mon Sep 17 00:00:00 2001 From: Ankit Gade Date: Fri, 4 Oct 2024 22:27:36 +0530 Subject: [PATCH] Add E2E tests. --- .../account-creation-description/index.js | 4 +- .../connect-account-card.js | 19 +- .../connect-ads/connect-ads.js | 1 + .../connected-google-combo-account-card.js | 2 +- .../specs/setup-mc/step-1-accounts.test.js | 185 ++++++++++++++++-- .../pages/setup-mc/step-1-set-up-accounts.js | 6 +- 6 files changed, 189 insertions(+), 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 index bb5a7ec23d..70563fdbf2 100644 --- 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,7 +106,7 @@ const AccountCreationDescription = ( { 'Merchant Center ID: %s', 'google-listings-and-ads' ), - googleMCAccount.id + googleMCAccount?.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 index 5eabd53af5..5c1bcdacf2 100644 --- 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 ( 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 index 7eb056a578..dc35cd21fb 100644 --- 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 ( { }; return ( -
+
{ 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', + 'jetpack@example.com' + ); + + 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 index 1876de366c..0cc72fb791 100644 --- 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(); }