feat(test): Add Clerk Elements E2E #3394
Conversation
🦋 Changeset detectedLatest commit: ff3e23f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
LekoArts
force-pushed
the
lekoarts/sdk-1721-add-e2e-tests-to-normal-ci
branch
from
edfefd2
to
4ddd59a
Compare
LekoArts
force-pushed
the
lekoarts/sdk-1721-add-e2e-tests-to-normal-ci
branch
from
428a6d0
to
ab29eff
Compare
| * Allowing 10^5 combinations should be enough entropy for e2e purposes. | ||
| * @see https://clerk.com/docs/testing/e2e-testing#phone-numbers | ||
| */ | ||
| function fakerPhoneNumber() { |
| }, | ||
| waitForMounted: () => { | ||
| return page.waitForSelector('.cl-signIn-root', { state: 'attached' }); | ||
| waitForMounted: (selector = '.cl-signIn-root') => { |
| }, | ||
| "dependencies": { | ||
| "@clerk/elements": "file:../../../packages/elements", | ||
| "@clerk/nextjs": "file:../../../packages/nextjs", |
There was a problem hiding this comment.
☁️ I think we should drop the 2 lines above. We are not passing the deps added in presets in the package.json of the template in the other integration tests.
cc: @nikosdouvlis
There was a problem hiding this comment.
This way you can run the template locally just fine without needing to install them first. With .addDependency these entries are overwritten
| "@types/node": "^18.17.0", | ||
| "@types/react": "^18.3.1", | ||
| "@types/react-dom": "^18.3.0", | ||
| "next": "^14.2.3", |
There was a problem hiding this comment.
❓ shouldn't we use the 13.5.4 since it's the minimum supported version defined in elements peer dependencies?
There was a problem hiding this comment.
This can be handled with something like #3431
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <html lang='en'> | ||
| <ClerkProvider clerkJSVariant='headless'> |
There was a problem hiding this comment.
❓ Why headless? Is this the suggested approach when using the elements package?
There was a problem hiding this comment.
Right now the integration tests don't need the AIO components and eventually people should use headless, yes.
Description
This PR adds Playwright E2E tests for Clerk Elements. Included are:
next-sign-in.test.ts- Mirrors the existingsign-in-flow.test.tsfile to assert that one can successfully sign innext-sign-up.test.ts- Mirrors the existingsign-up-flow.test.tsfile to assert that one can successfully sign upotp.test.ts- Assert that<Input type="otp" />works correctlyvalidate-password.test.ts- Assert that<Input type="password" validatePassword />works correctlyMoreover, this PR also fixes this Faker.js deprecation message:
This issue explains how to use
replaceSymbolWithNumberbut that's also deprecated and its docs explain what to use instead.Fixes SDK-1721
Fixes SDK-1382
Checklist
npm testruns as expected.npm run buildruns as expected.Type of change