test(combobox): add test for combobox for new filterMethod prop (#258)

Author: clukhei

src/Combobox/Combobox.tsx

@@ -32,10 +32,12 @@ export interface ComboboxProps extends Omit<FormControlProps, 'type'> {
   /** Adds a FormLabel to `<Combobox />` */
   label?: string;
   /** Adds icon defined to FormControl */
-  icon: React.ReactElement;
+  icon?: React.ReactElement;
   /** Enable y-axis scrolling of a menu with a default max-height of 480px */
   scrollable?: boolean;
-  /** Filter method of the combobox. Defaults to 'startsWith'. Apply  */
+  /** Filter method of the combobox. Defaults to 'startsWith'. Applying custom filter function to apply your custom logic filter  
+   * `type CustomFilter = (inputValue: string, menuItems: string[]) => string[]`
+  */
   filterMethod?: 'startsWith' | 'includes' | CustomFilter;
 }
 

tests/Combobox/Combobox.test.tsx

@@ -483,4 +483,52 @@ describe('<Combobox>', () => {
       )
     ).toBeInTheDocument();
   });
+  it('For filterMethod=includes, when gh is typed matches one of menuList, country filtered menuList should show only strings including gh. Results in 2', async () => {
+    const { container } = render(
+      <Combobox menuList={menuList} filterMethod="includes" />
+    );
+
+    fireEvent.change(
+      container.querySelector('input.form-control.dropdown-toggle')!,
+      { target: { value: 'gh' } }
+    );
+    expect(container.querySelector('input')?.value).toEqual('gh');
+
+    fireEvent.click(
+      container.querySelector('input.form-control.dropdown-toggle')!
+    );
+    await waitFor(() => {
+      expect(container.querySelector('ul.dropdown-menu')).toBeInTheDocument();
+      const dropdownItem = container.querySelectorAll("li>button.dropdown-item")
+      expect(dropdownItem.length).toEqual(2);
+      expect(dropdownItem[0].textContent).toEqual('Afghanistan');
+      expect(dropdownItem[1].textContent).toEqual('Ghana');
+    });
+  });
+  it('For custom filterMethod, custom filter behaviour is applied instead', async () => {
+     const customFilter = (inputValue: string, menuItems: string[]) => {
+      const filtered = menuItems.filter((n) => {
+        const nLowerCase = n.toLowerCase();
+        const valueLower = inputValue.toLowerCase();
+        return nLowerCase.endsWith(valueLower);
+      });
+      return filtered;
+    };
+    const { container } = render(
+      <Combobox menuList={["apple", "orange", "banana"]} filterMethod={customFilter} />
+    );
+
+    fireEvent.change(
+      container.querySelector('input.form-control.dropdown-toggle')!,
+      { target: { value: 'e' } }
+    );
+    expect(container.querySelector('input')?.value).toEqual('e');
+    await waitFor(() => {
+      expect(container.querySelector('ul.dropdown-menu')).toBeInTheDocument();
+      const dropdownItem = container.querySelectorAll("li>button.dropdown-item")
+      expect(dropdownItem.length).toEqual(2);
+      expect(dropdownItem[0].textContent).toEqual('apple');
+      expect(dropdownItem[1].textContent).toEqual('orange');
+    });
+  });
 });