diff --git a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx
index 0f2ed7f82..ebaca12fb 100644
--- a/__tests__/Unit/Components/Searchbar/searchbar.test.tsx
+++ b/__tests__/Unit/Components/Searchbar/searchbar.test.tsx
@@ -10,8 +10,10 @@ describe('test searchbar component', function () {
it('renders searchbar input and a search button', function () {
render();
- const input = screen.getByTestId('searchbar_input') as HTMLInputElement;
- const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement;
+ const input = screen.getByRole('textbox') as HTMLInputElement;
+ const searchBtn = screen.getByRole('button', {
+ name: 'Search',
+ }) as HTMLButtonElement;
expect(input).toBeInTheDocument();
expect(input).toHaveAttribute('placeholder', 'test-label:');
@@ -22,7 +24,9 @@ describe('test searchbar component', function () {
it('checks if we can type into the searchbar', function () {
render();
- const input = screen.getByTestId('searchbar_input') as HTMLInputElement;
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
fireEvent.change(input, { target: { value: '123,456' } });
expect(input.value).toBe('123,456');
@@ -31,9 +35,13 @@ describe('test searchbar component', function () {
it('tests if the click handler is called', function () {
render();
- const input = screen.getByTestId('searchbar_input') as HTMLInputElement;
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
- const searchBtn = screen.getByTestId('search_btn') as HTMLButtonElement;
+ const searchBtn = screen.getByRole('button', {
+ name: 'Search',
+ }) as HTMLButtonElement;
fireEvent.change(input, { target: { value: '123' } });
fireEvent.click(searchBtn);
@@ -44,7 +52,9 @@ describe('test searchbar component', function () {
it('tests if enter key calls search', function () {
render();
- const input = screen.getByTestId('searchbar_input') as HTMLInputElement;
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
fireEvent.change(input, { target: { value: '123' } });
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 });
@@ -55,7 +65,9 @@ describe('test searchbar component', function () {
it('tests other key down events do not call search', function () {
render();
- const input = screen.getByTestId('searchbar_input') as HTMLInputElement;
+ const input = screen.getByPlaceholderText(
+ 'test-label:'
+ ) as HTMLInputElement;
fireEvent.keyDown(input, { key: 'A', code: 'KeyA' });
diff --git a/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx
index 2a45eb6c8..8392a0434 100644
--- a/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx
+++ b/__tests__/Unit/pages/Dashboard/dashboardTest.test.tsx
@@ -13,11 +13,13 @@ describe('dashboard page test', function () {
{ query: { dev: 'true' } }
);
- const searchBar = screen.getByTestId('searchbar_input');
+ const searchBar = screen.getByRole('textbox');
expect(searchBar).toBeInTheDocument();
- const searchButton = screen.getByTestId('search_btn');
- expect(searchButton.innerHTML).toBe('Search');
+ const searchBtn = screen.getByRole('button', {
+ name: 'Search',
+ }) as HTMLButtonElement;
+ expect(searchBtn).toBeInTheDocument();
});
it('renders 404 without passing the feature flag', function () {
@@ -42,13 +44,13 @@ describe('dashboard page test', function () {
{ query: { dev: 'true' } }
);
- const input = screen.getByTestId('searchbar_input') as HTMLInputElement;
+ const input = screen.getByRole('textbox') as HTMLInputElement;
fireEvent.change(input, { target: { value: 'jhon, doe' } });
- const searchButton = screen.getByTestId(
- 'search_btn'
- ) as HTMLButtonElement;
- fireEvent.click(searchButton);
+ const searchBtn = screen.getByRole('button', {
+ name: 'Search',
+ }) as HTMLButtonElement;
+ fireEvent.click(searchBtn);
const value = input.value.split(',');
expect(console.log).toBeCalledWith('Searching', value);
diff --git a/src/components/Dashboard/Searchbar.tsx b/src/components/Dashboard/Searchbar.tsx
index cdc2ad8f3..e4e1abbd8 100644
--- a/src/components/Dashboard/Searchbar.tsx
+++ b/src/components/Dashboard/Searchbar.tsx
@@ -14,7 +14,6 @@ function Searchbar({ label }: searchProps) {
return (