feat(mosaic): render self-contained sections in user profile panels

.changeset/mosaic-user-profile-panels.md

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

packages/mosaic/src/features/user-profile/__tests__/user-profile-passkeys-composition.feature.test.tsx

@@ -1,17 +1,13 @@
-import { act, screen, within } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { serveFapi } from '../../../__tests__/feature/fake-fapi';
 import { fapiClient, fapiEnvironment, fapiPasskey, fapiSession, fapiUser } from '../../../__tests__/feature/fapi';
 import { renderWithClerk } from '../../../__tests__/feature/render';
 import { UserProfileView } from '../user-profile.view';
-import { UserProfileActiveDevicesSectionView } from '../user-profile-active-devices-section/user-profile-active-devices-section.view';
-import { UserProfilePasskeysSectionView } from '../user-profile-passkeys-section.view';
-import { passkeysSectionNode } from '../user-profile-passkeys-section/user-profile-passkeys-section';
-import { useUserProfilePasskeysModel } from '../user-profile-passkeys-section/user-profile-passkeys-section.model';
-import { renderPasswordSection } from '../user-profile-password-section/user-profile-password-section';
-import { useUserProfilePasswordModel } from '../user-profile-password-section/user-profile-password-section.model';
-import { UserProfileSecurityPanelView } from '../user-profile-security-panel.view';
+import { UserProfilePasskeysSection } from '../user-profile-passkeys-section/user-profile-passkeys-section';
+import { UserProfilePasswordSection } from '../user-profile-password-section/user-profile-password-section';
+import { UserProfileSecurityPanel } from '../user-profile-security-panel';
 
 afterEach(() => vi.restoreAllMocks());
 
@@ -34,60 +30,29 @@ function serveAccounts() {
   });
 }
 
-function SecurityHost() {
-  const passwordSlot = renderPasswordSection(useUserProfilePasswordModel(), null);
-  const passkeysSlot = passkeysSectionNode(useUserProfilePasskeysModel());
-  return (
-    <UserProfileSecurityPanelView
-      passwordSlot={passwordSlot}
-      passkeysSlot={passkeysSlot}
-      mfaMethods={[]}
-      activeDevicesSlot={<UserProfileActiveDevicesSectionView devices={[]} />}
-    />
-  );
-}
-
 function ProfileHost() {
-  const passwordSlot = renderPasswordSection(useUserProfilePasswordModel(), null);
-  const passkeysSlot = passkeysSectionNode(useUserProfilePasskeysModel());
   return (
     <UserProfileView
       activePage='security'
       onPageChange={() => {}}
       pages={{
         account: {},
         security: {
-          passwordSlot,
-          passkeysSlot,
-          mfaMethods: [],
-          activeDevicesSlot: <UserProfileActiveDevicesSectionView devices={[]} />,
+          children: (
+            <>
+              <UserProfilePasswordSection />
+              <UserProfilePasskeysSection />
+            </>
+          ),
         },
       }}
     />
   );
 }
 
