Chore: convert MetricSelect test to RTL (#56801)

* convert MetricSelect test to RTL

* remove type param
This commit is contained in:
Ashley Harrison 2022-10-12 16:33:12 +01:00 committed by GitHub
parent 26e7228cd9
commit 7d18460d8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 46 deletions

View File

@ -41,9 +41,6 @@ exports[`no enzyme tests`] = {
"packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [
[13, 26, 13, "RegExp match", "2409514259"]
],
"public/app/core/components/Select/MetricSelect.test.tsx:1074737147": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:145048794": [
[0, 17, 13, "RegExp match", "2409514259"]
]
@ -2598,10 +2595,6 @@ exports[`better eslint`] = {
"public/app/core/components/RolePicker/RolePickerMenu.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/core/components/Select/MetricSelect.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/Select/ReadonlyFolderPicker/api.test.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],

View File

@ -1,50 +1,52 @@
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { select, openMenu } from 'react-select-event';
import { LegacyForms } from '@grafana/ui';
import { MetricSelect, Props } from './MetricSelect';
import { MetricSelect } from './MetricSelect';
const { Select } = LegacyForms;
const props: Props = {
isSearchable: false,
onChange: jest.fn(),
value: '',
placeholder: 'Select Reducer',
className: 'width-15',
options: [
{
label: 'foo',
value: 'foo',
},
{
label: 'bar',
value: 'bar',
},
],
variables: [],
};
describe('MetricSelect', () => {
describe('When receive props', () => {
it('should pass correct set of props to Select component', () => {
const props: any = {
placeholder: 'Select Reducer',
className: 'width-15',
options: [],
variables: [],
};
const wrapper = shallow(<MetricSelect {...props} />);
expect(wrapper.find(Select).props()).toMatchObject({
className: 'width-15',
isMulti: false,
isClearable: false,
backspaceRemovesValue: false,
isSearchable: true,
maxMenuHeight: 500,
placeholder: 'Select Reducer',
});
it('passes the placeholder, options and onChange correctly to Select', async () => {
render(<MetricSelect {...props} />);
const metricSelect = screen.getByRole('combobox');
expect(metricSelect).toBeInTheDocument();
expect(screen.getByText('Select Reducer')).toBeInTheDocument();
await select(metricSelect, 'foo', {
container: document.body,
});
it('should pass callbacks correctly to the Select component', () => {
const spyOnChange = jest.fn();
const props: any = {
onChange: spyOnChange,
options: [],
variables: [],
};
const wrapper = shallow(<MetricSelect {...props} />);
const select = wrapper.find(Select);
expect(props.onChange).toHaveBeenCalledWith('foo');
});
select.props().onChange({ value: 'foo' }, { action: 'select-option', option: undefined });
it('has the correct noOptionsMessage', () => {
const propsWithoutOptions = {
...props,
options: [],
};
render(<MetricSelect {...propsWithoutOptions} />);
expect(select.props().noOptionsMessage).toBeDefined();
const metricSelect = screen.getByRole('combobox');
expect(metricSelect).toBeInTheDocument();
// @ts-ignore typescript doesn't understand that noOptionsMessage can't be undefined here
const noOptionsMessage = select.props().noOptionsMessage();
expect(noOptionsMessage).toEqual('No options found');
expect(spyOnChange).toHaveBeenCalledWith('foo');
});
openMenu(metricSelect);
expect(screen.getByText('No options found')).toBeInTheDocument();
});
});