[Cases] Fix case view participants tests

x-pack/plugins/cases/public/components/case_view/components/case_view_activity.test.tsx

@@ -451,51 +451,6 @@ describe('Case View Page activity tab', () => {
   });
 
   describe('Case users', () => {
-    // FLAKY: https://github.com/elastic/kibana/issues/152204
-    describe.skip('Participants', () => {
-      it('should render the participants correctly', async () => {
-        appMockRender = createAppMockRenderer();
-        appMockRender.render(<CaseViewActivity {...caseProps} />);
-
-        const participantsSection = within(
-          await screen.findByTestId('case-view-user-list-participants')
-        );
-
-        expect(await participantsSection.findByText('Participant 1')).toBeInTheDocument();
-        expect(
-          await participantsSection.findByText('participant_2@elastic.co')
-        ).toBeInTheDocument();
-        expect(await participantsSection.findByText('participant_3')).toBeInTheDocument();
-        expect(await participantsSection.findByText('P4')).toBeInTheDocument();
-        expect(await participantsSection.findByText('Participant 5')).toBeInTheDocument();
-      });
-
-      it('should render Unknown users correctly', async () => {
-        appMockRender = createAppMockRenderer();
-        appMockRender.render(<CaseViewActivity {...caseProps} />);
-
-        const participantsSection = within(
-          await screen.findByTestId('case-view-user-list-participants')
-        );
-
-        expect(await participantsSection.findByText('Unknown')).toBeInTheDocument();
-      });
-
-      it('should render assignees in the participants section', async () => {
-        appMockRender = createAppMockRenderer();
-        appMockRender.render(<CaseViewActivity {...caseProps} />);
-
-        const participantsSection = within(
-          await screen.findByTestId('case-view-user-list-participants')
-        );
-
-        expect(await participantsSection.findByText('Unknown')).toBeInTheDocument();
-        expect(await participantsSection.findByText('Fuzzy Marten')).toBeInTheDocument();
-        expect(await participantsSection.findByText('elastic')).toBeInTheDocument();
-        expect(await participantsSection.findByText('Misty Mackerel')).toBeInTheDocument();
-      });
-    });
-
     describe('Assignees', () => {
       it('should render assignees in the participants section', async () => {
         appMockRender = createAppMockRenderer({ license: platinumLicense });

x-pack/plugins/cases/public/components/case_view/components/user_list.test.tsx

@@ -6,13 +6,15 @@
  */
 
 import React from 'react';
+import { screen } from '@testing-library/react';
 import { UserList } from './user_list';
 import * as i18n from '../translations';
 import { basicCase } from '../../../containers/mock';
 import { useCaseViewNavigation } from '../../../common/navigation/hooks';
 import type { AppMockRenderer } from '../../../common/mock';
 import { createAppMockRenderer } from '../../../common/mock';
 import userEvent from '@testing-library/user-event';
+import { userProfilesMap } from '../../../containers/user_profiles/api.mock';
 
 jest.mock('../../../common/navigation/hooks');
 
@@ -39,7 +41,7 @@ describe('UserList ', () => {
   });
 
   it('triggers mailto when email icon clicked', () => {
-    const result = appMockRender.render(
+    appMockRender.render(
       <UserList
         theCase={basicCase}
         headline={i18n.REPORTER}
@@ -51,7 +53,7 @@ describe('UserList ', () => {
       />
     );
 
-    userEvent.click(result.getByTestId('user-list-email-button'));
+    userEvent.click(screen.getByTestId('user-list-email-button'));
 
     expect(open).toBeCalledWith(
       `mailto:${user.email}?subject=${i18n.EMAIL_SUBJECT(title)}&body=${i18n.EMAIL_BODY(caseLink)}`,
@@ -60,28 +62,131 @@ describe('UserList ', () => {
   });
 
   it('sort the users correctly', () => {
-    const result = appMockRender.render(
+    appMockRender.render(
       <UserList
         theCase={basicCase}
         headline={i18n.REPORTER}
         users={[
+          {
+            user: { ...user, username: 'test', full_name: null, email: null },
+          },
           {
             user: { ...user, full_name: 'Cases' },
           },
           {
             user: { ...user, username: 'elastic', email: 'elastic@elastic.co', full_name: null },
           },
+        ]}
+      />
+    );
+
+    const users = screen.getAllByTestId('user-profile-username');
+
+    expect(users[0].textContent).toBe('Cases');
+    expect(users[1].textContent).toBe('elastic@elastic.co');
+    expect(users[2].textContent).toBe('test');
+  });
+
+  it('return null if no users', () => {
+    const result = appMockRender.render(
+      <UserList theCase={basicCase} headline={i18n.REPORTER} users={[]} />
+    );
+
+    expect(result.container).toBeEmptyDOMElement();
+  });
+
+  it('shows the loading spinner if loading', () => {
+    appMockRender.render(
+      <UserList
+        theCase={basicCase}
+        headline={i18n.REPORTER}
+        users={[
           {
-            user: { ...user, username: 'test', full_name: null, email: null },
+            user: { ...user, full_name: user.fullName },
           },
         ]}
+        loading={true}
       />
     );
 
-    const userProfiles = result.getAllByTestId('user-profile-username');
+    expect(screen.getByTestId('users-list-loading-spinner')).toBeEmptyDOMElement();
+  });
+
+  it('should render users with user profiles correctly', () => {
+    appMockRender.render(
+      <UserList
+        theCase={basicCase}
+        headline={i18n.REPORTER}
+        userProfiles={userProfilesMap}
+        users={[
+          {
+            user: {
+              username: null,
+              email: null,
+              full_name: null,
+            },
+            uid: 'u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0',
+          },
+        ]}
+      />
+    );
+
+    const userElement = screen.getByTestId('user-profile-username');
+    expect(userElement.textContent).toBe('Damaged Raccoon');
+  });
+
+  it('should not render invalid users', () => {
+    appMockRender.render(
+      <UserList
+        theCase={basicCase}
+        headline={i18n.REPORTER}
+        userProfiles={userProfilesMap}
+        users={[
+          {
+            user: {
+              username: null,
+              email: null,
+              full_name: null,
+              uid: null,
+            },
+          },
+          {
+            user: {
+              username: 'damaged_raccoon',
+              email: 'damaged_raccoon@elastic.co',
+              full_name: 'Damaged Raccoon',
+            },
+            uid: 'u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0',
+          },
+        ]}
+      />
+    );
+
+    const users = screen.getAllByTestId('user-profile-username');
+
+    expect(users.length).toBe(1);
+    expect(users[0].textContent).toBe('Damaged Raccoon');
+  });
+
+  it('should render Unknown users correctly', () => {
+    appMockRender.render(
+      <UserList
+        theCase={basicCase}
+        headline={i18n.REPORTER}
+        userProfiles={userProfilesMap}
+        users={[
+          {
+            user: {
+              username: null,
+              email: null,
+              full_name: null,
+            },
+            uid: 'not-exist',
+          },
+        ]}
+      />
+    );
 
-    expect(userProfiles[0].textContent).toBe('Cases');
-    expect(userProfiles[1].textContent).toBe('elastic@elastic.co');
-    expect(userProfiles[2].textContent).toBe('test');
+    expect(screen.getByTestId('user-profile-username').textContent).toBe('Unknown');
   });
 });

x-pack/plugins/cases/public/components/case_view/components/user_list.tsx

@@ -106,7 +106,7 @@ export const UserList: React.FC<UserListProps> = React.memo(
           {loading && (
             <EuiFlexGroup>
               <EuiFlexItem>
-                <EuiLoadingSpinner />
+                <EuiLoadingSpinner data-test-subj="users-list-loading-spinner" />
               </EuiFlexItem>
             </EuiFlexGroup>
           )}

x-pack/plugins/cases/public/components/user_profiles/user_converter.ts

@@ -25,7 +25,7 @@ export const convertToUserInfo = (
       // we couldn't find a valid profile so let's try the username
       return createWithUsername(username, user);
     } else {
-      // didn't the username wasn't valid so we'll show an unknown user
+      // the username wasn't valid so we'll show an unknown user
       return { key: user.profileUid, userInfo: {} };
     }
   } else if (isValidString(username)) {

x-pack/test/functional/services/cases/api.ts

@@ -24,13 +24,22 @@ import { User } from '../../../cases_api_integration/common/lib/authentication/t
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { generateRandomCaseWithoutConnector } from './helpers';
 
-type OmitSupertest<T> = Omit<T, 'supertest'>;
+type GetParams<T extends (...args: any) => any> = Omit<Parameters<T>[0], 'supertest'>;
 
 export function CasesAPIServiceProvider({ getService }: FtrProviderContext) {
   const kbnSupertest = getService('supertest');
   const es = getService('es');
   const supertestWithoutAuth = getService('supertestWithoutAuth');
 
+  const getSuperTest = (hasAuth: boolean) => (hasAuth ? supertestWithoutAuth : kbnSupertest);
+
+  const createApiFunction =
+    <T extends (...args: any) => any>(apiFunc: T) =>
+    (params: GetParams<typeof apiFunc>): ReturnType<typeof apiFunc> => {
+      const supertest = getSuperTest(Boolean(params.auth));
+      return apiFunc({ supertest, ...params });
+    };
+
   return {
     async createCase(overwrites: Partial<CasePostRequest> = {}): Promise<Case> {
       const caseData = {
@@ -56,15 +65,7 @@ export function CasesAPIServiceProvider({ getService }: FtrProviderContext) {
       await deleteAllCaseItems(es);
     },
 
-    async createAttachment({
-      caseId,
-      params,
-    }: {
-      caseId: Parameters<typeof createComment>[0]['caseId'];
-      params: Parameters<typeof createComment>[0]['params'];
-    }): Promise<Case> {
-      return createComment({ supertest: kbnSupertest, params, caseId });
-    },
+    createAttachment: createApiFunction(createComment),
 
     async setStatus(
       caseId: string,
@@ -96,9 +97,7 @@ export function CasesAPIServiceProvider({ getService }: FtrProviderContext) {
       return suggestUserProfiles({ supertest: kbnSupertest, req: options });
     },
 
-    async getCase({ caseId }: OmitSupertest<Parameters<typeof getCase>[0]>): Promise<Case> {
-      return getCase({ supertest: kbnSupertest, caseId });
-    },
+    getCase: createApiFunction(getCase),
 
     async generateUserActions({
       caseId,

x-pack/test/functional/services/cases/single_case_view.ts

@@ -143,5 +143,31 @@ export function CasesSingleViewServiceProvider({ getService, getPageObject }: Ft
         await testSubjects.missingOrFail('euiSelectableList');
       });
     },
+
+    async refresh() {
+      await testSubjects.click('case-refresh');
+    },
+
+    async getReporter() {
+      await testSubjects.existOrFail('case-view-user-list-reporter');
+
+      const reporter = await testSubjects.findAllDescendant(
+        'user-profile-username',
+        await testSubjects.find('case-view-user-list-reporter')
+      );
+
+      return reporter[0];
+    },
+
+    async getParticipants() {
+      await testSubjects.existOrFail('case-view-user-list-participants');
+
+      const participants = await testSubjects.findAllDescendant(
+        'user-profile-username',
+        await testSubjects.find('case-view-user-list-participants')
+      );
+
+      return participants;
+    },
   };
 }