From 8fb99f5afe99ffeee1b5bca18494c0ef223ad2c1 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 20 Jan 2021 14:17:24 -0500 Subject: [PATCH] Add additional tests, fix a bug. --- .../filters_expression_select.test.tsx | 132 ++++++++++++++---- .../filters_expression_select.tsx | 4 +- .../monitor_expressions/translations.ts | 8 +- 3 files changed, 113 insertions(+), 31 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.test.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.test.tsx index fdec7daa72b31..21b1a067a4e9d 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.test.tsx +++ b/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( { }); 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( { 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( + + ); + + 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( { /> ); - expect(getByLabelText(expectedLabel)); + const filterButton = getByLabelText(expectedFilterButtonAriaLabel); + + fireEvent.click(filterButton); + + await waitFor(() => { + expectedFilterItems.forEach((filterItem: string | number) => + expect(getByLabelText(`Filter by ${filterLabel} ${filterItem}.`)) + ); + }); } ); }); diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx index 56a7c3cc01e63..63dcf31fd8111 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx +++ b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/filters_expression_select.tsx @@ -106,7 +106,7 @@ export const FiltersExpressionsSelect: React.FC = ({ 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 = ({ { diff --git a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/translations.ts b/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/translations.ts index d2404f49dbb8f..919095d411fae 100644 --- a/x-pack/plugins/uptime/public/components/overview/alerts/monitor_expressions/translations.ts +++ b/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 = {