IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Joey Tawadrous 2022-06-06 16:31:51 +01:00 committed by GitHub
parent 6fcb2cd307
commit d20608ab84
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -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"]
],

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

@ -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';

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

@ -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('<TracePageSearchBar>', () => {
let wrapper;
beforeEach(() => {
wrapper = shallow(<TracePageSearchBar {...defaultProps} />);
});
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(<TracePageSearchBar {...defaultProps} />);
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(<TracePageSearchBar {...defaultProps} />);
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(<TracePageSearchBar {...props} />);
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', () => {
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();
});
});
});

8
packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
View File

@ -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}
/>
</>

6
public/app/features/explore/TraceView/TraceViewContainer.test.tsx
View File

@ -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 prevResultButton = screen.getByTestId('trace-page-search-bar-prev-result-button');
const suffix = screen.getByTestId('trace-page-search-bar-suffix');
const nextResultButton = screen.getByRole('button', { name: 'Next results button' });
const prevResultButton = screen.getByRole('button', { name: 'Prev results button' });
const suffix = screen.getByLabelText('Search bar suffix');
await userEvent.click(nextResultButton);
expect(suffix.textContent).toBe('1 of 2');