fix(repo): Adjust a couple of things

LekoArts · LekoArts · commit 4ddd59a8dbf5 · 2024-05-16T15:51:11.000+02:00
diff --git 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
@@ -57,6 +57,12 @@ export default function SignInPage() {
               />
               <Clerk.FieldError className='mt-2 block text-xs text-red-600' />
             </Clerk.Field>
+            <Clerk.Field
+              name='password'
+              className='opacity-0 h-0 pointer-events-none absolute'
+            >
+              <Clerk.Input />
+            </Clerk.Field>
             <SignIn.Action
               submit
               asChild
@@ -212,6 +218,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'
                 />
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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<TSignInFirstFactorMachine>('SignInFirstFactorCtx');
 export const SignInSecondFactorCtx = createContextFromActorRef<TSignInSecondFactorMachine>('SignInSecondFactorCtx');
diff --git 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"
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,8 @@ body {`
`23`	`23`	`body {`
`24`	`24`	`color: rgb(var(--foreground-rgb));`
`25`	`25`	`background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));`
`26`		`- font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;`
	`26`	`+ font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell,`
	`27`	`+ Ubuntu, roboto, noto, arial, sans-serif;`
`27`	`28`	`}`
`28`	`29`
`29`	`30`	`main {`
Original file line number	Diff line number	Diff line change
`@@ -159,6 +159,12 @@`
`159`	`159`	`"env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"],`
`160`	`160`	`"inputs": ["integration/**"],`
`161`	`161`	`"outputMode": "new-only"`
	`162`	`+ },`
	`163`	`+ "//#test:integration:elements": {`
	`164`	`+ "dependsOn": ["^@clerk/nextjs#build", "^@clerk/elements#build"],`
	`165`	`+ "env": ["CLEANUP", "DEBUG", "E2E_*", "INTEGRATION_INSTANCE_KEYS"],`
	`166`	`+ "inputs": ["integration/**"],`
	`167`	`+ "outputMode": "new-only"`
`162`	`168`	`}`
`163`	`169`	`}`
`164`	`170`	`}`