Fix bug in event handler and update tests.

x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.test.tsx

@@ -5,67 +5,81 @@
  */
 
 import React from 'react';
-import { shallowWithIntl, mountWithIntl } from '@kbn/test/jest';
+import { fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import { FilterPopoverProps, FilterPopover } from './filter_popover';
-import { UptimeFilterButton } from './uptime_filter_button';
-import { EuiFilterSelectItem } from '@elastic/eui';
+import { render } from '../../../lib/helper/rtl_helpers';
 
 describe('FilterPopover component', () => {
   let props: FilterPopoverProps;
 
   beforeEach(() => {
     props = {
-      fieldName: 'foo',
+      fieldName: 'test-fieldName',
       id: 'test',
       loading: false,
       items: ['first', 'second', 'third', 'fourth'],
       onFilterFieldChange: jest.fn(),
       selectedItems: ['first', 'third'],
-      title: 'bar',
+      title: 'test-title',
     };
   });
 
   afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it('renders without errors for valid props', () => {
-    const wrapper = shallowWithIntl(<FilterPopover {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
   it('expands on button click', () => {
-    const wrapper = mountWithIntl(<FilterPopover {...props} />);
-
-    // ensure the popover isn't open
-    expect(wrapper.find('EuiPopoverTitle')).toHaveLength(0);
+    const { getByRole, getByLabelText, getByText, queryByLabelText, queryByText } = render(
+      <FilterPopover {...props} />
+    );
+    const screenReaderOnlyText = 'You are in a dialog. To close this dialog, hit escape.';
+    expect(queryByText(screenReaderOnlyText)).toBeNull();
+    expect(queryByLabelText('Filter by bar fourth.')).toBeNull();
 
-    expect(wrapper.find(UptimeFilterButton)).toHaveLength(1);
-    wrapper.find(UptimeFilterButton).simulate('click');
+    fireEvent.click(getByRole('button'));
 
-    // check that the popover is now open
-    expect(wrapper.find('EuiPopoverTitle')).toHaveLength(1);
+    expect(getByText(screenReaderOnlyText));
+    expect(getByLabelText('Filter by test-title fourth.'));
   });
 
-  it('does not show item list when loading', () => {
+  it('does not show item list when loading, and displays placeholder', async () => {
     props.loading = true;
-    const wrapper = shallowWithIntl(<FilterPopover {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    const { getByRole, queryByText, getByLabelText } = render(<FilterPopover {...props} />);
+    fireEvent.click(getByRole('button'));
+    await waitFor(() => {
+      const search = getByLabelText('Search for test-title');
+      expect(search).toHaveAttribute('placeholder', 'Loading...');
+    });
+    expect(queryByText('Filter by test-title second.')).toBeNull();
   });
 
-  it('returns selected items on popover close', () => {
-    const wrapper = mountWithIntl(
-      <div>
-        <div id="foo">Some text</div>
-        <FilterPopover {...props} />
-      </div>
-    );
-    expect(wrapper.find(UptimeFilterButton)).toHaveLength(1);
-    wrapper.find(UptimeFilterButton).simulate('click');
-    expect(wrapper.find(EuiFilterSelectItem)).toHaveLength(props.items.length);
-    wrapper.find(EuiFilterSelectItem).at(1).simulate('click');
-    wrapper.find('#foo').simulate('click');
-    const rendered = wrapper.render();
-    expect(rendered).toMatchSnapshot();
-  });
+  it.each([
+    [[], ['third'], ['third']],
+    [['first', 'third'], ['first'], ['third']],
+    [['fourth'], ['first', 'second'], ['first', 'second', 'fourth']],
+  ])(
+    'returns selected items on popover close',
+    async (selectedPropsItems, expectedSelections, itemsToClick) => {
+      if (itemsToClick.length < 1) {
+        throw new Error('This test assumes at least one item will be clicked');
+      }
+      props.selectedItems = selectedPropsItems;
+
+      const { getByLabelText, queryByLabelText } = render(<FilterPopover {...props} />);
+      const uptimeFilterButton = getByLabelText(`expands filter group for ${props.title} filter`);
+
+      fireEvent.click(uptimeFilterButton);
+
+      const generateLabelText = (item: string) => `Filter by ${props.title} ${item}.`;
+      itemsToClick.forEach((item) => {
+        const optionButtonLabelText = generateLabelText(item);
+        const optionButton = getByLabelText(optionButtonLabelText);
+        fireEvent.click(optionButton);
+      });
+      fireEvent.click(uptimeFilterButton);
+      await waitForElementToBeRemoved(() => queryByLabelText(generateLabelText(itemsToClick[0])));
+      expect(props.onFilterFieldChange).toHaveBeenCalledTimes(1);
+      expect(props.onFilterFieldChange).toHaveBeenCalledWith(props.fieldName, expectedSelections);
+    }
+  );
 });

x-pack/plugins/uptime/public/components/overview/filter_group/filter_popover.tsx

@@ -76,8 +76,11 @@ export const FilterPopover = ({
             numFilters={items.length}
             numActiveFilters={isOpen ? tempSelectedItems.length : selectedItems.length}
             onClick={() => {
+              if (isOpen) {
+                // only update these values on close
+                onFilterFieldChange(fieldName, tempSelectedItems);
+              }
               setIsOpen(!isOpen);
-              onFilterFieldChange(fieldName, tempSelectedItems);
             }}
             title={title}
           />