[ResponseOps][Cases] Fix multi select filter flaky test (elastic#190079)

## Summary

Fixes elastic#183663

Updated all `getBy` to `findBy` and added `await waitFor ` for checking
method calls

x-pack/plugins/cases/public/components/all_cases/multi_select_filter.test.tsx

@@ -6,12 +6,11 @@
  */
 import React from 'react';
 import { MultiSelectFilter } from './multi_select_filter';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
 
-// FLAKY: https://github.com/elastic/kibana/issues/183663
-describe.skip('multi select filter', () => {
+describe('multi select filter', () => {
   it('should render the amount of options available', async () => {
     const onChange = jest.fn();
     const props = {
@@ -29,10 +28,10 @@ describe.skip('multi select filter', () => {
 
     render(<MultiSelectFilter {...props} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Tags' }));
+    userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('4 options')).toBeInTheDocument();
+    expect(await screen.findByText('4 options')).toBeInTheDocument();
   });
 
   it('hides the limit reached warning when a selected tag is removed', async () => {
@@ -53,14 +52,17 @@ describe.skip('multi select filter', () => {
 
     const { rerender } = render(<MultiSelectFilter {...props} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Tags' }));
+    userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('Limit reached')).toBeInTheDocument();
+    expect(await screen.findByText('Limit reached')).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('option', { name: 'tag a' }));
+    userEvent.click(await screen.findByRole('option', { name: 'tag a' }));
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] });
+    });
 
-    expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] });
     rerender(<MultiSelectFilter {...props} selectedOptionKeys={[]} />);
 
     expect(screen.queryByText('Limit reached')).not.toBeInTheDocument();
@@ -84,20 +86,23 @@ describe.skip('multi select filter', () => {
 
     const { rerender } = render(<MultiSelectFilter {...props} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Tags' }));
+    userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
     await waitForEuiPopoverOpen();
 
     expect(screen.queryByText('Limit reached')).not.toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('option', { name: 'tag b' }));
+    userEvent.click(await screen.findByRole('option', { name: 'tag b' }));
 
-    expect(onChange).toHaveBeenCalledWith({
-      filterId: 'tags',
-      selectedOptionKeys: ['tag a', 'tag b'],
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith({
+        filterId: 'tags',
+        selectedOptionKeys: ['tag a', 'tag b'],
+      });
     });
+
     rerender(<MultiSelectFilter {...props} selectedOptionKeys={['tag a', 'tag b']} />);
 
-    expect(screen.getByText('Limit reached')).toBeInTheDocument();
+    expect(await screen.findByText('Limit reached')).toBeInTheDocument();
   });
 
   it('should not call onChange when the limit has been reached', async () => {
@@ -118,14 +123,16 @@ describe.skip('multi select filter', () => {
 
     render(<MultiSelectFilter {...props} />);
 
-    userEvent.click(screen.getByRole('button', { name: 'Tags' }));
+    userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
     await waitForEuiPopoverOpen();
 
-    expect(screen.getByText('Limit reached')).toBeInTheDocument();
+    expect(await screen.findByText('Limit reached')).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('option', { name: 'tag b' }));
+    userEvent.click(await screen.findByRole('option', { name: 'tag b' }));
 
-    expect(onChange).not.toHaveBeenCalled();
+    await waitFor(() => {
+      expect(onChange).not.toHaveBeenCalled();
+    });
   });
 
   it('should remove selected option if it suddenly disappeared from the list', async () => {
@@ -144,7 +151,10 @@ describe.skip('multi select filter', () => {
 
     const { rerender } = render(<MultiSelectFilter {...props} />);
     rerender(<MultiSelectFilter {...props} options={[{ key: 'tag a', label: 'tag a' }]} />);
-    expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith({ filterId: 'tags', selectedOptionKeys: [] });
+    });
   });
 
   it('activates custom renderOption when set', async () => {
@@ -164,12 +174,12 @@ describe.skip('multi select filter', () => {
     };
 
     render(<MultiSelectFilter {...props} />);
-    userEvent.click(screen.getByRole('button', { name: 'Tags' }));
+    userEvent.click(await screen.findByRole('button', { name: 'Tags' }));
     await waitForEuiPopoverOpen();
-    expect(screen.getAllByTestId(TEST_ID).length).toBe(2);
+    expect((await screen.findAllByTestId(TEST_ID)).length).toBe(2);
   });
 
-  it('should not show the amount of options if hideActiveOptionsNumber is active', () => {
+  it('should not show the amount of options if hideActiveOptionsNumber is active', async () => {
     const onChange = jest.fn();
     const props = {
       id: 'tags',
@@ -184,7 +194,7 @@ describe.skip('multi select filter', () => {
     };
 
     const { rerender } = render(<MultiSelectFilter {...props} />);
-    expect(screen.queryByLabelText('1 active filters')).toBeInTheDocument();
+    expect(await screen.findByLabelText('1 active filters')).toBeInTheDocument();
     rerender(<MultiSelectFilter {...props} hideActiveOptionsNumber />);
     expect(screen.queryByLabelText('1 active filters')).not.toBeInTheDocument();
   });