E2E - Ads Paid Campaign Step 1 - Connect Ads Account

tests/e2e/specs/add-paid-campaigns/step-1-accounts.test.js

@@ -0,0 +1,249 @@
+/**
+ * External dependencies
+ */
+import { expect, test } from '@playwright/test';
+/**
+ * Internal dependencies
+ */
+import { clearOnboardedMerchant, setOnboardedMerchant } from '../../utils/api';
+import DashboardPage from '../../utils/pages/dashboard.js';
+import SetupAdsAccountsPage from '../../utils/pages/setup-ads/setup-ads-accounts.js';
+import { LOAD_STATE } from '../../utils/constants';
+
+const ADS_ACCOUNTS = [
+	{
+		id: 1111111,
+		name: 'Test 1',
+	},
+	{
+		id: 2222222,
+		name: 'Test 2',
+	},
+];
+
+test.use( { storageState: process.env.ADMINSTATE } );
+
+test.describe.configure( { mode: 'serial' } );
+
+/**
+ * @type {import('../../utils/pages/dashboard.js').default} dashboardPage
+ */
+let dashboardPage = null;
+
+/**
+ * @type {import('../../utils/pages/setup-ads/setup-ads-accounts').default} setupAdsAccounts
+ */
+let setupAdsAccounts = null;
+
+/**
+ * @type {import('@playwright/test').Locator} adsConnectionButton
+ */
+let adsConnectionButton = null;
+
+/**
+ * @type {import('@playwright/test').Page} page
+ */
+let page = null;
+
+test.describe( 'Set up Ads account', () => {
+	test.beforeAll( async ( { browser } ) => {
+		page = await browser.newPage();
+		dashboardPage = new DashboardPage( page );
+		setupAdsAccounts = new SetupAdsAccountsPage( page );
+		await setOnboardedMerchant();
+		await setupAdsAccounts.mockAdsAccountsResponse( [] );
+		await dashboardPage.mockRequests();
+		await dashboardPage.goto();
+	} );
+
+	test.afterAll( async () => {
+		await clearOnboardedMerchant();
+		await page.close();
+	} );
+
+	test( 'Dashboard page contains Add Paid campaign buttons', async () => {
+		//Add page campaign in the Performance (Paid Campaigns) section
+		await expect(
+			dashboardPage.getAdsConnectionAllProgramsButton( 'summary-card' )
+		).toBeEnabled();
+
+		//Add page campaign in the programs section.
+		adsConnectionButton = dashboardPage.getAdsConnectionAllProgramsButton();
+		await expect( adsConnectionButton ).toBeEnabled();
+	} );
+
+	test.describe( 'Set up your accounts page', async () => {
+		test.beforeAll( async () => {
+			await setupAdsAccounts.mockAdsAccountsResponse( [] );
+			await adsConnectionButton.click();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+		} );
+
+		test( 'Page header should be "Set up your accounts"', async () => {
+			await expect(
+				page.getByRole( 'heading', { name: 'Set up your accounts' } )
+			).toBeVisible();
+			await expect(
+				page.getByText(
+					'Connect your Google account and your Google Ads account to set up a paid Performance Max campaign.'
+				)
+			).toBeVisible();
+		} );
+
+		test( 'Google Account should show as connected', async () => {
+			await expect(
+				page.getByText(
+					'This Google account is connected to your store’s product feed.'
+				)
+			).toBeVisible();
+		} );
+
+		test( 'Continue Button should be disabled', async () => {
+			await expect( setupAdsAccounts.getContinueButton() ).toBeDisabled();
+		} );
+	} );
+
+	test.describe( 'Add paid campaigns with no Ads account', async () => {
+		test( 'Create an account should be visible', async () => {
+			const createAccountButton = page.getByRole( 'button', {
+				name: 'Create account',
+			} );
+
+			await expect( createAccountButton ).toBeVisible();
+
+			await expect( setupAdsAccounts.getContinueButton() ).toBeDisabled();
+
+			await expect(
+				page.getByText(
+					'Connect with millions of shoppers who are searching for products like yours and drive sales with Google.'
+				)
+			).toBeVisible();
+
+			await createAccountButton.click();
+		} );
+
+		test( 'Create account button should be disable if the ToS have not been accepted.', async () => {
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Create Google Ads Account',
+				} )
+			).toBeVisible();
+
+			await expect(
+				page.getByText(
+					'By creating a Google Ads account, you agree to the following terms and conditions:'
+				)
+			).toBeVisible();
+
+			await expect(
+				setupAdsAccounts.getCreateAdsAccountButtonModal()
+			).toBeDisabled();
+		} );
+
+		test( 'Accept terms and conditions to enable the create account button', async () => {
+			await setupAdsAccounts.getAcceptTermCreateAccount().check();
+
+			await expect(
+				setupAdsAccounts.getCreateAdsAccountButtonModal()
+			).toBeEnabled();
+		} );
+
+		test( 'Create Ads account', async () => {
+			//Intercept Ads connection request
+			const connectAdsAccountRequest =
+				setupAdsAccounts.registerConnectAdsAccountRequests();
+
+			await setupAdsAccounts.mockAdsAccountsResponse( [
+				ADS_ACCOUNTS[ 1 ],
+			] );
+
+			//Mock request to fulfill Ads connection
+			setupAdsAccounts.fulfillAdsConnection( {
+				id: ADS_ACCOUNTS[ 1 ].id,
+				currency: 'EUR',
+				symbol: '\u20ac',
+				status: 'connected',
+			} );
+
+			await setupAdsAccounts.getCreateAdsAccountButtonModal().click();
+
+			await connectAdsAccountRequest;
+
+			await expect( setupAdsAccounts.getContinueButton() ).toBeEnabled();
+
+			await expect(
+				page.getByRole( 'link', {
+					name: `Account ${ ADS_ACCOUNTS[ 1 ].id }`,
+				} )
+			).toBeVisible();
+		} );
+	} );
+
+	test.describe( 'Add paid campaigns with existing Ads accounts', () => {
+		test.beforeAll( async () => {
+			await setupAdsAccounts.mockAdsAccountsResponse( ADS_ACCOUNTS );
+			//Disconnect the account from the previous test
+			setupAdsAccounts.fulfillAdsConnection( {
+				id: ADS_ACCOUNTS[ 1 ].id,
+				currency: 'EUR',
+				symbol: '\u20ac',
+				status: 'disconnected',
+			} );
+			await page.reload();
+		} );
+
+		test( 'Select one existing account', async () => {
+			const adsAccountSelected = `${ ADS_ACCOUNTS[ 1 ].id }`;
+
+			await expect(
+				setupAdsAccounts.getConnectAdsButton()
+			).toBeDisabled();
+
+			await setupAdsAccounts.selectAnExistingAdsAccount(
+				adsAccountSelected
+			);
+
+			await expect(
+				setupAdsAccounts.getConnectAdsButton()
+			).toBeEnabled();
+
+			//Intercept Ads connection request
+			const connectAdsAccountRequest =
+				setupAdsAccounts.registerConnectAdsAccountRequests(
+					adsAccountSelected
+				);
+
+			//Mock request to fulfill Ads connection
+			setupAdsAccounts.fulfillAdsConnection( {
+				id: ADS_ACCOUNTS[ 1 ].id,
+				currency: 'EUR',
+				symbol: '\u20ac',
+				status: 'connected',
+			} );
+
+			await setupAdsAccounts.clickConnectAds();
+			await connectAdsAccountRequest;
+
+			await expect( setupAdsAccounts.getContinueButton() ).toBeEnabled();
+		} );
+
+		test( 'Continue to create paid campaign', async () => {
+			await setupAdsAccounts.clickContinue();
+			await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED );
+
+			await expect(
+				page.getByRole( 'heading', {
+					name: 'Create your paid campaign',
+				} )
+			).toBeVisible();
+
+			await expect(
+				page.getByRole( 'heading', { name: 'Ads audience' } )
+			).toBeVisible();
+
+			await expect(
+				page.getByRole( 'heading', { name: 'Set your budget' } )
+			).toBeVisible();
+		} );
+	} );
+} );

