Add UI tests

Author: LauraBeatris

packages/clerk-js/src/core/resources/Organization.ts

@@ -21,7 +21,6 @@ import type {
   OrganizationMembershipRequestJSON,
   OrganizationMembershipRequestResource,
   OrganizationResource,
-  RoleJSON,
   SetOrganizationLogoParams,
   UpdateMembershipParams,
   UpdateOrganizationParams,
@@ -96,11 +95,7 @@ export class Organization extends BaseResource implements OrganizationResource {
         forceUpdateClient: true,
       },
     ).then(res => {
-      const {
-        data: roles,
-        total_count,
-        has_role_set_migration,
-      } = res?.response as unknown as ClerkPaginatedResponse<RoleJSON> & { has_role_set_migration?: boolean };
+      const { data: roles, total_count, has_role_set_migration } = res?.response as unknown as GetRolesResponse;
 
       return {
         data: roles.map(role => new Role(role)),

packages/ui/src/components/OrganizationProfile/__tests__/InviteMembersPage.test.tsx

@@ -21,6 +21,57 @@ describe('InviteMembersPage', () => {
     clearFetchCache();
   });
 
+  it('disables the role select when role set migration is in progress', async () => {
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', role: 'admin' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getInvitations.mockRejectedValue(null);
+    fixtures.clerk.organization?.getRoles.mockResolvedValue({
+      total_count: 2,
+      has_role_set_migration: true,
+      data: [
+        {
+          pathRoot: '',
+          reload: vi.fn(),
+          id: 'member',
+          key: 'member',
+          name: 'member',
+          description: '',
+          permissions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          pathRoot: '',
+          reload: vi.fn(),
+          id: 'admin',
+          key: 'admin',
+          name: 'Admin',
+          description: '',
+          permissions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      ],
+    });
+
+    const { getByRole } = render(
+      <Action.Root>
+        <InviteMembersScreen />
+      </Action.Root>,
+      { wrapper },
+    );
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: /select role/i })).toBeDisabled();
+    });
+  });
+
   it('renders the component', async () => {
     const { wrapper, fixtures } = await createFixtures(f => {
       f.withOrganizations();

packages/ui/src/components/OrganizationProfile/__tests__/OrganizationMembers.test.tsx

@@ -561,6 +561,84 @@ describe('OrganizationMembers', () => {
     await waitFor(() => expect(getByRole('button', { name: 'Managed Admin' })).toBeDisabled());
   });
 
+  it('disables the role select when role set migration is in progress', async () => {
+    const membersList: OrganizationMembershipResource[] = [
+      createFakeMember({
+        id: '1',
+        orgId: '1',
+        role: 'admin',
+        identifier: 'test_user1',
+        firstName: 'First1',
+        lastName: 'Last1',
+        createdAt: new Date('2022-01-01'),
+      }),
+      createFakeMember({
+        id: '2',
+        orgId: '1',
+        role: 'member',
+        identifier: 'test_user2',
+        firstName: 'First2',
+        lastName: 'Last2',
+        createdAt: new Date('2022-01-01'),
+      }),
+    ];
+    const { wrapper, fixtures } = await createFixtures(f => {
+      f.withOrganizations();
+      f.withUser({
+        email_addresses: ['test@clerk.com'],
+        organization_memberships: [{ name: 'Org1', id: '1' }],
+      });
+    });
+
+    fixtures.clerk.organization?.getInvitations.mockRejectedValue(null);
+
+    fixtures.clerk.organization?.getMemberships.mockReturnValue(
+      Promise.resolve({
+        data: membersList,
+        total_count: 2,
+      }),
+    );
+
+    fixtures.clerk.organization?.getRoles.mockResolvedValue({
+      total_count: 2,
+      has_role_set_migration: true,
+      data: [
+        {
+          pathRoot: '',
+          reload: vi.fn(),
+          id: 'member',
+          key: 'member',
+          name: 'Member',
+          description: '',
+          permissions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+        {
+          pathRoot: '',
+          reload: vi.fn(),
+          id: 'admin',
+          key: 'admin',
+          name: 'Admin',
+          description: '',
+          permissions: [],
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        },
+      ],
+    });
+
+    const { container, queryAllByRole } = render(<OrganizationMembers />, { wrapper });
+
+    await waitForLoadingCompleted(container);
+
+    const adminButtons = queryAllByRole('button', { name: 'Admin' });
+    const memberButtons = queryAllByRole('button', { name: 'Member' });
+
+    adminButtons.forEach(button => expect(button).toBeDisabled());
+    memberButtons.forEach(button => expect(button).toBeDisabled());
+  });
+
   describe('InviteMembersScreen', () => {
     it('shows the invite screen when user clicks on Invite button', async () => {
       const { wrapper, fixtures } = await createFixtures(f => {