From 66a39c80ee914b32c16593e6a93d8182cd83d835 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 7 May 2024 11:33:16 +0200 Subject: [PATCH 01/16] chore(repo): Update playwright version --- package-lock.json | 23 +++++++++++-------- package.json | 2 +- .../elements/examples/nextjs/package.json | 2 -- packages/testing/package.json | 2 +- 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index ad5089108c..f4a38a3591 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", @@ -9176,11 +9176,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" @@ -30661,11 +30662,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" @@ -30678,9 +30680,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" }, @@ -40309,7 +40312,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/package.json b/package.json index 24a0ff7dc3..97e1301c9a 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,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/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/testing/package.json b/packages/testing/package.json index c54b321c02..dc4e868b2a 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": "*", From 89a9672becc579563464fc9a06fe8153ad99faec Mon Sep 17 00:00:00 2001 From: LekoArts Date: Tue, 7 May 2024 11:33:34 +0200 Subject: [PATCH 02/16] chore(repo): Add initial Elements test setup --- .github/workflows/ci.yml | 2 +- integration/models/applicationConfig.ts | 3 + integration/presets/elements.ts | 22 +++ 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 | 25 ++++ .../templates/elements-next/public/next.svg | 1 + .../templates/elements-next/public/vercel.svg | 1 + .../elements-next/src/app/favicon.ico | Bin 0 -> 25931 bytes .../elements-next/src/app/globals.css | 128 ++++++++++++++++++ .../elements-next/src/app/layout.tsx | 19 +++ .../templates/elements-next/src/app/page.tsx | 53 ++++++++ .../src/app/sign-in/[[...sign-in]]/page.tsx | 20 +++ .../src/app/sign-up/[[...sign-up]]/page.tsx | 20 +++ .../templates/elements-next/src/middleware.ts | 6 + .../templates/elements-next/tsconfig.json | 28 ++++ integration/templates/index.ts | 1 + .../elements/elements-next-sign-in.test.ts | 42 ++++++ package.json | 1 + .../examples/nextjs/e2e/example.spec.ts | 6 - .../examples/nextjs/playwright.config.ts | 59 -------- 25 files changed, 457 insertions(+), 66 deletions(-) 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/public/next.svg create mode 100644 integration/templates/elements-next/public/vercel.svg 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/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/middleware.ts create mode 100644 integration/templates/elements-next/tsconfig.json create mode 100644 integration/tests/elements/elements-next-sign-in.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/.github/workflows/ci.yml b/.github/workflows/ci.yml index 4aa97bae90..7aed40c9a9 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: 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..9059714d7f --- /dev/null +++ b/integration/presets/elements.ts @@ -0,0 +1,22 @@ +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('@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..f4c8e3e580 --- /dev/null +++ b/integration/templates/elements-next/package.json @@ -0,0 +1,25 @@ +{ + "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" + }, + "engines": { + "node": ">=18.17.0" + } +} diff --git a/integration/templates/elements-next/public/next.svg b/integration/templates/elements-next/public/next.svg new file mode 100644 index 0000000000..5174b28c56 --- /dev/null +++ b/integration/templates/elements-next/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/integration/templates/elements-next/public/vercel.svg b/integration/templates/elements-next/public/vercel.svg new file mode 100644 index 0000000000..d2f8422273 --- /dev/null +++ b/integration/templates/elements-next/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file 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..a404c0e2e3 --- /dev/null +++ b/integration/templates/elements-next/src/app/globals.css @@ -0,0 +1,128 @@ +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3)); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } +} + +* { + 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; +} + +a { + color: inherit; + text-decoration: none; +} + +main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 6rem; + min-height: 100vh; +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.grid { + display: grid; + grid-template-columns: repeat(3, minmax(25%, auto)); + width: var(--max-width); + max-width: 100%; + gap: 1rem; +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + transition: background 200ms, border 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 0.6; + font-size: 0.9rem; + line-height: 1.5; + max-width: 30ch; +} + +.card ul, .card ol { + list-style-position: inside; +} + +.mb-4 { + margin-bottom: 1rem; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} 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/page.tsx b/integration/templates/elements-next/src/app/page.tsx new file mode 100644 index 0000000000..48de1ef827 --- /dev/null +++ b/integration/templates/elements-next/src/app/page.tsx @@ -0,0 +1,53 @@ +import { SignedIn, SignedOut, SignOutButton, UserButton } from '@clerk/nextjs'; +import Link from 'next/link'; + +export default function Home() { + return ( +
+

Clerk Elements: Next.js E2E

+

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

+
+
+

State:

+ +

signed-out-state

+ + +

signed-in-state

+ +
+
+

Links:

+
    +
  • + + Sign In + +
    • +
  • + Sign Up +
    • +
  • + OTP Playground +
    • +
+
+
+

Signed In Actions:

+ +

Not logged in.

+ + + + +

Sign Out

