test(clerk-js): Remove skipped tests for MfaPage (#2592)

* test(clerk-js): Remove skipped tests for MfaPage

* test(clerk-js): Add changeset

.changeset/hot-fireants-kiss.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx

@@ -1,83 +1,253 @@
-import type { PhoneNumberResource } from '@clerk/types';
+import type { BackupCodeResource, PhoneNumberResource, VerificationJSON } from '@clerk/types';
 import { describe, it } from '@jest/globals';
-import React from 'react';
+import { act, waitFor } from '@testing-library/react';
 
-import { render, screen } from '../../../../testUtils';
+import { render } from '../../../../testUtils';
+import { CardStateProvider } from '../../../elements';
 import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { MfaSection } from '../MfaSection';
 
 const { createFixtures } = bindCreateFixtures('UserProfile');
 
 const initConfig = createFixtures.config(f => {
+  f.withBackupCode();
+  f.withAuthenticatorApp();
   f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
-  f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }] });
+  f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }], two_factor_enabled: true });
 });
 
-//TODO-RETHEME
-describe.skip('MfaPage', () => {
+describe('MfaPage', () => {
   it('renders the component', async () => {
     const { wrapper } = await createFixtures(initConfig);
 
-    render(<MfaSection />, { wrapper });
+    const { getByText } = render(<MfaSection />, { wrapper });
+    getByText('Two-step verification');
+    getByText('Add two-step verification');
   });
 
-  it('shows the title', async () => {
-    const { wrapper } = await createFixtures(initConfig);
+  describe('Add a verification', () => {
+    it('lists all methods', async () => {
+      const { wrapper } = await createFixtures(initConfig);
 
-    render(<MfaSection />, { wrapper });
+      const { getByText, userEvent, getByRole } = render(<MfaSection />, { wrapper });
+      await waitFor(() => getByText('Two-step verification'));
 
-    screen.getAllByText('Add SMS code verification');
-  });
+      await act(async () => {
+        await userEvent.click(getByRole('button', { name: /Add two-step verification/i }));
+      });
 
-  describe('Actions', () => {
-    it('shows the phone number of the user with a button', async () => {
-      const { wrapper } = await createFixtures(initConfig);
+      await waitFor(() => getByText(/sms code/i));
+      getByText(/backup code/i);
+      getByText(/authenticator app/i);
+    });
+
+    it('lists only sms and backup', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withBackupCode();
+        f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+        f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }], two_factor_enabled: true });
+      });
+
+      const { getByText, userEvent, getByRole, queryByText } = render(<MfaSection />, { wrapper });
+      await waitFor(() => getByText('Two-step verification'));
 
-      render(<MfaSection />, { wrapper });
+      await act(async () => {
+        await userEvent.click(getByRole('button', { name: /Add two-step verification/i }));
+      });
 
-      const phoneNumberEl = screen.getByText('+30 691 1111111');
-      expect(phoneNumberEl.closest('button')).not.toBeNull();
+      await waitFor(() => getByText(/sms code/i));
+      expect(queryByText(/backup code/i)).toBeInTheDocument();
+      expect(queryByText(/authenticator app/i)).not.toBeInTheDocument();
     });
 
-    it('shows the "add a phone number" button', async () => {
-      const { wrapper } = await createFixtures(initConfig);
+    it('lists only sms and authenticator app', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withAuthenticatorApp();
+        f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+        f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }], two_factor_enabled: true });
+      });
+
+      const { getByText, userEvent, getByRole, queryByText } = render(<MfaSection />, { wrapper });
+      await waitFor(() => getByText('Two-step verification'));
+
+      await act(async () => {
+        await userEvent.click(getByRole('button', { name: /Add two-step verification/i }));
+      });
+
+      await waitFor(() => getByText(/sms code/i));
+      expect(queryByText(/backup code/i)).not.toBeInTheDocument();
+      expect(queryByText(/authenticator app/i)).toBeInTheDocument();
+    });
+
+    it('lists only sms', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+        f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }], two_factor_enabled: true });
+      });
+
+      const { getByText, userEvent, getByRole, queryByText } = render(<MfaSection />, { wrapper });
+      await waitFor(() => getByText('Two-step verification'));
 
-      render(<MfaSection />, { wrapper });
+      await act(async () => {
+        await userEvent.click(getByRole('button', { name: /Add two-step verification/i }));
+      });
 
-      const phoneNumberEl = screen.getByText(/add a phone number/i);
-      expect(phoneNumberEl.closest('button')).not.toBeNull();
+      await waitFor(() => getByText(/sms code/i));
+      expect(queryByText(/backup code/i)).not.toBeInTheDocument();
+      expect(queryByText(/authenticator app/i)).not.toBeInTheDocument();
     });
 
