IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-09-05 04:40:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Adjust unit tests so they work with react 18 (#64698)

Browse Source 
tweak unit tests so they work with react 18
This commit is contained in:
Ashley Harrison
2023-03-14 17:24:04 +00:00
committed by GitHub
parent c29b6c07dc
commit 85e5326040
33 changed files with 452 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx
+144 -127
View File
@@ -1,4 +1,5 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
@@ -44,139 +45,155 @@ const setup = (spy?: jest.Mock, propOverrides?: Partial<Props>) => {
render(<ValueMappingsEditorModal {...props} />);
};
describe('Render', () => {
describe('ValueMappingsEditorModal', () => {
it('should render component', () => {
setup();
});
});
describe('On remove mapping', () => {
it('Should remove mapping at index 0', () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy);
describe('On remove mapping', () => {
it('Should remove mapping at index 0', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy);
screen.getAllByTestId('remove-value-mapping')[0].click();
screen.getByText('Update').click();
await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.RangeToText,
options: {
from: 21,
to: 30,
result: {
text: 'Meh',
index: 0,
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.RangeToText,
options: {
from: 21,
to: 30,
result: {
text: 'Meh',
index: 0,
},
},
},
},
]);
});
});
describe('When adding and updating value mapp', () => {
it('should be 3', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy);
fireEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(selectors.components.ValuePicker.select('Add a new mapping'));
await selectOptionInTest(selectComponent, 'Value');
const input = (await screen.findAllByPlaceholderText('Exact value to match'))[1];
fireEvent.change(input, { target: { value: 'New' } });
fireEvent.change(screen.getAllByPlaceholderText('Optional display text')[2], { target: { value: 'display' } });
fireEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.ValueToText,
options: {
'20': {
text: 'Ok',
index: 0,
},
New: {
text: 'display',
index: 2,
},
},
},
{
type: MappingType.RangeToText,
options: {
from: 21,
to: 30,
result: {
text: 'Meh',
index: 1,
},
},
},
]);
});
});
describe('When adding and updating range map', () => {
it('should add new range map', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy, { value: [] });
screen.getAllByTestId('remove-value-mapping')[0].click();
fireEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(selectors.components.ValuePicker.select('Add a new mapping'));
await selectOptionInTest(selectComponent, 'Range');
fireEvent.change(screen.getByPlaceholderText('Range start'), { target: { value: '10' } });
fireEvent.change(screen.getByPlaceholderText('Range end'), { target: { value: '20' } });
fireEvent.change(screen.getByPlaceholderText('Optional display text'), { target: { value: 'display' } });
fireEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.RangeToText,
options: {
from: 10,
to: 20,
result: {
text: 'display',
index: 0,
},
},
},
]);
});
});
describe('When adding and updating regex map', () => {
it('should add new regex map', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy, { value: [] });
screen.getAllByTestId('remove-value-mapping')[0].click();
fireEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(selectors.components.ValuePicker.select('Add a new mapping'));
await selectOptionInTest(selectComponent, 'Regex');
fireEvent.change(screen.getByPlaceholderText('Regular expression'), { target: { value: '(.*).example.com' } });
fireEvent.change(screen.getByPlaceholderText('Optional display text'), { target: { value: '$1' } });
fireEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.RegexToText,
options: {
pattern: '(.*).example.com',
result: {
text: '$1',
index: 0,
},
},
},
]);
]);
});
});
describe('When adding and updating value mapp', () => {
it('should be 3', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy);
await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
await selectOptionInTest(selectComponent, 'Value');
const input = (await screen.findAllByPlaceholderText('Exact value to match'))[1];
await userEvent.clear(input);
await userEvent.type(input, 'New');
await userEvent.clear(screen.getAllByPlaceholderText('Optional display text')[2]);
await userEvent.type(screen.getAllByPlaceholderText('Optional display text')[2], 'display');
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.ValueToText,
options: {
'20': {
text: 'Ok',
index: 0,
},
New: {
text: 'display',
index: 2,
},
},
},
{
type: MappingType.RangeToText,
options: {
from: 21,
to: 30,
result: {
text: 'Meh',
index: 1,
},
},
},
]);
});
});
describe('When adding and updating range map', () => {
it('should add new range map', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy, { value: [] });
await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
await selectOptionInTest(selectComponent, 'Range');
await userEvent.clear(screen.getByPlaceholderText('Range start'));
await userEvent.type(screen.getByPlaceholderText('Range start'), '10');
await userEvent.clear(screen.getByPlaceholderText('Range end'));
await userEvent.type(screen.getByPlaceholderText('Range end'), '20');
await userEvent.clear(screen.getByPlaceholderText('Optional display text'));
await userEvent.type(screen.getByPlaceholderText('Optional display text'), 'display');
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.RangeToText,
options: {
from: 10,
to: 20,
result: {
text: 'display',
index: 0,
},
},
},
]);
});
});
describe('When adding and updating regex map', () => {
it('should add new regex map', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy, { value: [] });
await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
await selectOptionInTest(selectComponent, 'Regex');
await userEvent.clear(screen.getByPlaceholderText('Regular expression'));
await userEvent.type(screen.getByPlaceholderText('Regular expression'), '(.*).example.com');
await userEvent.clear(screen.getByPlaceholderText('Optional display text'));
await userEvent.type(screen.getByPlaceholderText('Optional display text'), '$1');
await userEvent.click(screen.getByText('Update'));
expect(onChangeSpy).toBeCalledWith([
{
type: MappingType.RegexToText,
options: {
pattern: '(.*).example.com',
result: {
text: '$1',
index: 0,
},
},
},
]);
});
});
});