Chore: Convert QueryOperationAction test to RTL (#51139)

* Convert QueryOperationAction test to RTL

* Convert QueryOperationAction to RTL

* Convert QueryOperationAction test to RTL
This commit is contained in:
Seyaji 2022-06-21 15:53:10 +01:00 committed by GitHub
parent 665da5d063
commit bab017799e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 19 deletions

View File

@ -92,9 +92,6 @@ exports[`no enzyme tests`] = {
"packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js:276996587": [
[14, 19, 13, "RegExp match", "2409514259"]
],
"public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx:3032694716": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx:3743889097": [
[0, 26, 13, "RegExp match", "2409514259"]
],

View File

@ -1,24 +1,53 @@
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { QueryOperationAction } from './QueryOperationAction';
import { selectors } from '@grafana/e2e-selectors';
describe('QueryOperationAction', () => {
it('renders', () => {
expect(() => shallow(<QueryOperationAction title="test" icon="panel-add" onClick={() => {}} />)).not.toThrow();
import { QueryOperationAction, QueryOperationActionProps } from './QueryOperationAction';
const setup = (propOverrides?: Partial<QueryOperationActionProps>) => {
const props: QueryOperationActionProps = {
icon: 'panel-add',
title: 'test',
onClick: jest.fn(),
disabled: false,
...propOverrides,
};
render(<QueryOperationAction {...props} />);
};
describe('QueryOperationAction tests', () => {
it('should render component', () => {
setup();
expect(
screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('test') })
).toBeInTheDocument();
});
describe('when disabled', () => {
it('does not call onClick handler', () => {
const clickSpy = jest.fn();
const wrapper = shallow(<QueryOperationAction icon="panel-add" onClick={clickSpy} title="Test action" />);
const actionEl = wrapper.find({ 'aria-label': 'Test action query operation action' });
expect(actionEl).toHaveLength(1);
expect(clickSpy).not.toBeCalled();
it('should call on click handler', async () => {
const clickSpy = jest.fn();
setup({ disabled: false, onClick: clickSpy });
actionEl.first().simulate('click');
expect(clickSpy).not.toHaveBeenCalled();
const queryButton = screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('test') });
expect(clickSpy).toBeCalledTimes(1);
});
await userEvent.click(queryButton);
expect(clickSpy).toHaveBeenCalled();
});
it('should not call on click handler when disabled', async () => {
const clickSpy = jest.fn();
setup({ disabled: true, onClick: clickSpy });
expect(clickSpy).not.toHaveBeenCalled();
const queryButton = screen.getByRole('button', { name: selectors.components.QueryEditorRow.actionButton('test') });
await userEvent.click(queryButton);
expect(clickSpy).not.toHaveBeenCalled();
});
});

View File

@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { IconButton, IconName, useStyles2 } from '@grafana/ui';
interface QueryOperationActionProps {
export interface QueryOperationActionProps {
icon: IconName;
title: string;
onClick: (e: React.MouseEvent) => void;