+ + +
+
+
+ ); +} 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..41c9d80e1e --- /dev/null +++ b/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx @@ -0,0 +1,20 @@ +'use client'; + +import * as Clerk from '@clerk/elements/common'; +import * as SignIn from '@clerk/elements/sign-in'; + +export default function SignInPage() { + return ( + +
+
+

Sign In

+
+ + + TODO + +
+ + ); +} 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..607a5eda04 --- /dev/null +++ b/integration/templates/elements-next/src/app/sign-up/[[...sign-up]]/page.tsx @@ -0,0 +1,20 @@ +'use client'; + +import * as Clerk from '@clerk/elements/common'; +import * as SignUp from '@clerk/elements/sign-up'; + +export default function SignUpPage() { + return ( + +
+
+

Sign In

+
+ + + TODO + +
+ + ); +} 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/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/tests/elements/elements-next-sign-in.test.ts b/integration/tests/elements/elements-next-sign-in.test.ts new file mode 100644 index 0000000000..806d0e394a --- /dev/null +++ b/integration/tests/elements/elements-next-sign-in.test.ts @@ -0,0 +1,42 @@ +import { 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(); + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + await u.po.expect.toBeSignedIn(); + }); +}); diff --git a/package.json b/package.json index 97e1301c9a..41769e05ef 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "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", 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/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'], - }, - ], -}); From cca7d852fa14ee2e129241edef23610ccf2ff336 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 8 May 2024 15:21:29 +0200 Subject: [PATCH 03/16] chore(repo): Add initial Elements tests --- .../templates/elements-next/package.json | 15 +- .../templates/elements-next/postcss.config.js | 6 + .../elements-next/src/app/globals.css | 100 +----- .../templates/elements-next/src/app/page.tsx | 53 ++- .../src/app/sign-in/[[...sign-in]]/page.tsx | 340 +++++++++++++++++- .../elements-next/tailwind.config.js | 8 + integration/testUtils/signInPageObject.ts | 17 +- .../elements/elements-next-sign-in.test.ts | 42 --- .../tests/elements/next-sign-in.test.ts | 180 ++++++++++ integration/tests/sign-in-flow.test.ts | 4 +- package.json | 4 +- .../elements/src/react/sign-in/step/index.ts | 3 + .../sign-in/{ => step}/reset-password.tsx | 0 .../src/react/sign-in/{ => step}/step.tsx | 12 +- .../src/react/sign-in/verifications.tsx | 2 +- 15 files changed, 602 insertions(+), 184 deletions(-) create mode 100644 integration/templates/elements-next/postcss.config.js create mode 100644 integration/templates/elements-next/tailwind.config.js delete mode 100644 integration/tests/elements/elements-next-sign-in.test.ts create mode 100644 integration/tests/elements/next-sign-in.test.ts create mode 100644 packages/elements/src/react/sign-in/step/index.ts rename packages/elements/src/react/sign-in/{ => step}/reset-password.tsx (100%) rename packages/elements/src/react/sign-in/{ => step}/step.tsx (88%) diff --git a/integration/templates/elements-next/package.json b/integration/templates/elements-next/package.json index f4c8e3e580..3f1db1a03a 100644 --- a/integration/templates/elements-next/package.json +++ b/integration/templates/elements-next/package.json @@ -12,12 +12,17 @@ "@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", + "@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" + "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/globals.css b/integration/templates/elements-next/src/app/globals.css index a404c0e2e3..7725c629ad 100644 --- a/integration/templates/elements-next/src/app/globals.css +++ b/integration/templates/elements-next/src/app/globals.css @@ -1,50 +1,11 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; +@tailwind base; +@tailwind components; +@tailwind utilities; +:root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3)); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } } * { @@ -65,11 +26,6 @@ body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } -a { - color: inherit; - text-decoration: none; -} - main { display: flex; flex-direction: column; @@ -78,51 +34,3 @@ main { padding: 6rem; min-height: 100vh; } - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(3, minmax(25%, auto)); - width: var(--max-width); - max-width: 100%; - gap: 1rem; -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - transition: background 200ms, border 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.card ul, .card ol { - list-style-position: inside; -} - -.mb-4 { - margin-bottom: 1rem; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} diff --git a/integration/templates/elements-next/src/app/page.tsx b/integration/templates/elements-next/src/app/page.tsx index 48de1ef827..78f59b8ba6 100644 --- a/integration/templates/elements-next/src/app/page.tsx +++ b/integration/templates/elements-next/src/app/page.tsx @@ -1,52 +1,71 @@ -import { SignedIn, SignedOut, SignOutButton, UserButton } from '@clerk/nextjs'; +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.

-
-
-

State:

+

Clerk Elements: Next.js E2E

+

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

+
+

signed-out-state

signed-in-state

 -
-
-

Links:

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

Signed In Actions:

+ +

Not logged in.

 - -

Sign Out

+ -
+
); 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 index 41c9d80e1e..72f067ad20 100644 --- 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 @@ -1,20 +1,340 @@ '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

