IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-28 03:34:15 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor(loki-derived-fields): migrate test to testing library (#54729)

Browse Source
This commit is contained in:
Matias Chomicki 2022-09-07 10:54:28 +02:00 committed by GitHub
parent 0324e9c60e
commit c0b3cd3da0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.betterer.results
View File

@ -76,9 +76,6 @@ exports[`no enzyme tests`] = {
],
"public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
[1, 19, 13, "RegExp match", "2409514259"]
],
"public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:2402631398": [
[0, 17, 13, "RegExp match", "2409514259"]
]
}`
};
@ -6928,16 +6925,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"],
[0, 0, 0, "Unexpected any. Specify a different type.", "3"],
[0, 0, 0, "Unexpected any. Specify a different type.", "4"],
[0, 0, 0, "Unexpected any. Specify a different type.", "5"],
[0, 0, 0, "Unexpected any. Specify a different type.", "6"],
[0, 0, 0, "Unexpected any. Specify a different type.", "7"]
],
"public/app/plugins/datasource/loki/datasource.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],

2
public/app/plugins/datasource/loki/configuration/DerivedField.tsx
View File

@ -60,7 +60,7 @@ export const DerivedField = (props: Props) => {
};
return (
<div className={className}>
<div className={className} data-testid="derived-field">
<div className={styles.row}>
<FormField
className={styles.nameField}

81
public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
View File

@ -1,10 +1,6 @@
import { mount } from 'enzyme';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { Button } from '@grafana/ui';
import { DerivedField } from './DerivedField';
import { DerivedFields } from './DerivedFields';
describe('DerivedFields', () => {
@ -18,65 +14,38 @@ describe('DerivedFields', () => {
window.getSelection = originalGetSelection;
});
it('renders correctly when no fields', async () => {
let wrapper: any;
//@ts-ignore
await act(async () => {
wrapper = await mount(<DerivedFields onChange={() => {}} />);
});
expect(wrapper.find(Button).length).toBe(1);
expect(wrapper.find(Button).contains('Add')).toBeTruthy();
expect(wrapper.find(DerivedField).length).toBe(0);
it('renders correctly when no fields', () => {
render(<DerivedFields onChange={() => {}} />);
expect(screen.getByText('Add')).toBeInTheDocument();
expect(screen.queryByText(/example log message/)).not.toBeInTheDocument();
expect(screen.queryByTestId('derived-field')).not.toBeInTheDocument();
});
it('renders correctly when there are fields', async () => {
let wrapper: any;
//@ts-ignore
await act(async () => {
wrapper = await mount(<DerivedFields value={testValue} onChange={() => {}} />);
});
render(<DerivedFields value={testValue} onChange={() => {}} />);
expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
1
);
expect(
wrapper
.find(Button)
.filterWhere((button: any) => button.contains('Show example log message'))
.getDOMNode()
).toHaveAttribute('type', 'button');
expect(wrapper.find(DerivedField).length).toBe(2);
await waitFor(() => expect(screen.getAllByTestId('derived-field')).toHaveLength(2));
expect(screen.getByText('Add')).toBeInTheDocument();
expect(screen.getByText('Show example log message')).toBeInTheDocument();
});
it('adds new field', async () => {
const onChangeMock = jest.fn();
let wrapper: any;
//@ts-ignore
await act(async () => {
wrapper = await mount(<DerivedFields 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);
it('adds a new field', async () => {
const onChange = jest.fn();
render(<DerivedFields onChange={onChange} />);
fireEvent.click(screen.getByText('Add'));
await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
});
it('removes field', async () => {
const onChangeMock = jest.fn();
let wrapper: any;
//@ts-ignore
await act(async () => {
wrapper = await mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
});
const removeButton = wrapper.find(DerivedField).at(0).find(Button);
removeButton.simulate('click');
const newValue = onChangeMock.mock.calls[0][0];
expect(newValue.length).toBe(1);
expect(newValue[0]).toMatchObject({
matcherRegex: 'regex2',
name: 'test2',
url: 'localhost2',
});
it('removes a field', async () => {
const onChange = jest.fn();
render(<DerivedFields value={testValue} onChange={onChange} />);
fireEvent.click((await screen.findAllByTitle('Remove field'))[0]);
await waitFor(() => expect(onChange).toHaveBeenCalledWith([testValue[1]]));
});
});

62
public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
View File

@ -24,8 +24,7 @@ type Props = {
onChange: (value: DerivedFieldConfig[]) => void;
};
export const DerivedFields = (props: Props) => {
const { value, onChange } = props;
export const DerivedFields = ({ value = [], onChange }: Props) => {
const theme = useTheme2();
const styles = getStyles(theme);
@ -40,34 +39,33 @@ export const DerivedFields = (props: Props) => {
</div>
<div className="gf-form-group">
{value &&
value.map((field, index) => {
return (
<DerivedField
className={styles.derivedField}
key={index}
value={field}
onChange={(newField) => {
const newDerivedFields = [...value];
newDerivedFields.splice(index, 1, newField);
onChange(newDerivedFields);
}}
onDelete={() => {
const newDerivedFields = [...value];
newDerivedFields.splice(index, 1);
onChange(newDerivedFields);
}}
suggestions={[
{
value: DataLinkBuiltInVars.valueRaw,
label: 'Raw value',
documentation: 'Exact string captured by the regular expression',
origin: VariableOrigin.Value,
},
]}
/>
);
})}
{value.map((field, index) => {
return (
<DerivedField
className={styles.derivedField}
key={index}
value={field}
onChange={(newField) => {
const newDerivedFields = [...value];
newDerivedFields.splice(index, 1, newField);
onChange(newDerivedFields);
}}
onDelete={() => {
const newDerivedFields = [...value];
newDerivedFields.splice(index, 1);
onChange(newDerivedFields);
}}
suggestions={[
{
value: DataLinkBuiltInVars.valueRaw,
label: 'Raw value',
documentation: 'Exact string captured by the regular expression',
origin: VariableOrigin.Value,
},
]}
/>
);
})}
<div>
<Button
variant="secondary"
@ -77,14 +75,14 @@ export const DerivedFields = (props: Props) => {
icon="plus"
onClick={(event) => {
event.preventDefault();
const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
const newDerivedFields = [...value, { name: '', matcherRegex: '' }];
onChange(newDerivedFields);
}}
>
Add
</Button>
{value && value.length > 0 && (
{value.length > 0 && (
<Button variant="secondary" type="button" onClick={() => setShowDebug(!showDebug)}>
{showDebug ? 'Hide example log message' : 'Show example log message'}
</Button>