chore: add tests and stuff

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<Partial<PropertyFilterProps>>([
       </FormField>,
     ],
   },
+  {
+    query: [
+      { tokens: [], operation: 'and' },
+      {
+        tokens: [
+          { value: '123', operator: ':' },
+          { value: '234', operator: '!:' },
+          { propertyKey: 'instanceid', value: '345', operator: '=' },
+        ],
+        operation: 'and',
+      },
+    ],
+    customFilterActions: [<ButtonDropdown key={0} mainAction={{ text: 'Clear filters' }} items={[]} />],
+  },
 ]);
 
 export default function () {

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: <div>Custom</div> });
+      expect(propertyFilterWrapper.findCustomControl()?.getElement()).toHaveTextContent('Custom');
+    });
+
+    test('can define a customFilterAction that replaces the clear filters button', () => {
+      const { propertyFilterWrapper } = renderComponent({
+        customFilterActions: <div>Custom actions</div>,
+        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);

src/property-filter/styles.scss

@@ -103,6 +103,7 @@
 
 .remove-all,
 .token-label,
-.join-operation {
+.join-operation,
+.custom-filter-actions {
   /* used in test-utils */
 }

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']);
+  }
 }