feat: new section - end to end testing with Kinde#637
feat: new section - end to end testing with Kinde#637tamalchowdhury wants to merge 59 commits intomainfrom
Conversation
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughAdds a new top-level "Testing" sidebar section and a comprehensive set of documentation pages for end-to-end testing with Cypress, Playwright, and Jest, plus supporting guides for test user/environment setup, passwordless OTP strategies, backend API testing, and patterns for testing authenticated features. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying kinde-docs-preview with
|
| Latest commit: |
56b3214
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a2d4dab0.kinde-docs-preview.pages.dev |
| Branch Preview URL: | https://tamal-feat-end-to-end-testin.kinde-docs-preview.pages.dev |
|
Hi @Arobce testing backend API is the general overview, and test backend API with Jest is fully Jest specific. I did this to keep things separate and avoid repeating the same content. Right now, Jest is sitting right next to it because I don't know where to put it. I have made the distinction like this: It's still a work in progress, so hopefully we will arrive at a better version evantually. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 Fix all issues with AI agents
In `@src/content/docs/testing/cypress/index.mdx`:
- Around line 105-117: The project documentation shows mixed Cypress config
extensions; update references so they match (choose TypeScript or JavaScript) —
e.g., rename or change the example reference from cypress.config.js to
cypress.config.ts (or vice versa) and ensure the support files and examples
(like spec.cy.ts, commands.ts, e2e.ts) consistently reflect that choice; update
any example import/usage text to reference the selected config filename
(cypress.config.ts or cypress.config.js) so all occurrences in the doc are
consistent.
- Around line 65-74: The example cypress.env.json block contains an invalid
trailing comma after the "KINDE_CLIENT_SECRET" property which will break JSON
parsing; edit the JSON snippet in src/content/docs/testing/cypress/index.mdx and
remove the trailing comma after "KINDE_CLIENT_SECRET" (ensure the block shows
valid JSON with keys TEST_APP_URL, TEST_USER_EMAIL, TEST_USER_PASSWORD,
KINDE_ISSUER_URL, KINDE_CLIENT_ID, and KINDE_CLIENT_SECRET).
In `@src/content/docs/testing/cypress/test-backend-apis.mdx`:
- Around line 91-102: The refreshApiTokens task (function refreshApiTokens) is
missing required OAuth params; modify the POST body to include client_secret and
audience when calling `${issuerUrl}/oauth2/token`, and ensure the value for
client_secret is supplied (either by updating the api.setup.js task invocation
to pass clientSecret into refreshApiTokens or by reading it from Cypress.env()
inside refreshApiTokens); update the related task call in api.setup.js (the code
that calls refreshApiTokens) so it forwards clientSecret when you choose the
parameter approach.
- Around line 43-48: Update the environment variables JSON block in the Cypress
backend testing docs to include KINDE_AUDIENCE and KINDE_CLIENT_SECRET alongside
KINDE_REFRESH_TOKEN; add entries "KINDE_AUDIENCE": "your-kinde-audience" and
"KINDE_CLIENT_SECRET": "your-kinde-client-secret" so the guide specifies both
the audience for proper token scoping and the confidential client secret
required for backend tests (ensure the snippet and any explanatory text
reference KINDE_AUDIENCE and KINDE_CLIENT_SECRET).
In `@src/content/docs/testing/playwright/index.mdx`:
- Line 22: Update the front‑matter "updated" field in the Playwright docs page
to reflect the correct last‑edit/publish date (change updated: 2025-01-15 to the
actual date of the PR, e.g., updated: 2025-12-08 or the merge date) so the
metadata matches the page creation/merge timeline; locate the "updated"
front‑matter key near the top of src/content/docs/testing/playwright/index.mdx
and replace the stale value.
- Around line 62-70: Update the docs to clarify that KINDE_CLIENT_SECRET is only
required for confidential clients (e.g., backend apps) and not for SPAs: mark
the KINDE_CLIENT_SECRET env entry as "confidential-client-only" (or move it to a
backend/API testing section), show that SPAs should omit it, and add a brief
note advising to store KINDE_CLIENT_SECRET in CI/secrets; reference the existing
env variable names (KINDE_CLIENT_SECRET, KINDE_CLIENT_ID, TEST_APP_URL,
TEST_USER_EMAIL) so users can find and update the snippet in the Playwright
guide.
In `@src/content/docs/testing/playwright/test-backend-apis.mdx`:
- Around line 43-46: The .env example in the code block uses JavaScript-style
comments ("// ...your other environment variables...") which are invalid for
.env files; update the env snippet in test-backend-apis.mdx to use shell-style
comments (replace the leading "//" with "#") so the example shows "# ...your
other environment variables..." while preserving the KINDE_REFRESH_TOKEN line
and the surrounding fenced code block.
In `@src/content/docs/testing/testing-authentication-flows.mdx`:
- Around line 57-58: Fix the minor grammar by hyphenating "sign up" when used as
a noun in the sentence under the "Handle email verification" bullet: change "Use
an email testing service to test user sign up" to "Use an email testing service
to test user sign-up" (update the phrase in the content containing "Handle email
verification" in the testing-authentication-flows.mdx file).
♻️ Duplicate comments (4)
src/content/docs/testing/setup-test-user-environment.mdx (2)
89-89: Consider using a kinde-oss repository for the example application.The linked test application is under a personal GitHub account (
tamalchowdhury/kinde-test-application). For governance and long-term support clarity, consider hosting this underkinde-ossorkinde-starter-kitsorganization.
57-57: Fix comma splice for grammatical consistency.This line has the same comma splice pattern that should be corrected for consistency with standard documentation style.
-2. Select **Add environment**, a pop-up appears +2. Select **Add environment**. A pop-up appears.src/content/docs/testing/test-backend-apis-jest.mdx (2)
56-64: AddKINDE_AUDIENCEto environment variables.Per PR discussion, the token refresh should include the
audienceparameter so access tokens are scoped to the customer's backend API. Add the audience to the.envexample.# .env KINDE_CLIENT_ID=your_client_id KINDE_CLIENT_SECRET=your_client_secret KINDE_ISSUER_URL=https://your_kinde_domain.kinde.com +KINDE_AUDIENCE=https://api.mysite.com TEST_APP_URL=http://localhost:3000 TEST_USER_EMAIL=your_test_user_email KINDE_REFRESH_TOKEN=your-kinde-refresh-token
106-111: Includeaudienceparameter in the token refresh request.Per PR discussion, the token refresh request should include the
audienceparameter so the access token is scoped to the customer's backend API rather than Kinde Account APIs. Without this, the refreshed token won't have the correctaudclaim for validating against the registered API.🔧 Proposed fix
const requestBody = new URLSearchParams({ grant_type: 'refresh_token', client_id: process.env.KINDE_CLIENT_ID, client_secret: process.env.KINDE_CLIENT_SECRET, refresh_token: refreshToken, + audience: process.env.KINDE_AUDIENCE, }).toString()
🧹 Nitpick comments (5)
src/data/sidebarData.ts (1)
177-201: Consider using a distinct icon for the Testing section.The Testing section reuses the
"build"icon (line 180), which is already used by the "Build on Kinde" section (line 39). Using a unique icon would improve visual distinction and navigation clarity. If a dedicated test/check icon is available in the icon set, consider using it.Also, note that
collapsed: falsewill expand this section by default—this is fine for highlighting new content, but you may want to align it with other sections (collapsed: true) once the documentation is established.src/content/docs/testing/playwright/test-backend-apis.mdx (1)
69-79: Consider adding theaudienceparameter for customer-managed backend APIs.Based on the PR discussion, when testing customer-managed backend APIs (rather than Kinde's own endpoints), the token refresh request should include the
audienceparameter to ensure the access token is scoped correctly for your backend API.Additionally, confidential clients may require
client_secretin the token request.Suggested enhancement
setup('refresh API tokens', async ({ request }) => { const response = await request.post( `${process.env.KINDE_ISSUER_URL}/oauth2/token`, { form: { client_id: process.env.KINDE_CLIENT_ID!, + client_secret: process.env.KINDE_CLIENT_SECRET!, grant_type: 'refresh_token', refresh_token: process.env.KINDE_REFRESH_TOKEN!, + audience: process.env.KINDE_AUDIENCE!, // Your registered API identifier }, } )Consider also adding a note linking to the Kinde documentation on registering APIs so readers understand how to set up their backend API in Kinde.
src/content/docs/testing/playwright/test-passwordless-flows.mdx (1)
70-101: Mixed module syntax:requirewith ES imports.The code mixes ES module imports with CommonJS
require("dotenv").config(). For consistency in a TypeScript project, consider using ES module syntax.Suggested fix
// tests/utils/mailosaur.ts import MailosaurClient from "mailosaur" - require("dotenv").config() + import 'dotenv/config'src/content/docs/testing/playwright/test-auth-flows.mdx (1)
84-108: Consider referencing session reuse for sign-out test.The sign-out test duplicates the full sign-in flow. Consider adding a note that in a real test suite, readers could use the
storageStateapproach from the Test authenticated features guide to avoid repeating the login code.src/content/docs/testing/cypress/test-auth-features.mdx (1)
153-160: Potentially redundant Cypress install step.If Cypress is already listed in
package.jsondevDependencies (as recommended in the setup guide), the separatenpm install cypress --save-devstep afternpm ciis redundant. Consider removing it or adding a note that it's only needed if Cypress isn't in the project dependencies.Suggested simplification
- name: Install dependencies run: npm ci - - name: Install Cypress - run: npm install cypress --save-dev - - name: Run Cypress tests run: npx cypress run
|
I see what you mean. Makes sense as you have "Testing" for both authentication and passwordless flows. Do you think the top description needs to change a bit? In this guide, we’ll show you how to do the general setup for testing backend APIs in Kinde. You will need to register your API in Kinde, obtain initial tokens, set up Jest testing suite, and validate the API request. Maybe we can skip |
Good catch! It was a discrepancy. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/content/docs/testing/cypress/index.mdx`:
- Around line 88-100: The config uses process.env.TEST_APP_URL which won't read
cypress.env.json; update the cypress.config.js to load the JSON env file or the
Cypress config env value and use that for baseUrl (e.g., read
require('./cypress.env.json')?.TEST_APP_URL or use config.env.TEST_APP_URL when
available) instead of relying solely on process.env, keeping the existing
fallback 'http://localhost:3000'; reference the symbols:
process.env.TEST_APP_URL, baseUrl, and the cypress.config.js defineConfig block
to locate where to change.
♻️ Duplicate comments (2)
src/content/docs/testing/playwright/index.mdx (1)
22-22: Theupdateddate is still incorrect.This was flagged in a previous review. The date
2025-01-15predates the PR creation. Update to the actual publish/merge date (e.g.,2026-01-20).src/content/docs/testing/testing-authentication-flows.mdx (1)
57-58: Hyphenate "sign-up" when used as a noun.This was flagged in a previous review. "sign up" should be "sign-up" when used as a noun.
-2. **Handle email verification**: Use an email testing service to test user sign up +2. **Handle email verification**: Use an email testing service to test user sign-up
🧹 Nitpick comments (1)
src/content/docs/testing/cypress/index.mdx (1)
41-50: Consider varying the sentence structure.Three consecutive bullet points begin with "Select", which reads repetitively. A small rewording improves flow.
✏️ Suggested rewording
Pick the following options: - - Do you want to use TypeScript or JavaScript?: **TypeScript** - - Where to put your end-to-end tests?: **tests** - - Add a GitHub Actions workflow?: **true** - - Install Playwright browsers?: **true** + - Choose **E2E Testing** and then **Continue**. + - Start E2E Testing in **Chrome** to open the Cypress Test Runner. + - Create a new spec via the **Create new spec** option, then **Create spec** in the pop-up. + - Run the spec by selecting **Okay, run the spec**.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/content/docs/testing/index.mdx`:
- Around line 44-46: The three bullet points in
src/content/docs/testing/index.mdx are inconsistent: "Authentication flow
testing" ends with a period but the following bullets "Authenticated feature
testing" and "Backend API testing" do not; update the two latter bullets (the
lines containing "Test protected routes and features after authentication using
saved session state" and "Test protected API endpoints using refresh tokens for
long-running authenticated sessions") to include trailing periods so all list
items match punctuation style.
- Line 48: Update the sentence on line 48 to accurately reflect docs structure:
change "Each approach has its own overview guide" to either (A) link directly to
the two root-level overview pages testing-authentication-flows.mdx and
testing-backend-apis.mdx and note that authenticated feature testing has only
tool-specific guides, or (B) rephrase to say that authentication flow testing
and backend API testing have dedicated overview pages while authenticated
feature testing is covered via tool-specific implementations (Cypress and
Playwright); edit the text to reference the filenames
testing-authentication-flows.mdx and testing-backend-apis.mdx and/or mention
Cypress and Playwright so readers can find the correct pages.
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Fix all issues with AI agents
In `@src/content/docs/testing/cypress/index.mdx`:
- Line 77: Update the Aside text that currently reads "Kinde Client Secret is
optional and only required for confidential clients." in
src/content/docs/testing/cypress/index.mdx: change it to clearly state that
confidential clients (backend apps with secure storage) must use a client
secret, while public clients (SPAs, mobile apps) cannot securely store or use a
secret; edit the Aside component content accordingly so it contrasts "must" for
confidential clients and "not used" for public clients for clarity.
In `@src/content/docs/testing/cypress/test-auth-features.mdx`:
- Around line 187-189: The troubleshooting note incorrectly states that support
files are imported in cypress.config.js; update the text in
test-auth-features.mdx to clarify that Cypress support files (e.g., commands.js)
are typically imported via cypress/support/e2e.js (or the configured support
file) and not directly in cypress.config.js, and adjust the guidance about where
to call cy.session() to recommend placing it in beforeEach or at the start of
each test; reference the existing paragraph under "Session not persisting" to
locate and replace the inaccurate sentence.
In `@src/content/docs/testing/cypress/test-auth-flows.mdx`:
- Around line 92-97: The cy.origin call in the sign-up flow is using Cypress.env
inside the cross-origin callback which fails; update the cy.origin invocation to
pass environment values via the args option (e.g., pass TEST_USER_EMAIL and
TEST_USER_PASSWORD as args) and then inside the callback use those args
(email/password) when calling cy.get('input[name="p_email"]').type(...) and
cy.get('input[name="p_password"]').type(...); keep the existing button selectors
and submit clicks but replace direct Cypress.env(...) references inside the
origin callback with the passed-in args.
In `@src/content/docs/testing/playwright/test-auth-features.mdx`:
- Line 109: Add a single blank line immediately before the MDX heading "##
Create and run sample tests" so the heading is separated from the preceding
content; locate the heading string "## Create and run sample tests" and insert
one empty line above it to ensure proper MDX rendering.
In `@src/content/docs/testing/playwright/test-auth-flows.mdx`:
- Around line 100-101: The hostname regex is only escaping the first dot
(appUrl.hostname.replace('.', '\\.')) causing incorrect matching; update the
code that builds the RegExp for toHaveURL to escape all dots in appUrl.hostname
(e.g., use a global replace or an escape utility) so every '.' becomes '\.'
before constructing new RegExp, keeping the variables appUrl,
process.env.TEST_APP_URL, page, expect and toHaveURL intact.
- Around line 70-71: The hostname escaping only replaces the first dot; update
the construction that builds the RegExp from appUrl.hostname (the line using
hostname.replace('.', '\\.')) to escape all dots (e.g., use a global replacement
like hostname.replace(/\./g, '\\.') or replaceAll('.', '\\.') ) before passing
it into new RegExp so hostnames like "app.example.com" are correctly escaped.
In `@src/content/docs/testing/test-backend-apis-jest.mdx`:
- Around line 186-189: The code reading the access token (tokenPath, tokenData,
accessToken) can throw if the file is missing; update the logic to handle that
by checking for the file or wrapping the read/parse in a try-catch: verify
tokenPath exists (e.g., fs.existsSync) before readFileSync or catch errors from
readFileSync/JSON.parse, and if missing/invalid, surface a clear error message
or fall back to the same token refresh behavior used in jest.global-setup.js so
the test harness fails gracefully rather than throwing.
🧹 Nitpick comments (1)
src/content/docs/testing/cypress/test-auth-features.mdx (1)
155-159: Redundant Cypress installation step.If Cypress is already in
package.json(as recommended in the setup guide),npm ciwill install it. The separate install step can be removed.♻️ Proposed fix
- name: Install dependencies run: npm ci - - name: Install Cypress - run: npm install cypress --save-dev - - name: Run Cypress tests run: npx cypress run
|
The test application link will be uploaded when Andre creates a new test starter kit repo. After the fix it will be complete. |
|
Amazing work on this. The structure is clear, and all the code examples look solid. I just have two small suggestions to add a bit of extra polish:
This would be helpful for readers who want to dig deeper and would further polish our documentation. Nice work overall! |
This comment was marked as outdated.
This comment was marked as outdated.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/content/docs/testing/cypress/index.mdx`:
- Around line 171-177: Update the shell example to set the Cypress-prefixed
environment variable so Cypress.env('TEST_APP_URL') will see it: replace
TEST_APP_URL with CYPRESS_TEST_APP_URL in the example command and mention that
tests should read Cypress.env('TEST_APP_URL') (or update any references to
Cypress.env('TEST_APP_URL') if you prefer a different key) so the env var is
ingested by Cypress.
alex72508
left a comment
alex72508
left a comment
There was a problem hiding this comment.
Nice one! Big change. Customers will appreciate this testing section.
|
@alex72508 this is now ready for publication. Updated git repo. |
4 participants
Description (required)
This PR creates a new e2e testing section with Kinde
Update version creates a Testing section of its own with the following files:
First draft:
A total of 6 docs make up this new section with option to expand based on testing tools (Cypress, Playwright)
Sits under SDK and APIs
Related issues & labels (optional)
Summary by CodeRabbit
New Features
Documentation
Style
✏️ Tip: You can customize this high-level summary in your review settings.