From d20608ab84f99f2dd0fe4bb8885ebd5b07cd8cfc Mon Sep 17 00:00:00 2001 From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com> Date: Mon, 6 Jun 2022 16:31:51 +0100 Subject: [PATCH] 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 | 3 - .../TracePageSearchBar.markers.tsx | 15 ---- .../TracePageSearchBar.test.js | 73 ++++++++----------- .../TracePageHeader/TracePageSearchBar.tsx | 8 +- .../TraceView/TraceViewContainer.test.tsx | 6 +- 5 files changed, 38 insertions(+), 67 deletions(-) delete mode 100644 packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.markers.tsx diff --git a/.betterer.results b/.betterer.results index 110f516c83c..c720b20a63b 100644 --- a/.betterer.results +++ b/.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"] ], diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.markers.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.markers.tsx deleted file mode 100644 index 908f49bd026..00000000000 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.markers.tsx +++ /dev/null @@ -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'; diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js index 539ecb2860a..f0338d287b9 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js +++ b/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 UiFindInput from '../common/UiFindInput'; +import { selectors } from '@grafana/e2e-selectors'; import TracePageSearchBar, { getStyles } from './TracePageSearchBar'; -import * as markers from './TracePageSearchBar.markers'; const defaultProps = { forwardedRef: React.createRef(), navigable: true, - suffix: '', - searchValue: 'something', + searchBarSuffix: 'suffix', + searchValue: 'value', }; describe('', () => { - let wrapper; - - beforeEach(() => { - wrapper = shallow(); - }); - describe('truthy textFilter', () => { it('renders UiFindInput with correct props', () => { - const renderedUiFindInput = wrapper.find(UiFindInput); - const suffix = shallow(renderedUiFindInput.prop('inputProps').suffix); - expect(renderedUiFindInput.prop('inputProps')).toEqual( - expect.objectContaining({ - 'data-test': markers.IN_TRACE_SEARCH, - name: 'search', - }) - ); + render(); + expect(screen.getByPlaceholderText('Find...')['value']).toEqual('value'); + const suffix = screen.getByLabelText('Search bar suffix'); const theme = createTheme(); - expect(suffix.hasClass(getStyles(theme).TracePageSearchBarSuffix)).toBe(true); - expect(suffix.text()).toBe(String(defaultProps.suffix)); + expect(suffix['className']).toBe(getStyles(theme).TracePageSearchBarSuffix); + expect(suffix.textContent).toBe('suffix'); }); it('renders buttons', () => { - const buttons = wrapper.find('Button'); - expect(buttons.length).toBe(2); - buttons.forEach((button) => { - expect(button.prop('disabled')).toBe(false); - }); + render(); + const nextResButton = screen.queryByRole('button', { name: 'Next results button' }); + const prevResButton = screen.queryByRole('button', { name: 'Prev results button' }); + 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 }); - var buttons = wrapper.find('Button'); - expect(buttons.length).toBe(0); - wrapper.setProps({ navigable: true }); - buttons = wrapper.find('Button'); - expect(buttons.length).toBe(2); + const props = { + ...defaultProps, + navigable: false, + }; + render(); + 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(); }); - it('renders UiFindInput with correct props', () => { - expect(wrapper.find(UiFindInput).prop('inputProps').suffix).toBe(null); + it('does not render suffix', () => { + expect(screen.queryByLabelText('Search bar suffix')).not.toBeInTheDocument(); }); it('renders buttons', () => { - const buttons = wrapper.find('Button'); - expect(buttons.length).toBe(2); - buttons.forEach((button) => { - expect(button.prop('disabled')).toBe(true); - }); + expect(screen.getByRole('button', { name: 'Next results button' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Prev results button' })).toBeInTheDocument(); }); }); }); diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx index 0d54d4e2419..7c7f5b7e803 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx +++ b/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 ? ( - + {searchBarSuffix} ) : 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} />