Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(test): Add Clerk Elements E2E #3394

Merged
merged 20 commits into from
May 24, 2024

Conversation

LekoArts
Copy link
Member

@LekoArts LekoArts commented May 16, 2024

Description

This PR adds Playwright E2E tests for Clerk Elements. Included are:

  • next-sign-in.test.ts - Mirrors the existing sign-in-flow.test.ts file to assert that one can successfully sign in
  • next-sign-up.test.ts - Mirrors the existing sign-up-flow.test.ts file to assert that one can successfully sign up
  • otp.test.ts - Assert that <Input type="otp" /> works correctly
  • validate-password.test.ts - Assert that <Input type="password" validatePassword /> works correctly

Moreover, this PR also fixes this Faker.js deprecation message:

[@faker-js/faker]: faker.phone.number(format) is deprecated since v8.1 and will be removed in v9.0. Please use faker.phone.number() instead.

This issue explains how to use replaceSymbolWithNumber but that's also deprecated and its docs explain what to use instead.

Fixes SDK-1721
Fixes SDK-1382

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other: E2E tests

Copy link

changeset-bot bot commented May 16, 2024

🦋 Changeset detected

Latest commit: ff3e23f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@clerk/elements Patch

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 LekoArts force-pushed the lekoarts/sdk-1721-add-e2e-tests-to-normal-ci branch from edfefd2 to 4ddd59a Compare May 16, 2024 13:51
@LekoArts LekoArts force-pushed the lekoarts/sdk-1721-add-e2e-tests-to-normal-ci branch from 428a6d0 to ab29eff Compare May 23, 2024 09:41
@LekoArts LekoArts marked this pull request as ready for review May 23, 2024 10:30
* Allowing 10^5 combinations should be enough entropy for e2e purposes.
* @see https://clerk.com/docs/testing/e2e-testing#phone-numbers
*/
function fakerPhoneNumber() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

},
waitForMounted: () => {
return page.waitForSelector('.cl-signIn-root', { state: 'attached' });
waitForMounted: (selector = '.cl-signIn-root') => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔥

},
"dependencies": {
"@clerk/elements": "file:../../../packages/elements",
"@clerk/nextjs": "file:../../../packages/nextjs",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

☁️ 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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ shouldn't we use the 13.5.4 since it's the minimum supported version defined in elements peer dependencies?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be handled with something like #3431

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='en'>
<ClerkProvider clerkJSVariant='headless'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❓ Why headless? Is this the suggested approach when using the elements package?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right now the integration tests don't need the AIO components and eventually people should use headless, yes.

@nikosdouvlis nikosdouvlis merged commit 980493f into main May 24, 2024
10 of 11 checks passed
@nikosdouvlis nikosdouvlis deleted the lekoarts/sdk-1721-add-e2e-tests-to-normal-ci branch May 24, 2024 12:21
Copy link
Member

@nikosdouvlis nikosdouvlis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants