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,50 @@ 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,
+        pageSize: 10,
+        status: 'pending',
+      });
+      expect(queryByText('OrgOne')).toBeInTheDocument();
+      expect(queryByText('OrgTwo')).toBeInTheDocument();
+    });
+
+    it.todo('switches between active organizations when one is clicked');
     it("switches between active organizations when one is clicked'", async () => {
       const { wrapper, props, fixtures } = await createFixtures(f => {
         f.withOrganizations();

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,
+  };
+};