-    it('navigates to the root page upon clicking cancel', async () => {
+    it('Complete verification with phone_code and autogenerated backup codes', async () => {
       const { wrapper, fixtures } = await createFixtures(initConfig);
 
-      const { userEvent } = render(<MfaSection />, { wrapper });
+      fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor.mockResolvedValue({} as PhoneNumberResource);
+      const { getByText, userEvent, getByRole } = render(<MfaSection />, { wrapper });
+      await waitFor(() => getByText('Two-step verification'));
 
-      await userEvent.click(screen.getByRole('button', { name: /cancel/i }));
-      expect(fixtures.router.navigate).toBeCalledWith('/');
+      await act(async () => {
+        await userEvent.click(getByRole('button', { name: /Add two-step verification/i }));
+      });
+
+      await waitFor(() => getByText(/sms code/i));
+      await userEvent.click(getByRole('menuitem', { name: /sms code/i }));
+
+      await waitFor(() => getByText(/Add SMS code verification/i));
+      getByText(/Select an existing phone number to register for SMS code two-step verification or add a new one./i);
+
+      await userEvent.click(getByRole('button', { name: /GR \+30 691 1111111/i }));
+      expect(fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor).toHaveBeenCalledWith({
+        reserved: true,
+      });
+
+      await waitFor(() => getByText(/SMS code verification enabled/i));
+      getByText(
+        /When signing in, you will need to enter a verification code sent to this phone number as an additional step./i,
+      );
+      getByText(
+        /Save these backup codes and store them somewhere safe. If you lose access to your authentication device, you can use backup codes to sign in./i,
+      );
+      getByText(/backup codes/i);
+
+      await userEvent.click(getByRole('button', { name: /finish/i }));
     });
 
-    it('renders the "add a phone number" page upon clicking the button', async () => {
-      const { wrapper } = await createFixtures(initConfig);
+    it('Complete verification with phone_code without autogenerated backup codes', async () => {
+      const { wrapper } = await createFixtures(f => {
+        f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+        f.withUser({ phone_numbers: [{ phone_number: '+306911111111', id: 'id' }], two_factor_enabled: true });
+      });
+
+      const { getByText, userEvent, getByRole, queryByRole } = render(<MfaSection />, { wrapper });
+      await waitFor(() => getByText('Two-step verification'));
 
-      const { userEvent } = render(<MfaSection />, { wrapper });
+      await act(async () => {
+        await userEvent.click(getByRole('button', { name: /Add two-step verification/i }));
+      });
 
-      await userEvent.click(screen.getByText(/add a phone number/i));
-      screen.getByLabelText(/phone number/i);
+      await waitFor(() => getByText(/sms code/i));
+      await userEvent.click(getByRole('menuitem', { name: /sms code/i }));
+
+      await waitFor(() => expect(queryByRole(/Add SMS code verification/i)).not.toBeInTheDocument());
     });
 
-    it('renders the "enabled" page upon clicking the button', async () => {
-      const { wrapper, fixtures } = await createFixtures(initConfig);
+    it.todo('Complete verification with authenticator app');
+  });
 
-      //@ts-expect-error
-      fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor = jest
-        .fn()
-        .mockResolvedValue({} as PhoneNumberResource);
-      const { userEvent } = render(<MfaSection />, { wrapper });
+  describe('Regenerates', () => {
+    it('Regenerates backup codes', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withBackupCode();
+        f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+        f.withUser({
+          phone_numbers: [
+            {
+              phone_number: '+306911111111',
+              id: 'id',
+              reserved_for_second_factor: true,
+              verification: { status: 'verified', strategy: 'phone_code' } as VerificationJSON,
+            },
+          ],
+          backup_code_enabled: true,
+          two_factor_enabled: true,
+        });
+      });
+
+      fixtures.clerk.user?.createBackupCode.mockResolvedValue({} as BackupCodeResource);
+
+      const { getByText, userEvent, getByRole } = render(
+        <CardStateProvider>
+          <MfaSection />
+        </CardStateProvider>,
+        { wrapper },
+      );
+      await waitFor(() => getByText('Two-step verification'));
+
+      const itemButton = getByText(/backup codes/i)?.parentElement?.parentElement?.children[1];
+
+      expect(itemButton).toBeDefined();
+      await act(async () => {
+        await userEvent.click(itemButton!);
+      });
+      await waitFor(() => getByText(/^regenerate$/i));
+      await userEvent.click(getByText(/^regenerate$/i));
+
+      getByText('Add backup code verification');
+      await waitFor(() =>
+        getByText(
+          'Backup codes are now enabled. You can use one of these to sign in to your account, if you lose access to your authentication device. Each code can only be used once.',
+        ),
+      );
+      expect(fixtures.clerk.user?.createBackupCode).toHaveBeenCalled();
+      await userEvent.click(getByRole('button', { name: /^finish$/i }));
+    });
 
-      await userEvent.click(screen.getByText(/\+30 691 1111111/i));
-      expect(await screen.findByText(/enabled/i)).toBeInTheDocument();
-      expect(fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor).toHaveBeenCalledWith({ reserved: true });
+    it.todo('Test the copy all/download/print buttons');
+  });
+
+  describe('Removes a verification', () => {
+    it('Removes a phone verification', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true });
+        f.withUser({
+          phone_numbers: [
+            {
+              phone_number: '+306911111111',
+              id: 'id',
+              reserved_for_second_factor: true,
+              verification: { status: 'verified', strategy: 'phone_code' } as VerificationJSON,
+            },
+          ],
+          two_factor_enabled: true,
+        });
+      });
+
+      fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor.mockResolvedValue({} as PhoneNumberResource);
+
+      const { getByText, userEvent, getByRole } = render(
+        <CardStateProvider>
+          <MfaSection />
+        </CardStateProvider>,
+        { wrapper },
+      );
+      await waitFor(() => getByText('Two-step verification'));
+
+      const itemButton = getByText(/\+30 691 1111111/i)?.parentElement?.parentElement?.parentElement?.children[1];
+
+      expect(itemButton).toBeDefined();
+
+      await act(async () => {
+        await userEvent.click(itemButton!);
+      });
+      await waitFor(() => getByText(/^remove$/i));
+      await userEvent.click(getByText(/^remove$/i));
+      getByText(/remove two-step verification/i);
+      getByText('Your account may not be as secure. Are you sure you want to continue?');
+
+      await userEvent.click(getByRole('button', { name: /^save$/i }));
+
+      expect(fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor).toHaveBeenCalledWith({ reserved: false });
     });
+
+    it.todo('Complete verification with authenticator app');
   });
 });