use getByRole instead of test id in testing the components

Real-Dev-Squad · Jun 19, 2023 · bc762c5 · bc762c5
1 parent 3a44c94
commit bc762c5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git 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(<Searchbar label="test-label" />);
 
-        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(<Searchbar label="test-label" />);
 
-        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(<Searchbar label="test-label" />);
 
-        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(<Searchbar label="test-label" />);
 
-        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(<Searchbar label="test-label" />);
 
-        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
@@ -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
@@ -14,7 +14,6 @@ function Searchbar({ label }: searchProps) {
     return (
         <section className={styles.container}>
             <input
-                data-testid="searchbar_input"
                 type="text"
                 id="search"
                 value={query}
@@ -24,7 +23,6 @@ function Searchbar({ label }: searchProps) {
                 placeholder={label + ':'}
             />
             <button
-                data-testid="search_btn"
                 type="submit"
                 onClick={() => {
                     splitNSearch(query);