feat(clerk-js): Implement TaskResetPassword component and update context and update tests

Author: octoper

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskResetPassword/__tests__/TaskResetPassword.test.tsx

@@ -1,3 +1,4 @@
+import userEvent from '@testing-library/user-event';
 import { describe, expect, it } from 'vitest';
 
 import { bindCreateFixtures } from '@/test/create-fixtures';
@@ -10,8 +11,6 @@ const { createFixtures } = bindCreateFixtures('TaskResetPassword');
 describe('TaskResetPassword', () => {
   it('does not render component without existing session task', async () => {
     const { wrapper } = await createFixtures(f => {
-      f.withOrganizations();
-      f.withForceOrganizationSelection();
       f.withUser({
         email_addresses: ['test@clerk.com'],
       });
@@ -21,6 +20,84 @@ describe('TaskResetPassword', () => {
 
     expect(queryByText('New password')).not.toBeInTheDocument();
     expect(queryByText('Confirm password')).not.toBeInTheDocument();
-    expect(queryByRole('button', { name: /sign out/i })).not.toBeInTheDocument();
+    expect(queryByText('Sign out of all other devices')).not.toBeInTheDocument();
+    expect(queryByRole('link', { name: /sign out/i })).not.toBeInTheDocument();
+  });
+
+  it('renders component when session task exists', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        tasks: [{ key: 'reset-password' }],
+      });
+    });
+
+    const { queryByText, queryByRole } = render(<TaskResetPassword />, { wrapper });
+
+    expect(queryByText('New password')).toBeInTheDocument();
+    expect(queryByText('Confirm password')).toBeInTheDocument();
+    expect(queryByText('Sign out of all other devices')).toBeInTheDocument();
+    expect(queryByRole('link', { name: /sign out/i })).toBeInTheDocument();
+  });
+
+  it('renders the task components in the order of the tasks', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withForceOrganizationSelection();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        tasks: [{ key: 'reset-password' }, { key: 'choose-organization' }],
+      });
+    });
+
+    const { queryByText, queryByRole } = render(<TaskResetPassword />, { wrapper });
+
+    expect(queryByText('New password')).toBeInTheDocument();
+    expect(queryByText('Confirm password')).toBeInTheDocument();
+    expect(queryByText('Sign out of all other devices')).toBeInTheDocument();
+    expect(queryByRole('link', { name: /sign out/i })).toBeInTheDocument();
+  });
+
+  it('displays user identifier in sign out section', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({
+        email_addresses: ['user@test.com'],
+        tasks: [{ key: 'reset-password' }],
+      });
+    });
+
+    const { findByText } = render(<TaskResetPassword />, { wrapper });
+
+    expect(await findByText(/user@test\.com/)).toBeInTheDocument();
+    expect(await findByText('Sign out')).toBeInTheDocument();
+  });
+
+  it('handles sign out correctly', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        tasks: [{ key: 'reset-password' }],
+      });
+    });
+
+    const { findByRole } = render(<TaskResetPassword />, { wrapper });
+    const signOutButton = await findByRole('link', { name: /sign out/i });
+
+    await userEvent.click(signOutButton);
+
+    expect(fixtures.clerk.signOut).toHaveBeenCalled();
+  });
+
+  it('renders with username when email is not available', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({
+        username: 'testuser',
+        tasks: [{ key: 'reset-password' }],
+      });
+    });
+
+    const { findByText } = render(<TaskResetPassword />, { wrapper });
+
+    expect(await findByText(/testuser/)).toBeInTheDocument();
   });
 });

packages/clerk-js/src/ui/contexts/ClerkUIComponentsContext.tsx

@@ -3,6 +3,7 @@ import type {
   APIKeysProps,
   PricingTableProps,
   TaskChooseOrganizationProps,
+  TaskResetPasswordProps,
   UserButtonProps,
   WaitlistProps,
 } from '@clerk/shared/types';
@@ -27,7 +28,7 @@ import {
   UserVerificationContext,
   WaitlistContext,
 } from './components';
-import { TaskChooseOrganizationContext } from './components/SessionTasks';
+import { TaskChooseOrganizationContext, TaskResetPasswordContext } from './components/SessionTasks';
 
 export function ComponentContextProvider({
   componentName,
@@ -126,6 +127,14 @@ export function ComponentContextProvider({
           {children}
         </TaskChooseOrganizationContext.Provider>
       );
+    case 'TaskResetPassword':
+      return (
+        <TaskResetPasswordContext.Provider
+          value={{ componentName: 'TaskResetPassword', ...(props as TaskResetPasswordProps) }}
+        >
+          {children}
+        </TaskResetPasswordContext.Provider>
+      );
     default:
       throw new Error(`Unknown component context: ${componentName}`);
   }

packages/clerk-js/src/ui/types.ts

@@ -187,5 +187,6 @@ export type AvailableComponentCtx =
   | OAuthConsentCtx
   | SubscriptionDetailsCtx
   | PlanDetailsCtx
-  | TaskChooseOrganizationCtx;
+  | TaskChooseOrganizationCtx
+  | TaskResetPasswordCtx;
 export type AvailableComponentName = AvailableComponentCtx['componentName'];