Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Streamline onboarding: Hide WordPress.com account connection setting from the onboarding if already connected #2516

Merged
merged 9 commits into from
Aug 22, 2024
Merged

Streamline onboarding: Hide WordPress.com account connection setting from the onboarding if already connected #2516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
64f51bf
Hides jetpack during onboarding if already connected
dsawardekar Aug 9, 2024
88e0799
Limits jetpack check to only the WPComAccount card
dsawardekar Aug 12, 2024
ad40c2c
Adds e2e tests for jetpack connected & disconnected states
dsawardekar Aug 12, 2024
e2f2420
Refactors variable names in setup flow
dsawardekar Aug 13, 2024
f1d84f6
Update e2e tests
joemcgill Aug 13, 2024
7523a05
Fixes linter warnings
dsawardekar Aug 14, 2024
9e606c1
Merge pull request #2521 from woocommerce/update/2487-hide-jetpack-e2…
dsawardekar Aug 14, 2024
223935e
Updates e2e tests per PR feedack & removes unused code
dsawardekar Aug 19, 2024
ecd25fc
Updates e2e tests per CR feedback
dsawardekar Aug 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions js/src/setup-mc/setup-stepper/setup-accounts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,16 +101,16 @@ 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;

if ( isLoadingJetpack || isLoadingGoogle || isLoadingGoogleMCAccount ) {
return <AppSpinner />;
}

const isGoogleAccountDisabled = jetpack?.active !== 'yes';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice improvement! Thanks!


// 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.
Expand Down Expand Up @@ -155,8 +155,10 @@ const SetupAccounts = ( props ) => {
) }
>
<VerticalGapLayout size="large">
<WPComAccountCard jetpack={ jetpack } />
<GoogleAccountCard disabled={ isGoogleAccountDisabled } />
{ ! isJetpackActive && (
<WPComAccountCard jetpack={ jetpack } />
) }
<GoogleAccountCard disabled={ ! isJetpackActive } />
<GoogleAdsAccountCard />
</VerticalGapLayout>
</Section>
Expand Down
53 changes: 34 additions & 19 deletions tests/e2e/specs/setup-mc/step-1-accounts.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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' );
joemcgill marked this conversation as resolved.
Show resolved Hide resolved
await expect( wpAccountCard.getByRole( 'button' ) ).toBeEnabled();

const googleAccountCard = setUpAccountsPage.getGoogleAccountCard();
await expect( googleAccountCard.getByRole( 'button' ) ).toBeDisabled();
Expand Down Expand Up @@ -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(
Expand All @@ -133,24 +130,48 @@ 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(
googleAccountCard.getByText( 'Google', { exact: true } )
).toBeVisible();

await expect(
googleAccountCard
.getByRole( 'button', { name: 'Connect' } )
.first()
googleAccountCard.getByRole( 'button', { name: 'Connect' } )
).toBeEnabled();

const mcAccountCard = setUpAccountsPage.getMCAccountCard();
Expand Down Expand Up @@ -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(
Expand Down
122 changes: 30 additions & 92 deletions tests/e2e/utils/pages/setup-mc/step-1-set-up-accounts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
);
}

/**
Expand All @@ -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'
);
}

/**
Expand All @@ -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' );
}

/**
Expand Down Expand Up @@ -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' );
}

/**
Expand Down Expand Up @@ -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 );
}

/**
Expand All @@ -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 );
}

/**
Expand All @@ -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();
}

/**
Expand All @@ -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();
}

/**
Expand All @@ -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();
}

/**
Expand All @@ -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();
}

/**
Expand Down