chore: Adds property filter stories unit tests

src/property-filter/__tests__/extended-wrapper.ts

@@ -0,0 +1,278 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import createWrapper, {
+  AutosuggestWrapper,
+  FormFieldWrapper,
+  MultiselectWrapper,
+  SelectWrapper,
+} from '../../../lib/components/test-utils/dom';
+
+import itemStyles from '../../../lib/components/internal/components/selectable-item/styles.css.js';
+import selectableStyles from '../../../lib/components/internal/components/selectable-item/styles.selectors.js';
+import propertyFilterStyles from '../../../lib/components/property-filter/styles.selectors.js';
+import selectStyles from '../../../lib/components/select/parts/styles.selectors.js';
+
+export function createExtendedWrapper() {
+  const wrapper = createWrapper().findPropertyFilter()!;
+  function findEditorDropdown() {
+    return wrapper
+      .findTokens()
+      .map(w => w.findEditorDropdown())
+      .filter(Boolean)[0]!;
+  }
+  function findControl(fieldIndex: number, fieldType: 'property' | 'operator' | 'value') {
+    const dropdown = findEditorDropdown();
+    const field = {
+      property: dropdown.findPropertyField(fieldIndex),
+      operator: dropdown.findOperatorField(fieldIndex),
+      value: dropdown.findValueField(fieldIndex),
+    }[fieldType];
+    return field.findControl()!;
+  }
+
+  return {
+    input: {
+      focus() {
+        wrapper.focus();
+      },
+      value(text: string) {
+        wrapper.setInputValue(text);
+      },
+      date(text: string) {
+        wrapper.findDropdown().findOpenDropdown()!.findDateInput()!.setInputValue(text);
+      },
+      keys(...codes: number[]) {
+        codes.forEach(code => wrapper.findNativeInput().keydown(code));
+      },
+      submit() {
+        wrapper.findPropertySubmitButton()!.click();
+      },
+      cancel() {
+        wrapper.findPropertyCancelButton()!.click();
+      },
+      selectByValue(value: null | string) {
+        wrapper.selectSuggestionByValue(value as any);
+      },
+      selectAll() {
+        wrapper
+          .findDropdown()
+          .findOpenDropdown()!
+          .findByClassName(selectableStyles['selectable-item'])!
+          .fireEvent(new MouseEvent('mouseup', { bubbles: true }));
+      },
+      dropdown() {
+        return !!wrapper.findDropdown().findOpenDropdown();
+      },
+      status() {
+        return wrapper.findDropdown().findFooterRegion()?.getElement().textContent ?? '';
+      },
+      options() {
+        const enteredTextOption = wrapper.findEnteredTextOption()?.getElement().textContent;
+        const otherOptions = printOptions(wrapper);
+        return [enteredTextOption, ...otherOptions].filter(Boolean);
+      },
+    },
+    tokens: {
+      token(index = 1) {
+        const token = wrapper.findTokens()[index - 1];
+        return {
+          nested(index = 1) {
+            const nested = token.findGroupTokens()[index - 1];
+            return {
+              operation(value: 'and' | 'or') {
+                nested.findTokenOperation()!.openDropdown();
+                nested.findTokenOperation()?.selectOptionByValue(value);
+              },
+            };
+          },
+          operation(value: 'and' | 'or') {
+            token.findTokenOperation()!.openDropdown();
+            token.findTokenOperation()?.selectOptionByValue(value);
+          },
+        };
+      },
+      list() {
+        return wrapper.findTokens().map(w => {
+          const operation = w.findTokenOperation()?.find('button')?.getElement().textContent;
+          const value = w.findLabel()?.getElement().textContent;
+          const nested = w
+            .findGroupTokens()
+            .map(w => {
+              const operation = w.findTokenOperation()?.find('button')?.getElement().textContent;
+              const value = w.findLabel()?.getElement().textContent;
+              return [operation, value].filter(Boolean).join(' ');
+            })
+            .join(' ');
+          return [operation, value, nested].filter(Boolean).join(' ');
+        });
+      },
+    },
+    editor: {
+      dropdown() {
+        return !!findEditorDropdown();
+      },
+      open(index: number) {
+        const token = wrapper.findTokens()[index - 1];
+        const target = token.findEditButton() ?? token.findLabel();
+        target.click();
+      },
+      property(fieldIndex = 1) {
+        const select = findControl(fieldIndex, 'property').findSelect()!;
+        return {
+          open() {
+            dropdownOpen(select);
+          },
+          value(option: null | string) {
+            dropdownOpen(select);
+            select.selectOptionByValue(option as any);
+          },
+          options() {
+            dropdownOpen(select);
+            return printOptions(select);
+          },
+        };
+      },
+      operator(fieldIndex = 1) {
+        const select = findControl(fieldIndex, 'operator').findSelect()!;
+        return {
+          open() {
+            dropdownOpen(select);
+          },
+          value(option: null | string) {
+            dropdownOpen(select);
+            select.selectOptionByValue(option as any);
+          },
+          options() {
+            dropdownOpen(select);
+            return printOptions(select);
+          },
+        };
+      },
+      value(fieldIndex = 1) {
+        return {
+          autosuggest() {
+            const autosuggest = findControl(fieldIndex, 'value').findAutosuggest()!;
+            return {
+              focus() {
+                autosuggest.focus();
+              },
+              option(value: string) {
+                autosuggest.focus();
+                autosuggest.selectSuggestionByValue(value);
+              },
+              input(text: string) {
+                autosuggest.setInputValue(text);
+              },
+              options() {
+                return printOptions(autosuggest);
+              },
+            };
+          },
+          multiselect() {
+            const multiselect = findControl(fieldIndex, 'value').findMultiselect()!;
+            return {
+              open() {
+                dropdownOpen(multiselect);
+              },
+              filter(text: string) {
+                dropdownOpen(multiselect);
+                multiselect.findFilteringInput()!.setInputValue(text);
+              },
+              value(options: (null | string)[]) {
+                dropdownOpen(multiselect);
+                options.forEach(option => multiselect.selectOptionByValue(option as any));
+              },
+              options() {
+                dropdownOpen(multiselect);
+                return printOptions(multiselect);
+              },
+            };
+          },
+          dateInput() {
+            const dateInput = findControl(fieldIndex, 'value').findDateInput()!;
+            return {
+              value(value: string) {
+                dateInput.setInputValue(value);
+              },
+            };
+          },
+        };
+      },
+      remove(rowIndex: number) {
+        findEditorDropdown().findTokenRemoveActions(rowIndex)!.openDropdown();
+        findEditorDropdown().findTokenRemoveActions(rowIndex)!.findItemById('remove')!.click();
+      },
+      addFilter() {
+        findEditorDropdown().findTokenAddActions()!.findMainAction()!.click();
+      },
+      submit() {
+        findEditorDropdown().findSubmitButton()!.click();
+      },
+      cancel() {
+        findEditorDropdown().findCancelButton()!.click();
+      },
+      form() {
+        const dropdown = findEditorDropdown();
+        const rows: string[] = [];
+        for (let index = 1; index <= 10; index++) {
+          const property = printField(dropdown.findPropertyField(index), 'property');
+          const operator = printField(dropdown.findOperatorField(index), 'operator');
+          const value = printField(dropdown.findValueField(index), 'value');
+          if (property || operator || value) {
+            rows.push([property, operator, value].join(' '));
+          } else {
+            break;
+          }
+        }
+        return rows;
+      },
+    },
+  };
+}
+
+function dropdownOpen(wrapper: SelectWrapper | MultiselectWrapper) {
+  if (!wrapper.findDropdown().findOpenDropdown()) {
+    wrapper.openDropdown();
+  }
+}
+
+function printOptions(wrapper: AutosuggestWrapper | SelectWrapper | MultiselectWrapper) {
+  const options = wrapper
+    .findDropdown()
+    .findOptions()
+    .flatMap(w => {
+      const selectOptions = w.findAllByClassName(itemStyles['option-content']);
+      const options = selectOptions.length > 0 ? selectOptions : [w];
+      return options.map(w => w.getElement().textContent);
+    });
+  return options.filter(Boolean);
+}
+
+function printField(wrapper: null | FormFieldWrapper, type: 'property' | 'operator' | 'value') {
+  if (!wrapper) {
+    return null;
+  }
+  const headers = createWrapper().findAllByClassName(propertyFilterStyles['token-editor-grid-header']);
+  const header = headers[['property', 'operator', 'value'].indexOf(type)];
+  const formFieldLabel = wrapper.findLabel()?.getElement().textContent ?? header?.getElement().textContent;
+  const autosuggest = wrapper.findControl()!.findAutosuggest();
+  const dateInput = wrapper.findControl()?.findDateInput();
+  if (autosuggest || dateInput) {
+    const input = autosuggest?.findNativeInput() ?? dateInput?.findNativeInput();
+    const value = input!.getElement().value;
+    return `${formFieldLabel}[${value}]`;
+  }
+  const select = wrapper.findControl()!.findSelect();
+  if (select) {
+    const value = select.getElement().textContent;
+    return `${formFieldLabel}[${value}]`;
+  }
+  const multiselect = wrapper.findControl()!.findMultiselect();
+  if (multiselect) {
+    const tokens = multiselect.findAllByClassName(selectStyles['inline-token']);
+    const value = tokens.map(w => w.getElement().textContent).join(', ');
+    return `${formFieldLabel}[${value}]`;
+  }
+  return `${formFieldLabel}[]`;
+}

