unskip filter popover tests

elastic · Feb 22, 2024 · fe543d6 · fe543d6
1 parent 880f793
commit fe543d6
Showing 1 changed file with 53 additions and 38 deletions.
diff --git a/x-pack/plugins/cases/public/components/filter_popover/index.test.tsx b/x-pack/plugins/cases/public/components/filter_popover/index.test.tsx
@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { waitForEuiPopoverOpen } from '@elastic/eui/lib/test/rtl';
+import { waitForEuiPopoverOpen, screen } from '@elastic/eui/lib/test/rtl';
+import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import type { AppMockRenderer } from '../../common/mock';
@@ -22,7 +23,7 @@ import { FilterPopover } from '.';
 // FLAKY: https://github.com/elastic/kibana/issues/176684
 // FLAKY: https://github.com/elastic/kibana/issues/176685
 // FLAKY: https://github.com/elastic/kibana/issues/176686
-describe.skip('FilterPopover ', () => {
+describe('FilterPopover ', () => {
   let appMockRender: AppMockRenderer;
   const onSelectedOptionsChanged = jest.fn();
   const tags: string[] = ['coke', 'pepsi'];
@@ -32,8 +33,8 @@ describe.skip('FilterPopover ', () => {
     jest.clearAllMocks();
   });
 
-  it('renders button label correctly', () => {
-    const { getByTestId } = appMockRender.render(
+  it('renders button label correctly', async () => {
+    appMockRender.render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -42,11 +43,11 @@ describe.skip('FilterPopover ', () => {
       />
     );
 
-    expect(getByTestId('options-filter-popover-button-Tags')).toBeInTheDocument();
+    expect(await screen.findByTestId('options-filter-popover-button-Tags')).toBeInTheDocument();
   });
 
   it('renders empty label correctly', async () => {
-    const { getByTestId, getByText } = appMockRender.render(
+    appMockRender.render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -56,15 +57,15 @@ describe.skip('FilterPopover ', () => {
       />
     );
 
-    userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
     await waitForEuiPopoverOpen();
 
-    expect(getByText('No options available')).toBeInTheDocument();
+    expect(await screen.findByText('No options available')).toBeInTheDocument();
   });
 
   it('renders string type options correctly', async () => {
-    const { getByTestId } = appMockRender.render(
+    appMockRender.render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -73,16 +74,16 @@ describe.skip('FilterPopover ', () => {
       />
     );
 
-    userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
     await waitForEuiPopoverOpen();
 
-    expect(getByTestId(`options-filter-popover-item-${tags[0]}`)).toBeInTheDocument();
-    expect(getByTestId(`options-filter-popover-item-${tags[1]}`)).toBeInTheDocument();
+    expect(await screen.findByTestId(`options-filter-popover-item-${tags[0]}`)).toBeInTheDocument();
+    expect(await screen.findByTestId(`options-filter-popover-item-${tags[1]}`)).toBeInTheDocument();
   });
 
   it('should call onSelectionChange with selected option', async () => {
-    const { getByTestId } = appMockRender.render(
+    appMockRender.render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -91,17 +92,19 @@ describe.skip('FilterPopover ', () => {
       />
     );
 
-    userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
     await waitForEuiPopoverOpen();
 
-    userEvent.click(getByTestId(`options-filter-popover-item-${tags[0]}`));
+    userEvent.click(await screen.findByTestId(`options-filter-popover-item-${tags[0]}`));
 
-    expect(onSelectedOptionsChanged).toHaveBeenCalledWith([tags[0]]);
+    await waitFor(() => {
+      expect(onSelectedOptionsChanged).toHaveBeenCalledWith([tags[0]]);
+    });
   });
 
   it('should call onSelectionChange with empty array when option is deselected', async () => {
-    const { getByTestId } = appMockRender.render(
+    appMockRender.render(
       <FilterPopover
         buttonLabel={'Tags'}
         onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -110,13 +113,15 @@ describe.skip('FilterPopover ', () => {
       />
     );
 
-    userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+    userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
     await waitForEuiPopoverOpen();
 
-    userEvent.click(getByTestId(`options-filter-popover-item-${tags[0]}`));
+    userEvent.click(await screen.findByTestId(`options-filter-popover-item-${tags[0]}`));
 
-    expect(onSelectedOptionsChanged).toHaveBeenCalledWith([]);
+    await waitFor(() => {
+      expect(onSelectedOptionsChanged).toHaveBeenCalledWith([]);
+    });
   });
 
   describe('maximum limit', () => {
@@ -125,7 +130,7 @@ describe.skip('FilterPopover ', () => {
     const maxLengthLabel = `You have selected maximum number of ${maxLength} tags to filter`;
 
     it('should show message when maximum options are selected', async () => {
-      const { getByTestId } = appMockRender.render(
+      appMockRender.render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -136,18 +141,22 @@ describe.skip('FilterPopover ', () => {
         />
       );
 
-      userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+      userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
       await waitForEuiPopoverOpen();
 
-      expect(getByTestId('maximum-length-warning')).toHaveTextContent(maxLengthLabel);
+      expect(await screen.findByTestId('maximum-length-warning')).toHaveTextContent(maxLengthLabel);
 
-      expect(getByTestId(`options-filter-popover-item-${newTags[3]}`)).toHaveProperty('disabled');
-      expect(getByTestId(`options-filter-popover-item-${newTags[4]}`)).toHaveProperty('disabled');
+      expect(await screen.findByTestId(`options-filter-popover-item-${newTags[3]}`)).toHaveProperty(
+        'disabled'
+      );
+      expect(await screen.findByTestId(`options-filter-popover-item-${newTags[4]}`)).toHaveProperty(
+        'disabled'
+      );
     });
 
     it('should not show message when maximum length label is missing', async () => {
-      const { getByTestId, queryByTestId } = appMockRender.render(
+      appMockRender.render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -157,17 +166,21 @@ describe.skip('FilterPopover ', () => {
         />
       );
 
-      userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+      userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
       await waitForEuiPopoverOpen();
 
-      expect(queryByTestId('maximum-length-warning')).not.toBeInTheDocument();
-      expect(getByTestId(`options-filter-popover-item-${newTags[3]}`)).toHaveProperty('disabled');
-      expect(getByTestId(`options-filter-popover-item-${newTags[4]}`)).toHaveProperty('disabled');
+      expect(screen.queryByTestId('maximum-length-warning')).not.toBeInTheDocument();
+      expect(await screen.findByTestId(`options-filter-popover-item-${newTags[3]}`)).toHaveProperty(
+        'disabled'
+      );
+      expect(await screen.findByTestId(`options-filter-popover-item-${newTags[4]}`)).toHaveProperty(
+        'disabled'
+      );
     });
 
     it('should not show message and disable options when maximum length property is missing', async () => {
-      const { getByTestId, queryByTestId } = appMockRender.render(
+      appMockRender.render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -177,19 +190,19 @@ describe.skip('FilterPopover ', () => {
         />
       );
 
-      userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+      userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
       await waitForEuiPopoverOpen();
 
-      expect(queryByTestId('maximum-length-warning')).not.toBeInTheDocument();
-      expect(getByTestId(`options-filter-popover-item-${newTags[4]}`)).toHaveProperty(
+      expect(screen.queryByTestId('maximum-length-warning')).not.toBeInTheDocument();
+      expect(await screen.findByTestId(`options-filter-popover-item-${newTags[4]}`)).toHaveProperty(
         'disabled',
         false
       );
     });
 
     it('should allow to select more options when maximum length property is missing', async () => {
-      const { getByTestId } = appMockRender.render(
+      appMockRender.render(
         <FilterPopover
           buttonLabel={'Tags'}
           onSelectedOptionsChanged={onSelectedOptionsChanged}
@@ -198,13 +211,15 @@ describe.skip('FilterPopover ', () => {
         />
       );
 
-      userEvent.click(getByTestId('options-filter-popover-button-Tags'));
+      userEvent.click(await screen.findByTestId('options-filter-popover-button-Tags'));
 
       await waitForEuiPopoverOpen();
 
-      userEvent.click(getByTestId(`options-filter-popover-item-${newTags[1]}`));
+      userEvent.click(await screen.findByTestId(`options-filter-popover-item-${newTags[1]}`));
 
-      expect(onSelectedOptionsChanged).toHaveBeenCalledWith([newTags[0], newTags[2], newTags[1]]);
+      await waitFor(() => {
+        expect(onSelectedOptionsChanged).toHaveBeenCalledWith([newTags[0], newTags[2], newTags[1]]);
+      });
     });
   });
 });