From 0824ac8e9f1b1320367d66830066f53a8e11a1c8 Mon Sep 17 00:00:00 2001 From: giancarlo Date: Sun, 14 Apr 2024 17:54:15 +0800 Subject: [PATCH] Refactor billing process in e2e tests Code for billing process was refactored in end-to-end tests for clean code and better structure. In the described tests, related codes and classes have been moved to a new class named BillingPageObject. All corresponding calls were updated accordingly. --- .../e2e/tests/team-billing/team-billing.po.ts | 9 ++-- .../tests/team-billing/team-billing.spec.ts | 24 +++++++---- .../e2e/tests/user-billing/user-billing.po.ts | 6 +-- .../tests/user-billing/user-billing.spec.ts | 23 ++++++---- apps/e2e/tests/utils/billing.po.ts | 42 +++++++++++++++++++ apps/e2e/tests/utils/stripe.po.ts | 27 ++---------- .../src/components/current-plan-badge.tsx | 2 +- .../components/current-subscription-card.tsx | 6 ++- 8 files changed, 88 insertions(+), 51 deletions(-) create mode 100644 apps/e2e/tests/utils/billing.po.ts diff --git a/apps/e2e/tests/team-billing/team-billing.po.ts b/apps/e2e/tests/team-billing/team-billing.po.ts index f27cc3aae..1d27871a3 100644 --- a/apps/e2e/tests/team-billing/team-billing.po.ts +++ b/apps/e2e/tests/team-billing/team-billing.po.ts @@ -1,18 +1,17 @@ import { Page } from '@playwright/test'; -import { StripePageObject } from '../utils/stripe.po'; import { TeamAccountsPageObject } from '../team-accounts/team-accounts.po'; +import { BillingPageObject } from '../utils/billing.po'; export class TeamBillingPageObject { - private readonly teamAccounts: TeamAccountsPageObject; - public readonly stripe: StripePageObject; + public readonly teamAccounts: TeamAccountsPageObject; + public readonly billing: BillingPageObject; constructor(page: Page) { this.teamAccounts = new TeamAccountsPageObject(page); - this.stripe = new StripePageObject(page); + this.billing = new BillingPageObject(page); } async setup() { await this.teamAccounts.setup(); - await this.teamAccounts.goToBilling(); } } \ No newline at end of file diff --git a/apps/e2e/tests/team-billing/team-billing.spec.ts b/apps/e2e/tests/team-billing/team-billing.spec.ts index dd46465be..0fa7a7944 100644 --- a/apps/e2e/tests/team-billing/team-billing.spec.ts +++ b/apps/e2e/tests/team-billing/team-billing.spec.ts @@ -1,24 +1,32 @@ import { expect, Page, test } from '@playwright/test'; import { TeamBillingPageObject } from './team-billing.po'; +import exp from 'node:constants'; test.describe('Team Billing', () => { let page: Page; - let billing: TeamBillingPageObject; + let po: TeamBillingPageObject; test.beforeAll(async ({ browser }) => { page = await browser.newPage(); - billing = new TeamBillingPageObject(page); + po = new TeamBillingPageObject(page); - await billing.setup(); + await po.setup(); + await po.teamAccounts.goToBilling(); }); test('a team can subscribe to a plan', async () => { - await billing.stripe.selectPlan(0); - await billing.stripe.proceedToCheckout(); + await po.billing.selectPlan(0); + await po.billing.proceedToCheckout(); - await billing.stripe.fillForm(); - await billing.stripe.submitForm(); + await po.billing.stripe.fillForm(); + await po.billing.stripe.submitForm(); - await expect(billing.stripe.successStatus()).toBeVisible(); + await expect(po.billing.successStatus()).toBeVisible(); + await po.billing.returnToHome(); + + await po.teamAccounts.goToBilling(); + + await expect(await po.billing.getStatus()).toContainText('active'); + await expect(po.billing.manageBillingButton()).toBeVisible(); }); }); \ No newline at end of file diff --git a/apps/e2e/tests/user-billing/user-billing.po.ts b/apps/e2e/tests/user-billing/user-billing.po.ts index 0468cb2c2..941816d84 100644 --- a/apps/e2e/tests/user-billing/user-billing.po.ts +++ b/apps/e2e/tests/user-billing/user-billing.po.ts @@ -1,14 +1,14 @@ import { Page } from '@playwright/test'; import { AuthPageObject } from '../authentication/auth.po'; -import { StripePageObject } from '../utils/stripe.po'; +import { BillingPageObject } from '../utils/billing.po'; export class UserBillingPageObject { private readonly auth: AuthPageObject; - public readonly stripe: StripePageObject; + public readonly billing: BillingPageObject; constructor(page: Page) { this.auth = new AuthPageObject(page); - this.stripe = new StripePageObject(page); + this.billing = new BillingPageObject(page); } async setup() { diff --git a/apps/e2e/tests/user-billing/user-billing.spec.ts b/apps/e2e/tests/user-billing/user-billing.spec.ts index 9ef729356..34280b7fc 100644 --- a/apps/e2e/tests/user-billing/user-billing.spec.ts +++ b/apps/e2e/tests/user-billing/user-billing.spec.ts @@ -3,22 +3,27 @@ import { UserBillingPageObject } from './user-billing.po'; test.describe('User Billing', () => { let page: Page; - let billing: UserBillingPageObject; + let po: UserBillingPageObject; test.beforeAll(async ({ browser }) => { page = await browser.newPage(); - billing = new UserBillingPageObject(page); + po = new UserBillingPageObject(page); - await billing.setup(); + await po.setup(); }); - test('user can subscribe to a plan', async () => { - await billing.stripe.selectPlan(0); - await billing.stripe.proceedToCheckout(); + test('user can subscribe to a plan', async ({page}) => { + await po.billing.selectPlan(0); + await po.billing.proceedToCheckout(); - await billing.stripe.fillForm(); - await billing.stripe.submitForm(); + await po.billing.stripe.fillForm(); + await po.billing.stripe.submitForm(); - await expect(billing.stripe.successStatus()).toBeVisible(); + await expect(po.billing.successStatus()).toBeVisible(); + + await page.goto('/home/billing'); + + await expect(await po.billing.getStatus()).toContainText('active'); + await expect(po.billing.manageBillingButton()).toBeVisible(); }); }); \ No newline at end of file diff --git a/apps/e2e/tests/utils/billing.po.ts b/apps/e2e/tests/utils/billing.po.ts new file mode 100644 index 000000000..e91f5d36d --- /dev/null +++ b/apps/e2e/tests/utils/billing.po.ts @@ -0,0 +1,42 @@ +import { Page } from '@playwright/test'; +import { StripePageObject } from './stripe.po'; + +export class BillingPageObject { + public readonly stripe: StripePageObject; + + constructor( + private readonly page: Page, + ) { + this.stripe = new StripePageObject(page); + } + + plans() { + return this.page.locator('[data-test-plan]'); + } + + selectPlan(index: number = 0) { + const plans = this.plans(); + + return plans.nth(index).click(); + } + + manageBillingButton() { + return this.page.locator('manage-billing-redirect-button'); + } + + successStatus() { + return this.page.locator('[data-test="payment-return-success"]'); + } + + async returnToHome() { + await this.successStatus().locator('button').click(); + } + + proceedToCheckout() { + return this.page.click('[data-test="checkout-submit-button"]'); + } + + async getStatus() { + return this.page.locator('[data-test="current-plan-card-status-badge"]'); + } +} \ No newline at end of file diff --git a/apps/e2e/tests/utils/stripe.po.ts b/apps/e2e/tests/utils/stripe.po.ts index ecbee69ee..37113bdf2 100644 --- a/apps/e2e/tests/utils/stripe.po.ts +++ b/apps/e2e/tests/utils/stripe.po.ts @@ -1,14 +1,13 @@ import { Page, expect } from '@playwright/test'; +import { BillingPageObject } from './billing.po'; export class StripePageObject { - private page: Page; + private readonly page: Page; + public readonly billing: BillingPageObject; constructor(page: Page) { this.page = page; - } - - plans() { - return this.page.locator('[data-test-plan]'); + this.billing = new BillingPageObject(page); } getStripeCheckoutIframe() { @@ -66,22 +65,4 @@ export class StripePageObject { billingCountry() { return this.getStripeCheckoutIframe().locator('#billingCountry'); } - - selectPlan(index: number = 0) { - const plans = this.plans(); - - return plans.nth(index).click(); - } - - manageBillingButton() { - return this.page.locator('manage-billing-redirect-button'); - } - - successStatus() { - return this.page.locator('[data-test="payment-return-success"]'); - } - - proceedToCheckout() { - return this.page.click('[data-test="checkout-submit-button"]'); - } } \ No newline at end of file diff --git a/packages/billing/gateway/src/components/current-plan-badge.tsx b/packages/billing/gateway/src/components/current-plan-badge.tsx index d8de500f8..4a947717e 100644 --- a/packages/billing/gateway/src/components/current-plan-badge.tsx +++ b/packages/billing/gateway/src/components/current-plan-badge.tsx @@ -45,7 +45,7 @@ export function CurrentPlanBadge( } return ( - + ); diff --git a/packages/billing/gateway/src/components/current-subscription-card.tsx b/packages/billing/gateway/src/components/current-subscription-card.tsx index bc9449384..0d2779c08 100644 --- a/packages/billing/gateway/src/components/current-subscription-card.tsx +++ b/packages/billing/gateway/src/components/current-subscription-card.tsx @@ -73,7 +73,9 @@ export function CurrentSubscriptionCard({ } /> - {product.name} + + {product.name} + @@ -84,7 +86,7 @@ export function CurrentSubscriptionCard({ (e.g. trial ending soon, subscription canceled, etc.) */} -
+