apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Chore: Convert QueryOperationRow test to RTL (#51290)

Browse Source 
* Convert QueryOperationRow test to RTL

* Convert QueryOperationRow test to RTL

* Convert QueryOperationRow test to RTL

* Convert QueryOperationRow test to RTL

* Update QueryOperationRow.test.tsx

* update betterer

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
pull/51742/head
Seyaji 3 years ago committed by GitHub
parent d4eef3bd76
commit 500010e0b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 100 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. 7
      .betterer.results
  2. 145
      public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx
  3. 2
      public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

7
.betterer.results
Unescape View File

@ -65,9 +65,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/QueryOperationRow.test.tsx:3743889097": [
[0, 26, 13, "RegExp match", "2409514259"]
],
"public/app/core/components/Select/MetricSelect.test.tsx:1074737147": [
[0, 19, 13, "RegExp match", "2409514259"]
],
@ -3125,10 +3122,6 @@ exports[`better eslint`] = {
"public/app/core/components/PermissionList/PermissionList.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/core/components/RolePicker/RolePickerMenu.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],

145
public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx
Unescape View File

@ -1,56 +1,44 @@
import { mount, shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { QueryOperationRow } from './QueryOperationRow';
import { QueryOperationRow, QueryOperationRowProps } from './QueryOperationRow';
const setup = (propOverrides?: Partial<QueryOperationRowProps>) => {
const props: QueryOperationRowProps = {
title: 'test-title',
headerElement: '',
index: 0,
id: 'test-id',
children: <div>children</div>,
...propOverrides,
};
return render(<QueryOperationRow {...props}></QueryOperationRow>);
};
describe('QueryOperationRow', () => {
it('renders', () => {
expect(() =>
shallow(
<QueryOperationRow id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
)
).not.toThrow();
it('renders without exploding', () => {
expect(() => setup()).not.toThrow();
});
describe('callbacks', () => {
it('should not call onOpen when component is shallowed', async () => {
const onOpenSpy = jest.fn();
// @ts-ignore strict null error, you shouldn't use promise like approach with act but I don't know what the intention is here
await act(async () => {
shallow(
<QueryOperationRow onOpen={onOpenSpy} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
});
expect(onOpenSpy).not.toBeCalled();
});
it('renders the component content', () => {
setup();
expect(screen.getByText(/^test-title$/)).toBeInTheDocument();
});
describe('callbacks', () => {
it('should call onOpen when row is opened and onClose when row is collapsed', async () => {
const onOpenSpy = jest.fn();
const onCloseSpy = jest.fn();
const wrapper = mount(
<QueryOperationRow title="title" onOpen={onOpenSpy} onClose={onCloseSpy} isOpen={false} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
const titleEl = wrapper.find({ 'aria-label': 'Query operation row title' });
expect(titleEl).toHaveLength(1);
// @ts-ignore strict null error, you shouldn't use promise like approach with act but I don't know what the intention is here
await act(async () => {
// open
titleEl.first().simulate('click');
});
// @ts-ignore strict null error, you shouldn't use promise like approach with act but I don't know what the intention is here
await act(async () => {
// close
titleEl.first().simulate('click');
});
setup({ isOpen: false, onOpen: onOpenSpy, onClose: onCloseSpy });
const queryRow = screen.getByText(/^test-title$/);
expect(queryRow).toBeInTheDocument();
// open row on click
await userEvent.click(queryRow);
// close row on click
await userEvent.click(queryRow);
expect(onOpenSpy).toBeCalledTimes(1);
expect(onCloseSpy).toBeCalledTimes(1);
@ -59,40 +47,26 @@ describe('QueryOperationRow', () => {
describe('headerElement rendering', () => {
it('should render headerElement provided as element', () => {
const title = <div aria-label="test title">Test</div>;
const wrapper = mount(
<QueryOperationRow headerElement={title} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
const titleEl = wrapper.find({ 'aria-label': 'test title' });
expect(titleEl).toHaveLength(1);
const title = <div aria-label="test title">test-header-element</div>;
setup({ headerElement: title, id: 'test-id', index: 0 });
expect(screen.getByText(/^test-header-element$/)).toBeInTheDocument();
});
it('should render headerElement provided as function', () => {
const title = () => <div aria-label="test title">Test</div>;
const wrapper = mount(
<QueryOperationRow headerElement={title} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
const titleEl = wrapper.find({ 'aria-label': 'test title' });
expect(titleEl).toHaveLength(1);
const title = () => <div aria-label="test title">test-function-header</div>;
setup({ headerElement: title, id: 'test-id', index: 0 });
expect(screen.getByText(/^test-function-header$/)).toBeInTheDocument();
});
it('should expose api to headerElement rendered as function', () => {
const propsSpy = jest.fn();
const title = (props: any) => {
const title = (props: Partial<QueryOperationRowProps>) => {
propsSpy(props);
return <div aria-label="test title">Test</div>;
};
shallow(
<QueryOperationRow headerElement={title} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
setup({ headerElement: title, id: 'test-id', index: 0 });
expect(Object.keys(propsSpy.mock.calls[0][0])).toContain('isOpen');
});
@ -100,40 +74,27 @@ describe('QueryOperationRow', () => {
describe('actions rendering', () => {
it('should render actions provided as element', () => {
const actions = <div aria-label="test actions">Test</div>;
const wrapper = mount(
<QueryOperationRow actions={actions} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
const actionsEl = wrapper.find({ 'aria-label': 'test actions' });
expect(actionsEl).toHaveLength(1);
const actions = <div aria-label="test actions">test-actions</div>;
setup({ actions: actions, id: 'test-id', index: 0 });
expect(screen.getByText(/^test-actions$/)).toBeInTheDocument();
});
it('should render actions provided as function', () => {
const actions = () => <div aria-label="test actions">Test</div>;
const wrapper = mount(
<QueryOperationRow actions={actions} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
const actionsEl = wrapper.find({ 'aria-label': 'test actions' });
expect(actionsEl).toHaveLength(1);
const actions = () => <div aria-label="test actions">test-actions</div>;
setup({ actions: actions, id: 'test-id', index: 0 });
expect(screen.getByText(/^test-actions$/)).toBeInTheDocument();
});
it('should expose api to title rendered as function', () => {
const propsSpy = jest.fn();
const actions = (props: any) => {
const actions = (props: Partial<QueryOperationRowProps>) => {
propsSpy(props);
return <div aria-label="test actions">Test</div>;
return <div aria-label="test actions">test-actions</div>;
};
shallow(
<QueryOperationRow actions={actions} id="test-id" index={0}>
<div>Test</div>
</QueryOperationRow>
);
setup({ actions: actions, id: 'test-id', index: 0 });
expect(screen.getByText(/^test-actions$/)).toBeInTheDocument();
expect(Object.keys(propsSpy.mock.calls[0][0])).toEqual(['isOpen', 'onOpen', 'onClose']);
});
});

2
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
Unescape View File

@ -9,7 +9,7 @@ import { ReactUtils, stylesFactory, useTheme } from '@grafana/ui';
import { QueryOperationRowHeader } from './QueryOperationRowHeader';
interface QueryOperationRowProps {
export interface QueryOperationRowProps {
index: number;
id: string;
title?: string;

Write Preview
Loading…
Cancel
Save