test(clerk-js): Add test case for displaying custom roles in select menu

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

@@ -1,6 +1,7 @@
 import type { MembershipRole, OrganizationInvitationResource } from '@clerk/types';
 import { describe } from '@jest/globals';
 import { waitFor } from '@testing-library/dom';
+import { act } from '@testing-library/react';
 import React from 'react';
 
 import { ClerkAPIResponseError } from '../../../../core/resources';
@@ -18,7 +19,7 @@ describe('InviteMembersPage', () => {
     });
 
     fixtures.clerk.organization?.getRoles.mockRejectedValue(null);
-    const { getByText } = render(<InviteMembersPage />, { wrapper });
+    const { getByText } = await act(() => render(<InviteMembersPage />, { wrapper }));
     expect(getByText('Invite new members to this organization')).toBeDefined();
   });
 
@@ -62,6 +63,43 @@ describe('InviteMembersPage', () => {
       });
     });
 
+    it('fetches custom role and sends invite to email entered and teacher role when clicking Send', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withUser({
+          email_addresses: ['[email protected]'],
+          organization_memberships: [{ name: 'Org1', role: 'admin' }],
+        });
+      });
+
+      fixtures.clerk.organization?.getRoles.mockResolvedValueOnce({
+        data: [
+          {
+            pathRoot: '',
+            reload: jest.fn(),
+            id: '1',
+            description: '',
+            updatedAt: new Date(),
+            createdAt: new Date(),
+            permissions: [],
+            name: 'Teacher',
+            key: 'org:teacher',
+          },
+        ],
+        total_count: 1,
+      });
+      fixtures.clerk.organization?.inviteMembers.mockResolvedValueOnce([{}] as OrganizationInvitationResource[]);
+      const { getByRole, userEvent, getByTestId, getByText } = render(<InviteMembersPage />, { wrapper });
+      await userEvent.type(getByTestId('tag-input'), '[email protected],');
+      await userEvent.click(getByRole('button', { name: 'Select an option' }));
+      await userEvent.click(getByText('Teacher'));
+      await userEvent.click(getByRole('button', { name: 'Send invitations' }));
+      expect(fixtures.clerk.organization?.inviteMembers).toHaveBeenCalledWith({
+        emailAddresses: ['[email protected]'],
+        role: 'org:teacher' as MembershipRole,
+      });
+    });
+
     it('sends invites to multiple emails', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {
         f.withOrganizations();