[Cases]Flaky assignees filter (elastic#174995)

Fixes elastic#174520 ## Summary The usual procedure. In this case, I also had to explicitly mock a hook(`useSuggestUserProfilesMock`) to make the tests pass.
ashokaditya · Jan 18, 2024 · 8b5d3bb · 8b5d3bb
1 parent 10ab229
commit 8b5d3bb
Showing 1 changed file with 109 additions and 144 deletions.
diff --git a/x-pack/plugins/cases/public/components/all_cases/assignees_filter.test.tsx b/x-pack/plugins/cases/public/components/all_cases/assignees_filter.test.tsx
@@ -16,11 +16,13 @@ import type { AssigneesFilterPopoverProps } from './assignees_filter';
 import { AssigneesFilterPopover } from './assignees_filter';
 import { userProfiles } from '../../containers/user_profiles/api.mock';
 import { MAX_ASSIGNEES_FILTER_LENGTH } from '../../../common/constants';
+import { useSuggestUserProfiles } from '../../containers/user_profiles/use_suggest_user_profiles';
 
-jest.mock('../../containers/user_profiles/api');
+jest.mock('../../containers/user_profiles/use_suggest_user_profiles');
 
-// FLAKY: https://github.com/elastic/kibana/issues/174520
-describe.skip('AssigneesFilterPopover', () => {
+const useSuggestUserProfilesMock = useSuggestUserProfiles as jest.Mock;
+
+describe('AssigneesFilterPopover', () => {
   let appMockRender: AppMockRenderer;
   let defaultProps: AssigneesFilterPopoverProps;
 
@@ -35,73 +37,65 @@ describe.skip('AssigneesFilterPopover', () => {
       isLoading: false,
       onSelectionChange: jest.fn(),
     };
+    useSuggestUserProfilesMock.mockReturnValue({ data: userProfiles, isLoading: false });
   });
 
   it('calls onSelectionChange when 1 user is selected', async () => {
     const onSelectionChange = jest.fn();
     const props = { ...defaultProps, onSelectionChange };
+
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByPlaceholderText('Search users')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+
     await waitForEuiPopoverOpen();
 
-    fireEvent.change(screen.getByPlaceholderText('Search users'), { target: { value: 'dingo' } });
-    userEvent.click(screen.getByText('WD'));
-
-    expect(onSelectionChange.mock.calls[0][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          "u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0",
-        ],
-      }
-    `);
+    fireEvent.change(await screen.findByPlaceholderText('Search users'), {
+      target: { value: 'dingo' },
+    });
+    userEvent.click(await screen.findByText('WD'), undefined, { skipPointerEventsCheck: true });
+
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: ['u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0'],
+      });
+    });
   });
 
   it('calls onSelectionChange with a single user when different users are selected', async () => {
     const onSelectionChange = jest.fn();
     const props = { ...defaultProps, onSelectionChange };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('[email protected]'));
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('[email protected]'));
 
     await waitForEuiPopoverOpen();
 
-    fireEvent.change(screen.getByPlaceholderText('Search users'), { target: { value: 'dingo' } });
-    userEvent.click(screen.getByText('WD'));
-    userEvent.click(screen.getByText('[email protected]'));
-
-    expect(onSelectionChange.mock.calls[0][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          "u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0",
-        ],
-      }
-    `);
-    expect(onSelectionChange.mock.calls[1][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          "u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0",
-        ],
-      }
-    `);
+    fireEvent.change(await screen.findByPlaceholderText('Search users'), {
+      target: { value: 'dingo' },
+    });
+    userEvent.click(await screen.findByText('WD'));
+    userEvent.click(await screen.findByText('[email protected]'));
+
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: ['u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0'],
+      });
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: ['u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0'],
+      });
+    });
   });
 
   it('does not show the assigned users total if there are no assigned users', async () => {
     appMockRender.render(<AssigneesFilterPopover {...defaultProps} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('Damaged Raccoon')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('Damaged Raccoon')).toBeInTheDocument();
 
     await waitForEuiPopoverOpen();
 
@@ -115,14 +109,12 @@ describe.skip('AssigneesFilterPopover', () => {
     };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(async () => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('1 filter selected')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('1 filter selected')).toBeInTheDocument();
 
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('Damaged Raccoon')).toBeInTheDocument();
+    expect(await screen.findByText('Damaged Raccoon')).toBeInTheDocument();
   });
 
   it('shows the total when the multiple users are selected', async () => {
@@ -132,28 +124,25 @@ describe.skip('AssigneesFilterPopover', () => {
     };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(async () => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('2 filters selected')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('2 filters selected')).toBeInTheDocument();
 
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('Damaged Raccoon')).toBeInTheDocument();
-    expect(screen.getByText('Physical Dinosaur')).toBeInTheDocument();
+    expect(await screen.findByText('Damaged Raccoon')).toBeInTheDocument();
+    expect(await screen.findByText('Physical Dinosaur')).toBeInTheDocument();
   });
 
   it('shows three users when initially rendered', async () => {
     appMockRender.render(<AssigneesFilterPopover {...defaultProps} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('Wet Dingo')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('Wet Dingo')).toBeInTheDocument();
+
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('Damaged Raccoon')).toBeInTheDocument();
-    expect(screen.getByText('Physical Dinosaur')).toBeInTheDocument();
+    expect(await screen.findByText('Damaged Raccoon')).toBeInTheDocument();
+    expect(await screen.findByText('Physical Dinosaur')).toBeInTheDocument();
   });
 
   it('shows the users sorted alphabetically with the current user at the front', async () => {
@@ -164,27 +153,24 @@ describe.skip('AssigneesFilterPopover', () => {
 
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('Wet Dingo')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('Wet Dingo')).toBeInTheDocument();
+
     await waitForEuiPopoverOpen();
 
-    const assignees = screen.getAllByRole('option');
-    expect(within(assignees[1]).getByText('Wet Dingo')).toBeInTheDocument();
-    expect(within(assignees[2]).getByText('Convenient Orca')).toBeInTheDocument();
-    expect(within(assignees[3]).getByText('Damaged Raccoon')).toBeInTheDocument();
-    expect(within(assignees[4]).getByText('Physical Dinosaur')).toBeInTheDocument();
-    expect(within(assignees[5]).getByText('Silly Hare')).toBeInTheDocument();
+    const assignees = await screen.findAllByRole('option');
+
+    expect(await within(assignees[1]).findByText('Wet Dingo')).toBeInTheDocument();
+    expect(await within(assignees[2]).findByText('Damaged Raccoon')).toBeInTheDocument();
+    expect(await within(assignees[3]).findByText('Physical Dinosaur')).toBeInTheDocument();
   });
 
   it('does not show the number of filters', async () => {
     appMockRender.render(<AssigneesFilterPopover {...defaultProps} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('Wet Dingo')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('Wet Dingo')).toBeInTheDocument();
+
     await waitForEuiPopoverOpen();
 
     expect(screen.queryByText('3')).not.toBeInTheDocument();
@@ -198,94 +184,76 @@ describe.skip('AssigneesFilterPopover', () => {
 
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByText('Wet Dingo')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByText('Wet Dingo')).toBeInTheDocument();
 
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('No assignees')).toBeInTheDocument();
+    expect(await screen.findByText('No assignees')).toBeInTheDocument();
   });
 
   it('filters cases with no assignees', async () => {
     const onSelectionChange = jest.fn();
     const props = { ...defaultProps, onSelectionChange };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByPlaceholderText('Search users')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByPlaceholderText('Search users')).toBeInTheDocument();
     await waitForEuiPopoverOpen();
 
-    userEvent.click(screen.getByText('No assignees'));
+    userEvent.click(await screen.findByText('No assignees'));
 
-    expect(onSelectionChange.mock.calls[0][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          null,
-        ],
-      }
-    `);
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: [null],
+      });
+    });
   });
 
   it('filters cases with no assignees and users', async () => {
     const onSelectionChange = jest.fn();
     const props = { ...defaultProps, onSelectionChange };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByPlaceholderText('Search users')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByPlaceholderText('Search users')).toBeInTheDocument();
+
     await waitForEuiPopoverOpen();
 
-    userEvent.click(screen.getByText('No assignees'));
-    userEvent.click(screen.getByText('WD'));
-    userEvent.click(screen.getByText('[email protected]'));
-
-    expect(onSelectionChange.mock.calls[0][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          null,
-        ],
-      }
-    `);
-
-    expect(onSelectionChange.mock.calls[1][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          "u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0",
-        ],
-      }
-    `);
-
-    expect(onSelectionChange.mock.calls[2][0]).toMatchInlineSnapshot(`
-      Object {
-        "filterId": "assignees",
-        "selectedOptionKeys": Array [
-          "u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0",
-        ],
-      }
-    `);
+    userEvent.click(await screen.findByText('No assignees'));
+    userEvent.click(await screen.findByText('WD'));
+    userEvent.click(await screen.findByText('[email protected]'));
+
+    await waitFor(() => {
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: [null],
+      });
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: ['u_9xDEQqUqoYCnFnPPLq5mIRHKL8gBTo_NiKgOnd5gGk0_0'],
+      });
+      expect(onSelectionChange).toHaveBeenCalledWith({
+        filterId: 'assignees',
+        selectedOptionKeys: ['u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0'],
+      });
+    });
   });
 
   it('hides no assignee filtering when searching', async () => {
     const onSelectionChange = jest.fn();
     const props = { ...defaultProps, onSelectionChange };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(() => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(screen.getByPlaceholderText('Search users')).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(await screen.findByPlaceholderText('Search users')).toBeInTheDocument();
+
     await waitForEuiPopoverOpen();
 
-    fireEvent.change(screen.getByPlaceholderText('Search users'), { target: { value: 'dingo' } });
+    fireEvent.change(await screen.findByPlaceholderText('Search users'), {
+      target: { value: 'dingo' },
+    });
     expect(screen.queryByText('No assignees')).not.toBeInTheDocument();
   });
 
@@ -297,22 +265,19 @@ describe.skip('AssigneesFilterPopover', () => {
     };
     appMockRender.render(<AssigneesFilterPopover {...props} />);
 
-    await waitFor(async () => {
-      userEvent.click(screen.getByTestId('options-filter-popover-button-assignees'));
-      expect(
-        screen.getByText(`${MAX_ASSIGNEES_FILTER_LENGTH} filters selected`)
-      ).toBeInTheDocument();
-    });
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees'));
+    expect(
+      await screen.findByText(`${MAX_ASSIGNEES_FILTER_LENGTH} filters selected`)
+    ).toBeInTheDocument();
 
     await waitForEuiPopoverOpen();
 
     expect(
-      screen.getByText(
+      await screen.findByText(
         `You've selected the maximum number of ${MAX_ASSIGNEES_FILTER_LENGTH} assignees`
       )
     ).toBeInTheDocument();
-
-    expect(screen.getByTitle('No assignees')).toHaveAttribute('aria-selected', 'false');
-    expect(screen.getByTitle('No assignees')).toHaveAttribute('aria-disabled', 'true');
+    expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-selected', 'false');
+    expect(await screen.findByTitle('No assignees')).toHaveAttribute('aria-disabled', 'true');
   });
 });