feat: autocomplete no results

src/autocomplete/ResultList.tsx

@@ -28,16 +28,15 @@ export const ResultList = ({
   noOptionClass,
   noElFoundText,
   onClick,
-}: ResultListProps) => {
-  if (userInput && list.length) {
-    return (
-      <ul
-        id={ulContainerId}
-        className={ulContainerClass}
-        style={ulContainerStyle}
-        aria-live="polite"
-      >
-        {list.map((optionName: string, index: number) => (
+}: ResultListProps) => (
+  <ul
+    id={ulContainerId}
+    className={ulContainerClass}
+    style={ulContainerStyle}
+    aria-live="polite"
+  >
+    {userInput && list.length > 0
+      ? list.map((optionName: string, index: number) => (
           <li
             className={
               index === activeOption && activeClass
@@ -55,14 +54,11 @@ export const ResultList = ({
           >
             {optionName}
           </li>
-        ))}
-      </ul>
-    );
-  } else {
-    return (
-      <div className={noOptionClass}>
-        <em>{noElFoundText || 'No Option!'}</em>
-      </div>
-    );
-  }
-};
+        ))
+      : noElFoundText && (
+          <li className={[liContainerClass, noOptionClass].join(' ')}>
+            {noElFoundText}
+          </li>
+        )}
+  </ul>
+);

src/autocomplete/__tests__/Autocomplete.test.tsx

@@ -247,12 +247,12 @@ describe('FormInput', () => {
 
   it('should not display available options', async () => {
     const user = userEvent.setup();
-    render(<Autocomplete options={['first', 'isaac']} />);
+    const { container } = render(<Autocomplete options={['first', 'isaac']} />);
     const input = screen.getByRole('textbox');
     await user.type(input, 'test value');
 
-    const noOptionTag: any = screen.getByText('No Option!');
-    expect(noOptionTag.innerHTML).toBe('No Option!');
+    const el: any = container.querySelector('li');
+    expect(el).not.toBeInTheDocument();
   });
 
   it('should allow to select the first item', async () => {

src/autocomplete/__tests__/ResultList.test.tsx

@@ -20,20 +20,6 @@ describe('ResultList', () => {
     expect(listItems[1].innerHTML).toBe('isaac');
   });
 
-  it('should display the empty content', () => {
-    const handleClick = jest.fn();
-    const { container } = render(
-      <ResultList
-        list={[]}
-        userInput="da"
-        activeOption={1}
-        onClick={handleClick}
-      />
-    );
-    const noOptionTag: any = container.querySelector('em');
-    expect(noOptionTag.innerHTML).toBe('No Option!');
-  });
-
   it('should display optional properties', () => {
     const handleClick = jest.fn();
     const { container } = render(
@@ -94,19 +80,20 @@ describe('ResultList', () => {
     );
   });
 
-  it('should display optional properties when empty', () => {
+  it('should not display optional properties when empty', () => {
     const handleClick = jest.fn();
     const { container } = render(
       <ResultList
         list={[]}
         userInput="d"
         activeOption={1}
         onClick={handleClick}
+        liContainerClass="liContainerClass"
         noOptionClass="noOptionClass"
       />
     );
-    const emEl: any = container.querySelector('div');
-    expect(emEl.className).toBe('noOptionClass');
+    const el: any = container.querySelector('li');
+    expect(el).not.toBeInTheDocument();
   });
 
   it('should display empty custom text', () => {
@@ -121,7 +108,7 @@ describe('ResultList', () => {
         noElFoundText="nada de nada"
       />
     );
-    const emEl: any = container.querySelector('em');
-    expect(emEl.innerHTML).toBe('nada de nada');
+    const el: any = container.querySelector('li');
+    expect(el.innerHTML).toBe('nada de nada');
   });
 });