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 index 191fa5c8cbf5d..1c44236e7a03e 100644 --- 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,30 +37,30 @@ 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(); - 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 () => { @@ -66,42 +68,34 @@ describe.skip('AssigneesFilterPopover', () => { const props = { ...defaultProps, onSelectionChange }; appMockRender.render(); - await waitFor(() => { - userEvent.click(screen.getByTestId('options-filter-popover-button-assignees')); - expect(screen.getByText('wet_dingo@elastic.co')); - }); + userEvent.click(await screen.findByTestId('options-filter-popover-button-assignees')); + expect(await screen.findByText('wet_dingo@elastic.co')); await waitForEuiPopoverOpen(); - fireEvent.change(screen.getByPlaceholderText('Search users'), { target: { value: 'dingo' } }); - userEvent.click(screen.getByText('WD')); - userEvent.click(screen.getByText('damaged_raccoon@elastic.co')); - - 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('damaged_raccoon@elastic.co')); + + 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(); - 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(); - 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(); - 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(); - 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(); - 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(); - 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,14 +184,12 @@ describe.skip('AssigneesFilterPopover', () => { appMockRender.render(); - 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 () => { @@ -213,22 +197,18 @@ describe.skip('AssigneesFilterPopover', () => { const props = { ...defaultProps, onSelectionChange }; appMockRender.render(); - 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 () => { @@ -236,42 +216,29 @@ describe.skip('AssigneesFilterPopover', () => { const props = { ...defaultProps, onSelectionChange }; appMockRender.render(); - 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('damaged_raccoon@elastic.co')); - - 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('damaged_raccoon@elastic.co')); + + 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 () => { @@ -279,13 +246,14 @@ describe.skip('AssigneesFilterPopover', () => { const props = { ...defaultProps, onSelectionChange }; appMockRender.render(); - 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(); - 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'); }); });