diff --git a/pages/property-filter/permutations.page.tsx b/pages/property-filter/permutations.page.tsx index 2ef8fc4eca..ef3d886e69 100644 --- a/pages/property-filter/permutations.page.tsx +++ b/pages/property-filter/permutations.page.tsx @@ -1,6 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import React from 'react'; +import { ButtonDropdown } from '~components'; import PropertyFilter, { PropertyFilterProps } from '~components/property-filter'; import Select from '~components/select'; import FormField from '~components/form-field'; @@ -93,6 +94,20 @@ const permutations = createPermutations>([ , ], }, + { + query: [ + { tokens: [], operation: 'and' }, + { + tokens: [ + { value: '123', operator: ':' }, + { value: '234', operator: '!:' }, + { propertyKey: 'instanceid', value: '345', operator: '=' }, + ], + operation: 'and', + }, + ], + customFilterActions: [], + }, ]); export default function () { diff --git a/src/property-filter/__tests__/property-filter.test.tsx b/src/property-filter/__tests__/property-filter.test.tsx index ff4cf3acd6..9587abafaf 100644 --- a/src/property-filter/__tests__/property-filter.test.tsx +++ b/src/property-filter/__tests__/property-filter.test.tsx @@ -1343,6 +1343,22 @@ describe('property filter parts', () => { }); }); + describe('custom element slots', () => { + test('can define a customControl element', () => { + const { propertyFilterWrapper } = renderComponent({ customControl:
Custom
}); + expect(propertyFilterWrapper.findCustomControl()?.getElement()).toHaveTextContent('Custom'); + }); + + test('can define a customFilterAction that replaces the clear filters button', () => { + const { propertyFilterWrapper } = renderComponent({ + customFilterActions:
Custom actions
, + query: { tokens: [{ value: 'free text', operator: '=' }], operation: 'and' }, + }); + expect(propertyFilterWrapper.findRemoveAllButton()).toBeNull(); + expect(propertyFilterWrapper.findCustomFilterActions()?.getElement()).toHaveTextContent('Custom actions'); + }); + }); + test('property filter input can be found with autosuggest selector', () => { const { container } = renderComponent(); expect(createWrapper(container).findAutosuggest()!.getElement()).not.toBe(null); diff --git a/src/property-filter/styles.scss b/src/property-filter/styles.scss index c4e6ff0cd6..34d5138df4 100644 --- a/src/property-filter/styles.scss +++ b/src/property-filter/styles.scss @@ -103,6 +103,7 @@ .remove-all, .token-label, -.join-operation { +.join-operation, +.custom-filter-actions { /* used in test-utils */ } diff --git a/src/test-utils/dom/property-filter/index.ts b/src/test-utils/dom/property-filter/index.ts index 142a0b5bf1..3bef94d5bc 100644 --- a/src/test-utils/dom/property-filter/index.ts +++ b/src/test-utils/dom/property-filter/index.ts @@ -34,4 +34,18 @@ export default class PropertyFilterWrapper extends AutosuggestWrapper { findRemoveAllButton(): ElementWrapper | null { return this.findByClassName(styles['remove-all']); } + + /** + * Returns the element containing the `customControl` slot. + */ + findCustomControl(): ElementWrapper | null { + return this.findByClassName(styles['custom-control']); + } + + /** + * Returns the element containing the `customFilterActions` slot. + */ + findCustomFilterActions(): ElementWrapper | null { + return this.findByClassName(styles['custom-filter-actions']); + } }