feat(Select): add unit test of custom filter option

patternfly · Jul 11, 2019 · 4ef3717 · 4ef3717
1 parent 7ff1698
commit 4ef3717
Show file tree

Hide file tree

Showing 2 changed files with 435 additions and 90 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Select/Select.test.tsx b/packages/patternfly-4/react-core/src/components/Select/Select.test.tsx
@@ -6,6 +6,7 @@ import { CheckboxSelectOption } from './CheckboxSelectOption';
 import { SelectGroup } from './SelectGroup';
 import { CheckboxSelectGroup } from './CheckboxSelectGroup';
 import { SelectVariant } from './selectConstants';
+import { SelectContext } from '../../../dist/js';
 
 const selectOptions = [
   <SelectOption value="Mr" key="0" />,
@@ -42,6 +43,41 @@ describe('select', () => {
     });
   });
 
+  describe('custom select filter', () => {
+    test('filters properly', () => {
+      const customFilter = (e: React.ChangeEvent<HTMLInputElement>) => {
+        let input: RegExp;
+        try {
+          input = new RegExp(e.target.value, 'i');
+        } catch (err) {
+          input = new RegExp(e.target.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
+        }
+        let typeaheadFilteredChildren =
+          e.target.value !== ''
+            ? selectOptions.filter(
+                (child: React.ReactNode) => input.test((child as React.ReactElement).props.value)
+              )
+            : selectOptions;
+        return typeaheadFilteredChildren;
+      }
+      const view = mount(
+        <Select 
+          variant={SelectVariant.typeahead} 
+          onSelect={jest.fn()} 
+          onToggle={jest.fn()} 
+          onFilter={customFilter}
+          isExpanded={true}
+        >
+          {selectOptions}
+        </Select>
+      );
+      view.find('input').simulate('change', {target: { value: 'r' }});
+      view.update();
+      expect((view.state('typeaheadFilteredChildren') as []).length).toBe(3);
+      expect(view).toMatchSnapshot();
+    });
+  });
+
   test('renders select groups successfully', () => {
     const view = mount(
       <Select variant={SelectVariant.single} onSelect={jest.fn()} onToggle={jest.fn()} isExpanded isGrouped>