-describe('Composing connected authentication sections', () => {
-  it('renders a plain passkeys section node inside Authentication', async () => {
-    serveAccounts();
-    await renderWithClerk(
-      <UserProfileSecurityPanelView
-        passkeysSlot={
-          <UserProfilePasskeysSectionView
-            passkeys={[]}
-            onAdd={vi.fn()}
-          />
-        }
-      />,
-    );
-
-    const authentication = screen.getByRole('region', { name: 'Authentication' });
-    expect(within(authentication).getByText('No passkeys added')).toBeVisible();
-    expect(within(authentication).getByRole('button', { name: 'Add passkey' })).toBeVisible();
-  });
-
+describe('Composing connected security sections', () => {
   it.each([
-    { name: 'Security', Host: SecurityHost },
+    { name: 'Security', Host: UserProfileSecurityPanel },
     { name: 'UserProfile', Host: ProfileHost },
   ])('keeps one current-account section of each kind after a user switch in $name', async ({ Host }) => {
     serveAccounts();
@@ -100,18 +65,4 @@ describe('Composing connected authentication sections', () => {
     expect(screen.getAllByRole('group', { name: 'Passkeys' })).toHaveLength(1);
     expect(screen.queryByText('Alice laptop')).toBeNull();
   });
-
-  it('places Password and Passkeys before MFA and devices', async () => {
-    serveAccounts();
-    await renderWithClerk(<SecurityHost />);
-    const authentication = screen.getByRole('region', { name: 'Authentication' });
-    const password = within(authentication).getByText('Password');
-    const passkeys = within(authentication).getByText('Passkeys');
-    const mfa = within(authentication).getByText('2-step verification');
-    expect(password.compareDocumentPosition(passkeys) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-    expect(passkeys.compareDocumentPosition(mfa) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-    expect(
-      mfa.compareDocumentPosition(screen.getByText('Active devices')) & Node.DOCUMENT_POSITION_FOLLOWING,
-    ).toBeTruthy();
-  });
 });

packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.feature.test.tsx

@@ -0,0 +1,52 @@
+import { screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { serveFapi } from '../../../__tests__/feature/fake-fapi';
+import { fapiClient, fapiEmailAddress, fapiSession, fapiUser } from '../../../__tests__/feature/fapi';
+import { renderWithClerk } from '../../../__tests__/feature/render';
+import { UserProfileEmailSection } from '../user-profile-email-section/user-profile-email-section';
+import { UserProfileProfilePanel } from '../user-profile-profile-panel';
+import { UserProfileProfileSection } from '../user-profile-profile-section/user-profile-profile-section';
+
+const email = fapiEmailAddress({ id: 'idn_1', email_address: 'alice@example.com' });
+const alice = fapiUser({
+  id: 'user_1',
+  first_name: 'Alice',
+  last_name: 'Smith',
+  email_addresses: [email],
+  primary_email_address_id: 'idn_1',
+});
+
+function sectionHeadings() {
+  return screen.getAllByRole('heading', { level: 3 }).map(heading => heading.textContent);
+}
+
+describe('UserProfileProfilePanel', () => {
+  it('renders the account sections the instance enables', async () => {
+    serveFapi({ client: fapiClient([fapiSession({ id: 'sess_1', user: alice })]) });
+    await renderWithClerk(<UserProfileProfilePanel />);
+
+    expect(screen.getByRole('heading', { level: 2, name: 'Account' })).toBeInTheDocument();
+    expect(sectionHeadings()).toEqual(['Profile', 'Email', 'Danger zone']);
+  });
+
+  it('renders only the sections passed as children, in their order', async () => {
+    serveFapi({ client: fapiClient([fapiSession({ id: 'sess_1', user: alice })]) });
+    await renderWithClerk(
+      <UserProfileProfilePanel>
+        <UserProfileEmailSection />
+        <UserProfileProfileSection />
+      </UserProfileProfilePanel>,
+    );
+
+    expect(sectionHeadings()).toEqual(['Email', 'Profile']);
+  });
+
+  it('keeps the panel title when every child section is hidden', async () => {
+    serveFapi({ client: fapiClient() });
+    await renderWithClerk(<UserProfileProfilePanel />);
+
+    expect(screen.getByRole('heading', { level: 2, name: 'Account' })).toBeInTheDocument();
+    expect(screen.queryAllByRole('heading', { level: 3 })).toHaveLength(0);
+  });
+});

packages/mosaic/src/features/user-profile/__tests__/user-profile-profile-panel.view.test.tsx

@@ -32,22 +32,6 @@ describe('UserProfileProfilePanelView', () => {
     expect(screen.queryByRole('tab')).toBeNull();
   });
 
-  it('places the sections in the order of the composed profile page', () => {
-    renderView({
-      dangerSlot: <div data-testid='danger' />,
-      web3WalletsSlot: <div data-testid='web3' />,
-      enterpriseAccountsSlot: <div data-testid='enterprise' />,
-      connectedAccountsSlot: <div data-testid='connected' />,
-      phoneSlot: <div data-testid='phone' />,
-      emailSlot: <div data-testid='email' />,
-      profileSlot: <div data-testid='profile' />,
-    });
-
-    const order = ['profile', 'email', 'phone', 'connected', 'enterprise', 'web3', 'danger'];
-    const rendered = Array.from(document.querySelectorAll('[data-testid]'), node => node.getAttribute('data-testid'));
-    expect(rendered).toEqual(order);
-  });
-
   it('keeps the final wallet confirmation mounted until removal settles', async () => {
     const user = userEvent.setup();
     const titleRef = createRef<HTMLDivElement>();
@@ -57,7 +41,7 @@ describe('UserProfileProfilePanelView', () => {
     });
     const { rerender } = renderView({
       titleRef,
-      web3WalletsSlot: (
+      children: (
         <UserProfileWeb3WalletsSectionView
           wallets={[{ id: 'wallet_1', provider: 'MetaMask', address: '0x1234', isVerified: true }]}
           fallbackFocus={() => titleRef.current}
@@ -70,16 +54,13 @@ describe('UserProfileProfilePanelView', () => {
     await user.click(within(screen.getByRole('alertdialog')).getByRole('button', { name: 'Remove' }));
     rerender(
       <MosaicProvider>
-        <UserProfileProfilePanelView
-          titleRef={titleRef}
-          web3WalletsSlot={
-            <UserProfileWeb3WalletsSectionView
-              wallets={[]}
-              fallbackFocus={() => titleRef.current}
-              onRemove={onRemoveWeb3Wallet}
-            />
-          }
-        />
+        <UserProfileProfilePanelView titleRef={titleRef}>
+          <UserProfileWeb3WalletsSectionView
+            wallets={[]}
+            fallbackFocus={() => titleRef.current}
+            onRemove={onRemoveWeb3Wallet}
+          />
+        </UserProfileProfilePanelView>
       </MosaicProvider>,
     );
     expect(screen.queryByRole('heading', { name: 'Web3 wallets' })).not.toBeInTheDocument();
@@ -93,7 +74,7 @@ describe('UserProfileProfilePanelView', () => {
 
   it('renders the danger zone when provided', () => {
     renderView({
-      dangerSlot: <DeleteAccount />,
+      children: <DeleteAccount />,
     });
 
     expect(screen.getByRole('heading', { level: 3, name: 'Danger zone' })).toBeInTheDocument();
@@ -103,27 +84,9 @@ describe('UserProfileProfilePanelView', () => {
     );
   });
 
-  it('places enterprise accounts before Web3 wallets and the danger zone', () => {
-    renderView({
-      web3WalletsSlot: (
-        <UserProfileWeb3WalletsSectionView
-          wallets={[{ id: 'wallet_1', provider: 'MetaMask', address: '0x1234', isVerified: true }]}
-        />
-      ),
-      enterpriseAccountsSlot: <div data-testid='enterprise'>Enterprise accounts</div>,
-      dangerSlot: <DeleteAccount />,
-    });
-
-    const wallets = screen.getByRole('group', { name: 'Web3 wallets' });
-    const enterprise = screen.getByTestId('enterprise');
-    const danger = screen.getByRole('heading', { name: 'Danger zone' });
-    expect(enterprise.compareDocumentPosition(wallets) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-    expect(enterprise.compareDocumentPosition(danger) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
-  });
-
   it('renders Web3 images inside icon frames', () => {
     const { container } = renderView({
-      web3WalletsSlot: (
+      children: (
         <UserProfileWeb3WalletsSectionView
           wallets={[
             { id: 'metamask', provider: 'MetaMask', address: 'test', isVerified: true, iconUrl: '/metamask.svg' },
@@ -142,7 +105,7 @@ describe('UserProfileProfilePanelView', () => {
 
   it('composes linked wallets and available providers', () => {
     renderView({
-      web3WalletsSlot: (
+      children: (
         <UserProfileWeb3WalletsSectionView
           wallets={[
             {