diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.js b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js new file mode 100644 index 0000000000..dfff4dd2c9 --- /dev/null +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.js @@ -0,0 +1,105 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { createInterpolateElement, useState } from '@wordpress/element'; +import { CheckboxControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { glaData } from '.~/constants'; +import AccountCard, { APPEARANCE } from '.~/components/account-card'; +import AppButton from '.~/components/app-button'; +import readMoreLink from '../google-account-card/read-more-link'; +import useGoogleConnectFlow from '../google-account-card/use-google-connect-flow'; +import AppDocumentationLink from '../app-documentation-link'; +import './connect-google-combo-account-card.scss'; + +/** + * @param {Object} props React props + * @param {boolean} props.disabled + * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'reconnect' }` + * @fires gla_google_account_connect_button_click with `{ action: 'authorization', context: 'setup-mc' }` + * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'required-google-permissions', href: 'https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions' }` + * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'google-mc-terms-of-service', href: 'https://support.google.com/merchants/answer/160173' }` + * @fires gla_documentation_link_click with `{ context: 'setup-ads', link_id: 'google-ads-terms-of-service', href: 'https://support.google.com/adspolicy/answer/54818' }` + */ +const ConnectGoogleComboAccountCard = ( { disabled } ) => { + const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc'; + const [ handleConnect, { loading, data } ] = + useGoogleConnectFlow( pageName ); + const [ termsAccepted, setTermsAccepted ] = useState( false ); + + return ( + +

+ { __( + 'Required to sync with Google Merchant Center and Google Ads.', + 'google-listings-and-ads' + ) } +

+ Merchant Center and Google Ads', + 'google-listings-and-ads' + ), + { + linkMerchant: ( + + ), + linkAds: ( + + ), + } + ) } + checked={ termsAccepted } + onChange={ setTermsAccepted } + disabled={ disabled } + /> + + } + helper={ createInterpolateElement( + __( + 'You will be prompted to give WooCommerce access to your Google account. Please check all the checkboxes to give WooCommerce all required permissions. Read more', + 'google-listings-and-ads' + ), + { + link: readMoreLink, + } + ) } + alignIndicator="top" + indicator={ + + } + /> + ); +}; + +export default ConnectGoogleComboAccountCard; diff --git a/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss new file mode 100644 index 0000000000..9260eecaf1 --- /dev/null +++ b/js/src/components/google-combo-account-card/connect-google-combo-account-card.scss @@ -0,0 +1,6 @@ +.gla-connect-google-combo-account-card { + + .gla-account-card__helper { + font-size: $gla-font-base; + } +} diff --git a/js/src/components/google-combo-account-card/index.js b/js/src/components/google-combo-account-card/index.js new file mode 100644 index 0000000000..098fb7b4ef --- /dev/null +++ b/js/src/components/google-combo-account-card/index.js @@ -0,0 +1,33 @@ +/** + * Internal dependencies + */ +import useGoogleAccount from '.~/hooks/useGoogleAccount'; +import AppSpinner from '.~/components/app-spinner'; +import AccountCard from '.~/components/account-card'; +import RequestFullAccessGoogleAccountCard from '../google-account-card/request-full-access-google-account-card'; +import { ConnectedGoogleAccountCard } from '../google-account-card'; +import ConnectGoogleComboAccountCard from './connect-google-combo-account-card'; + +export default function GoogleComboAccountCard( { disabled = false } ) { + const { google, scope, hasFinishedResolution } = useGoogleAccount(); + + if ( ! hasFinishedResolution ) { + return } />; + } + + const isConnected = google?.active === 'yes'; + + if ( isConnected && scope.glaRequired ) { + return ; + } + + if ( isConnected && ! scope.glaRequired ) { + return ( + + ); + } + + return ; +} diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index a1de3d777b..d4bfc68f86 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -20,7 +20,7 @@ import Section from '.~/wcdl/section'; import AppDocumentationLink from '.~/components/app-documentation-link'; import VerticalGapLayout from '.~/components/vertical-gap-layout'; import WPComAccountCard from '.~/components/wpcom-account-card'; -import GoogleAccountCard from '.~/components/google-account-card'; +import GoogleComboAccountCard from '.~/components/google-combo-account-card'; import Faqs from './faqs'; import './index.scss'; import useGoogleAdsAccount from '.~/hooks/useGoogleAdsAccount'; @@ -157,7 +157,7 @@ const SetupAccounts = ( props ) => { { ! isJetpackActive && ( ) } - + diff --git a/tests/e2e/specs/setup-mc/step-1-accounts.test.js b/tests/e2e/specs/setup-mc/step-1-accounts.test.js index 6e84aa2ab1..1e8b0cf552 100644 --- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js +++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js @@ -66,12 +66,6 @@ test.describe( 'Set up accounts', () => { const googleAccountCard = setUpAccountsPage.getGoogleAccountCard(); await expect( googleAccountCard.getByRole( 'button' ) ).toBeDisabled(); - const mcAccountCard = setUpAccountsPage.getMCAccountCard(); - await expect( mcAccountCard.getByRole( 'button' ) ).not.toBeVisible(); - - const adsAccountCard = setUpAccountsPage.getGoogleAdsAccountCard(); - await expect( adsAccountCard.getByRole( 'button' ) ).not.toBeVisible(); - const continueButton = setUpAccountsPage.getContinueButton(); await expect( continueButton ).toBeDisabled(); } ); @@ -147,7 +141,7 @@ test.describe( 'Set up accounts', () => { } ); test.describe( 'Connect Google account', () => { - test.beforeAll( async () => { + test.beforeEach( async () => { // Mock Jetpack as connected await setUpAccountsPage.mockJetpackConnected( 'Test user', @@ -172,22 +166,37 @@ test.describe( 'Set up accounts', () => { await expect( googleAccountCard.getByRole( 'button', { name: 'Connect' } ) - ).toBeEnabled(); - - const mcAccountCard = setUpAccountsPage.getMCAccountCard(); - await expect( - mcAccountCard.getByRole( 'button' ) - ).not.toBeVisible(); - - const adsAccountCard = setUpAccountsPage.getGoogleAdsAccountCard(); - await expect( - adsAccountCard.getByRole( 'button' ) - ).not.toBeVisible(); + ).toBeDisabled(); const continueButton = setUpAccountsPage.getContinueButton(); await expect( continueButton ).toBeDisabled(); } ); + test( 'should see the terms and conditions checkbox unchecked by default', async () => { + const termsCheckbox = setUpAccountsPage.getTermsCheckbox(); + await expect( termsCheckbox ).not.toBeChecked(); + + // Also ensure that connect button is disabled. + const connectButton = setUpAccountsPage.getConnectButton(); + await expect( connectButton ).toBeDisabled(); + } ); + + test( 'should see the connect button and terms and conditions checkbox disabled when jetpack is not connected', async () => { + // Mock Jetpack as disconnected + await setUpAccountsPage.mockJetpackNotConnected(); + + await setUpAccountsPage.goto(); + + const connectButton = setUpAccountsPage + .getGoogleAccountCard() + .getByRole( 'button', { name: 'Connect' } ); + + await expect( connectButton ).toBeDisabled(); + + const termsCheckbox = setUpAccountsPage.getTermsCheckbox(); + await expect( termsCheckbox ).toBeDisabled(); + } ); + test( 'after clicking the "Connect your Google account" button should send an API request to connect Google account, and redirect to the returned URL', async ( { baseURL, } ) => { @@ -196,6 +205,8 @@ test.describe( 'Set up accounts', () => { baseURL + 'google_auth' ); + await setUpAccountsPage.getTermsCheckbox().check(); + // Click the enabled connect button page.locator( "//button[text()='Connect'][not(@disabled)]" @@ -209,533 +220,6 @@ test.describe( 'Set up accounts', () => { } ); } ); - test.describe( 'Google Ads', () => { - test.beforeAll( async () => { - // Mock Jetpack as connected - await setUpAccountsPage.mockJetpackConnected( - 'Test user', - 'jetpack@example.com' - ); - - // Mock google as connected. - await setUpAccountsPage.mockGoogleConnected(); - - // Start with no Ads account connected. - await setupAdsAccountPage.mockAdsAccountDisconnected(); - await setupAdsAccountPage.mockAdsStatusDisconnected(); - await setupAdsAccountPage.mockAdsHasNoAccounts(); - - // Mock MC as not connected and has not existing accounts - // to avoid errors when attempting to fetch accounts. - await setUpAccountsPage.mockMCNotConnected(); - await setUpAccountsPage.mockMCHasNoAccounts(); - - await setUpAccountsPage.goto(); - await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED ); - } ); - - test( 'should see Google Ads section', async () => { - const section = setUpAccountsPage.getGoogleAdsAccountCard(); - await expect( section ).toBeVisible(); - } ); - - test.describe( 'Google Ads account', () => { - test.describe( 'Create account', () => { - test.beforeAll( async () => { - await setUpAccountsPage.clickCreateAdsAccountButton(); - } ); - - test( 'should see "Create Google Ads Account" modal', async () => { - const modal = setupAdsAccountPage.getCreateAccountModal(); - await expect( modal ).toBeVisible(); - } ); - - test( 'should see "ToS checkbox" from modal is unchecked', async () => { - const checkbox = - setupAdsAccountPage.getAcceptTermCreateAccount(); - await expect( checkbox ).toBeVisible(); - await expect( checkbox ).not.toBeChecked(); - } ); - - test( 'should see "Create account" from modal is disabled', async () => { - const button = - setupAdsAccountPage.getCreateAdsAccountButtonModal(); - await expect( button ).toBeVisible(); - await expect( button ).toBeDisabled(); - } ); - - test( 'should see "Create account" from modal is enabled when ToS checkbox is checked', async () => { - const button = - setupAdsAccountPage.getCreateAdsAccountButtonModal(); - await setupAdsAccountPage.clickToSCheckboxFromModal(); - await expect( button ).toBeEnabled(); - } ); - - test( 'should see "Accept invitation" modal after creating account', async () => { - // Mock Ads account not claimed. - await setupAdsAccountPage.mockAdsAccountConnected(); - await setupAdsAccountPage.mockAdsStatusNotClaimed(); - - await setupAdsAccountPage.clickCreateAccountButtonFromModal(); - - const modal = setupAdsAccountPage.getAcceptAccountModal(); - await expect( modal ).toBeVisible(); - } ); - - test( 'should see ads account claim message until ads account is accepted', async () => { - await setupAdsAccountPage.clickCloseAcceptAccountButtonFromModal(); - - const claimButton = - await setupAdsAccountPage.getAdsClaimAccountButton(); - const claimText = - await setupAdsAccountPage.getAdsClaimAccountText(); - - await expect( claimButton ).toBeVisible(); - await expect( claimText ).toBeVisible(); - } ); - } ); - - test.describe( 'Create an ads account with invitation accepted', () => { - test.beforeAll( async () => { - // Mock the ads account as claimed. - await setupAdsAccountPage.mockAdsStatusClaimed(); - - await setUpAccountsPage.goto(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - } ); - - test( 'should see ads account connected message once ads account is accepted', async () => { - const connectedText = - setUpAccountsPage.getAdsAccountConnectedText(); - - const connectedNotice = - setUpAccountsPage.getAdsAccountConnectedNotice(); - - await expect( connectedText ).toBeVisible(); - await expect( connectedNotice ).toBeVisible(); - } ); - } ); - - test.describe( 'Connect to an existing account', () => { - test.beforeAll( async () => { - await setupAdsAccountPage.mockAdsAccountsResponse( [ - { - id: 12345, - name: 'Test Ad 1', - }, - { - id: 23456, - name: 'Test Ad 2', - }, - ] ); - - await setupAdsAccountPage.mockAdsAccountDisconnected(); - await setupAdsAccountPage.clickConnectDifferentAccountButton(); - } ); - - test( 'should see the ads account select', async () => { - const select = setupAdsAccountPage.getAdsAccountSelect(); - await expect( select ).toBeVisible(); - } ); - - test( 'should see connect button is disabled when no ads account is selected', async () => { - const button = setupAdsAccountPage.getConnectAdsButton(); - await expect( button ).toBeVisible(); - await expect( button ).toBeDisabled(); - } ); - - test( 'should see connect button is enabled when an ads account is selected', async () => { - await setupAdsAccountPage.selectAnExistingAdsAccount( - '23456' - ); - const button = setupAdsAccountPage.getConnectAdsButton(); - await expect( button ).toBeVisible(); - await expect( button ).toBeEnabled(); - } ); - - test( 'should see ads account connected text and ads/accounts request is triggered after clicking connect button', async () => { - await setupAdsAccountPage.mockAdsAccountsResponse( [ - { - id: 23456, - name: 'Test Ad 2', - }, - ] ); - - await setupAdsAccountPage.mockAdsAccountConnected( 23456 ); - - const requestPromise = - setupAdsAccountPage.registerConnectAdsAccountRequests( - '23456' - ); - - await setupAdsAccountPage.clickConnectAds(); - - await requestPromise; - - const connectedText = - setUpAccountsPage.getAdsAccountConnectedText(); - await expect( connectedText ).toBeVisible(); - } ); - } ); - } ); - } ); - - test.describe( 'Connect Merchant Center account', () => { - test.beforeAll( async () => { - await Promise.all( [ - // Mock Jetpack as connected. - setUpAccountsPage.mockJetpackConnected( - 'Test user', - 'jetpack@example.com' - ), - - // Mock google as connected. - setUpAccountsPage.mockGoogleConnected( 'google@example.com' ), - - // Mock Google Ads as not connected. - setupAdsAccountPage.mockAdsAccountDisconnected(), - setupAdsAccountPage.mockAdsHasNoAccounts(), - - // Mock merchant center as not connected. - setUpAccountsPage.mockMCNotConnected(), - ] ); - } ); - - test.describe( 'Merchant Center has no existing accounts', () => { - test.beforeAll( async () => { - // Mock merchant center has no accounts - await setUpAccountsPage.mockMCHasNoAccounts(); - await setUpAccountsPage.goto(); - } ); - - test( 'should see their WPORG email, Google email, "Google Merchant Center" title & "Create account" button', async () => { - const googleDescriptionRow = - setUpAccountsPage.getGoogleDescriptionRow(); - await expect( googleDescriptionRow ).toContainText( - 'google@example.com' - ); - - const mcTitleRow = setUpAccountsPage.getMCTitleRow(); - await expect( mcTitleRow ).toContainText( - 'Google Merchant Center' - ); - - const createAccountButton = - setUpAccountsPage.getMCCreateAccountButtonFromPage(); - await expect( createAccountButton ).toBeEnabled(); - - const continueButton = setUpAccountsPage.getContinueButton(); - await expect( continueButton ).toBeDisabled(); - } ); - - test( 'click "Create account" button should see the modal of confirmation of creating account', async () => { - // Click the create account button - const createAccountButton = - setUpAccountsPage.getMCCreateAccountButtonFromPage(); - await createAccountButton.click(); - await page.waitForLoadState( LOAD_STATE.DOM_CONTENT_LOADED ); - - const modalHeader = setUpAccountsPage.getModalHeader(); - await expect( modalHeader ).toContainText( - 'Create Google Merchant Center Account' - ); - - const modalCheckbox = setUpAccountsPage.getModalCheckbox(); - await expect( modalCheckbox ).toBeEnabled(); - - const createAccountButtonFromModal = - setUpAccountsPage.getMCCreateAccountButtonFromModal(); - await expect( createAccountButtonFromModal ).toBeDisabled(); - - // Click the checkbox of accepting ToS, the create account button will be enabled. - await modalCheckbox.click(); - await expect( createAccountButtonFromModal ).toBeEnabled(); - } ); - - test.describe( 'click "Create account" button from the modal', () => { - test( 'should see Merchant Center "Connected" when the website is not claimed', async ( { - baseURL, - } ) => { - await Promise.all( [ - // Mock Merchant Center create accounts - setUpAccountsPage.mockMCCreateAccountWebsiteNotClaimed(), - - // Mock Merchant Center as connected with ID 12345 - setUpAccountsPage.mockMCConnected( 12345 ), - ] ); - - const createAccountButtonFromModal = - setUpAccountsPage.getMCCreateAccountButtonFromModal(); - await createAccountButtonFromModal.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - const mcConnectedLabel = - setUpAccountsPage.getMCConnectedLabel(); - await expect( mcConnectedLabel ).toContainText( - 'Connected' - ); - - const host = new URL( baseURL ).host; - const mcDescriptionRow = - setUpAccountsPage.getMCDescriptionRow(); - await expect( mcDescriptionRow ).toContainText( - `${ host } (12345)` - ); - } ); - - test.describe( 'when the website is already claimed', () => { - test( 'should see "Reclaim my URL" button, "Switch account" button, and site URL input', async ( { - baseURL, - } ) => { - const host = new URL( baseURL ).host; - - await Promise.all( [ - // Mock merchant center has no accounts - setUpAccountsPage.mockMCHasNoAccounts(), - - // Mock Merchant Center as not connected - setUpAccountsPage.mockMCNotConnected(), - ] ); - - await page.reload(); - - // Mock Merchant Center create accounts - await setUpAccountsPage.mockMCCreateAccountWebsiteClaimed( - 12345, - host - ); - - // Click "Create account" button from the page. - const createAccountButton = - setUpAccountsPage.getMCCreateAccountButtonFromPage(); - await createAccountButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - // Check the checkbox to accept ToS. - const modalCheckbox = - setUpAccountsPage.getModalCheckbox(); - await modalCheckbox.click(); - - // Click "Create account" button from the modal. - const createAccountButtonFromModal = - setUpAccountsPage.getMCCreateAccountButtonFromModal(); - await createAccountButtonFromModal.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const reclaimButton = - setUpAccountsPage.getReclaimMyURLButton(); - await expect( reclaimButton ).toBeVisible(); - - const switchAccountButton = - setUpAccountsPage.getSwitchAccountButton(); - await expect( switchAccountButton ).toBeVisible(); - - const reclaimingURLInput = - setUpAccountsPage.getReclaimingURLInput(); - await expect( reclaimingURLInput ).toHaveValue( - baseURL - ); - - const continueButton = - setUpAccountsPage.getContinueButton(); - await expect( continueButton ).toBeDisabled(); - } ); - - test( 'click "Reclaim my URL" should send a claim overwrite request and see Merchant Center "Connected"', async ( { - baseURL, - } ) => { - await Promise.all( [ - // Mock Merchant Center accounts claim overwrite - setUpAccountsPage.mockMCAccountsClaimOverwrite( - 12345 - ), - - // Mock Merchant Center as connected with ID 12345 - setUpAccountsPage.mockMCConnected( 12345 ), - ] ); - - const reclaimButton = - setUpAccountsPage.getReclaimMyURLButton(); - await reclaimButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const mcConnectedLabel = - setUpAccountsPage.getMCConnectedLabel(); - await expect( mcConnectedLabel ).toContainText( - 'Connected' - ); - - const host = new URL( baseURL ).host; - const mcDescriptionRow = - setUpAccountsPage.getMCDescriptionRow(); - await expect( mcDescriptionRow ).toContainText( - `${ host } (12345)` - ); - } ); - } ); - } ); - } ); - - test.describe( 'Merchant Center has existing accounts', () => { - test.beforeAll( async () => { - await Promise.all( [ - // Mock merchant center as not connected. - setUpAccountsPage.mockMCNotConnected(), - - // Mock merchant center has accounts - setUpAccountsPage.fulfillMCAccounts( [ - { - id: 12345, - subaccount: true, - name: 'MC Account 1', - domain: 'https://example.com', - }, - { - id: 23456, - subaccount: true, - name: 'MC Account 2', - domain: 'https://example.com', - }, - ] ), - ] ); - - await setUpAccountsPage.goto(); - } ); - - test.describe( 'connect to an existing account', () => { - test( 'should see "Select an existing account" title', async () => { - const selectAccountTitle = - setUpAccountsPage.getSelectExistingMCAccountTitle(); - await expect( selectAccountTitle ).toContainText( - 'Select an existing account' - ); - } ); - - test( 'should see "Or, create a new Merchant Center account" text', async () => { - const mcFooter = setUpAccountsPage.getMCCardFooter(); - await expect( mcFooter ).toContainText( - 'Or, create a new Merchant Center account' - ); - } ); - - test( 'should see "Connect" button', async () => { - const connectButton = setUpAccountsPage.getConnectButton(); - await expect( connectButton ).toBeEnabled(); - } ); - - test( 'should see "Continue" button is disabled', async () => { - const continueButton = - setUpAccountsPage.getContinueButton(); - await expect( continueButton ).toBeDisabled(); - } ); - - test( 'select MC Account 2 and click "Connect" button should see Merchant Center "Connected"', async ( { - baseURL, - } ) => { - await Promise.all( [ - // Mock Merchant Center create accounts - setUpAccountsPage.mockMCCreateAccountWebsiteNotClaimed(), - - // Mock Merchant Center as connected with ID 12345 - setUpAccountsPage.mockMCConnected( 23456 ), - ] ); - - // Select MC Account 2 from the options - const mcAccountsSelect = - setUpAccountsPage.getMCAccountsSelect(); - await mcAccountsSelect.selectOption( { - label: 'MC Account 2 ・ https://example.com (23456)', - } ); - - // Click connect button - const connectButton = setUpAccountsPage.getConnectButton(); - await connectButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const mcConnectedLabel = - setUpAccountsPage.getMCConnectedLabel(); - await expect( mcConnectedLabel ).toContainText( - 'Connected' - ); - - const host = new URL( baseURL ).host; - const mcDescriptionRow = - setUpAccountsPage.getMCDescriptionRow(); - await expect( mcDescriptionRow ).toContainText( - `${ host } (23456)` - ); - } ); - } ); - - test.describe( 'click "Or, create a new Merchant Center account"', () => { - test.beforeAll( async () => { - await Promise.all( [ - // Mock merchant center as not connected. - setUpAccountsPage.mockMCNotConnected(), - - // Mock merchant center has accounts - setUpAccountsPage.fulfillMCAccounts( [ - { - id: 12345, - subaccount: true, - name: 'MC Account 1', - domain: 'https://example.com', - }, - { - id: 23456, - subaccount: true, - name: 'MC Account 2', - domain: 'https://example.com', - }, - ] ), - ] ); - - await setUpAccountsPage.goto(); - } ); - - test( 'should see see a modal to ensure the intention of creating a new account', async () => { - // Click 'Or, create a new Merchant Center account' - const mcFooterButton = - setUpAccountsPage.getMCCardFooterButton(); - await mcFooterButton.click(); - await page.waitForLoadState( - LOAD_STATE.DOM_CONTENT_LOADED - ); - - const modalHeader = setUpAccountsPage.getModalHeader(); - await expect( modalHeader ).toContainText( - 'Create Google Merchant Center Account' - ); - - const modalCheckbox = setUpAccountsPage.getModalCheckbox(); - await expect( modalCheckbox ).toBeEnabled(); - - const modalPrimaryButton = - setUpAccountsPage.getModalPrimaryButton(); - await expect( modalPrimaryButton ).toContainText( - 'Create account' - ); - await expect( modalPrimaryButton ).toBeDisabled(); - - // Select the checkbox, the button should be enabled. - await modalCheckbox.click(); - await expect( modalPrimaryButton ).toBeEnabled(); - } ); - } ); - } ); - } ); - test.describe( 'Continue button', () => { test.beforeAll( async () => { // Mock Jetpack as connected diff --git a/tests/e2e/utils/mock-requests.js b/tests/e2e/utils/mock-requests.js index 2cd4b45222..050da0bc4e 100644 --- a/tests/e2e/utils/mock-requests.js +++ b/tests/e2e/utils/mock-requests.js @@ -392,6 +392,17 @@ export default class MockRequests { } ); } + /** + * Mock Jetpack as not connected. + */ + async mockJetpackNotConnected() { + await this.fulfillJetPackConnection( { + active: 'no', + displayName: '', + email: '', + } ); + } + /** * Mock the request to connect Google. * 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 5c90f321cb..1876de366c 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 @@ -367,4 +367,13 @@ export default class SetUpAccountsPage extends MockRequests { 'Conversion measurement has been set up. You can create a campaign later.' ); } + + /** + * Get terms checkbox. + * + * @return {import('@playwright/test').Locator} Terms checkbox. + */ + getTermsCheckbox() { + return this.page.getByLabel( /I accept the terms and conditions/ ); + } }