chore: update tests

Author: thiskevinwang

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

@@ -196,7 +196,7 @@ export const RoleSelect = (props: {
             textWrap: 'nowrap',
           }))
         }
-        isDisabled={isDisabled || !selectedRole}
+        isDisabled={isDisabled || (!!value && fetchedRoles.length > 0 && !selectedRole)}
       >
         {selectedRole?.label || selectedRole?.value ? (
           <Flex

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

@@ -474,6 +474,69 @@ describe('OrganizationMembers', () => {
     expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
     expect(getByText('You')).toBeInTheDocument();
   });
+  it('disables the role select when the membership role does not map to fetched roles', async () => {
+    const membersList: OrganizationMembershipResource[] = [
+      createFakeMember({ id: '1', orgId: '1', role: 'admin', identifier: 'test_user1' }),
+      createFakeMember({
+        id: '2',
+        orgId: '1',
+        role: 'org:managed_admin',
+        roleName: 'Managed Admin',
+        identifier: 'test_user2',
+      }),
+    ];
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        id: '1',
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(
+      Promise.resolve({
+        data: membersList,
+        total_count: 2,
+      }),
+    );
+    fixtures.clerk.organization?.getRoles.mockResolvedValue({
+      total_count: 2,
+      data: [
+        {
+          pathRoot: '',
+          reload: jest.fn(),
+          id: 'member',
+          key: 'member',
+          name: 'Member',
+          description: '',
+          permissions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          pathRoot: '',
+          reload: jest.fn(),
+          id: 'admin',
+          key: 'admin',
+          name: 'Admin',
+          description: '',
+          permissions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      ],
+    });
+
+    const { container, getByText, getByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitForLoadingCompleted(container);
+
+    expect(fixtures.clerk.organization?.getMemberships).toHaveBeenCalled();
+    expect(getByText('You')).toBeInTheDocument();
+    expect(getByText('Managed Admin')).toBeInTheDocument();
+    await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
+  });
 
   describe('InviteMembersScreen', () => {
     it('shows the invite screen when user clicks on Invite button', async () => {

packages/clerk-js/src/ui/components/OrganizationProfile/__tests__/utils.ts

@@ -16,6 +16,7 @@ type FakeMemberParams = {
   id: string;
   orgId: string;
   role?: OrganizationCustomRoleKey;
+  roleName?: string;
   identifier?: string;
   firstName?: string;
   lastName?: string;
@@ -30,6 +31,7 @@ export const createFakeMember = (params: FakeMemberParams): OrganizationMembersh
     organization: { id: params.orgId } as any as OrganizationResource,
     id: params.id,
     role: params?.role || 'admin',
+    roleName: params?.roleName || 'Admin',
     createdAt: params?.createdAt || new Date(),
     updatedAt: new Date(),
     publicMetadata: {},
@@ -79,6 +81,7 @@ export const createFakeDomain = (params: FakeDomainParams): OrganizationDomainRe
 type FakeInvitationParams = {
   id: string;
   role?: OrganizationCustomRoleKey;
+  roleName?: string;
   status?: OrganizationInvitationStatus;
   emailAddress: string;
   organizationId: string;
@@ -93,6 +96,7 @@ export const createFakeOrganizationInvitation = (params: FakeInvitationParams):
     organizationId: params.organizationId,
     publicMetadata: {} as any,
     role: params.role || 'basic_member',
+    roleName: params.roleName || 'Basic Member',
     status: params.status || 'pending',
     createdAt: params?.createdAt || new Date(),
     updatedAt: new Date(),