From 980493fe56aacb13d600d0ffc77ed84c375ba30e Mon Sep 17 00:00:00 2001 From: Lennart Date: Fri, 24 May 2024 14:21:21 +0200 Subject: [PATCH] feat(test): Add Clerk Elements E2E (#3394) --- .changeset/healthy-turtles-compete.md | 5 + .github/workflows/ci.yml | 5 +- integration/models/applicationConfig.ts | 3 + integration/presets/elements.ts | 24 ++ integration/presets/index.ts | 2 + integration/presets/longRunningApps.ts | 2 + .../templates/elements-next/.eslintrc.js | 3 + .../templates/elements-next/.gitignore | 37 ++ integration/templates/elements-next/README.md | 34 ++ .../templates/elements-next/next.config.js | 8 + .../templates/elements-next/package.json | 30 ++ .../templates/elements-next/postcss.config.js | 6 + .../elements-next/src/app/favicon.ico | Bin 0 -> 25931 bytes .../elements-next/src/app/globals.css | 37 ++ .../elements-next/src/app/layout.tsx | 19 + .../elements-next/src/app/otp/page.tsx | 118 ++++++ .../templates/elements-next/src/app/page.tsx | 80 ++++ .../src/app/sign-in/[[...sign-in]]/page.tsx | 347 ++++++++++++++++++ .../src/app/sign-up/[[...sign-up]]/page.tsx | 152 ++++++++ .../src/app/validate-password/page.tsx | 94 +++++ .../templates/elements-next/src/middleware.ts | 6 + .../elements-next/tailwind.config.js | 18 + .../templates/elements-next/tsconfig.json | 28 ++ integration/templates/index.ts | 1 + integration/testUtils/commonPageObject.ts | 5 + integration/testUtils/signInPageObject.ts | 15 +- integration/testUtils/signUpPageObject.ts | 15 +- integration/testUtils/usersService.ts | 15 +- .../tests/elements/next-sign-in.test.ts | 183 +++++++++ .../tests/elements/next-sign-up.test.ts | 169 +++++++++ integration/tests/elements/otp.test.ts | 232 ++++++++++++ .../tests/elements/validate-password.test.ts | 69 ++++ integration/tests/sign-in-flow.test.ts | 4 +- package-lock.json | 142 +------ package.json | 7 +- .../examples/nextjs/e2e/example.spec.ts | 6 - .../elements/examples/nextjs/package.json | 2 - .../examples/nextjs/playwright.config.ts | 59 --- .../elements/src/react/common/form/index.tsx | 3 +- packages/testing/package.json | 2 +- turbo.json | 6 + 41 files changed, 1773 insertions(+), 220 deletions(-) create mode 100644 .changeset/healthy-turtles-compete.md create mode 100644 integration/presets/elements.ts create mode 100644 integration/templates/elements-next/.eslintrc.js create mode 100644 integration/templates/elements-next/.gitignore create mode 100644 integration/templates/elements-next/README.md create mode 100644 integration/templates/elements-next/next.config.js create mode 100644 integration/templates/elements-next/package.json create mode 100644 integration/templates/elements-next/postcss.config.js create mode 100644 integration/templates/elements-next/src/app/favicon.ico create mode 100644 integration/templates/elements-next/src/app/globals.css create mode 100644 integration/templates/elements-next/src/app/layout.tsx create mode 100644 integration/templates/elements-next/src/app/otp/page.tsx create mode 100644 integration/templates/elements-next/src/app/page.tsx create mode 100644 integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx create mode 100644 integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx create mode 100644 integration/templates/elements-next/src/app/validate-password/page.tsx create mode 100644 integration/templates/elements-next/src/middleware.ts create mode 100644 integration/templates/elements-next/tailwind.config.js create mode 100644 integration/templates/elements-next/tsconfig.json create mode 100644 integration/tests/elements/next-sign-in.test.ts create mode 100644 integration/tests/elements/next-sign-up.test.ts create mode 100644 integration/tests/elements/otp.test.ts create mode 100644 integration/tests/elements/validate-password.test.ts delete mode 100644 packages/elements/examples/nextjs/e2e/example.spec.ts delete mode 100644 packages/elements/examples/nextjs/playwright.config.ts 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 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 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 LrJugUA?W`A8`#=m literal 0 HcmV?d00001 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" } } }