chore(e2e): Add test cases for billing buttons

Author: panteliselef

.changeset/legal-ants-flow.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add class `cl-planDetails-root` to the parent div element that containes the plan details drawer.

.changeset/little-seals-hang.md

@@ -0,0 +1,5 @@
+---
+'@clerk/testing': patch
+---
+
+Add `planDetails` to the page details object.

integration/templates/next-app-router/src/app/billing/checkout-btn/page.tsx

@@ -0,0 +1,17 @@
+import { SignedIn } from '@clerk/nextjs';
+import { CheckoutButton } from '@clerk/nextjs/experimental';
+
+export default function Home() {
+  return (
+    <main>
+      <SignedIn>
+        <CheckoutButton
+          planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'
+          planPeriod='month'
+        >
+          Checkout Now
+        </CheckoutButton>
+      </SignedIn>
+    </main>
+  );
+}

integration/templates/next-app-router/src/app/billing/plan-details-btn/page.tsx

@@ -0,0 +1,9 @@
+import { PlanDetailsButton } from '@clerk/nextjs/experimental';
+
+export default function Home() {
+  return (
+    <main>
+      <PlanDetailsButton planId='cplan_2wMjqdlza0hTJc4HLCoBwAiExhF'>Plan details</PlanDetailsButton>
+    </main>
+  );
+}

integration/templates/next-app-router/src/app/billing/subscription-details-btn/page.tsx

@@ -0,0 +1,9 @@
+import { SubscriptionDetailsButton } from '@clerk/nextjs/experimental';
+
+export default function Home() {
+  return (
+    <main>
+      <SubscriptionDetailsButton>Subscription details</SubscriptionDetailsButton>
+    </main>
+  );
+}

integration/tests/pricing-table.test.ts

@@ -28,6 +28,25 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await expect(u.po.page.getByRole('heading', { name: 'Pro' })).toBeVisible();
   });
 
+  test('renders pricing details of a specific plan', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.page.goToRelative('/billing/plan-details-btn');
+
+    await u.po.page.getByRole('button', { name: 'Plan details' }).click();
+
+    await u.po.planDetails.waitForMounted();
+    const { root } = u.po.planDetails;
+    await expect(root.getByRole('heading', { name: 'Plus' })).toBeVisible();
+    await expect(root.getByText('$9.99')).toBeVisible();
+    await expect(root.getByText('This is the Plus plan!')).toBeVisible();
+    await expect(root.getByText('Feature One')).toBeVisible();
+    await expect(root.getByText('First feature')).toBeVisible();
+    await expect(root.getByText('Feature Two')).toBeVisible();
+    await expect(root.getByText('Second feature')).toBeVisible();
+    await expect(root.getByText('Feature Three')).toBeVisible();
+    await expect(root.getByText('Third feature')).toBeVisible();
+  });
+
   test('when signed out, clicking subscribe button navigates to sign in page', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.page.goToRelative('/pricing-table');
@@ -64,6 +83,18 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     await expect(u.po.page.getByText('Checkout')).toBeVisible();
   });
 
+  test('when signed in, clicking checkout button open checkout drawer', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.page.goToRelative('/billing/checkout-btn');
+
+    await u.po.page.getByRole('button', { name: 'Checkout Now' }).click();
+    await u.po.checkout.waitForMounted();
+    await u.po.page.getByText(/^Checkout$/).click();
+    await u.po.checkout.fillTestCard();
+  });
+
   test('can subscribe to a plan', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();
@@ -86,6 +117,22 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
     }
   });
 
+  test('Displays subscription details drawer', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+    await u.po.page.goToRelative('/billing/subscription-details-btn');
+
+    await u.po.page.getByRole('button', { name: 'Subscription details' }).click();
+
+    await u.po.subscriptionDetails.waitForMounted();
+    await expect(u.po.page.getByText('Plus')).toBeVisible();
+    await expect(u.po.page.getByText('Subscription details')).toBeVisible();
+    await expect(u.po.page.getByText('Current billing cycle')).toBeVisible();
+    await expect(u.po.page.getByText('Next payment on')).toBeVisible();
+    await expect(u.po.page.getByText('Next payment amount')).toBeVisible();
+  });
+
   test('can upgrade to a new plan with saved card', async ({ page, context }) => {
     const u = createTestUtils({ app, page, context });
     await u.po.signIn.goTo();

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -20,6 +20,7 @@ import {
   Col,
   descriptors,
   Flex,
+  Flow,
   Heading,
   localizationKeys,
   Span,
@@ -30,9 +31,13 @@ import {
 
 export const PlanDetails = (props: __internal_PlanDetailsProps) => {
   return (
-    <Drawer.Content>
-      <PlanDetailsInternal {...props} />
-    </Drawer.Content>
+    <Flow.Root flow='planDetails'>
+      <Flow.Part>
+        <Drawer.Content>
+          <PlanDetailsInternal {...props} />
+        </Drawer.Content>
+      </Flow.Part>
+    </Flow.Root>
   );
 };
 

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -100,6 +100,7 @@ export type FlowMetadata = {
     | 'apiKeys'
     | 'oauthConsent'
     | 'subscriptionDetails'
+    | 'subscriptionDetails'
     | 'taskChooseOrganization';
   part?:
     | 'start'

packages/testing/src/playwright/unstable/page-objects/index.ts

@@ -8,6 +8,7 @@ import { createExpectPageObject } from './expect';
 import { createImpersonationPageObject } from './impersonation';
 import { createKeylessPopoverPageObject } from './keylessPopover';
 import { createOrganizationSwitcherComponentPageObject } from './organizationSwitcher';
+import { createPlanDetailsPageObject } from './planDetails';
 import { createPricingTablePageObject } from './pricingTable';
 import { createSessionTaskComponentPageObject } from './sessionTask';
 import { createSignInComponentPageObject } from './signIn';
@@ -50,5 +51,6 @@ export const createPageObjects = ({
     waitlist: createWaitlistComponentPageObject(testArgs),
     apiKeys: createAPIKeysComponentPageObject(testArgs),
     subscriptionDetails: createSubscriptionDetailsPageObject(testArgs),
+    planDetails: createPlanDetailsPageObject(testArgs),
   };
 };

packages/testing/src/playwright/unstable/page-objects/planDetails.ts

@@ -0,0 +1,14 @@
+import type { EnhancedPage } from './app';
+import { common } from './common';
+
+export const createPlanDetailsPageObject = (testArgs: { page: EnhancedPage }) => {
+  const { page } = testArgs;
+  const self = {
+    ...common(testArgs),
+    waitForMounted: (selector = '.cl-planDetails-root') => {
+      return page.waitForSelector(selector, { state: 'attached' });
+    },
+    root: page.locator('.cl-planDetails-root'),
+  };
+  return self;
+};