chore(clerk-js,e2e): Test case for cancelling a plan #6333
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 695637d The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📝 WalkthroughWalkthroughThis update introduces a new CSS class or marker, 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/testing/src/playwright/unstable/page-objects/subscriptionDetails.ts (1)
4-20: Consider improving the waitForUnmounted method and adding explicit return types.The page object implementation looks good overall, but there are a few areas for improvement:
- The
waitForUnmountedmethod relies on detecting when.cl-drawerRootbecomes detached, but this might not be the most reliable indicator of the subscription details being unmounted.- The function could benefit from explicit return type annotations.
Consider this refactor:
-export const createSubscriptionDetailsPageObject = (testArgs: { page: EnhancedPage }) => { +export const createSubscriptionDetailsPageObject = (testArgs: { page: EnhancedPage }) => { const { page } = testArgs; const self = { ...common(testArgs), - waitForMounted: (selector = '.cl-subscriptionDetails-root') => { + waitForMounted: (selector = '.cl-subscriptionDetails-root') => { return page.waitForSelector(selector, { state: 'attached' }); }, - waitForUnmounted: () => { - return self.root.locator('.cl-drawerRoot').waitFor({ state: 'detached' }); + waitForUnmounted: () => { + return self.root.waitFor({ state: 'detached' }); }, - closeDrawer: () => { + closeDrawer: () => { return self.root.locator('.cl-drawerClose').click(); }, root: page.locator('.cl-subscriptionDetails-root'), }; return self; };This change makes the unmounting detection more reliable by waiting for the root element itself to be detached rather than a nested element.
integration/tests/pricing-table.test.ts (2)
273-273: Consider removing the hardcoded timeout.The hardcoded
waitForTimeout(1000)could make the test flaky. Consider using a more specific wait condition or removing it entirely if the subsequentexpectprovides sufficient waiting.- await u.page.waitForTimeout(1000);If timing is critical, consider waiting for a specific element or condition instead:
- await u.page.waitForTimeout(1000); + await u.po.page.locator('.cl-profileSectionContent__subscriptionsList').waitFor({ state: 'visible' });
277-281: Consider using page object methods for subscription details interactions.The test uses direct CSS selectors like
.cl-menuButtonEllipsisBorderedand.cl-drawerConfirmationRoot. If thesubscriptionDetailspage object doesn't have dedicated methods for these actions, consider adding them to improve test maintainability.The current approach works but could be more maintainable:
// Current approach await u.po.subscriptionDetails.root.locator('.cl-menuButtonEllipsisBordered').click(); await u.po.subscriptionDetails.root.getByText('Cancel subscription').click(); await u.po.subscriptionDetails.root.locator('.cl-drawerConfirmationRoot').waitFor({ state: 'visible' }); await u.po.subscriptionDetails.root.getByText('Cancel subscription').click(); // Consider adding methods to the page object for better abstraction await u.po.subscriptionDetails.openOptionsMenu(); await u.po.subscriptionDetails.selectCancelSubscription(); await u.po.subscriptionDetails.waitForCancellationDialog(); await u.po.subscriptionDetails.confirmCancellation();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
.changeset/lovely-ghosts-fall.md(1 hunks).changeset/slow-zoos-work.md(1 hunks)integration/tests/pricing-table.test.ts(1 hunks)packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx(3 hunks)packages/testing/src/playwright/unstable/page-objects/index.ts(2 hunks)packages/testing/src/playwright/unstable/page-objects/subscriptionDetails.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (14)
**/*.{js,jsx,ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
packages/**/*.ts
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
packages/**/*.{ts,tsx,d.ts}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
packages/**/index.{js,ts}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
**/*.{ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
- .cursor/rules/typescript.mdc
**/index.ts
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/react.mdc
- .cursor/rules/typescript.mdc
**/*
Instructions used from:
Sources:
⚙️ CodeRabbit Configuration File
**/*.{tsx,jsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/development.mdc
packages/{clerk-js,elements,themes}/**/*
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/monorepo.mdc
**/*.{jsx,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/react.mdc
**/*.tsx
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/react.mdc
integration/**/*
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/monorepo.mdc
**/*.{test,spec}.{js,ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/monorepo.mdc
integration/**/*.{test,spec}.{js,ts,tsx}
Instructions used from:
Sources:
📄 CodeRabbit Inference Engine
- .cursor/rules/monorepo.mdc
🧠 Learnings (7)
📓 Common learnings
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/{clerk-js,elements,themes}/**/* : Visual regression testing should be performed for UI components.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Implement proper subscription cleanup
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/clerk-react/**/*.{test,spec}.{js,ts,tsx} : Component testing should use React Testing Library.
Learnt from: panteliselef
PR: clerk/javascript#6327
File: .changeset/eight-socks-lead.md:2-4
Timestamp: 2025-07-16T10:43:17.696Z
Learning: In the Clerk JavaScript repository, APIs marked with @experimental JSDoc annotations can have breaking changes released with minor version bumps rather than major version bumps, as consumers are warned about the instability of experimental features. The billing feature specifically has an @experimental annotation stating "This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change."
Learnt from: panteliselef
PR: clerk/javascript#6327
File: .changeset/eight-socks-lead.md:2-4
Timestamp: 2025-07-16T10:43:17.696Z
Learning: In the Clerk JavaScript repository, APIs marked with @experimental JSDoc annotations can have breaking changes released with minor version bumps rather than major version bumps, as consumers are warned about the instability of experimental features.
.changeset/slow-zoos-work.md (5)
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/{clerk-js,elements,themes}/**/* : Visual regression testing should be performed for UI components.
Learnt from: jacekradko
PR: clerk/javascript#5905
File: .changeset/six-ears-wash.md:1-3
Timestamp: 2025-06-26T03:27:05.535Z
Learning: In the Clerk JavaScript repository, changeset headers support single quotes syntax (e.g., '@clerk/backend': minor) and work fine with their current changesets integration, so there's no need to change them to double quotes.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-30T10:29:42.997Z
Learning: Update documentation for API changes
Learnt from: wobsoriano
PR: clerk/javascript#6163
File: packages/backend/src/api/endpoints/APIKeysApi.ts:60-70
Timestamp: 2025-06-20T17:44:17.570Z
Learning: The Clerk codebase uses POST method for API key update operations instead of the typical PATCH method, as clarified by the maintainer wobsoriano.
.changeset/lovely-ghosts-fall.md (7)
Learnt from: dstaley
PR: clerk/javascript#6116
File: .changeset/tangy-garlics-say.md:1-2
Timestamp: 2025-06-13T16:09:53.061Z
Learning: In the Clerk JavaScript repository, contributors create intentionally empty changeset files (containing only the YAML delimiters) when a PR touches only non-published parts of the codebase (e.g., sandbox assets). This signals that no package release is required, so such changesets should not be flagged as missing content.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/{clerk-js,elements,themes}/**/* : Visual regression testing should be performed for UI components.
Learnt from: dstaley
PR: clerk/javascript#6100
File: packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx:121-124
Timestamp: 2025-06-16T17:08:58.414Z
Learning: The @clerk/clerk-js package only supports browsers released in the last two years (since May 8, 2023), so modern CSS features like color-mix() are fully supported across all target browsers without requiring fallbacks.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Implement proper subscription cleanup
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/@clerk/*/package.json : Framework packages must depend on '@clerk/clerk-js' for core functionality.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/clerk-react/**/*.{test,spec}.{js,ts,tsx} : Component testing should use React Testing Library.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/*/package.json : All packages must be published under the @clerk namespace on npm.
packages/testing/src/playwright/unstable/page-objects/index.ts (6)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-30T10:31:43.578Z
Learning: Applies to app/**/page.tsx : Export metadata object from page components for static metadata
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-30T10:33:45.961Z
Learning: Applies to **/__tests__/**/*.{ts,tsx} : Create type-safe test builders/factories
Learnt from: LauraBeatris
PR: clerk/javascript#6273
File: packages/testing/src/playwright/unstable/page-objects/sessionTask.ts:22-27
Timestamp: 2025-07-11T17:12:28.495Z
Learning: In Clerk's test utilities, particularly for page objects like sessionTask.ts, when handling task type enums, prefer graceful handling of unknown/unsupported task types rather than throwing errors. This prevents breaking existing tests when new task types are introduced to the SessionTask['key'] union type.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-30T10:31:43.578Z
Learning: Applies to app/**/page.tsx : Use page.tsx for route segments that render UI in the App Router
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.test.{jsx,tsx} : Test component interactions
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-30T10:29:42.997Z
Learning: React Testing Library for component testing
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (7)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Implement proper subscription cleanup
Learnt from: panteliselef
PR: clerk/javascript#6097
File: packages/clerk-js/src/ui/elements/LineItems.tsx:89-89
Timestamp: 2025-06-10T09:38:56.214Z
Learning: In packages/clerk-js/src/ui/elements/LineItems.tsx, the Title component's React.forwardRef should use HTMLTableCellElement as the generic type parameter, even though it renders a Dt element. This is the correct implementation according to the codebase maintainer.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/monorepo.mdc:0-0
Timestamp: 2025-06-30T10:30:56.197Z
Learning: Applies to packages/clerk-react/**/*.{test,spec}.{js,ts,tsx} : Component testing should use React Testing Library.
Learnt from: LauraBeatris
PR: clerk/javascript#6117
File: packages/clerk-js/src/ui/components/SessionTasks/tasks/ForceOrganizationSelection.tsx:101-116
Timestamp: 2025-06-18T21:06:15.954Z
Learning: The Spinner component in packages/clerk-js has built-in accessibility attributes including aria-busy and aria-live='polite', making additional aria-label or screen reader text unnecessary for loading states.
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-30T10:31:43.578Z
Learning: Applies to app/**/layout.tsx : Use layout.tsx for shared UI that wraps multiple pages in the App Router
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Use composition over inheritance - prefer smaller, composable components
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Implement proper component structure
integration/tests/pricing-table.test.ts (6)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.test.{jsx,tsx} : Use proper test cleanup
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-30T10:33:45.961Z
Learning: Applies to **/__tests__/**/*.{ts,tsx} : Use branded types for test isolation
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.{jsx,tsx} : Implement proper subscription cleanup
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-30T10:29:42.997Z
Learning: Integration tests using Playwright for E2E scenarios
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-30T10:29:42.997Z
Learning: Test authentication flows end-to-end
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/react.mdc:0-0
Timestamp: 2025-06-30T10:32:37.848Z
Learning: Applies to **/*.test.{jsx,tsx} : Test component interactions
packages/testing/src/playwright/unstable/page-objects/subscriptionDetails.ts (4)
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/typescript.mdc:0-0
Timestamp: 2025-06-30T10:33:45.961Z
Learning: Applies to **/__tests__/**/*.{ts,tsx} : Create type-safe test builders/factories
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/development.mdc:0-0
Timestamp: 2025-06-30T10:29:42.997Z
Learning: Integration tests using Playwright for E2E scenarios
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-30T10:31:43.578Z
Learning: Applies to app/**/page.tsx : Export metadata object from page components for static metadata
Learnt from: CR
PR: clerk/javascript#0
File: .cursor/rules/nextjs.mdc:0-0
Timestamp: 2025-06-30T10:31:43.578Z
Learning: Applies to app/**/page.tsx : Use page.tsx for route segments that render UI in the App Router
🧬 Code Graph Analysis (3)
packages/testing/src/playwright/unstable/page-objects/index.ts (1)
packages/testing/src/playwright/unstable/page-objects/subscriptionDetails.ts (1)
createSubscriptionDetailsPageObject(4-20)
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (4)
packages/clerk-js/src/ui/customizables/Flow.tsx (1)
Flow(41-44)packages/clerk-js/src/ui/elements/Drawer.tsx (1)
Drawer(556-565)packages/clerk-js/src/ui/contexts/components/SubscriptionDetails.ts (1)
SubscriptionDetailsContext(5-5)packages/clerk-js/src/ui/contexts/components/SubscriberType.ts (1)
SubscriberTypeContext(4-4)
integration/tests/pricing-table.test.ts (1)
integration/testUtils/index.ts (1)
createTestUtils(24-86)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep/ci
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (10)
.changeset/lovely-ghosts-fall.md (1)
1-6: LGTM! Changeset correctly documents the CSS class addition.The changeset format is correct and accurately describes the addition of the
cl-subscriptionDetails-rootCSS class to the subscription modal..changeset/slow-zoos-work.md (1)
1-6: LGTM! Changeset correctly documents the page object addition.The changeset format is correct and accurately describes the addition of the subscription details page object.
packages/testing/src/playwright/unstable/page-objects/index.ts (2)
15-15: LGTM! Import follows the established pattern.The import is correctly placed in alphabetical order with other page object imports.
52-52: LGTM! Page object integration follows the established pattern.The subscription details page object is correctly integrated into the factory function following the same pattern as other page objects.
packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx (3)
35-35: LGTM! Flow import correctly added.The Flow import is properly added to support the new wrapper structure.
44-44: LGTM! Typo fix improves code quality.Good catch fixing the typo in the comment from "confrimation" to "confirmation".
59-70: LGTM! Flow wrapper implementation follows React best practices.The Flow.Root and Flow.Part wrapper structure is correctly implemented, providing proper flow management for the subscription details modal while maintaining the existing component structure.
integration/tests/pricing-table.test.ts (3)
250-294: Comprehensive test for subscription cancellation flow.This test provides excellent coverage of the complete subscription lifecycle from signup through cancellation. The test structure follows established patterns and includes proper cleanup.
284-290: Well-structured verification of subscription status.The verification correctly checks that the user is downgraded to the "Free" plan with "Upcoming" status, which aligns with the expected business logic for subscription cancellation.
253-254: Proper test isolation with fake user creation and cleanup.Good practice creating a dedicated fake user for this test and ensuring proper cleanup. This prevents test interference and maintains test isolation.
Also applies to: 292-293
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
nikosdouvlis
approved these changes
Jul 17, 2025
anagstef
approved these changes
Jul 17, 2025
nikospapcom
approved these changes
Jul 17, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Re introduces test case for cancelling a plan.
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Bug Fixes
Tests