root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 21 Packages Projects Releases Wiki Activity

Chore: Convert DataLinks tests to RTL (#51137) 

* Convert DataLinks tests to RTL

* Convert DataLinks test to RTL

* Convert DataLinks test to RTL

* Convert DataLinks test to RTL
This commit is contained in:
Seyaji 2022-06-21 15:55:10 +01:00 committed by GitHub
parent bab017799e
commit 0bfd48c164
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -131,9 +131,6 @@ exports[`no enzyme tests`] = {
"public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx:3481855642": [
[0, 26, 13, "RegExp match", "2409514259"]
],
"public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx:248699332": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx:57753101": [
[0, 19, 13, "RegExp match", "2409514259"]
],

109
public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx
View File

@ -1,84 +1,61 @@
import { mount } 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 { Button } from '@grafana/ui';
import { DataLinkConfig } from '../types';
import { DataLink } from './DataLink';
import { DataLinks } from './DataLinks';
import { DataLinks, Props } from './DataLinks';
describe('DataLinks', () => {
let originalGetSelection: typeof window.getSelection;
beforeAll(() => {
originalGetSelection = window.getSelection;
window.getSelection = () => null;
const setup = (propOverrides?: Partial<Props>) => {
const props: Props = {
value: [],
onChange: jest.fn(),
...propOverrides,
};
return render(<DataLinks {...props} />);
};
describe('DataLinks tests', () => {
it('should render correctly with no fields', async () => {
setup();
expect(screen.getByRole('heading', { name: 'Data links' }));
expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
expect(await screen.findAllByRole('button')).toHaveLength(1);
});
afterAll(() => {
window.getSelection = originalGetSelection;
it('should render correctly when passed fields', async () => {
setup({ value: testValue });
expect(await screen.findAllByRole('button', { name: 'Remove field' })).toHaveLength(2);
expect(await screen.findAllByRole('checkbox', { name: 'Internal link' })).toHaveLength(2);
});
it('renders correctly when no fields', async () => {
let wrapper: any;
await act(
// @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns.
async () => {
wrapper = await mount(<DataLinks onChange={() => {}} />);
}
);
expect(wrapper.find(Button).length).toBe(1);
expect(wrapper.find(Button).contains('Add')).toBeTruthy();
expect(wrapper.find(DataLink).length).toBe(0);
});
it('renders correctly when there are fields', async () => {
let wrapper: any;
await act(
// @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns.
async () => {
wrapper = await mount(<DataLinks value={testValue} onChange={() => {}} />);
}
);
expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
expect(wrapper.find(DataLink).length).toBe(2);
});
it('adds new field', async () => {
it('should call onChange to add a new field when the add button is clicked', async () => {
const onChangeMock = jest.fn();
let wrapper: any;
await act(
// @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns.
async () => {
wrapper = await mount(<DataLinks onChange={onChangeMock} />);
}
);
const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
addButton.simulate('click');
expect(onChangeMock.mock.calls[0][0].length).toBe(1);
setup({ onChange: onChangeMock });
expect(onChangeMock).not.toHaveBeenCalled();
const addButton = screen.getByRole('button', { name: 'Add' });
await userEvent.click(addButton);
expect(onChangeMock).toHaveBeenCalled();
});
it('removes field', async () => {
it('should call onChange to remove a field when the remove button is clicked', async () => {
const onChangeMock = jest.fn();
let wrapper: any;
await act(
// @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns.
async () => {
wrapper = await mount(<DataLinks value={testValue} onChange={onChangeMock} />);
}
);
const removeButton = wrapper.find(DataLink).at(0).find(Button);
removeButton.simulate('click');
const newValue = onChangeMock.mock.calls[0][0];
expect(newValue.length).toBe(1);
expect(newValue[0]).toMatchObject({
field: 'regex2',
url: 'localhost2',
});
setup({ value: testValue, onChange: onChangeMock });
expect(onChangeMock).not.toHaveBeenCalled();
const removeButton = await screen.findAllByRole('button', { name: 'Remove field' });
await userEvent.click(removeButton[0]);
expect(onChangeMock).toHaveBeenCalled();
});
});
const testValue = [
const testValue: DataLinkConfig[] = [
{
field: 'regex1',
url: 'localhost1',

2
public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx
View File

@ -20,7 +20,7 @@ const getStyles = (theme: GrafanaTheme2) => {
};
};
type Props = {
export type Props = {
value?: DataLinkConfig[];
onChange: (value: DataLinkConfig[]) => void;
};