Parcourir la source

created a test case for the clear button

davitbejanyan il y a 2 ans
Parent
commit
b276c576f8

+ 6 - 1
kafka-ui-react-app/src/components/common/Search/Search.tsx

@@ -53,7 +53,12 @@ const Search: React.FC<SearchProps> = ({
       ref={ref}
       ref={ref}
       search
       search
     >
     >
-      <div aria-hidden role="button" onClick={clearSearchValue}>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={clearSearchValue}
+        onKeyDown={() => {}}
+      >
         <CloseIcon />
         <CloseIcon />
       </div>
       </div>
     </Input>
     </Input>

+ 20 - 0
kafka-ui-react-app/src/components/common/Search/__tests__/Search.spec.tsx

@@ -41,4 +41,24 @@ describe('Search', () => {
     render(<Search />);
     render(<Search />);
     expect(screen.queryByPlaceholderText('Search')).toBeInTheDocument();
     expect(screen.queryByPlaceholderText('Search')).toBeInTheDocument();
   });
   });
+
+  it('Clear button is visible', () => {
+    render(<Search placeholder={placeholder} />);
+
+    const clearButton = screen.getByRole('button');
+    expect(clearButton).toBeInTheDocument();
+  });
+
+  it('Clear button should clear text from input', async () => {
+    render(<Search placeholder={placeholder} />);
+
+    const searchField = screen.getAllByRole('textbox')[0];
+    await userEvent.type(searchField, 'some text');
+    expect(searchField).toHaveValue('some text');
+
+    const clearButton = screen.getByRole('button');
+    await userEvent.click(clearButton);
+
+    expect(searchField).toHaveValue('');
+  });
 });
 });