tests/e2e/utils/mock-requests.js

@@ -210,6 +210,16 @@ export default class MockRequests {
 		);
 	}
 
+	/**
+	 * Fulfill the Ads Account request.
+	 *
+	 * @param {Object} payload
+	 * @return {Promise<void>}
+	 */
+	async fulfillAdsAccounts( payload ) {
+		await this.fulfillRequest( /\/wc\/gla\/ads\/accounts\b/, payload );
+	}
+
 	/**
 	 * Fulfill the Sync Settings Connection request.
 	 *

tests/e2e/utils/pages/dashboard.js

@@ -63,11 +63,7 @@ export default class DashboardPage extends MockRequests {
 			email: '[email protected]',
 		} );
 
-		await this.fulfillGoogleConnection( {
-			active: 'yes',
-			email: '[email protected]',
-			scope: [],
-		} );
+		await this.mockGoogleConnected();
 
 		await this.fulfillAdsConnection( {
 			id: 0,
@@ -131,4 +127,23 @@ export default class DashboardPage extends MockRequests {
 		const continueToEditButton = await this.getContinueToEditButton();
 		await continueToEditButton.click();
 	}
+
+	/**
+	 * Get the Ads connection button.
+	 *
+	 * @param  {('programs-table'|'summary-card')} [type] The type of button to get. Either 'programs-table' or 'summary-card'.
+	 * @return {import('@playwright/test').Locator} Get the Ads connection button.
+	 */
+	getAdsConnectionAllProgramsButton( type = 'programs-table' ) {
+		return this.page.locator(
+			`${
+				type === 'programs-table'
+					? '.gla-all-programs-table-card button'
+					: '.gla-summary-card'
+			}`,
+			{
+				hasText: 'Add paid campaign',
+			}
+		);
+	}
 }