Convert packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js to RTL (#49992)

* Added new selectors

* Added selector to UIFindInput

* Added selectors to TracePageSearchBar

* Convert tests

* Remove next/prev button test ids

* Remove uiFindInput selector

* Remove tracePageSearchBar selector

* Remove tracePageSearchBarSuffix selector

* Update TraceViewContainer test

.betterer.results

@@ -50,9 +50,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js:3242042907": [
       [14, 26, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js:1062402339": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [
       [14, 26, 13, "RegExp match", "2409514259"]
     ],

packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.markers.tsx

@@ -1,15 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-export const IN_TRACE_SEARCH = 'in-trace-search';

packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js

@@ -12,78 +12,69 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { createTheme } from '@grafana/data';
-
+import { selectors } from '@grafana/e2e-selectors';
-import UiFindInput from '../common/UiFindInput';
 
 import TracePageSearchBar, { getStyles } from './TracePageSearchBar';
-import * as markers from './TracePageSearchBar.markers';
 
 const defaultProps = {
   forwardedRef: React.createRef(),
   navigable: true,
-  suffix: '',
+  searchBarSuffix: 'suffix',
-  searchValue: 'something',
+  searchValue: 'value',
 };
 
 describe('<TracePageSearchBar>', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<TracePageSearchBar {...defaultProps} />);
-  });
-
   describe('truthy textFilter', () => {
     it('renders UiFindInput with correct props', () => {
-      const renderedUiFindInput = wrapper.find(UiFindInput);
+      render(<TracePageSearchBar {...defaultProps} />);
-      const suffix = shallow(renderedUiFindInput.prop('inputProps').suffix);
+      expect(screen.getByPlaceholderText('Find...')['value']).toEqual('value');
-      expect(renderedUiFindInput.prop('inputProps')).toEqual(
+      const suffix = screen.getByLabelText('Search bar suffix');
-        expect.objectContaining({
-          'data-test': markers.IN_TRACE_SEARCH,
-          name: 'search',
-        })
-      );
       const theme = createTheme();
-      expect(suffix.hasClass(getStyles(theme).TracePageSearchBarSuffix)).toBe(true);
+      expect(suffix['className']).toBe(getStyles(theme).TracePageSearchBarSuffix);
-      expect(suffix.text()).toBe(String(defaultProps.suffix));
+      expect(suffix.textContent).toBe('suffix');
     });
 
     it('renders buttons', () => {
-      const buttons = wrapper.find('Button');
+      render(<TracePageSearchBar {...defaultProps} />);
-      expect(buttons.length).toBe(2);
+      const nextResButton = screen.queryByRole('button', { name: 'Next results button' });
-      buttons.forEach((button) => {
+      const prevResButton = screen.queryByRole('button', { name: 'Prev results button' });
-        expect(button.prop('disabled')).toBe(false);
+      expect(nextResButton).toBeInTheDocument();
-      });
+      expect(prevResButton).toBeInTheDocument();
+      expect(nextResButton['disabled']).toBe(false);
+      expect(prevResButton['disabled']).toBe(false);
     });
 
     it('only shows navigable buttons when navigable is true', () => {
-      wrapper.setProps({ navigable: false });
+      const props = {
-      var buttons = wrapper.find('Button');
+        ...defaultProps,
-      expect(buttons.length).toBe(0);
+        navigable: false,
-      wrapper.setProps({ navigable: true });
+      };
-      buttons = wrapper.find('Button');
+      render(<TracePageSearchBar {...props} />);
-      expect(buttons.length).toBe(2);
+      expect(screen.queryByRole('button', { name: 'Next results button' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Prev results button' })).not.toBeInTheDocument();
     });
   });
 
   describe('falsy textFilter', () => {
     beforeEach(() => {
-      wrapper.setProps({ searchValue: '' });
+      const props = {
+        ...defaultProps,
+        searchValue: '',
+      };
+      render(<TracePageSearchBar {...props} />);
     });
 
-    it('renders UiFindInput with correct props', () => {
+    it('does not render suffix', () => {
-      expect(wrapper.find(UiFindInput).prop('inputProps').suffix).toBe(null);
+      expect(screen.queryByLabelText('Search bar suffix')).not.toBeInTheDocument();
     });
 
     it('renders buttons', () => {
-      const buttons = wrapper.find('Button');
+      expect(screen.getByRole('button', { name: 'Next results button' })).toBeInTheDocument();
-      expect(buttons.length).toBe(2);
+      expect(screen.getByRole('button', { name: 'Prev results button' })).toBeInTheDocument();
-      buttons.forEach((button) => {
-        expect(button.prop('disabled')).toBe(true);
-      });
     });
   });
 });

packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx

@@ -22,7 +22,6 @@ import { Button, useStyles2 } from '@grafana/ui';
 import UiFindInput from '../common/UiFindInput';
 import { ubFlexAuto, ubJustifyEnd } from '../uberUtilityStyles';
 
-import * as markers from './TracePageSearchBar.markers';
 // eslint-disable-next-line no-duplicate-imports
 
 export const getStyles = (theme: GrafanaTheme2) => {
@@ -95,14 +94,13 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
   const styles = useStyles2(getStyles);
 
   const suffix = searchValue ? (
-    <span className={styles.TracePageSearchBarSuffix} data-testid="trace-page-search-bar-suffix">
+    <span className={styles.TracePageSearchBarSuffix} aria-label="Search bar suffix">
       {searchBarSuffix}
     </span>
   ) : null;
 
   const btnClass = cx(styles.TracePageSearchBarBtn, { [styles.TracePageSearchBarBtnDisabled]: !searchValue });
   const uiFindInputInputProps = {
-    'data-test': markers.IN_TRACE_SEARCH,
     className: cx(styles.TracePageSearchBarBar, ubFlexAuto),
     name: 'search',
     suffix,
@@ -175,7 +173,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
                 disabled={!searchValue}
                 type="button"
                 icon="arrow-down"
-                data-testid="trace-page-search-bar-next-result-button"
+                aria-label="Next results button"
                 onClick={nextResult}
               />
               <Button
@@ -184,7 +182,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
                 disabled={!searchValue}
                 type="button"
                 icon="arrow-up"
-                data-testid="trace-page-search-bar-prev-result-button"
+                aria-label="Prev results button"
                 onClick={prevResult}
               />
             </>

public/app/features/explore/TraceView/TraceViewContainer.test.tsx

@@ -79,9 +79,9 @@ describe('TraceViewContainer', () => {
   it('can select next/prev results', async () => {
     renderTraceViewContainer();
     await userEvent.type(screen.getByPlaceholderText('Find...'), 'logproto');
-    const nextResultButton = screen.getByTestId('trace-page-search-bar-next-result-button');
+    const nextResultButton = screen.getByRole('button', { name: 'Next results button' });
-    const prevResultButton = screen.getByTestId('trace-page-search-bar-prev-result-button');
+    const prevResultButton = screen.getByRole('button', { name: 'Prev results button' });
-    const suffix = screen.getByTestId('trace-page-search-bar-suffix');
+    const suffix = screen.getByLabelText('Search bar suffix');
 
     await userEvent.click(nextResultButton);
     expect(suffix.textContent).toBe('1 of 2');