-
- - - TODO - +
+
+ + +
+

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/tailwind.config.js b/integration/templates/elements-next/tailwind.config.js new file mode 100644 index 0000000000..a5a0b69c39 --- /dev/null +++ b/integration/templates/elements-next/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], + theme: { + extend: {}, + }, + plugins: [], +}; diff --git a/integration/testUtils/signInPageObject.ts b/integration/testUtils/signInPageObject.ts index c3417d8ac2..a233c63091 100644 --- a/integration/testUtils/signInPageObject.ts +++ b/integration/testUtils/signInPageObject.ts @@ -11,13 +11,21 @@ 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.waitForMountedHeadless(opts.headlessSelector); + } else { + return self.waitForMounted(); + } }, waitForMounted: () => { return page.waitForSelector('.cl-signIn-root', { state: 'attached' }); }, + waitForMountedHeadless: (selector: string) => { + return page.waitForSelector(selector, { state: 'attached' }); + }, setIdentifier: (val: string) => { return self.getIdentifierInput().fill(val); }, @@ -41,6 +49,9 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => { getGoToSignUp: () => { return page.getByRole('link', { name: /sign up/i }); }, + getSignIn: () => { + return page.getByRole('button', { name: /sign in/i }); + }, getResetPassword: () => { return page.getByRole('button', { name: /(reset password|reset your password)/i }); }, diff --git a/integration/tests/elements/elements-next-sign-in.test.ts b/integration/tests/elements/elements-next-sign-in.test.ts deleted file mode 100644 index 806d0e394a..0000000000 --- a/integration/tests/elements/elements-next-sign-in.test.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { 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(); - await u.po.signIn.setIdentifier(fakeUser.email); - await u.po.signIn.continue(); - await u.po.signIn.setPassword(fakeUser.password); - await u.po.signIn.continue(); - await u.po.expect.toBeSignedIn(); - }); -}); 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..791f496552 --- /dev/null +++ b/integration/tests/elements/next-sign-in.test.ts @@ -0,0 +1,180 @@ +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.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test.fixme('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(); + // TODO: In AIO this is a link with an href + await u.page.getByRole('button', { name: /use another method/i }).click(); + await u.po.signIn.getAltMethodsEmailCodeButton().click(); + await u.po.signIn.enterTestOtpCode(); + // 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"]' }); + + // TODO: In AIO this is a link with an empty href + 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.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"]' }); + // TODO: In AIO this is a link with an empty href + 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.enterTestOtpCode(); + 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.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(); + // TODO: In AIO this is a link with an empty href + await u.page.getByRole('button', { name: /^forgot password/i }).click(); + await u.po.signIn.getResetPassword().click(); + await u.po.signIn.enterTestOtpCode(); + // 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(); + // TODO: Compared to the original test this await is necessary for it to progress + await u.page.waitForAppUrl('/sign-in/reset-password'); + + 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.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.po.signIn.setPassword('wrong-password'); + await u.po.signIn.continue(); + + await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible(); + + // TODO: In AIO this is a link with an href + await u.page.getByRole('button', { name: /use another method/i }).click(); + await u.po.signIn.getAltMethodsEmailCodeButton().click(); + await u.po.signIn.enterTestOtpCode(); + // 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/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.json b/package.json index 41769e05ef..6a47d98468 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,7 +28,7 @@ "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", diff --git a/packages/elements/src/react/sign-in/step/index.ts b/packages/elements/src/react/sign-in/step/index.ts new file mode 100644 index 0000000000..7975825249 --- /dev/null +++ b/packages/elements/src/react/sign-in/step/index.ts @@ -0,0 +1,3 @@ +export { SignInStep, SIGN_IN_STEPS } from './step'; + +export type { SignInStepProps, TSignInStep } from './step'; diff --git a/packages/elements/src/react/sign-in/reset-password.tsx b/packages/elements/src/react/sign-in/step/reset-password.tsx similarity index 100% rename from packages/elements/src/react/sign-in/reset-password.tsx rename to packages/elements/src/react/sign-in/step/reset-password.tsx diff --git a/packages/elements/src/react/sign-in/step.tsx b/packages/elements/src/react/sign-in/step/step.tsx similarity index 88% rename from packages/elements/src/react/sign-in/step.tsx rename to packages/elements/src/react/sign-in/step/step.tsx index 36e04cbe7f..46222131d4 100644 --- a/packages/elements/src/react/sign-in/step.tsx +++ b/packages/elements/src/react/sign-in/step/step.tsx @@ -3,14 +3,14 @@ import { eventComponentMounted } from '@clerk/shared/telemetry'; import { ClerkElementsRuntimeError } from '~/internals/errors'; -import type { SignInChooseStrategyProps } from './choose-strategy'; -import { SignInChooseStrategy, SignInForgotPassword } from './choose-strategy'; +import type { SignInChooseStrategyProps } from '../choose-strategy'; +import { SignInChooseStrategy, SignInForgotPassword } from '../choose-strategy'; +import type { SignInStartProps } from '../start'; +import { SignInStart } from '../start'; +import type { SignInVerificationsProps } from '../verifications'; +import { SignInVerifications } from '../verifications'; import type { SignInResetPasswordProps } from './reset-password'; import { SignInResetPassword } from './reset-password'; -import type { SignInStartProps } from './start'; -import { SignInStart } from './start'; -import type { SignInVerificationsProps } from './verifications'; -import { SignInVerifications } from './verifications'; export const SIGN_IN_STEPS = { start: 'start', diff --git a/packages/elements/src/react/sign-in/verifications.tsx b/packages/elements/src/react/sign-in/verifications.tsx index 6b3d647ae5..a4728ca728 100644 --- a/packages/elements/src/react/sign-in/verifications.tsx +++ b/packages/elements/src/react/sign-in/verifications.tsx @@ -18,7 +18,7 @@ import { } from '~/react/sign-in/context'; import { createContextFromActorRef } from '~/react/utils/create-context-from-actor-ref'; -export type SignInVerificationsProps = { preferred?: ClerkSignInStrategy } & FormProps; +export type SignInVerificationsProps = { preferred?: ClerkSignInStrategy; children: React.ReactNode } & FormProps; export const SignInFirstFactorCtx = createContextFromActorRef('SignInFirstFactorCtx'); export const SignInSecondFactorCtx = createContextFromActorRef('SignInSecondFactorCtx'); From 5a856c1eb4c98488de21a5fe25e072f6eb9cc29a Mon Sep 17 00:00:00 2001 From: LekoArts Date: Mon, 13 May 2024 15:24:20 +0200 Subject: [PATCH 04/16] chore(repo): Add OTP tests --- .../templates/elements-next/public/next.svg | 1 - .../templates/elements-next/public/vercel.svg | 1 - .../elements-next/src/app/otp/page.tsx | 118 +++++++++ .../src/app/sign-in/[[...sign-in]]/page.tsx | 18 +- .../elements-next/tailwind.config.js | 12 +- integration/testUtils/signInPageObject.ts | 7 +- integration/tests/elements/otp.test.ts | 233 ++++++++++++++++++ 7 files changed, 373 insertions(+), 17 deletions(-) delete mode 100644 integration/templates/elements-next/public/next.svg delete mode 100644 integration/templates/elements-next/public/vercel.svg create mode 100644 integration/templates/elements-next/src/app/otp/page.tsx create mode 100644 integration/tests/elements/otp.test.ts diff --git a/integration/templates/elements-next/public/next.svg b/integration/templates/elements-next/public/next.svg deleted file mode 100644 index 5174b28c56..0000000000 --- a/integration/templates/elements-next/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/integration/templates/elements-next/public/vercel.svg b/integration/templates/elements-next/public/vercel.svg deleted file mode 100644 index d2f8422273..0000000000 --- a/integration/templates/elements-next/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file 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/sign-in/[[...sign-in]]/page.tsx b/integration/templates/elements-next/src/app/sign-in/[[...sign-in]]/page.tsx index 72f067ad20..8e5433084b 100644 --- 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 @@ -32,7 +32,7 @@ export default function SignInPage() { className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white' >
-

Sign in to Clover

+

Sign in to Clover

-

Use another method

+

Use another method

-

Forgot password?

+

Forgot password?

-

Enter your password

+

Enter your password

Welcome back

