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 a318189cbb..0a6380eb40 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -101,7 +101,9 @@ const SetupAccounts = ( props ) => { * and the whole page would display this AppSpinner, which is not desired. */ const isLoadingJetpack = ! jetpack; - const isLoadingGoogle = jetpack?.active === 'yes' && ! google; + const isJetpackActive = jetpack?.active === 'yes'; + + const isLoadingGoogle = isJetpackActive && ! google; const isLoadingGoogleMCAccount = google?.active === 'yes' && scope.gmcRequired && ! googleMCAccount; @@ -109,8 +111,6 @@ const SetupAccounts = ( props ) => { return ; } - const isGoogleAccountDisabled = jetpack?.active !== 'yes'; - // Ads is ready when we have a connection and verified and verified access. // Billing is not required, and the 'link_merchant' step will be resolved // when the MC the account is connected. @@ -155,8 +155,10 @@ 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 c5984bc5d1..7b4645c278 100644 --- a/tests/e2e/specs/setup-mc/step-1-accounts.test.js +++ b/tests/e2e/specs/setup-mc/step-1-accounts.test.js @@ -45,7 +45,7 @@ test.describe( 'Set up accounts', () => { await setUpAccountsPage.closePage(); } ); - test( 'should see accounts step header, "Connect your WordPress.com account" & connect button', async () => { + test( 'JetpackDisconnected: should see accounts step header, "Connect your WordPress.com account" & connect button', async () => { await setUpAccountsPage.goto(); await expect( @@ -58,13 +58,10 @@ test.describe( 'Set up accounts', () => { ) ).toBeVisible(); - await expect( - page.getByRole( 'button', { name: 'Connect' } ).first() - ).toBeEnabled(); - const wpAccountCard = setUpAccountsPage.getWPAccountCard(); await expect( wpAccountCard ).toBeEnabled(); await expect( wpAccountCard ).toContainText( 'WordPress.com' ); + await expect( wpAccountCard.getByRole( 'button' ) ).toBeEnabled(); const googleAccountCard = setUpAccountsPage.getGoogleAccountCard(); await expect( googleAccountCard.getByRole( 'button' ) ).toBeDisabled(); @@ -116,7 +113,7 @@ test.describe( 'Set up accounts', () => { } ); } ); - test.describe( 'Connect Google account', () => { + test.describe( 'Connected WordPress.com account', async () => { test.beforeAll( async () => { // Mock Jetpack as connected await setUpAccountsPage.mockJetpackConnected( @@ -133,14 +130,40 @@ test.describe( 'Set up accounts', () => { await setUpAccountsPage.goto(); } ); - test( 'should see their WPORG email, "Google" title & connect button', async () => { - const jetpackDescriptionRow = - setUpAccountsPage.getJetpackDescriptionRow(); + test( 'should not show the WP.org connection card when already connected', async () => { + await expect( + page.getByRole( 'heading', { name: 'Set up your accounts' } ) + ).toBeVisible(); - await expect( jetpackDescriptionRow ).toContainText( + await expect( + page.getByText( + 'Connect the accounts required to use Google for WooCommerce.' + ) + ).toBeVisible(); + + const wpAccountCard = setUpAccountsPage.getWPAccountCard(); + await expect( wpAccountCard ).not.toBeVisible(); + } ); + } ); + + test.describe( 'Connect Google account', () => { + test.beforeAll( async () => { + // Mock Jetpack as connected + await setUpAccountsPage.mockJetpackConnected( + 'Test user', 'jetpack@example.com' ); + // Mock google as not connected. + // When pending even WPORG will not render yet. + // If not mocked will fail and render nothing, + // as Jetpack is mocked only on the client-side. + await setUpAccountsPage.mockGoogleNotConnected(); + + await setUpAccountsPage.goto(); + } ); + + test( 'should see their WPORG email, "Google" title & connect button', async () => { const googleAccountCard = setUpAccountsPage.getGoogleAccountCard(); await expect( @@ -148,9 +171,7 @@ test.describe( 'Set up accounts', () => { ).toBeVisible(); await expect( - googleAccountCard - .getByRole( 'button', { name: 'Connect' } ) - .first() + googleAccountCard.getByRole( 'button', { name: 'Connect' } ) ).toBeEnabled(); const mcAccountCard = setUpAccountsPage.getMCAccountCard(); @@ -393,12 +414,6 @@ test.describe( 'Set up accounts', () => { } ); test( 'should see their WPORG email, Google email, "Google Merchant Center" title & "Create account" button', async () => { - const jetpackDescriptionRow = - setUpAccountsPage.getJetpackDescriptionRow(); - await expect( jetpackDescriptionRow ).toContainText( - 'jetpack@example.com' - ); - const googleDescriptionRow = setUpAccountsPage.getGoogleDescriptionRow(); await expect( googleDescriptionRow ).toContainText( 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 b6ac235f53..5c90f321cb 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 @@ -69,40 +69,15 @@ export default class SetUpAccountsPage extends MockRequests { return button.locator( ':scope.is-primary' ); } - /** - * Get .gla-account-card__title class. - * - * @return {import('@playwright/test').Locator} Get .gla-account-card__title class. - */ - getCardTitleClass() { - return this.page.locator( '.gla-account-card__title' ); - } - - /** - * Get .gla-account-card__description class. - * - * @return {import('@playwright/test').Locator} Get .gla-account-card__description class. - */ - getCardDescriptionClass() { - return this.page.locator( '.gla-account-card__description' ); - } - - /** - * Get Jetpack description row. - * - * @return {import('@playwright/test').Locator} Get Jetpack description row. - */ - getJetpackDescriptionRow() { - return this.getCardDescriptionClass().first(); - } - /** * Get Google description row. * * @return {import('@playwright/test').Locator} Get Google description row. */ getGoogleDescriptionRow() { - return this.getCardDescriptionClass().nth( 1 ); + return this.getGoogleAccountCard().locator( + '.gla-account-card__description' + ); } /** @@ -111,16 +86,9 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Get Merchant Center description row. */ getMCDescriptionRow() { - return this.getCardDescriptionClass().nth( 3 ); - } - - /** - * Get Google Ads title. - * - * @return {import('@playwright/test').Locator} Get Google Ads title. - */ - getAdsTitleRow() { - return this.getCardTitleClass().nth( 2 ); + return this.getMCAccountCard().locator( + '.gla-account-card__description' + ); } /** @@ -129,7 +97,7 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Get Google Merchant Center title. */ getMCTitleRow() { - return this.getCardTitleClass().nth( 3 ); + return this.getMCAccountCard().locator( '.gla-account-card__title' ); } /** @@ -177,40 +145,13 @@ export default class SetUpAccountsPage extends MockRequests { return this.getModal().locator( 'button.is-secondary' ); } - /** - * Get .gla-connected-icon-label class. - * - * @return {import('@playwright/test').Locator} Get .gla-connected-icon-label class. - */ - getConnectedLabelClass() { - return this.page.locator( '.gla-connected-icon-label' ); - } - - /** - * Get Jetpack connected label. - * - * @return {import('@playwright/test').Locator} Get Jetpack connected label. - */ - getJetpackConnectedLabel() { - return this.getConnectedLabelClass().first(); - } - - /** - * Get Google connected label. - * - * @return {import('@playwright/test').Locator} Get Google connected label. - */ - getGoogleConnectedLabel() { - return this.getConnectedLabelClass().nth( 1 ); - } - /** * Get Merchant Center connected label. * * @return {import('@playwright/test').Locator} Get Merchant Center connected label. */ getMCConnectedLabel() { - return this.getConnectedLabelClass().nth( 2 ); + return this.getMCAccountCard().locator( '.gla-connected-icon-label' ); } /** @@ -246,31 +187,15 @@ export default class SetUpAccountsPage extends MockRequests { return this.page.locator( 'input#inspector-input-control-0' ); } - /** - * Get sub section title row. - * - * @return {import('@playwright/test').Locator} Get sub section title row. - */ - getSubSectionTitleRow() { - return this.page.locator( '.wcdl-subsection-title' ); - } - - /** - * Get section footer row. - * - * @return {import('@playwright/test').Locator} Get section footer row. - */ - getSectionFooterRow() { - return this.page.locator( '.wcdl-section-card-footer' ); - } - /** * Get select existing Merchant Center account title. * * @return {import('@playwright/test').Locator} Get select existing Merchant Center account title. */ getSelectExistingMCAccountTitle() { - return this.getSubSectionTitleRow().nth( 4 ); + return this.getMCAccountCard() + .locator( '.wcdl-subsection-title' ) + .nth( 1 ); } /** @@ -297,10 +222,11 @@ export default class SetUpAccountsPage extends MockRequests { /** * Get account cards. * + * @param {Object} options * @return {import('@playwright/test').Locator} Get account cards. */ - getAccountCards() { - return this.page.locator( '.gla-account-card' ); + getAccountCards( options = {} ) { + return this.page.locator( '.gla-account-card', options ); } /** @@ -309,7 +235,7 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Get WordPress account card. */ getWPAccountCard() { - return this.getAccountCards().first(); + return this.getAccountCards( { hasText: 'WordPress.com' } ).first(); } /** @@ -318,7 +244,11 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Get Google account card. */ getGoogleAccountCard() { - return this.getAccountCards().nth( 1 ); + return this.getAccountCards( { + has: this.page.locator( '.gla-account-card__title', { + hasText: 'Google', + } ), + } ).first(); } /** @@ -327,7 +257,11 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Get Google Ads account card. */ getGoogleAdsAccountCard() { - return this.getAccountCards().nth( 2 ); + return this.getAccountCards( { + has: this.page.locator( '.gla-account-card__title', { + hasText: 'Google Ads', + } ), + } ).first(); } /** @@ -336,7 +270,11 @@ export default class SetUpAccountsPage extends MockRequests { * @return {import('@playwright/test').Locator} Get Merchant Center account card. */ getMCAccountCard() { - return this.getAccountCards().nth( 3 ); + return this.getAccountCards( { + has: this.page.locator( '.gla-account-card__title', { + hasText: 'Google Merchant Center', + } ), + } ).first(); } /**