test(clerk-js): Display list of invitation in OrganizationSwitcher

Author: panteliselef

packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx

@@ -165,11 +165,6 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
         <Flex
           direction={'col'}
           elementDescriptor={descriptors.organizationSwitcherPopoverInvitationActions}
-          sx={[
-            t => ({
-              backgroundColor: t.colors.$blackAlpha50,
-            }),
-          ]}
         >
           <Text
             variant={'smallRegular'}
@@ -182,6 +177,7 @@ export const OrganizationActionList = (props: OrganizationActionListProps) => {
                 alignItems: 'center',
               }),
             ]}
+            // Handle plurals
             localizationKey={localizationKeys(
               (userInvitations.count ?? 0) > 1
                 ? 'organizationSwitcher.invitationCountLabel_many'

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

@@ -5,6 +5,7 @@ import React from 'react';
 import { render } from '../../../../testUtils';
 import { bindCreateFixtures } from '../../../utils/test/createFixtures';
 import { OrganizationSwitcher } from '../OrganizationSwitcher';
+import { createFakeUserOrganizationInvitations } from './utlis';
 
 const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
 
@@ -131,6 +132,49 @@ describe('OrganizationSwitcher', () => {
       expect(queryByRole('button', { name: 'Create Organization' })).not.toBeInTheDocument();
     });
 
+    it('displays a list of user invitations', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['test@clerk.dev'],
+          organization_memberships: [{ name: 'Org1', role: 'basic_member' }],
+          create_organization_enabled: false,
+        });
+      });
+      fixtures.clerk.user?.getOrganizationInvitations.mockReturnValueOnce(
+        Promise.resolve({
+          data: [
+            createFakeUserOrganizationInvitations({
+              id: '1',
+              emailAddress: 'one@clerk.com',
+              publicOrganizationData: {
+                name: 'OrgOne',
+              },
+            }),
+            createFakeUserOrganizationInvitations({
+              id: '2',
+              emailAddress: 'two@clerk.com',
+              publicOrganizationData: { name: 'OrgTwo' },
+            }),
+          ],
+          total_count: 11,
+        }),
+      );
+      const { queryByText, userEvent, getByRole } = render(<OrganizationSwitcher />, {
+        wrapper,
+      });
+
+      await userEvent.click(getByRole('button'));
+
+      expect(fixtures.clerk.user?.getOrganizationInvitations).toHaveBeenCalledWith({
+        initialPage: 1,
+        initialPageSize: 10,
+        status: 'pending',
+      });
+      expect(queryByText('OrgOne')).toBeInTheDocument();
+      expect(queryByText('OrgTwo')).toBeInTheDocument();
+    });
+
     it.todo('switches between active organizations when one is clicked');
   });
 });

packages/clerk-js/src/ui/components/OrganizationSwitcher/__tests__/utlis.ts

@@ -0,0 +1,36 @@
+import { MembershipRole, OrganizationInvitationStatus, UserOrganizationInvitationResource } from '@clerk/types';
+import { jest } from '@jest/globals';
+
+type FakeOrganizationParams = {
+  id: string;
+  createdAt?: Date;
+  emailAddress: string;
+  role?: MembershipRole;
+  status?: OrganizationInvitationStatus;
+  publicOrganizationData?: { hasImage?: boolean; id?: string; imageUrl?: string; name?: string; slug?: string };
+};
+
+export const createFakeUserOrganizationInvitations = (
+  params: FakeOrganizationParams,
+): UserOrganizationInvitationResource => {
+  return {
+    pathRoot: '',
+    emailAddress: params.emailAddress,
+    publicOrganizationData: {
+      hasImage: false,
+      id: '',
+      imageUrl: '',
+      name: '',
+      slug: '',
+      ...params.publicOrganizationData,
+    },
+    role: params.role || 'basic_member',
+    status: params.status || 'pending',
+    id: params.id,
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    publicMetadata: {},
+    accept: jest.fn() as any,
+    reload: jest.fn() as any,
+  };
+};

packages/clerk-js/src/ui/hooks/__tests__/useCoreOrganizationList.test.tsx

@@ -1,8 +1,8 @@
-import type { MembershipRole, OrganizationInvitationStatus, UserOrganizationInvitationResource } from '@clerk/types';
-import { describe, jest } from '@jest/globals';
+import { describe } from '@jest/globals';
 import React from 'react';
 
 import { act, bindCreateFixtures, renderHook, waitFor } from '../../../testUtils';
+import { createFakeUserOrganizationInvitations } from '../../components/OrganizationSwitcher/__tests__/utlis';
 import { useCoreOrganizationList } from '../../contexts';
 
 const { createFixtures } = bindCreateFixtures('OrganizationSwitcher');
@@ -14,30 +14,6 @@ const defaultRenderer = () =>
     },
   });
 
-type FakeOrganizationParams = {
-  id: string;
-  createdAt?: Date;
-  emailAddress: string;
-  role?: MembershipRole;
-  status?: OrganizationInvitationStatus;
-};
-
-const createFakeUserOrganizationInvitations = (params: FakeOrganizationParams): UserOrganizationInvitationResource => {
-  return {
-    pathRoot: '',
-    emailAddress: params.emailAddress,
-    publicOrganizationData: { hasImage: false, id: '', imageUrl: '', name: '', slug: '' },
-    role: params.role || 'basic_member',
-    status: params.status || 'pending',
-    id: params.id,
-    createdAt: params?.createdAt || new Date(),
-    updatedAt: new Date(),
-    publicMetadata: {},
-    accept: jest.fn() as any,
-    reload: jest.fn() as any,
-  };
-};
-
 describe('useOrganizationList', () => {
   it('opens organization profile when "Manage Organization" is clicked', async () => {
     const { wrapper } = await createFixtures(f => {