瀏覽代碼

created a test case for the clear button

davitbejanyan 2 年之前
父節點
當前提交
b276c576f8

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

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

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

@@ -41,4 +41,24 @@ describe('Search', () => {
     render(<Search />);
     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('');
+  });
 });