src/property-filter/__tests__/property-filter-i18n.test.tsx

@@ -300,7 +300,6 @@ describe('i18n', () => {
           enableTokenGroups={true}
           filteringOptions={[]}
           customGroupsText={[]}
-          disableFreeTextFiltering={false}
         />
       </TestI18nProvider>
     );

src/property-filter/__tests__/property-filter-stories-token-create-async.test.tsx

@@ -0,0 +1,109 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
+
+import { PropertyFilterProps } from '../interfaces';
+import { createRenderer } from './stories-components';
+
+const defaultProps: Partial<PropertyFilterProps> = {
+  filteringProperties: [
+    {
+      key: 'id',
+      propertyLabel: 'ID',
+      operators: ['=', '!='],
+      groupValuesLabel: 'ID values',
+    },
+    {
+      key: 'status',
+      propertyLabel: 'Status',
+      operators: [
+        { operator: '=', tokenType: 'enum' },
+        { operator: '!=', tokenType: 'enum' },
+      ],
+      groupValuesLabel: 'Status values',
+    },
+  ],
+  filteringOptions: [
+    { propertyKey: 'id', value: 'x-1' },
+    { propertyKey: 'id', value: 'x-2' },
+    { propertyKey: 'id', value: 'x-3' },
+    { propertyKey: 'id', value: 'x-4' },
+    { propertyKey: 'status', value: 'Active' },
+    { propertyKey: 'status', value: 'Activating' },
+    { propertyKey: 'status', value: 'Inactive' },
+  ],
+};
+const render = createRenderer(defaultProps, { async: true });
+
+describe('Property filter stories: tokens creation, async', () => {
+  test('waits and selects property, then waits and selects option', async () => {
+    const { wrapper } = render({ asyncProperties: true });
+
+    wrapper.input.focus();
+    expect(wrapper.input.dropdown()).toBe(true);
+    expect(wrapper.input.options()).toEqual([]);
+    expect(wrapper.input.status()).toBe('Loading status');
+
+    await new Promise(resolve => setTimeout(resolve, 1));
+    expect(wrapper.input.options()).toEqual(['ID', 'Status']);
+    expect(wrapper.input.status()).toBe('Finished status');
+
+    wrapper.input.value('ID');
+    expect(wrapper.input.options()).toEqual(['Use: "ID"', 'ID =Equals', 'ID !=Does not equal']);
+
+    wrapper.input.selectByValue('ID = ');
+    expect(wrapper.input.options()).toEqual(['Use: "ID = "', 'ID = x-1', 'ID = x-2', 'ID = x-3', 'ID = x-4']);
+    expect(wrapper.input.status()).toBe('Loading status');
+
+    await new Promise(resolve => setTimeout(resolve, 1));
+    expect(wrapper.input.options()).toEqual(['Use: "ID = "', 'ID = x-1', 'ID = x-2', 'ID = x-3', 'ID = x-4']);
+    expect(wrapper.input.status()).toBe('Finished status');
+
+    wrapper.input.selectByValue('ID = x-2');
+    expect(wrapper.input.dropdown()).toBe(false);
+    expect(wrapper.tokens.list()).toEqual(['ID = x-2']);
+  });
+
+  test('searches token by value, waits and selects the matched option', async () => {
+    const { wrapper } = render({ asyncProperties: false });
+
+    wrapper.input.focus();
+    expect(wrapper.input.dropdown()).toBe(true);
+    expect(wrapper.input.options()).toEqual(['ID', 'Status']);
+    expect(wrapper.input.status()).toBe('');
+
+    wrapper.input.value('x-3');
+    expect(wrapper.input.options()).toEqual(['Use: "x-3"']);
+    expect(wrapper.input.status()).toBe('Loading status');
+
+    await new Promise(resolve => setTimeout(resolve, 1));
+    expect(wrapper.input.options()).toEqual(['Use: "x-3"', 'ID = x-3']);
+    expect(wrapper.input.status()).toBe('Finished status');
+
+    wrapper.input.keys(KeyCode.down, KeyCode.down, KeyCode.enter);
+    expect(wrapper.tokens.list()).toEqual(['ID = x-3']);
+  });
+
+  test('searches enum token value, waits and selects all matched options', async () => {
+    const { wrapper } = render({ asyncProperties: false });
+
+    wrapper.input.focus();
+    expect(wrapper.input.dropdown()).toBe(true);
+    expect(wrapper.input.options()).toEqual(['ID', 'Status']);
+    expect(wrapper.input.status()).toBe('');
+
+    wrapper.input.value('Status = Activ');
+    expect(wrapper.input.options()).toEqual([]);
+    expect(wrapper.input.status()).toBe('Loading status');
+
+    await new Promise(resolve => setTimeout(resolve, 1));
+    expect(wrapper.input.options()).toEqual(['Active', 'Activating']);
+    expect(wrapper.input.status()).toBe('Finished status');
+
+    wrapper.input.selectAll();
+    wrapper.input.submit();
+    expect(wrapper.input.dropdown()).toBe(false);
+    expect(wrapper.tokens.list()).toEqual(['Status = Active, Activating']);
+  });
+});