Add additional tests, fix a bug.

x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.test.tsx

@@ -6,11 +6,18 @@
 
 import React from 'react';
 import { shallowWithIntl } from '@kbn/test/jest';
+import { fireEvent, waitFor } from '@testing-library/react';
 import { FiltersExpressionsSelect } from './filters_expression_select';
 import { render } from '../../../../lib/helper/rtl_helpers';
-import { filterAriaLabels } from './translations';
+import { filterAriaLabels as aria } from './translations';
+import { filterLabels } from '../../filter_group/translations';
 
 describe('FiltersExpressionSelect', () => {
+  const LOCATION_FIELD_NAME = 'observer.geo.name';
+  const PORT_FIELD_NAME = 'url.port';
+  const SCHEME_FIELD_NAME = 'monitor.type';
+  const TAG_FIELD_NAME = 'tags';
+
   it('is empty when no filters available', () => {
     const component = shallowWithIntl(
       <FiltersExpressionsSelect
@@ -38,21 +45,18 @@ describe('FiltersExpressionSelect', () => {
   });
 
   it.each([
+    [[LOCATION_FIELD_NAME], [aria.LOCATION], [aria.TAG, aria.PORT, aria.SCHEME]],
     [
-      ['observer.geo.name'],
-      [filterAriaLabels.LOCATION],
-      [filterAriaLabels.TAG, filterAriaLabels.PORT, filterAriaLabels.SCHEME],
-    ],
-    [
-      ['observer.geo.name', 'tags'],
-      [filterAriaLabels.LOCATION, filterAriaLabels.TAG],
-      [filterAriaLabels.PORT, filterAriaLabels.SCHEME],
+      [LOCATION_FIELD_NAME, TAG_FIELD_NAME],
+      [aria.LOCATION, aria.TAG],
+      [aria.PORT, aria.SCHEME],
     ],
     [
-      ['url.port', 'monitor.type'],
-      [filterAriaLabels.PORT, filterAriaLabels.SCHEME],
-      [filterAriaLabels.LOCATION, filterAriaLabels.TAG],
+      [PORT_FIELD_NAME, SCHEME_FIELD_NAME],
+      [aria.PORT, aria.SCHEME],
+      [aria.LOCATION, aria.TAG],
     ],
+    [[TAG_FIELD_NAME], [aria.TAG], [aria.LOCATION, aria.PORT, aria.SCHEME]],
   ])('contains provided new filter values', (newFilters, expectedLabels, absentLabels) => {
     const { getByLabelText, queryByLabelText } = render(
       <FiltersExpressionsSelect
@@ -74,50 +78,118 @@ describe('FiltersExpressionSelect', () => {
     absentLabels.forEach((label) => expect(queryByLabelText(label)).toBeNull());
   });
 
+  it.each([
+    ['Remove filter Location', LOCATION_FIELD_NAME],
+    ['Remove filter Scheme', SCHEME_FIELD_NAME],
+    ['Remove filter Port', PORT_FIELD_NAME],
+    ['Remove filter Tag', TAG_FIELD_NAME],
+  ])('fires remove filter handler', async (removeButtonLabel, expectedFieldName) => {
+    const onRemoveFilterMock = jest.fn();
+    const setAlertParamsMock = jest.fn();
+    const { getByLabelText } = render(
+      <FiltersExpressionsSelect
+        alertParams={{}}
+        newFilters={[LOCATION_FIELD_NAME, SCHEME_FIELD_NAME, PORT_FIELD_NAME, TAG_FIELD_NAME]}
+        onRemoveFilter={onRemoveFilterMock}
+        filters={{
+          tags: ['prod'],
+          ports: [5601],
+          schemes: ['http'],
+          locations: ['nyc'],
+        }}
+        setAlertParams={setAlertParamsMock}
+        setUpdatedFieldValues={jest.fn()}
+        shouldUpdateUrl={false}
+      />
+    );
+
+    const removeButton = getByLabelText(removeButtonLabel);
+    fireEvent.click(removeButton);
+    expect(onRemoveFilterMock).toHaveBeenCalledTimes(1);
+    expect(onRemoveFilterMock).toHaveBeenCalledWith(expectedFieldName);
+    expect(setAlertParamsMock).toHaveBeenCalledTimes(1);
+    expect(setAlertParamsMock).toHaveBeenCalledWith('filters', {
+      [SCHEME_FIELD_NAME]: [],
+      [LOCATION_FIELD_NAME]: [],
+      [TAG_FIELD_NAME]: [],
+      [PORT_FIELD_NAME]: [],
+    });
+  });
+
+  const TEST_TAGS = ['foo', 'bar'];
+  const TEST_PORTS = [5601, 9200];
+  const TEST_SCHEMES = ['http', 'tcp'];
+  const TEST_LOCATIONS = ['nyc', 'fairbanks'];
+
   it.each([
     [
       {
-        tags: ['foo', 'bar'],
-        ports: [],
-        schemes: [],
-        locations: [],
+        tags: TEST_TAGS,
+        ports: [5601, 9200],
+        schemes: ['http', 'tcp'],
+        locations: ['nyc', 'fairbanks'],
       },
-      filterAriaLabels.TAG,
+      [TAG_FIELD_NAME],
+      aria.TAG,
+      filterLabels.TAG,
+      TEST_TAGS,
     ],
     [
       {
         tags: [],
-        ports: [5601, 9200],
+        ports: TEST_PORTS,
         schemes: [],
         locations: [],
       },
-      filterAriaLabels.TAG,
+      [PORT_FIELD_NAME],
+      aria.PORT,
+      filterLabels.PORT,
+      TEST_PORTS,
     ],
     [
       {
         tags: [],
         ports: [],
-        schemes: ['http', 'tcp'],
+        schemes: TEST_SCHEMES,
         locations: [],
       },
-      filterAriaLabels.TAG,
+      [SCHEME_FIELD_NAME],
+      aria.SCHEME,
+      filterLabels.SCHEME,
+      TEST_SCHEMES,
     ],
     [
       {
         tags: [],
         ports: [],
         schemes: [],
-        locations: ['nyc', 'fairbanks'],
+        locations: TEST_LOCATIONS,
       },
-      filterAriaLabels.TAG,
+      [LOCATION_FIELD_NAME],
+      aria.LOCATION,
+      filterLabels.LOCATION,
+      TEST_LOCATIONS,
     ],
   ])(
     'applies accessible label to filter expressions, and contains selected filters',
-    async (filters, expectedLabel) => {
+    /**
+     * @param filters the set of filters the test should supply as props
+     * @param newFilters the set of filter item types the component should render
+     * @param expectedFilterButtonAriaLabel the aria label for the popover button for the targeted filter
+     * @param filterLabel the name of the filter label expected in each item's aria-label
+     * @param expectedFilterItems the set of filter options the component should render
+     */
+    async (
+      filters,
+      newFilters,
+      expectedFilterButtonAriaLabel,
+      filterLabel,
+      expectedFilterItems
+    ) => {
       const { getByLabelText } = render(
         <FiltersExpressionsSelect
           alertParams={{}}
-          newFilters={['tags']}
+          newFilters={newFilters}
           onRemoveFilter={jest.fn()}
           filters={filters}
           setAlertParams={jest.fn()}
@@ -126,7 +198,15 @@ describe('FiltersExpressionSelect', () => {
         />
       );
 
-      expect(getByLabelText(expectedLabel));
+      const filterButton = getByLabelText(expectedFilterButtonAriaLabel);
+
+      fireEvent.click(filterButton);
+
+      await waitFor(() => {
+        expectedFilterItems.forEach((filterItem: string | number) =>
+          expect(getByLabelText(`Filter by ${filterLabel} ${filterItem}.`))
+        );
+      });
     }
   );
 });

x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx

@@ -106,7 +106,7 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
       disabled: locations?.length === 0,
       items: locations ?? [],
       selectedItems: selectedLocations,
-      title: filterLabels.SCHEME,
+      title: filterLabels.LOCATION,
       description:
         selectedLocations.length === 0 ? alertFilterLabels.FROM : alertFilterLabels.FROM_LOCATION,
       value:
@@ -152,7 +152,7 @@ export const FiltersExpressionsSelect: React.FC<Props> = ({
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonIcon
-              aria-label={alertFilterLabels.REMOVE_FILTER_LABEL}
+              aria-label={alertFilterLabels.REMOVE_FILTER_LABEL(item.title)}
               iconType="trash"
               color="danger"
               onClick={() => {

x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/translations.ts

@@ -55,9 +55,11 @@ export const alertFilterLabels = {
     defaultMessage: 'any location',
   }),
 
-  REMOVE_FILTER_LABEL: i18n.translate('xpack.uptime.alerts.monitorExpression.label', {
-    defaultMessage: 'Remove filter',
-  }),
+  REMOVE_FILTER_LABEL: (title: string) =>
+    i18n.translate('xpack.uptime.alerts.monitorExpression.label', {
+      defaultMessage: 'Remove filter {title}',
+      values: { title },
+    }),
 };
 
 export const statusExpLabels = {