apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/49805/head^2
Joey Tawadrous 4 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      .betterer.results
  2. 15
      packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.markers.tsx
  3. 73
      packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js
  4. 8
      packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx
  5. 6
      public/app/features/explore/TraceView/TraceViewContainer.test.tsx

3
.betterer.results
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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');

Write Preview
Loading…
Cancel
Save