@@ -203,7 +203,7 @@ export default function SignInPage() {
-

Verify email code

+

Verify email code

@@ -226,7 +226,7 @@ export default function SignInPage() {
-

Verify email link

+

Verify email link

@@ -247,7 +247,7 @@ export default function SignInPage() {
-

Verify email code

+

Verify email code

@@ -270,7 +270,7 @@ export default function SignInPage() {
-

Verify phone code

+

Verify phone code

@@ -305,7 +305,7 @@ export default function SignInPage() { className='w-full space-y-6 rounded-2xl px-4 py-10 sm:w-96 sm:px-8 bg-white' >
-

Reset your password

+

Reset your password

diff --git a/integration/templates/elements-next/tailwind.config.js b/integration/templates/elements-next/tailwind.config.js index a5a0b69c39..5eaa317115 100644 --- a/integration/templates/elements-next/tailwind.config.js +++ b/integration/templates/elements-next/tailwind.config.js @@ -2,7 +2,17 @@ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { - extend: {}, + 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/testUtils/signInPageObject.ts b/integration/testUtils/signInPageObject.ts index a233c63091..e758fde173 100644 --- a/integration/testUtils/signInPageObject.ts +++ b/integration/testUtils/signInPageObject.ts @@ -15,15 +15,12 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => { await page.goToRelative('/sign-in', { searchParams: opts.searchParams }); if (typeof opts.headlessSelector !== 'undefined') { - return self.waitForMountedHeadless(opts.headlessSelector); + return self.waitForMounted(opts.headlessSelector); } else { return self.waitForMounted(); } }, - waitForMounted: () => { - return page.waitForSelector('.cl-signIn-root', { state: 'attached' }); - }, - waitForMountedHeadless: (selector: string) => { + waitForMounted: (selector = '.cl-signIn-root') => { return page.waitForSelector(selector, { state: 'attached' }); }, setIdentifier: (val: string) => { diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts new file mode 100644 index 0000000000..04d2264dee --- /dev/null +++ b/integration/tests/elements/otp.test.ts @@ -0,0 +1,233 @@ +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); + + // Playwright only can access the computed values, so calc(100% + 1ch + 0px) will compute to 330.078px + // With 4px offset, it should compute to 334.078px + await expect(otp).toHaveCSS('width', '334.078px'); + }); + }); +}); From daf0d35145a30d32747c27a681dfacd49c083e26 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 15 May 2024 09:30:31 +0200 Subject: [PATCH 05/16] chore(repo): Add sign-up tests --- .../templates/elements-next/src/app/page.tsx | 12 +- .../src/app/sign-in/[[...sign-in]]/page.tsx | 6 +- .../src/app/sign-up/[[...sign-up]]/page.tsx | 180 +++++++++++++++++- integration/testUtils/commonPageObject.ts | 5 + integration/testUtils/signUpPageObject.ts | 15 +- .../tests/elements/next-sign-in.test.ts | 14 +- .../tests/elements/next-sign-up.test.ts | 175 +++++++++++++++++ package-lock.json | 23 --- 8 files changed, 381 insertions(+), 49 deletions(-) create mode 100644 integration/tests/elements/next-sign-up.test.ts diff --git a/integration/templates/elements-next/src/app/page.tsx b/integration/templates/elements-next/src/app/page.tsx index 78f59b8ba6..4fa8919f69 100644 --- a/integration/templates/elements-next/src/app/page.tsx +++ b/integration/templates/elements-next/src/app/page.tsx @@ -35,7 +35,7 @@ export default function Home() { prefetch={false} className='text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline' > - Sign In + Sign-In
  • @@ -43,7 +43,7 @@ export default function Home() { href='/sign-up' className='text-zinc-950 decoration-zinc-950/20 underline-offset-4 outline-none hover:text-zinc-700 hover:underline focus-visible:underline' > - Sign Up + Sign-Up
  • @@ -54,6 +54,14 @@ export default function Home() { OTP Playground
    • +
  • + + Password Validation + +
    • 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 index 8e5433084b..1470c45f97 100644 --- 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 @@ -212,7 +212,7 @@ export default function SignInPage() { type='otp' required placeholder='Email code' - aria-label='Enter verification code. Digit 1' + aria-label='Enter email verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> @@ -256,7 +256,7 @@ export default function SignInPage() { type='otp' required placeholder='Email code' - aria-label='Enter verification code. Digit 1' + aria-label='Enter email verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> @@ -279,7 +279,7 @@ export default function SignInPage() { type='otp' required placeholder='Phone code' - aria-label='Enter verification code. Digit 1' + aria-label='Enter phone verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> 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 index 607a5eda04..7d7d40685c 100644 --- 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 @@ -5,16 +5,176 @@ import * as SignUp from '@clerk/elements/sign-up'; export default function SignUpPage() { return ( - -
    -
    -

    Sign In

    -
    - - - TODO +
    + + +
    +

    Create an account

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

    + Already have an account?{' '} + + Sign in + +

    +     + + + +
    +

    Verify email code

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

    Verify phone code

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

    + Already have an account?{' '} + + Sign in + +

    +     + +
    +

    Continue registration

    +
    + + + Username + + + + + Continue + +

    + Already have an account?{' '} + + Sign in + +

    -
    -     + + ); } 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/signUpPageObject.ts b/integration/testUtils/signUpPageObject.ts index 65440e87bc..4d79017dde 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-signIn-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/tests/elements/next-sign-in.test.ts b/integration/tests/elements/next-sign-in.test.ts index 791f496552..f0a2d2a926 100644 --- a/integration/tests/elements/next-sign-in.test.ts +++ b/integration/tests/elements/next-sign-in.test.ts @@ -60,7 +60,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S // TODO: In AIO this is a link with an href await u.page.getByRole('button', { name: /use another method/i }).click(); await u.po.signIn.getAltMethodsEmailCodeButton().click(); - await u.po.signIn.enterTestOtpCode(); + 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(); @@ -95,7 +96,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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.enterTestOtpCode(); + await u.po.signIn.fillTestOtpCode('Enter phone verification code'); + await page.waitForTimeout(2000); await u.po.signIn.continue(); await u.po.expect.toBeSignedIn(); @@ -130,11 +132,10 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S // TODO: In AIO this is a link with an empty href await u.page.getByRole('button', { name: /^forgot password/i }).click(); await u.po.signIn.getResetPassword().click(); - await u.po.signIn.enterTestOtpCode(); + 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(); - // TODO: Compared to the original test this await is necessary for it to progress - await u.page.waitForAppUrl('/sign-in/reset-password'); await u.po.signIn.setPassword(`${fakeUserWithPasword.password}_reset`); await u.po.signIn.setPasswordConfirmation(`${fakeUserWithPasword.password}_reset`); @@ -171,7 +172,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S // TODO: In AIO this is a link with an href await u.page.getByRole('button', { name: /use another method/i }).click(); await u.po.signIn.getAltMethodsEmailCodeButton().click(); - await u.po.signIn.enterTestOtpCode(); + 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(); 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..43a79a7101 --- /dev/null +++ b/integration/tests/elements/next-sign-up.test.ts @@ -0,0 +1,175 @@ +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.signInWithEmailAndInstantPassword({ + email: fakeUser.email, + password: fakeUser.password, + }); + */ + + await u.po.signIn.setIdentifier(fakeUser.email); + await u.po.signIn.continue(); + await u.po.signIn.setPassword(fakeUser.password); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + + await fakeUser.deleteIfExists(); + }); +}); diff --git a/package-lock.json b/package-lock.json index f4a38a3591..8bc1988278 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19639,7 +19639,6 @@ "version": "15.4.5", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@expo/config": "~8.5.0" }, @@ -39656,17 +39655,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, @@ -39687,17 +39675,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" From 54250c092cbc3828cd71cbdcfc59d0417321d214 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 16 May 2024 11:55:17 +0200 Subject: [PATCH 06/16] feat(repo): Add validate-password test --- .../src/app/validate-password/page.tsx | 94 +++++++++++++++++++ .../tests/elements/validate-password.test.ts | 69 ++++++++++++++ .../elements/src/react/common/form/index.tsx | 3 +- 3 files changed, 165 insertions(+), 1 deletion(-) create mode 100644 integration/templates/elements-next/src/app/validate-password/page.tsx create mode 100644 integration/tests/elements/validate-password.test.ts 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/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/packages/elements/src/react/common/form/index.tsx b/packages/elements/src/react/common/form/index.tsx index 48c9d8f141..36df5f421f 100644 --- a/packages/elements/src/react/common/form/index.tsx +++ b/packages/elements/src/react/common/form/index.tsx @@ -493,7 +493,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. From be1c2599134ff1d9a6e4a9da00e935dbf9c08c09 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 16 May 2024 13:56:48 +0200 Subject: [PATCH 07/16] fix(repo): Self-review changes --- .changeset/healthy-turtles-compete.md | 5 ++++ .../src/app/sign-up/[[...sign-up]]/page.tsx | 28 ------------------- integration/testUtils/signInPageObject.ts | 3 -- 3 files changed, 5 insertions(+), 31 deletions(-) create mode 100644 .changeset/healthy-turtles-compete.md 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/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 index 7d7d40685c..6ff8dd5e56 100644 --- 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 @@ -64,16 +64,6 @@ export default function SignUpPage() { > Continue - -

    - Already have an account?{' '} - - Sign in - -

    -

    - Already have an account?{' '} - - Sign in - -

    Continue -

    - Already have an account?{' '} - - Sign in - -

    diff --git a/integration/testUtils/signInPageObject.ts b/integration/testUtils/signInPageObject.ts index e758fde173..1dcaa707c2 100644 --- a/integration/testUtils/signInPageObject.ts +++ b/integration/testUtils/signInPageObject.ts @@ -46,9 +46,6 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => { getGoToSignUp: () => { return page.getByRole('link', { name: /sign up/i }); }, - getSignIn: () => { - return page.getByRole('button', { name: /sign in/i }); - }, getResetPassword: () => { return page.getByRole('button', { name: /(reset password|reset your password)/i }); }, From 3072192264cc064bdde8b0fbb7665d10c59ed92a Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 16 May 2024 13:59:02 +0200 Subject: [PATCH 08/16] fix(elements): Bad rebase --- .../src/react/sign-in/{step => }/reset-password.tsx | 0 .../elements/src/react/sign-in/{step => }/step.tsx | 12 ++++++------ packages/elements/src/react/sign-in/step/index.ts | 3 --- 3 files changed, 6 insertions(+), 9 deletions(-) rename packages/elements/src/react/sign-in/{step => }/reset-password.tsx (100%) rename packages/elements/src/react/sign-in/{step => }/step.tsx (88%) delete mode 100644 packages/elements/src/react/sign-in/step/index.ts diff --git a/packages/elements/src/react/sign-in/step/reset-password.tsx b/packages/elements/src/react/sign-in/reset-password.tsx similarity index 100% rename from packages/elements/src/react/sign-in/step/reset-password.tsx rename to packages/elements/src/react/sign-in/reset-password.tsx diff --git a/packages/elements/src/react/sign-in/step/step.tsx b/packages/elements/src/react/sign-in/step.tsx similarity index 88% rename from packages/elements/src/react/sign-in/step/step.tsx rename to packages/elements/src/react/sign-in/step.tsx index 46222131d4..36e04cbe7f 100644 --- a/packages/elements/src/react/sign-in/step/step.tsx +++ b/packages/elements/src/react/sign-in/step.tsx @@ -3,14 +3,14 @@ import { eventComponentMounted } from '@clerk/shared/telemetry'; import { ClerkElementsRuntimeError } from '~/internals/errors'; -import type { SignInChooseStrategyProps } from '../choose-strategy'; -import { SignInChooseStrategy, SignInForgotPassword } from '../choose-strategy'; -import type { SignInStartProps } from '../start'; -import { SignInStart } from '../start'; -import type { SignInVerificationsProps } from '../verifications'; -import { SignInVerifications } from '../verifications'; +import type { SignInChooseStrategyProps } from './choose-strategy'; +import { SignInChooseStrategy, SignInForgotPassword } from './choose-strategy'; import type { SignInResetPasswordProps } from './reset-password'; import { SignInResetPassword } from './reset-password'; +import type { SignInStartProps } from './start'; +import { SignInStart } from './start'; +import type { SignInVerificationsProps } from './verifications'; +import { SignInVerifications } from './verifications'; export const SIGN_IN_STEPS = { start: 'start', diff --git a/packages/elements/src/react/sign-in/step/index.ts b/packages/elements/src/react/sign-in/step/index.ts deleted file mode 100644 index 7975825249..0000000000 --- a/packages/elements/src/react/sign-in/step/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { SignInStep, SIGN_IN_STEPS } from './step'; - -export type { SignInStepProps, TSignInStep } from './step'; From 4ddd59a8dbf51079bb12ebf98ad82f423eaafc8b Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 16 May 2024 14:00:40 +0200 Subject: [PATCH 09/16] fix(repo): Adjust a couple of things --- .../elements-next/src/app/globals.css | 3 +- .../src/app/sign-in/[[...sign-in]]/page.tsx | 9 ++ integration/testUtils/signInPageObject.ts | 4 +- integration/testUtils/signUpPageObject.ts | 4 +- .../tests/elements/next-sign-in.test.ts | 8 +- .../tests/elements/next-sign-up.test.ts | 7 -- package-lock.json | 96 ------------------- .../src/react/sign-in/verifications.tsx | 2 +- turbo.json | 6 ++ 9 files changed, 24 insertions(+), 115 deletions(-) diff --git a/integration/templates/elements-next/src/app/globals.css b/integration/templates/elements-next/src/app/globals.css index 7725c629ad..b20b3536b4 100644 --- a/integration/templates/elements-next/src/app/globals.css +++ b/integration/templates/elements-next/src/app/globals.css @@ -23,7 +23,8 @@ body { 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; + font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, + Ubuntu, roboto, noto, arial, sans-serif; } main { 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 index 1470c45f97..aa4c5bee5e 100644 --- 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 @@ -57,6 +57,12 @@ export default function SignInPage() { />     + + + @@ -256,6 +263,7 @@ export default function SignInPage() { type='otp' required placeholder='Email code' + autoSubmit aria-label='Enter email verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> @@ -279,6 +287,7 @@ export default function SignInPage() { type='otp' required placeholder='Phone code' + autoSubmit aria-label='Enter phone verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> diff --git a/integration/testUtils/signInPageObject.ts b/integration/testUtils/signInPageObject.ts index 1dcaa707c2..98e731a460 100644 --- a/integration/testUtils/signInPageObject.ts +++ b/integration/testUtils/signInPageObject.ts @@ -12,9 +12,9 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => { const self = { ...common(testArgs), goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { - await page.goToRelative('/sign-in', { searchParams: opts.searchParams }); + await page.goToRelative('/sign-in', { searchParams: opts?.searchParams }); - if (typeof opts.headlessSelector !== 'undefined') { + if (typeof opts?.headlessSelector !== 'undefined') { return self.waitForMounted(opts.headlessSelector); } else { return self.waitForMounted(); diff --git a/integration/testUtils/signUpPageObject.ts b/integration/testUtils/signUpPageObject.ts index 4d79017dde..1f4bdf0186 100644 --- a/integration/testUtils/signUpPageObject.ts +++ b/integration/testUtils/signUpPageObject.ts @@ -16,9 +16,9 @@ export const createSignUpComponentPageObject = (testArgs: TestArgs) => { const self = { ...common(testArgs), goTo: async (opts?: { searchParams?: URLSearchParams; headlessSelector?: string }) => { - await page.goToRelative('/sign-up', { searchParams: opts.searchParams }); + await page.goToRelative('/sign-up', { searchParams: opts?.searchParams }); - if (typeof opts.headlessSelector !== 'undefined') { + if (typeof opts?.headlessSelector !== 'undefined') { return self.waitForMounted(opts.headlessSelector); } else { return self.waitForMounted(); diff --git a/integration/tests/elements/next-sign-in.test.ts b/integration/tests/elements/next-sign-in.test.ts index f0a2d2a926..deb1ce87ad 100644 --- a/integration/tests/elements/next-sign-in.test.ts +++ b/integration/tests/elements/next-sign-in.test.ts @@ -42,7 +42,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S await u.po.expect.toBeSignedIn(); }); - test.fixme('sign in with email and instant password', async ({ page, context }) => { + 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"]' }); @@ -57,7 +57,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S await u.po.signIn.setIdentifier(fakeUser.email); await u.po.signIn.continue(); - // TODO: In AIO this is a link with an href + 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'); @@ -73,7 +73,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S const u = createTestUtils({ app, page, context }); await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); - // TODO: In AIO this is a link with an empty href await u.page.getByRole('button', { name: /^use phone/i }).click(); await u.po.signIn.getIdentifierInput().fill(fakeUser.phoneNumber); await u.po.signIn.continue(); @@ -92,7 +91,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S }); await u.services.users.createBapiUser(fakeUserWithoutPassword); await u.po.signIn.goTo({ headlessSelector: '[data-test-id="sign-in-step-start"]' }); - // TODO: In AIO this is a link with an empty href await u.page.getByRole('button', { name: /^use phone/i }).click(); await u.po.signIn.getIdentifierInput().fill(fakeUserWithoutPassword.phoneNumber); await u.po.signIn.continue(); @@ -129,7 +127,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S await u.po.signIn.getIdentifierInput().fill(fakeUserWithPasword.email); await u.po.signIn.continue(); - // TODO: In AIO this is a link with an empty href 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'); @@ -169,7 +166,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S await expect(u.page.getByText(/^password is incorrect/i)).toBeVisible(); - // TODO: In AIO this is a link with an href 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'); diff --git a/integration/tests/elements/next-sign-up.test.ts b/integration/tests/elements/next-sign-up.test.ts index 43a79a7101..8a842679d3 100644 --- a/integration/tests/elements/next-sign-up.test.ts +++ b/integration/tests/elements/next-sign-up.test.ts @@ -156,13 +156,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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.signIn.setIdentifier(fakeUser.email); await u.po.signIn.continue(); await u.po.signIn.setPassword(fakeUser.password); diff --git a/package-lock.json b/package-lock.json index 8bc1988278..981021aa65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39178,23 +39178,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.0", "resolved": "https://registry.npmjs.org/@statelyai/inspect/-/inspect-0.3.0.tgz", @@ -39289,40 +39272,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, @@ -40311,21 +40260,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", @@ -40337,36 +40271,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.5", diff --git a/packages/elements/src/react/sign-in/verifications.tsx b/packages/elements/src/react/sign-in/verifications.tsx index a4728ca728..6b3d647ae5 100644 --- a/packages/elements/src/react/sign-in/verifications.tsx +++ b/packages/elements/src/react/sign-in/verifications.tsx @@ -18,7 +18,7 @@ import { } from '~/react/sign-in/context'; import { createContextFromActorRef } from '~/react/utils/create-context-from-actor-ref'; -export type SignInVerificationsProps = { preferred?: ClerkSignInStrategy; children: React.ReactNode } & FormProps; +export type SignInVerificationsProps = { preferred?: ClerkSignInStrategy } & FormProps; export const SignInFirstFactorCtx = createContextFromActorRef('SignInFirstFactorCtx'); export const SignInSecondFactorCtx = createContextFromActorRef('SignInSecondFactorCtx'); diff --git a/turbo.json b/turbo.json index 2dd2e89242..18c3c4c62f 100644 --- a/turbo.json +++ b/turbo.json @@ -159,6 +159,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" } } } From 06b9f18bcec57e8d8eb392f6c217b88d20f161e2 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 16 May 2024 16:16:44 +0200 Subject: [PATCH 10/16] fix(repo): Typoooo --- integration/testUtils/signUpPageObject.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/integration/testUtils/signUpPageObject.ts b/integration/testUtils/signUpPageObject.ts index 1f4bdf0186..cd94d94076 100644 --- a/integration/testUtils/signUpPageObject.ts +++ b/integration/testUtils/signUpPageObject.ts @@ -24,7 +24,7 @@ export const createSignUpComponentPageObject = (testArgs: TestArgs) => { return self.waitForMounted(); } }, - waitForMounted: (selector = '.cl-signIn-root') => { + waitForMounted: (selector = '.cl-signUp-root') => { return page.waitForSelector(selector, { state: 'attached' }); }, signUpWithOauth: (provider: string) => { From fadbb7357ab73c4b628b0763ed5c0ddc82059366 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 17 May 2024 08:57:06 +0200 Subject: [PATCH 11/16] fix(repo): OTP test assertion --- integration/tests/elements/otp.test.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts index 04d2264dee..47b6da387f 100644 --- a/integration/tests/elements/otp.test.ts +++ b/integration/tests/elements/otp.test.ts @@ -225,9 +225,8 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem test('passwordManagerOffset', async ({ page }) => { const otp = page.getByTestId(otpTypes.segmentedOtpWithProps); - // Playwright only can access the computed values, so calc(100% + 1ch + 0px) will compute to 330.078px - // With 4px offset, it should compute to 334.078px - await expect(otp).toHaveCSS('width', '334.078px'); + // 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); }); }); }); From 6d10a9280ba41101a925bdea4fa636f0875f00aa Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 17 May 2024 09:01:55 +0200 Subject: [PATCH 12/16] fix(repo): Handle faker phone deprecation msg --- integration/testUtils/usersService.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) 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 }), }; }, From 1cbe0927d7c8d02d765e7ba66e365d0641aa6805 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 17 May 2024 09:20:24 +0200 Subject: [PATCH 13/16] fix(repo): Assertions for sign-in --- .../elements-next/src/app/sign-in/[[...sign-in]]/page.tsx | 2 -- integration/tests/elements/next-sign-in.test.ts | 5 +++++ integration/tests/elements/next-sign-up.test.ts | 1 + 3 files changed, 6 insertions(+), 2 deletions(-) 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 index aa4c5bee5e..02bae0fd1e 100644 --- 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 @@ -218,7 +218,6 @@ export default function SignInPage() { type='otp' required placeholder='Email code' - autoSubmit aria-label='Enter email verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> @@ -287,7 +286,6 @@ export default function SignInPage() { type='otp' required placeholder='Phone code' - autoSubmit aria-label='Enter phone verification code' className='w-full border-b border-neutral-200 bg-white pb-2 text-sm/6 text-neutral-950 outline-none placeholder:text-neutral-400 hover:border-neutral-300 focus:border-neutral-600 data-[invalid]:border-red-600 data-[invalid]:text-red-600' /> diff --git a/integration/tests/elements/next-sign-in.test.ts b/integration/tests/elements/next-sign-in.test.ts index deb1ce87ad..c23f8f0fc0 100644 --- a/integration/tests/elements/next-sign-in.test.ts +++ b/integration/tests/elements/next-sign-in.test.ts @@ -36,6 +36,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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(); @@ -76,6 +77,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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(); @@ -109,6 +111,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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(); @@ -148,6 +151,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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(); @@ -161,6 +165,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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(); diff --git a/integration/tests/elements/next-sign-up.test.ts b/integration/tests/elements/next-sign-up.test.ts index 8a842679d3..652c179af7 100644 --- a/integration/tests/elements/next-sign-up.test.ts +++ b/integration/tests/elements/next-sign-up.test.ts @@ -158,6 +158,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('Next.js S 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(); From a0732985f3ef16c4cdeae4f44162fff09affef50 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Wed, 22 May 2024 12:54:40 +0200 Subject: [PATCH 14/16] Debugging --- .github/workflows/ci.yml | 25 +++++++++++++++++-- integration/models/application.ts | 1 + integration/models/applicationConfig.ts | 5 ++-- integration/playwright.config.ts | 2 +- integration/presets/elements.ts | 4 ++- integration/tests/elements/otp.test.ts | 1 + package.json | 2 +- .../eslint-config-custom/github-actions.js | 2 +- 8 files changed, 34 insertions(+), 8 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 7aed40c9a9..372d470c9f 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', 'elements'] + test-name: ['elements'] test-project: ['chrome'] steps: @@ -163,12 +163,33 @@ jobs: run: mkdir clerk-js && cd clerk-js && npm init -y && npm install @clerk/clerk-js - name: Run Integration Tests - run: npx turbo test:integration:${{ matrix.test-name }} $TURBO_ARGS --only -- --project=${{ matrix.test-project }} + id: integration-tests + run: npx turbo test:integration:${{ matrix.test-name }} --cache-dir=./.turbo-cache --concurrency=4 --summarize=false --verbosity=2 --log-order=stream --only -- --project=${{ matrix.test-project }} env: E2E_APP_CLERK_JS_DIR: ${{runner.temp}} E2E_CLERK_VERSION: 'latest' INTEGRATION_INSTANCE_KEYS: ${{ secrets.INTEGRATION_INSTANCE_KEYS }} MAILSAC_API_KEY: ${{ secrets.MAILSAC_API_KEY }} + + - name: ENV VARS ARGHHH + if: ${{ cancelled() || failure() }} + run: echo "APP_DIR_PATH=${appDirPath}" >> $GITHUB_ENV + + - name: Upload test artifacts + if: ${{ cancelled() || failure() }} + uses: actions/upload-artifact@v4 + with: + name: playwright-traces-${{ matrix.test-name }} + path: integration/test-results + retention-days: 1 + + - name: Upload tempdir artifacts + if: ${{ cancelled() || failure() }} + uses: actions/upload-artifact@v4 + with: + name: temp-app-${{ matrix.test-name }} + path: /tmp/.temp_integration/long-running--elements.next.appRouter__123 + retention-days: 1 # - name: Upload Integration Report for ${{ matrix.test-name }} # uses: actions/upload-artifact@v3 diff --git a/integration/models/application.ts b/integration/models/application.ts index 264da6a93f..dc2e4533e4 100644 --- a/integration/models/application.ts +++ b/integration/models/application.ts @@ -36,6 +36,7 @@ export const application = (config: ApplicationConfig, appDirPath: string, appDi if (force || !nodeModulesExist) { const log = logger.child({ prefix: 'setup' }).info; await run(scripts.setup, { cwd: appDirPath, log }); + await run(`cd node_modules/@clerk/elements && ls`, { cwd: appDirPath, log }); state.completedSetup = true; } }, diff --git a/integration/models/applicationConfig.ts b/integration/models/applicationConfig.ts index 87695cdf8e..016660b594 100644 --- a/integration/models/applicationConfig.ts +++ b/integration/models/applicationConfig.ts @@ -5,7 +5,7 @@ import { createLogger, fs } from '../scripts'; import { application } from './application.js'; import type { EnvironmentConfig } from './environment'; import type { Helpers } from './helpers.js'; -import { hash, helpers } from './helpers.js'; +import { helpers } from './helpers.js'; export type ApplicationConfig = ReturnType; type Scripts = { dev: string; build: string; setup: string; serve: string }; @@ -64,10 +64,11 @@ export const applicationConfig = () => { return self; }, commit: async (opts?: { stableHash?: string }) => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const { stableHash } = opts || {}; logger.info(`Creating project "${name}"`); - const appDirName = stableHash || `${name}__${Date.now()}__${hash()}`; + const appDirName = `${name}__123`; const appDirPath = path.resolve(constants.TMP_DIR, appDirName); // Copy template files diff --git a/integration/playwright.config.ts b/integration/playwright.config.ts index ae48bc2578..4d8c558c79 100644 --- a/integration/playwright.config.ts +++ b/integration/playwright.config.ts @@ -19,7 +19,7 @@ export const common: PlaywrightTestConfig = { timeout: 90000, maxFailures: process.env.CI ? 1 : undefined, workers: process.env.CI ? numAvailableWorkers : '70%', - reporter: process.env.CI ? 'line' : 'list', + reporter: 'line', use: { trace: 'on-first-retry', bypassCSP: true, // We probably need to limit this to specific tests diff --git a/integration/presets/elements.ts b/integration/presets/elements.ts index 9059714d7f..df04a07d6c 100644 --- a/integration/presets/elements.ts +++ b/integration/presets/elements.ts @@ -9,11 +9,13 @@ const nextAppRouter = applicationConfig() .setName('elements-next') .useTemplate(templates['elements-next']) .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`) - .addScript('setup', 'npm i') + .addScript('setup', 'npm i --verbose') .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); diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts index 47b6da387f..0ca61c0c35 100644 --- a/integration/tests/elements/otp.test.ts +++ b/integration/tests/elements/otp.test.ts @@ -13,6 +13,7 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem test.beforeEach(async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.page.goToRelative('/otp'); + await u.page.waitForClerkJsLoaded(); }); const otpTypes = { diff --git a/package.json b/package.json index d2901305a9..d193c1ff5e 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "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:base": "DEBUG=1 npx playwright test --config integration/playwright.config.ts --trace=retain-on-failure", "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", diff --git a/packages/eslint-config-custom/github-actions.js b/packages/eslint-config-custom/github-actions.js index b8a4a9cdc9..b107cf2b55 100644 --- a/packages/eslint-config-custom/github-actions.js +++ b/packages/eslint-config-custom/github-actions.js @@ -8,7 +8,7 @@ module.exports = { parser: 'any-eslint-parser', rules: { 'regex/invalid': [ - 'error', + 'warn', [ { regex: '^(?!.*\\$TURBO_ARGS( |$)).*turbo \\S+', From a117759c83ab09610977e899125ac88e352577c5 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 23 May 2024 11:12:55 +0200 Subject: [PATCH 15/16] fix: Let Verdaccio build elements package --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 372d470c9f..6ac1fd41d9 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -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 From ab29eff0abe71ca27192cc1d1bde7b792dce0e9b Mon Sep 17 00:00:00 2001 From: LekoArts Date: Thu, 23 May 2024 11:21:58 +0200 Subject: [PATCH 16/16] Revert Debugging --- .github/workflows/ci.yml | 24 ++----------------- integration/models/application.ts | 1 - integration/models/applicationConfig.ts | 5 ++-- integration/playwright.config.ts | 2 +- integration/presets/elements.ts | 2 +- integration/tests/elements/otp.test.ts | 1 - package.json | 2 +- .../eslint-config-custom/github-actions.js | 2 +- 8 files changed, 8 insertions(+), 31 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6ac1fd41d9..9bc6385018 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -129,7 +129,7 @@ jobs: strategy: matrix: - test-name: ['elements'] + test-name: ['generic', 'nextjs', 'express', 'quickstart', 'ap-flows', 'elements'] test-project: ['chrome'] steps: @@ -164,32 +164,12 @@ jobs: - name: Run Integration Tests id: integration-tests - run: npx turbo test:integration:${{ matrix.test-name }} --cache-dir=./.turbo-cache --concurrency=4 --summarize=false --verbosity=2 --log-order=stream --only -- --project=${{ matrix.test-project }} + run: npx turbo test:integration:${{ matrix.test-name }} $TURBO_ARGS --only -- --project=${{ matrix.test-project }} env: E2E_APP_CLERK_JS_DIR: ${{runner.temp}} E2E_CLERK_VERSION: 'latest' INTEGRATION_INSTANCE_KEYS: ${{ secrets.INTEGRATION_INSTANCE_KEYS }} MAILSAC_API_KEY: ${{ secrets.MAILSAC_API_KEY }} - - - name: ENV VARS ARGHHH - if: ${{ cancelled() || failure() }} - run: echo "APP_DIR_PATH=${appDirPath}" >> $GITHUB_ENV - - - name: Upload test artifacts - if: ${{ cancelled() || failure() }} - uses: actions/upload-artifact@v4 - with: - name: playwright-traces-${{ matrix.test-name }} - path: integration/test-results - retention-days: 1 - - - name: Upload tempdir artifacts - if: ${{ cancelled() || failure() }} - uses: actions/upload-artifact@v4 - with: - name: temp-app-${{ matrix.test-name }} - path: /tmp/.temp_integration/long-running--elements.next.appRouter__123 - retention-days: 1 # - name: Upload Integration Report for ${{ matrix.test-name }} # uses: actions/upload-artifact@v3 diff --git a/integration/models/application.ts b/integration/models/application.ts index dc2e4533e4..264da6a93f 100644 --- a/integration/models/application.ts +++ b/integration/models/application.ts @@ -36,7 +36,6 @@ export const application = (config: ApplicationConfig, appDirPath: string, appDi if (force || !nodeModulesExist) { const log = logger.child({ prefix: 'setup' }).info; await run(scripts.setup, { cwd: appDirPath, log }); - await run(`cd node_modules/@clerk/elements && ls`, { cwd: appDirPath, log }); state.completedSetup = true; } }, diff --git a/integration/models/applicationConfig.ts b/integration/models/applicationConfig.ts index 016660b594..87695cdf8e 100644 --- a/integration/models/applicationConfig.ts +++ b/integration/models/applicationConfig.ts @@ -5,7 +5,7 @@ import { createLogger, fs } from '../scripts'; import { application } from './application.js'; import type { EnvironmentConfig } from './environment'; import type { Helpers } from './helpers.js'; -import { helpers } from './helpers.js'; +import { hash, helpers } from './helpers.js'; export type ApplicationConfig = ReturnType; type Scripts = { dev: string; build: string; setup: string; serve: string }; @@ -64,11 +64,10 @@ export const applicationConfig = () => { return self; }, commit: async (opts?: { stableHash?: string }) => { - // eslint-disable-next-line @typescript-eslint/no-unused-vars const { stableHash } = opts || {}; logger.info(`Creating project "${name}"`); - const appDirName = `${name}__123`; + const appDirName = stableHash || `${name}__${Date.now()}__${hash()}`; const appDirPath = path.resolve(constants.TMP_DIR, appDirName); // Copy template files diff --git a/integration/playwright.config.ts b/integration/playwright.config.ts index 4d8c558c79..ae48bc2578 100644 --- a/integration/playwright.config.ts +++ b/integration/playwright.config.ts @@ -19,7 +19,7 @@ export const common: PlaywrightTestConfig = { timeout: 90000, maxFailures: process.env.CI ? 1 : undefined, workers: process.env.CI ? numAvailableWorkers : '70%', - reporter: 'line', + reporter: process.env.CI ? 'line' : 'list', use: { trace: 'on-first-retry', bypassCSP: true, // We probably need to limit this to specific tests diff --git a/integration/presets/elements.ts b/integration/presets/elements.ts index df04a07d6c..b137759c13 100644 --- a/integration/presets/elements.ts +++ b/integration/presets/elements.ts @@ -9,7 +9,7 @@ const nextAppRouter = applicationConfig() .setName('elements-next') .useTemplate(templates['elements-next']) .setEnvFormatter('public', key => `NEXT_PUBLIC_${key}`) - .addScript('setup', 'npm i --verbose') + .addScript('setup', 'npm i') .addScript('dev', 'npm run dev') .addScript('build', 'npm run build') .addScript('serve', 'npm run start') diff --git a/integration/tests/elements/otp.test.ts b/integration/tests/elements/otp.test.ts index 0ca61c0c35..47b6da387f 100644 --- a/integration/tests/elements/otp.test.ts +++ b/integration/tests/elements/otp.test.ts @@ -13,7 +13,6 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })('OTP @elem test.beforeEach(async ({ page, context }) => { const u = createTestUtils({ app, page, context }); await u.page.goToRelative('/otp'); - await u.page.waitForClerkJsLoaded(); }); const otpTypes = { diff --git a/package.json b/package.json index d193c1ff5e..d2901305a9 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "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 --trace=retain-on-failure", + "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", diff --git a/packages/eslint-config-custom/github-actions.js b/packages/eslint-config-custom/github-actions.js index b107cf2b55..b8a4a9cdc9 100644 --- a/packages/eslint-config-custom/github-actions.js +++ b/packages/eslint-config-custom/github-actions.js @@ -8,7 +8,7 @@ module.exports = { parser: 'any-eslint-parser', rules: { 'regex/invalid': [ - 'warn', + 'error', [ { regex: '^(?!.*\\$TURBO_ARGS( |$)).*turbo \\S+',