diff --git a/.changeset/healthy-turtles-compete.md b/.changeset/healthy-turtles-compete.md new file mode 100644 index 0000000000..9654483c7a --- /dev/null +++ b/.changeset/healthy-turtles-compete.md @@ -0,0 +1,5 @@ +--- +'@clerk/elements': patch +--- + +Update the TypeScript type of `` to allow the `validatePassword` prop also on `type="text"` (in addition to `type="password"`) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 126e814d8a..f56e11a435 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -129,7 +129,7 @@ jobs: strategy: matrix: - test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows'] + test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements'] test-project: ['chrome'] steps: @@ -152,7 +152,7 @@ jobs: uses: ./.github/actions/verdaccio with: publish-cmd: | - if [ "$(npm config get registry)" = "https://registry.npmjs.org/" ]; then echo 'Error: Using default registry' && exit 1; else npx turbo build $TURBO_ARGS --filter=!elements --only && npx changeset publish --no-git-tag; fi + if [ "$(npm config get registry)" = "https://registry.npmjs.org/" ]; then echo 'Error: Using default registry' && exit 1; else npx turbo build $TURBO_ARGS --only && npx changeset publish --no-git-tag; fi - name: Install @clerk/backend in /integration working-directory: ./integration @@ -163,6 +163,7 @@ jobs: run: mkdir clerk-js && cd clerk-js && npm init -y && npm install @clerk/clerk-js - name: Run Integration Tests + id: integration-tests run: npx turbo test:integration:${{ matrix.test-name }} $TURBO_ARGS --only -- --project=${{ matrix.test-project }} env: E2E_APP_CLERK_JS_DIR: ${{runner.temp}} diff --git a/integration/models/applicationConfig.ts b/integration/models/applicationConfig.ts index 1691e520cf..87695cdf8e 100644 --- a/integration/models/applicationConfig.ts +++ b/integration/models/applicationConfig.ts @@ -54,6 +54,9 @@ export const applicationConfig = () => { scripts[name] = cmd; return self; }, + /** + * Adds a dependency to the template's `package.json` file. If the version is undefined, the dependency is not added. If the dependency already exists, the version is overwritten. + */ addDependency: (name: string, version: string | undefined) => { if (version) { dependencies.set(name, version); diff --git a/integration/presets/elements.ts b/integration/presets/elements.ts new file mode 100644 index 0000000000..b137759c13 --- /dev/null +++ b/integration/presets/elements.ts @@ -0,0 +1,24 @@ +import { constants } from '../constants'; +import { applicationConfig } from '../models/applicationConfig.js'; +import { templates } from '../templates/index.js'; + +const clerkNextjsLocal = `file:${process.cwd()}/packages/nextjs`; +const clerkElementsLocal = `file:${process.cwd()}/packages/elements`; + +const nextAppRouter = applicationConfig() + .setName('elements-next') + .useTemplate(templates['elements-next']) + .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`) + .addScript('setup', 'npm i') + .addScript('dev', 'npm run dev') + .addScript('build', 'npm run build') + .addScript('serve', 'npm run start') + .addDependency('next', constants.E2E_NEXTJS_VERSION) + .addDependency('react', constants.E2E_REACT_VERSION) + .addDependency('react-dom', constants.E2E_REACT_DOM_VERSION) + .addDependency('@clerk/nextjs', constants.E2E_CLERK_VERSION || clerkNextjsLocal) + .addDependency('@clerk/elements', constants.E2E_CLERK_VERSION || clerkElementsLocal); + +export const elements = { + nextAppRouter, +} as const; diff --git a/integration/presets/index.ts b/integration/presets/index.ts index 36e388c2c3..e26331ab5b 100644 --- a/integration/presets/index.ts +++ b/integration/presets/index.ts @@ -1,3 +1,4 @@ +import { elements } from './elements'; import { envs } from './envs'; import { express } from './express'; import { createLongRunningApps } from './longRunningApps'; @@ -12,4 +13,5 @@ export const appConfigs = { next, react, remix, + elements, } as const; diff --git a/integration/presets/longRunningApps.ts b/integration/presets/longRunningApps.ts index c262d006c6..3b9b2fcd86 100644 --- a/integration/presets/longRunningApps.ts +++ b/integration/presets/longRunningApps.ts @@ -1,5 +1,6 @@ import type { LongRunningApplication } from '../models/longRunningApplication'; import { longRunningApplication } from '../models/longRunningApplication'; +import { elements } from './elements'; import { envs } from './envs'; import { express } from './express'; import { next } from './next'; @@ -20,6 +21,7 @@ export const createLongRunningApps = () => { { id: 'next.appRouter.withEmailCodes', config: next.appRouter, env: envs.withEmailCodes }, { id: 'next.appRouter.withCustomRoles', config: next.appRouter, env: envs.withCustomRoles }, { id: 'quickstart.next.appRouter', config: next.appRouterQuickstart, env: envs.withEmailCodesQuickstart }, + { id: 'elements.next.appRouter', config: elements.nextAppRouter, env: envs.withEmailCodes }, ] as const; const apps = configs.map(longRunningApplication); diff --git a/integration/templates/elements-next/.eslintrc.js b/integration/templates/elements-next/.eslintrc.js new file mode 100644 index 0000000000..e351352491 --- /dev/null +++ b/integration/templates/elements-next/.eslintrc.js @@ -0,0 +1,3 @@ +module.exports = { + root: true, +}; diff --git a/integration/templates/elements-next/.gitignore b/integration/templates/elements-next/.gitignore new file mode 100644 index 0000000000..cdbd42c5c3 --- /dev/null +++ b/integration/templates/elements-next/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +package-lock.json diff --git a/integration/templates/elements-next/README.md b/integration/templates/elements-next/README.md new file mode 100644 index 0000000000..f4da3c4c1c --- /dev/null +++ b/integration/templates/elements-next/README.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/integration/templates/elements-next/next.config.js b/integration/templates/elements-next/next.config.js new file mode 100644 index 0000000000..954fac0d40 --- /dev/null +++ b/integration/templates/elements-next/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + eslint: { + ignoreDuringBuilds: true, + }, +}; + +module.exports = nextConfig; diff --git a/integration/templates/elements-next/package.json b/integration/templates/elements-next/package.json new file mode 100644 index 0000000000..3f1db1a03a --- /dev/null +++ b/integration/templates/elements-next/package.json @@ -0,0 +1,30 @@ +{ + "name": "elements-next", + "version": "0.1.0", + "private": true, + "scripts": { + "build": "next build", + "dev": "next dev", + "lint": "next lint", + "start": "next start" + }, + "dependencies": { + "@clerk/elements": "file:../../../packages/elements", + "@clerk/nextjs": "file:../../../packages/nextjs", + "@types/node": "^18.17.0", + "@types/react": "^18.3.1", + "@types/react-dom": "^18.3.0", + "next": "^14.2.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "typescript": "^5.4.5" + }, + "devDependencies": { + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3" + }, + "engines": { + "node": ">=18.17.0" + } +} diff --git a/integration/templates/elements-next/postcss.config.js b/integration/templates/elements-next/postcss.config.js new file mode 100644 index 0000000000..12a703d900 --- /dev/null +++ b/integration/templates/elements-next/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/integration/templates/elements-next/src/app/favicon.ico b/integration/templates/elements-next/src/app/favicon.ico new file mode 100644 index 0000000000..718d6fea48 Binary files /dev/null and b/integration/templates/elements-next/src/app/favicon.ico differ diff --git a/integration/templates/elements-next/src/app/globals.css b/integration/templates/elements-next/src/app/globals.css new file mode 100644 index 0000000000..b20b3536b4 --- /dev/null +++ b/integration/templates/elements-next/src/app/globals.css @@ -0,0 +1,37 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, + Ubuntu, roboto, noto, arial, sans-serif; +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 6rem; + min-height: 100vh; +} diff --git a/integration/templates/elements-next/src/app/layout.tsx b/integration/templates/elements-next/src/app/layout.tsx new file mode 100644 index 0000000000..9e5b6a7381 --- /dev/null +++ b/integration/templates/elements-next/src/app/layout.tsx @@ -0,0 +1,19 @@ +import './globals.css'; + +import { ClerkProvider } from '@clerk/nextjs'; +import type { Metadata } from 'next'; + +export const metadata: Metadata = { + title: 'Clerk Elements - Next.js E2E', + description: 'Clerk Elements - Next.js E2E', +}; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} diff --git a/integration/templates/elements-next/src/app/otp/page.tsx b/integration/templates/elements-next/src/app/otp/page.tsx new file mode 100644 index 0000000000..93a4c0afce --- /dev/null +++ b/integration/templates/elements-next/src/app/otp/page.tsx @@ -0,0 +1,118 @@ +'use client'; + +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +function clsx(...args: (string | undefined | Record)[]): string { + const classes: string[] = []; + + for (const arg of args) { + switch (typeof arg) { + case 'string': + classes.push(arg); + break; + case 'object': + for (const key in arg) { + if (arg[key]) { + classes.push(key); + } + } + break; + } + } + + return classes.join(' '); +} + +export default function OTP() { + return ( +
+ + +
+

OTP Playground

+
+ + Simple OTP Input + + + + Segmented OTP Input + { + return ( +
+ {value} + {status === 'cursor' && ( +
+
+
+ )} +
+ ); + }} + /> + + + Segmented OTP Input (with props) + { + return ( +
+ {value} + {status === 'cursor' && ( +
+
+
+ )} +
+ ); + }} + /> + + + +
+ ); +} diff --git a/integration/templates/elements-next/src/app/page.tsx b/integration/templates/elements-next/src/app/page.tsx new file mode 100644 index 0000000000..4fa8919f69 --- /dev/null +++ b/integration/templates/elements-next/src/app/page.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { SignedIn, SignedOut, SignOutButton } from '@clerk/nextjs'; +import Link from 'next/link'; + +function Card({ children, title }: { children: React.ReactNode; title: string }) { + return ( +
+

{title}

+ {children} +
+ ); +} + +export default function Home() { + return ( +
+

Clerk Elements: Next.js E2E

+

+ Kitchen sink template to test out Clerk Elements in Next.js App Router. +

+
+ + +

signed-out-state

+ + +

signed-in-state

+ + + +
    +
  • + + Sign-In + +
    • +
  • + + Sign-Up + +
    • +
  • + + OTP Playground + +
    • +
  • + + Password Validation + +
    • +
+ + + +

Not logged in.

+ + + + + + + +
+
+ ); +} diff --git a/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx b/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx new file mode 100644 index 0000000000..02bae0fd1e --- /dev/null +++ b/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx @@ -0,0 +1,347 @@ +'use client'; + +import * as React from 'react'; +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +// password, phone_code, email_code, email_link, reset_password_email_code, but the rendered strategies are: +// password, email_code, reset_password_email_code, phone_code + +function Button({ children, ...props }: { children: React.ReactNode }) { + return ( + + ); +} + +export default function SignInPage() { + const [usePhone, setUsePhone] = React.useState(false); + + return ( +
+
+ + +
+

Sign in to Clover

+
+ + +
+ + {usePhone ? 'Phone number' : 'Email or username'} + + +
+ + + + + + + + + +
+

Alternatively, sign in with these platforms

+
+ + + Login with Google + +
+
+ + +
+

Use another method

+
+ + + + + + + + + + + + +
+

Alternatively, sign in with these platforms

+
+ + + Login with Google + +
+
+

+ + Go back + +

+ + +
+

Forgot password?

+
+ + + + +
+

Alternatively, sign in with these platforms

+
+ + + Login with Google + +
+
+ + + +
+

Enter your password

+

+ Welcome back +

+
+ + +
+ Password + + Forgot password? + +
+ + + + + + + + +
+

Verify email code

+
+ + + Email code + + + + + + + + +
+

Verify email link

+
+ + + Email link + + + + + + + + +
+

Verify email code

+
+ + + Email code + + + + + + + + +
+

Verify phone code

+
+ + + Phone code + + + + + + + +
+ + Use another method + +
+ + +
+

Reset your password

+
+ + + New password + + + + + Confirm password + + + + + + + + +
+
+ ); +} diff --git a/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx b/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx new file mode 100644 index 0000000000..6ff8dd5e56 --- /dev/null +++ b/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx @@ -0,0 +1,152 @@ +'use client'; + +import * as Clerk from '@clerk/elements/common'; +import * as SignUp from '@clerk/elements/sign-up'; + +export default function SignUpPage() { + return ( +
+ + +
+

Create an account

+
+ +
+ + Email + + + + + Password + + + + + Phone number (optional) + + + + + Username (optional) + + + +
+ + Continue + + + + + +
+

Verify email code

+
+ + Email code + + + + + Continue + + + +
+

Verify phone code

+
+ + Phone code + + + + + Continue + + + + +
+

Continue registration

+
+ + + Username + + + + + Continue + + + +
+ ); +} diff --git a/integration/templates/elements-next/src/app/validate-password/page.tsx b/integration/templates/elements-next/src/app/validate-password/page.tsx new file mode 100644 index 0000000000..43d0aea622 --- /dev/null +++ b/integration/templates/elements-next/src/app/validate-password/page.tsx @@ -0,0 +1,94 @@ +'use client'; + +import * as React from 'react'; +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +export default function ValitePassword() { + const [hidden, setHidden] = React.useState(true); + + return ( +
+ + +
+

Password Validation Playground

+

+ Just to test out the{' '} + + password validation + {' '} + 🙃 +

+
+ +
+ Password + +
+ + + {({ state, codes, message }) => ( +
+

Field State Props

+ + + + + + + + + + + + + + + + + + + + + +
PropValue
State + {state} +
Codes + {codes?.join(', ')} +
Message + {message} +
+
+ )} + + + + +
+ ); +} diff --git a/integration/templates/elements-next/src/middleware.ts b/integration/templates/elements-next/src/middleware.ts new file mode 100644 index 0000000000..545508cedc --- /dev/null +++ b/integration/templates/elements-next/src/middleware.ts @@ -0,0 +1,6 @@ +import { clerkMiddleware } from '@clerk/nextjs/server'; +export default clerkMiddleware; + +export const config = { + matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'], +}; diff --git a/integration/templates/elements-next/tailwind.config.js b/integration/templates/elements-next/tailwind.config.js new file mode 100644 index 0000000000..5eaa317115 --- /dev/null +++ b/integration/templates/elements-next/tailwind.config.js @@ -0,0 +1,18 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], + theme: { + extend: { + keyframes: { + 'caret-blink': { + '0%,70%,100%': { opacity: '1' }, + '20%,50%': { opacity: '0' }, + }, + }, + animation: { + 'caret-blink': 'caret-blink 1.25s ease-out infinite', + }, + }, + }, + plugins: [], +}; diff --git a/integration/templates/elements-next/tsconfig.json b/integration/templates/elements-next/tsconfig.json new file mode 100644 index 0000000000..eb0b41d94d --- /dev/null +++ b/integration/templates/elements-next/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/integration/templates/index.ts b/integration/templates/index.ts index ee51301acb..6f40209993 100644 --- a/integration/templates/index.ts +++ b/integration/templates/index.ts @@ -10,6 +10,7 @@ export const templates = { 'react-vite': resolve(__dirname, './react-vite'), 'express-vite': resolve(__dirname, './express-vite'), 'remix-node': resolve(__dirname, './remix-node'), + 'elements-next': resolve(__dirname, './elements-next'), } as const; if (new Set([...Object.values(templates)]).size !== Object.values(templates).length) { diff --git a/integration/testUtils/commonPageObject.ts b/integration/testUtils/commonPageObject.ts index 352072eb0b..3243a35748 100644 --- a/integration/testUtils/commonPageObject.ts +++ b/integration/testUtils/commonPageObject.ts @@ -18,6 +18,11 @@ export const common = ({ page }: TestArgs) => { enterTestOtpCode: async () => { return self.enterOtpCode('424242'); }, + // It's recommended to use .fill instead of .type + // @see https://playwright.dev/docs/api/class-keyboard#keyboard-type + fillTestOtpCode: async (name: string) => { + return page.getByRole('textbox', { name: name }).fill('424242'); + }, getIdentifierInput: () => { return page.locator('input[name=identifier]'); }, diff --git a/integration/testUtils/signInPageObject.ts b/integration/testUtils/signInPageObject.ts index c3417d8ac2..98e731a460 100644 --- a/integration/testUtils/signInPageObject.ts +++ b/integration/testUtils/signInPageObject.ts @@ -11,12 +11,17 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => { const { page } = testArgs; const self = { ...common(testArgs), - goTo: async (opts?: { searchParams: URLSearchParams }) => { - await page.goToRelative('/sign-in', opts); - return self.waitForMounted(); + goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { + await page.goToRelative('/sign-in', { searchParams: opts?.searchParams }); + + if (typeof opts?.headlessSelector !== 'undefined') { + return self.waitForMounted(opts.headlessSelector); + } else { + return self.waitForMounted(); + } }, - waitForMounted: () => { - return page.waitForSelector('.cl-signIn-root', { state: 'attached' }); + waitForMounted: (selector = '.cl-signIn-root') => { + return page.waitForSelector(selector, { state: 'attached' }); }, setIdentifier: (val: string) => { return self.getIdentifierInput().fill(val); diff --git a/integration/testUtils/signUpPageObject.ts b/integration/testUtils/signUpPageObject.ts index 65440e87bc..cd94d94076 100644 --- a/integration/testUtils/signUpPageObject.ts +++ b/integration/testUtils/signUpPageObject.ts @@ -15,12 +15,17 @@ export const createSignUpComponentPageObject = (testArgs: TestArgs) => { const self = { ...common(testArgs), - goTo: async (opts?: { searchParams: URLSearchParams }) => { - await page.goToRelative('/sign-up', opts); - return self.waitForMounted(); + goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { + await page.goToRelative('/sign-up', { searchParams: opts?.searchParams }); + + if (typeof opts?.headlessSelector !== 'undefined') { + return self.waitForMounted(opts.headlessSelector); + } else { + return self.waitForMounted(); + } }, - waitForMounted: () => { - return page.waitForSelector('.cl-signUp-root', { state: 'attached' }); + waitForMounted: (selector = '.cl-signUp-root') => { + return page.waitForSelector(selector, { state: 'attached' }); }, signUpWithOauth: (provider: string) => { return page.getByRole('button', { name: new RegExp(`continue with ${provider}`, 'gi') }); diff --git a/integration/testUtils/usersService.ts b/integration/testUtils/usersService.ts index b290f3354b..025e8ffead 100644 --- a/integration/testUtils/usersService.ts +++ b/integration/testUtils/usersService.ts @@ -57,6 +57,15 @@ export type UserService = { createFakeOrganization: (userId: string) => Promise; }; +/** + * This generates a random fictional number that can be verified using the 424242 code. + * Allowing 10^5 combinations should be enough entropy for e2e purposes. + * @see https://clerk.com/docs/testing/e2e-testing#phone-numbers + */ +function fakerPhoneNumber() { + return `+1###55501##`.replace(/#+/g, m => faker.string.numeric(m.length)); +} + export const createUserService = (clerkClient: ClerkClient) => { const self: UserService = { createFakeUser: (options?: FakeUserOptions) => { @@ -77,11 +86,7 @@ export const createUserService = (clerkClient: ClerkClient) => { email, username: withUsername ? `${randomHash}_clerk_cookie` : undefined, password: withPassword ? `${email}${randomHash}` : undefined, - // this generates a random fictional number that can be verified - // using the 424242 code. Allowing 10^5 combinations should be enough - // entropy for e2e purposes - // https://clerk.com/docs/testing/e2e-testing#phone-numbers - phoneNumber: withPhoneNumber ? faker.phone.number('+1###55501##') : undefined, + phoneNumber: withPhoneNumber ? fakerPhoneNumber() : undefined, deleteIfExists: () => self.deleteIfExists({ email }), }; }, diff --git a/integration/tests/elements/next-sign-in.test.ts b/integration/tests/elements/next-sign-in.test.ts new file mode 100644 index 0000000000..c23f8f0fc0 --- /dev/null +++ b/integration/tests/elements/next-sign-in.test.ts @@ -0,0 +1,183 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import type { FakeUser } from '../../testUtils'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js Sign-In Flow @elements', ({ app }) => { + test.describe.configure({ mode: 'serial' }); + + let fakeUser: FakeUser; + + test.beforeAll(async () => { + const u = createTestUtils({ app }); + fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + await u.services.users.createBapiUser(fakeUser); + }); + + test.afterAll(async () => { + await fakeUser.deleteIfExists(); + await app.teardown(); + }); + + test.afterEach(async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.signOut(); + await u.page.context().clearCookies(); + }); + + test('sign in with email and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('sign in with email and instant password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password }); + + await u.po.expect.toBeSignedIn(); + }); + + test('sign in with email code', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + + await u.page.getByRole('button', { name: /use another method/i }).click(); + await u.po.signIn.getAltMethodsEmailCodeButton().click(); + await u.po.signIn.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signIn.continue(); + + await u.page.waitForAppUrl('/'); + await u.po.expect.toBeSignedIn(); + }); + + test('sign in with phone number and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.page.getByRole('button', { name: /^use phone/i }).click(); + await u.po.signIn.getIdentifierInput().fill(fakeUser.phoneNumber); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('sign in only with phone number', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUserWithoutPassword = u.services.users.createFakeUser({ + fictionalEmail: true, + withPassword: false, + withPhoneNumber: true, + }); + await u.services.users.createBapiUser(fakeUserWithoutPassword); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + await u.page.getByRole('button', { name: /^use phone/i }).click(); + await u.po.signIn.getIdentifierInput().fill(fakeUserWithoutPassword.phoneNumber); + await u.po.signIn.continue(); + await u.po.signIn.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUserWithoutPassword.deleteIfExists(); + }); + + test('sign in with username and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.getIdentifierInput().fill(fakeUser.username); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('can reset password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUserWithPasword = u.services.users.createFakeUser({ + fictionalEmail: true, + withPassword: true, + }); + await u.services.users.createBapiUser(fakeUserWithPasword); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.getIdentifierInput().fill(fakeUserWithPasword.email); + await u.po.signIn.continue(); + await u.page.getByRole('button', { name: /^forgot password/i }).click(); + await u.po.signIn.getResetPassword().click(); + await u.po.signIn.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signIn.continue(); + + await u.po.signIn.setPassword(`${fakeUserWithPasword.password}_reset`); + await u.po.signIn.setPasswordConfirmation(`${fakeUserWithPasword.password}_reset`); + await u.po.signIn.getResetPassword().click(); + await u.po.expect.toBeSignedIn(); + + await fakeUserWithPasword.deleteIfExists(); + }); + + test('cannot sign in with wrong password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + await u.po.signIn.getIdentifierInput().fill(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword('wrong-password'); + await u.po.signIn.continue(); + await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible(); + + await u.po.expect.toBeSignedOut(); + }); + + test('cannot sign in with wrong password but can sign in with email', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + await u.po.signIn.getIdentifierInput().fill(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword('wrong-password'); + await u.po.signIn.continue(); + + await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible(); + + await u.page.getByRole('button', { name: /use another method/i }).click(); + await u.po.signIn.getAltMethodsEmailCodeButton().click(); + await u.po.signIn.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); +}); diff --git a/integration/tests/elements/next-sign-up.test.ts b/integration/tests/elements/next-sign-up.test.ts new file mode 100644 index 0000000000..652c179af7 --- /dev/null +++ b/integration/tests/elements/next-sign-up.test.ts @@ -0,0 +1,169 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js Sign-Up Flow @elements', ({ app }) => { + test.describe.configure({ mode: 'serial' }); + + test.afterAll(async () => { + await app.teardown(); + }); + + test('sign up with email and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUpWithEmailAndPassword({ + email: fakeUser.email, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.page.waitForAppUrl('/'); + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); + + test("can't sign up with weak password", async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUpWithEmailAndPassword({ + email: fakeUser.email, + password: '12345', + }); + + // Check if password error is visible + await expect(u.page.getByText(/Passwords must be \d+ characters or more/i)).toBeVisible(); + + await u.po.expect.toBeSignedOut(); + + await fakeUser.deleteIfExists(); + }); + + test('can sign up with phone number', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUp({ + email: fakeUser.email, + phoneNumber: fakeUser.phoneNumber, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + await page.waitForTimeout(2000); + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.po.expect.toBeSignedIn(); + await fakeUser.deleteIfExists(); + }); + + test('sign up with first name, last name, email, phone and password', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUp({ + username: fakeUser.username, + email: fakeUser.email, + phoneNumber: fakeUser.phoneNumber, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); + + test('sign up, sign out and sign in again', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + const fakeUser = u.services.users.createFakeUser({ + fictionalEmail: true, + withPhoneNumber: true, + withUsername: true, + }); + + await u.po.signUp.goTo({ headlessSelector: '[data-test-id="sign-up-step-start"]' }); + + await u.po.signUp.signUp({ + username: fakeUser.username, + email: fakeUser.email, + phoneNumber: fakeUser.phoneNumber, + password: fakeUser.password, + }); + + await u.po.signUp.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + await u.po.signUp.fillTestOtpCode('Enter email verification code'); + await page.waitForTimeout(2000); + // TODO: In original test the input has autoSubmit and this step is not needed. Not used right now because it didn't work. + await u.po.signUp.continue(); + + await u.po.expect.toBeSignedIn(); + + await u.page.evaluate(async () => { + await window.Clerk.signOut(); + }); + + await u.po.expect.toBeSignedOut(); + + await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + await u.page.waitForAppUrl('/sign-in/continue'); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); +}); diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts new file mode 100644 index 0000000000..47b6da387f --- /dev/null +++ b/integration/tests/elements/otp.test.ts @@ -0,0 +1,232 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elements', ({ app }) => { + test.describe.configure({ mode: 'parallel' }); + + test.afterAll(async () => { + await app.teardown(); + }); + + test.beforeEach(async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.goToRelative('/otp'); + }); + + const otpTypes = { + simpleOtp: 'simple-otp', + segmentedOtp: 'segmented-otp', + segmentedOtpWithProps: 'segmented-otp-with-props', + } as const; + + for (const otpType of [otpTypes.simpleOtp, otpTypes.segmentedOtp]) { + test.describe(`Type: ${otpType}`, () => { + test(`should receive correct standard props`, async ({ page }) => { + const otp = page.getByTestId(otpType); + + await expect(otp).toHaveAttribute('autocomplete', 'one-time-code'); + await expect(otp).toHaveAttribute('spellcheck', 'false'); + await expect(otp).toHaveAttribute('inputmode', 'numeric'); + await expect(otp).toHaveAttribute('maxlength', '6'); + await expect(otp).toHaveAttribute('minlength', '6'); + await expect(otp).toHaveAttribute('pattern', '[0-9]{6}'); + await expect(otp).toHaveAttribute('type', 'text'); + }); + + test(`should change the input value`, async ({ page }) => { + const otp = page.getByTestId(otpType); + + // Check that the input starts with an empty value + await expect(otp).toHaveValue(''); + + await otp.pressSequentially('1'); + await expect(otp).toHaveValue('1'); + + await otp.pressSequentially('23456'); + await expect(otp).toHaveValue('123456'); + }); + }); + } + + test.describe(`Type: ${otpTypes.simpleOtp}`, () => { + test(`should prevent typing greater than max length`, async ({ page }) => { + const otp = page.getByTestId(otpTypes.simpleOtp); + + await otp.pressSequentially('1234567'); + await expect(otp).toHaveValue('123456'); + }); + }); + + test.describe(`Type: ${otpTypes.segmentedOtp}`, () => { + test('renders hidden segments', async ({ page }) => { + const otpSegmentsWrapper = page.locator('.segmented-otp-wrapper'); + + await expect(otpSegmentsWrapper).toHaveAttribute('aria-hidden', 'true'); + // Check that 6 segments are rendered + await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(6); + }); + + test(`should prevent typing greater than max length`, async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('1234567'); + // With the segmented OTP we expect the last char to be replaced by any new input + await expect(otp).toHaveValue('123457'); + }); + + test(`should put values into segments`, async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + // Check initial state before any interaction + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveText(''); + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveAttribute('data-status', 'none'); + } + + await otp.pressSequentially('123456'); + + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveText(`${i + 1}`); + } + }); + + test('should set hover status on segments', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.hover(); + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).toHaveAttribute('data-status', 'hovered'); + } + }); + + test('should not set hover status on segments if they are focused', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.hover(); + for (let i = 0; i < 6; i++) { + await expect(page.getByTestId(`segmented-otp-${i}`)).not.toHaveAttribute('data-status', 'hovered'); + } + }); + + test('should set cursor and selected status on segments', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('12'); + + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'none'); + await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'none'); + await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'cursor'); + + await otp.press('ArrowLeft'); + + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'none'); + await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'selected'); + await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'none'); + + await otp.press('ArrowLeft'); + + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'selected'); + await expect(page.getByTestId('segmented-otp-1')).toHaveAttribute('data-status', 'none'); + }); + + test('should replace selected segment with new input', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('12'); + + await otp.press('ArrowLeft'); + await otp.pressSequentially('1'); + await expect(otp).toHaveValue('11'); + }); + + test('should replace multi-selected segments with new input', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('12345'); + // Mark two segments to the left of the cursor + await otp.press('Shift+ArrowLeft'); + await otp.press('Shift+ArrowLeft'); + await expect(page.getByTestId('segmented-otp-3')).toHaveAttribute('data-status', 'selected'); + await expect(page.getByTestId('segmented-otp-4')).toHaveAttribute('data-status', 'selected'); + await otp.pressSequentially('1'); + + await expect(otp).toHaveValue('1231'); + + // Mark all segments + await otp.press('ControlOrMeta+a'); + await otp.pressSequentially('1'); + + await expect(otp).toHaveValue('1'); + }); + + test('should backspace char', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.press('Backspace'); + + await expect(otp).toHaveValue('12'); + await expect(page.getByTestId('segmented-otp-2')).toHaveAttribute('data-status', 'cursor'); + }); + + test('should backspace all chars with modifier', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.press('ControlOrMeta+Backspace'); + + await expect(otp).toHaveValue(''); + await expect(page.getByTestId('segmented-otp-0')).toHaveAttribute('data-status', 'cursor'); + }); + + test('should backspace selected char', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('123'); + await otp.press('ArrowLeft'); + await otp.press('ArrowLeft'); + await otp.press('Backspace'); + + await expect(otp).toHaveValue('13'); + }); + + test('should forward-delete char when pressing delete', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtp); + + await otp.pressSequentially('1234'); + + await otp.press('ArrowLeft'); + await otp.press('ArrowLeft'); + await otp.press('Delete'); + + await expect(otp).toHaveValue('124'); + await otp.press('ArrowRight'); + await otp.press('Delete'); + await expect(otp).toHaveValue('12'); + }); + }); + + test.describe('Custom props', () => { + test('length', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtpWithProps); + const otpSegmentsWrapper = page.locator('.segmented-otp-with-props-wrapper'); + + await expect(otp).toHaveAttribute('maxlength', '4'); + await expect(otp).toHaveAttribute('minlength', '4'); + await expect(otp).toHaveAttribute('pattern', '[0-9]{4}'); + + // Check that only 4 segments are rendered + await expect(otpSegmentsWrapper.locator('> div')).toHaveCount(4); + }); + + test('passwordManagerOffset', async ({ page }) => { + const otp = page.getByTestId(otpTypes.segmentedOtpWithProps); + + // The computed styles are different on CI/local etc. so it's not use to check the exact value + await expect(otp).toHaveCSS('clip-path', /inset\(0px \d+\.\d+px 0px 0px\)/i); + }); + }); +}); diff --git a/integration/tests/elements/validate-password.test.ts b/integration/tests/elements/validate-password.test.ts new file mode 100644 index 0000000000..35f9f11e05 --- /dev/null +++ b/integration/tests/elements/validate-password.test.ts @@ -0,0 +1,69 @@ +import { expect, test } from '@playwright/test'; + +import { appConfigs } from '../../presets'; +import { createTestUtils, testAgainstRunningApps } from '../../testUtils'; + +testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Password Validation @elements', ({ app }) => { + test.describe.configure({ mode: 'parallel' }); + + test.afterAll(async () => { + await app.teardown(); + }); + + test.beforeEach(async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.page.goToRelative('/validate-password'); + }); + + test('should have initial "idle" state', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await expect(u.po.signIn.getPasswordInput()).toHaveAttribute('data-state', 'idle'); + await expect(page.getByTestId('state')).toHaveText('idle'); + }); + + test('should change state to "info" on focus', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.getPasswordInput().focus(); + + await expect(page.getByTestId('state')).toHaveText('info'); + }); + + test('should return codes and message with non-idle state', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.getPasswordInput().focus(); + + await expect(page.getByTestId('codes')).toHaveText('min_length'); + await expect(page.getByTestId('message')).toHaveText('Your password must contain 8 or more characters.'); + }); + + test('should return error when requirements are not met', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.setPassword('12345678'); + + await expect(page.getByTestId('state')).toHaveText('error'); + await expect(page.getByTestId('codes')).toHaveText('require_special_char'); + await expect(page.getByTestId('message')).toHaveText('Your password must contain a special character.'); + }); + + test('should return success when requirements are met', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.setPassword('12345678@'); + + await expect(page.getByTestId('state')).toHaveText('success'); + await expect(page.getByTestId('codes')).toHaveText(''); + await expect(page.getByTestId('message')).toHaveText('Your password meets all the necessary requirements.'); + }); + + test('should have working flow', async ({ page, context }) => { + const u = createTestUtils({ app, page, context }); + + await expect(page.getByTestId('state')).toHaveText('idle'); + await u.po.signIn.setPassword('123'); + await expect(page.getByTestId('state')).toHaveText('info'); + await u.po.signIn.setPassword('12345678'); + await expect(page.getByTestId('state')).toHaveText('error'); + await u.po.signIn.setPassword('12345678@'); + await expect(page.getByTestId('state')).toHaveText('success'); + }); +}); diff --git a/integration/tests/sign-in-flow.test.ts b/integration/tests/sign-in-flow.test.ts index 8e3785c689..ddd2037bd7 100644 --- a/integration/tests/sign-in-flow.test.ts +++ b/integration/tests/sign-in-flow.test.ts @@ -117,7 +117,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f await fakeUserWithPasword.deleteIfExists(); }); - test('cant sign in with wrong password', async ({ page, context }) => { + test('cannot sign in with wrong password', async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.po.signIn.goTo(); @@ -130,7 +130,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('sign in f await u.po.expect.toBeSignedOut(); }); - test('cant sign in with wrong password but can sign in with email', async ({ page, context }) => { + test('cannot sign in with wrong password but can sign in with email', async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.po.signIn.goTo(); diff --git a/package-lock.json b/package-lock.json index 8416d9e69c..d8f35334ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,7 @@ "@emotion/jest": "^11.11.0", "@faker-js/faker": "^8.1.0", "@octokit/rest": "^20.0.2", - "@playwright/test": "^1.39.0", + "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.19.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", @@ -9434,11 +9434,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.40.1", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", + "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "playwright": "1.40.1" + "playwright": "1.44.0" }, "bin": { "playwright": "cli.js" @@ -19938,7 +19939,6 @@ "version": "15.4.5", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@expo/config": "~8.5.0" }, @@ -30974,11 +30974,12 @@ "license": "MIT" }, "node_modules/playwright": { - "version": "1.40.1", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", + "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", "dev": true, - "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.40.1" + "playwright-core": "1.44.0" }, "bin": { "playwright": "cli.js" @@ -30991,9 +30992,10 @@ } }, "node_modules/playwright-core": { - "version": "1.40.1", + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", + "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", "dev": true, - "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" }, @@ -39659,23 +39661,6 @@ } } }, - "packages/elements/node_modules/@playwright/test": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz", - "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "playwright": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/elements/node_modules/@statelyai/inspect": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/@statelyai/inspect/-/inspect-0.3.1.tgz", @@ -39771,40 +39756,6 @@ } } }, - "packages/elements/node_modules/playwright": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz", - "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==", - "dev": true, - "optional": true, - "peer": true, - "dependencies": { - "playwright-core": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - }, - "optionalDependencies": { - "fsevents": "2.3.2" - } - }, - "packages/elements/node_modules/playwright-core": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz", - "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "playwright-core": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/elements/node_modules/tslib": { "version": "2.4.1", "dev": true, @@ -40138,17 +40089,6 @@ "expo": "*" } }, - "packages/expo/node_modules/expo-auth-session/node_modules/expo-constants": { - "version": "15.4.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@expo/config": "~8.5.0" - }, - "peerDependencies": { - "expo": "*" - } - }, "packages/expo/node_modules/expo-crypto": { "version": "12.8.1", "dev": true, @@ -40169,17 +40109,6 @@ "invariant": "^2.2.4" } }, - "packages/expo/node_modules/expo-linking/node_modules/expo-constants": { - "version": "15.4.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@expo/config": "~8.5.0" - }, - "peerDependencies": { - "expo": "*" - } - }, "packages/expo/node_modules/tslib": { "version": "2.4.1", "license": "0BSD" @@ -40665,7 +40594,7 @@ }, "devDependencies": { "@clerk/eslint-config-custom": "*", - "@playwright/test": "^1.43.1", + "@playwright/test": "^1.44.0", "@types/node": "^18.17.0", "cypress": "^13.9.0", "tsup": "*", @@ -40687,21 +40616,6 @@ } } }, - "packages/testing/node_modules/@playwright/test": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz", - "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==", - "dev": true, - "dependencies": { - "playwright": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/testing/node_modules/dotenv": { "version": "16.4.5", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", @@ -40713,36 +40627,6 @@ "url": "https://dotenvx.com" } }, - "packages/testing/node_modules/playwright": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz", - "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==", - "dev": true, - "dependencies": { - "playwright-core": "1.43.1" - }, - "bin": { - "playwright": "cli.js" - }, - "engines": { - "node": ">=16" - }, - "optionalDependencies": { - "fsevents": "2.3.2" - } - }, - "packages/testing/node_modules/playwright-core": { - "version": "1.43.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz", - "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==", - "dev": true, - "bin": { - "playwright-core": "cli.js" - }, - "engines": { - "node": ">=16" - } - }, "packages/themes": { "name": "@clerk/themes", "version": "2.1.7", diff --git a/package.json b/package.json index e026a4e9db..d2901305a9 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ ] }, "scripts": { - "build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%} --filter=!elements", + "build": "FORCE_COLOR=1 turbo build --concurrency=${TURBO_CONCURRENCY:-80%}", "bundlewatch": "turbo bundlewatch", "changeset": "changeset", "changeset:empty": "npm run changeset -- --empty", @@ -28,12 +28,13 @@ "release:canary": "changeset publish --tag canary --no-git-tag", "release:snapshot": "changeset publish --tag snapshot --no-git-tag", "release:verdaccio": "if [ \"$(npm config get registry)\" = \"https://registry.npmjs.org/\" ]; then echo 'Error: Using default registry' && exit 1; else TURBO_CONCURRENCY=1 npm run build && changeset publish --no-git-tag; fi", - "test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%} --filter=!elements", + "test": "FORCE_COLOR=1 turbo test --concurrency=${TURBO_CONCURRENCY:-80%}", "test:cache:clear": "FORCE_COLOR=1 turbo test:cache:clear --continue --concurrency=${TURBO_CONCURRENCY:-80%}", "test:integration:ap-flows": "npm run test:integration:base -- --grep @ap-flows", "test:integration:base": "DEBUG=1 npx playwright test --config integration/playwright.config.ts", "test:integration:cleanup": "DEBUG=1 npx playwright test --config integration/playwright.cleanup.config.ts", "test:integration:deployment:nextjs": "DEBUG=1 npx playwright test --config integration/playwright.deployments.config.ts", + "test:integration:elements": "E2E_APP_ID=elements.* npm run test:integration:base -- --grep @elements", "test:integration:express": "E2E_APP_ID=express.* npm run test:integration:base -- --grep @express", "test:integration:generic": "E2E_APP_ID=react.vite.* npm run test:integration:base -- --grep @generic", "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* npm run test:integration:base -- --grep @nextjs", @@ -56,7 +57,7 @@ "@emotion/jest": "^11.11.0", "@faker-js/faker": "^8.1.0", "@octokit/rest": "^20.0.2", - "@playwright/test": "^1.39.0", + "@playwright/test": "^1.44.0", "@testing-library/dom": "^8.19.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", diff --git a/packages/elements/examples/nextjs/e2e/example.spec.ts b/packages/elements/examples/nextjs/e2e/example.spec.ts deleted file mode 100644 index edda257802..0000000000 --- a/packages/elements/examples/nextjs/e2e/example.spec.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('has component from @clerk/elements', async ({ page }) => { - await page.goto('/'); - await expect(page.getByText('Hello World!')).toBeVisible(); -}); diff --git a/packages/elements/examples/nextjs/package.json b/packages/elements/examples/nextjs/package.json index 6426a827bd..f8ea924bdf 100644 --- a/packages/elements/examples/nextjs/package.json +++ b/packages/elements/examples/nextjs/package.json @@ -6,7 +6,6 @@ "build": "next build", "dev": "next dev", "dev:debug": "NEXT_PUBLIC_CLERK_ELEMENTS_DEBUG=true next dev", - "e2e": "playwright test", "lint": "next lint", "start": "next start" }, @@ -22,7 +21,6 @@ "react-dom": "^18" }, "devDependencies": { - "@playwright/test": "^1.43", "@types/node": "^18", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/packages/elements/examples/nextjs/playwright.config.ts b/packages/elements/examples/nextjs/playwright.config.ts deleted file mode 100644 index 268caf4280..0000000000 --- a/packages/elements/examples/nextjs/playwright.config.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { defineConfig, devices } from '@playwright/test'; -import path from 'path'; - -// eslint-disable-next-line turbo/no-undeclared-env-vars -const PORT = process.env.PORT || 3000; -const baseURL = `http://localhost:${PORT}`; - -// Reference: https://playwright.dev/docs/test-configuration -export default defineConfig({ - timeout: 30 * 1000, - testDir: path.join(__dirname, 'e2e'), - retries: 2, - outputDir: 'test-results/', - webServer: { - command: 'npm run dev', - url: baseURL, - timeout: 120 * 1000, - reuseExistingServer: !process.env.CI, // eslint-disable-line turbo/no-undeclared-env-vars - }, - use: { - baseURL, - trace: 'retry-with-trace', - - // https://playwright.dev/docs/api/class-browser#browser-new-context - // contextOptions: { - // ignoreHTTPSErrors: true, - // }, - }, - projects: [ - { - name: 'Desktop Chrome', - use: { - ...devices['Desktop Chrome'], - }, - }, - { - name: 'Desktop Firefox', - use: { - ...devices['Desktop Firefox'], - }, - }, - { - name: 'Desktop Safari', - use: { - ...devices['Desktop Safari'], - }, - }, - { - name: 'Mobile Chrome', - use: { - ...devices['Pixel 5'], - }, - }, - { - name: 'Mobile Safari', - use: devices['iPhone 12'], - }, - ], -}); diff --git a/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx index 7aae2cb166..8e748c7c5f 100644 --- a/packages/elements/src/react/common/form/index.tsx +++ b/packages/elements/src/react/common/form/index.tsx @@ -494,7 +494,8 @@ type FormInputProps = | RadixFormControlProps | ({ type: 'otp'; render: OTPInputProps['render'] } & Omit) | ({ type: 'otp'; render?: undefined } & OTPInputProps) - | ({ type: 'password' } & PasswordInputProps); + // Usecase: Toggle the visibility of the password input, therefore 'password' and 'text' are allowed + | ({ type: 'password' | 'text' } & PasswordInputProps); /** * Handles rendering of `` elements within Clerk's flows. Supports special `type` prop values to render input types that are unique to authentication and user management flows. Additional props will be passed through to the `` element. diff --git a/packages/testing/package.json b/packages/testing/package.json index a1e0f0877f..99803c71dd 100644 --- a/packages/testing/package.json +++ b/packages/testing/package.json @@ -68,7 +68,7 @@ }, "devDependencies": { "@clerk/eslint-config-custom": "*", - "@playwright/test": "^1.43.1", + "@playwright/test": "^1.44.0", "@types/node": "^18.17.0", "cypress": "^13.9.0", "tsup": "*", diff --git a/turbo.json b/turbo.json index bb45b8b0b1..227523ef09 100644 --- a/turbo.json +++ b/turbo.json @@ -165,6 +165,12 @@ "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"], "inputs": ["integration/**"], "outputMode": "new-only" + }, + "//#test:integration:elements": { + "dependsOn": ["^@clerk/nextjs#build", "^@clerk/elements#build"], + "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"], + "inputs": ["integration/**"], + "outputMode": "new-only" } } }