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: Update E2E tests for the conditionally hidden WordPress.com account connection setting #2521

Merged
merged 2 commits into from
Aug 14, 2024
Merged

Streamline onboarding: Update E2E tests for the conditionally hidden WordPress.com account connection setting #2521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1d84f6
Update e2e tests
joemcgill Aug 13, 2024
7523a05
Fixes linter warnings
dsawardekar Aug 14, 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
68 changes: 35 additions & 33 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 @@ -79,28 +79,6 @@ test.describe( 'Set up accounts', () => {
await expect( continueButton ).toBeDisabled();
} );

test( 'JetpackConnected: should verify that the Jetpack connect button is hidden if already connected', async () => {
await setUpAccountsPage.goto();

await expect(
page.getByRole( 'heading', { name: 'Set up your accounts' } )
).toBeVisible();

await expect(
page.getByText(
'Connect the accounts required to use Google for WooCommerce.'
)
).toBeVisible();

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

const firstCard = setUpAccountsPage.getWPAccountCard();
await expect( firstCard ).toBeEnabled();
await expect( firstCard ).not.toContainText( 'WordPress.com' );
} );

test.describe( 'FAQ panels', () => {
test( 'should see two questions in FAQ', async () => {
const faqTitles = getFAQPanelTitle( page );
Expand Down Expand Up @@ -138,7 +116,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 @@ -155,14 +133,44 @@ 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(
page.getByText(
'Connect the accounts required to use Google for WooCommerce.'
)
).toBeVisible();

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

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',
'[email protected]'
);

// 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(
Expand Down Expand Up @@ -415,12 +423,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(
'[email protected]'
);

const googleDescriptionRow =
setUpAccountsPage.getGoogleDescriptionRow();
await expect( googleDescriptionRow ).toContainText(
Expand Down
100 changes: 40 additions & 60 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,31 +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();
return this.getWPAccountCard().locator(
'.gla-account-card__description'
);
}

/**
Expand All @@ -102,7 +86,9 @@ export default class SetUpAccountsPage extends MockRequests {
* @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,7 +97,9 @@ export default class SetUpAccountsPage extends MockRequests {
* @return {import('@playwright/test').Locator} Get Merchant Center description row.
*/
getMCDescriptionRow() {
return this.getCardDescriptionClass().nth( 3 );
return this.getMCAccountCard().locator(
'.gla-account-card__description'
);
}

/**
Expand All @@ -120,7 +108,9 @@ export default class SetUpAccountsPage extends MockRequests {
* @return {import('@playwright/test').Locator} Get Google Ads title.
*/
getAdsTitleRow() {
return this.getCardTitleClass().nth( 2 );
return this.getGoogleAdsAccountCard().locator(
'.gla-account-card__title'
);
}

/**
Expand All @@ -129,7 +119,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,22 +167,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();
return this.getWPAccountCard().locator( '.gla-connected-icon-label' );
}

/**
Expand All @@ -201,7 +182,9 @@ export default class SetUpAccountsPage extends MockRequests {
* @return {import('@playwright/test').Locator} Get Google connected label.
*/
getGoogleConnectedLabel() {
return this.getConnectedLabelClass().nth( 1 );
return this.getGoogleAccountCard().locator(
'.gla-connected-icon-label'
);
}

/**
Expand All @@ -210,7 +193,7 @@ export default class SetUpAccountsPage extends MockRequests {
* @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 +229,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 +264,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 +277,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 +286,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 +299,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 +312,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