IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Convert legacy Input test to RTL (#49713)

Browse Source
This commit is contained in:
kay delaney 2022-05-26 17:10:35 +01:00 committed by GitHub
parent a12cdf8283
commit bae9a60089
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -5,9 +5,6 @@
//
exports[`no enzyme tests`] = {
value: `{
"packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx:3129955645": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/Graph/Graph.test.tsx:1664091255": [
[0, 17, 13, "RegExp match", "2409514259"]
],

43
packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx
View File

@ -1,12 +1,13 @@
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import renderer from 'react-test-renderer';
import { ValidationEvents } from '../../../../types';
import { EventsWithValidation } from '../../../../utils';
import { Input } from './Input';
const PLACEHOLDER_TEXT = 'Placeholder Text';
const TEST_ERROR_MESSAGE = 'Value must be empty or less than 3 chars';
const testBlurValidation: ValidationEvents = {
[EventsWithValidation.onBlur]: [
@ -21,33 +22,23 @@ const testBlurValidation: ValidationEvents = {
describe('Input', () => {
it('renders correctly', () => {
const tree = renderer.create(<Input />).toJSON();
expect(tree).toMatchSnapshot();
expect(() => render(<Input />)).not.toThrow();
});
it('should validate with error onBlur', () => {
const wrapper = shallow(<Input validationEvents={testBlurValidation} />);
const evt = {
persist: jest.fn,
target: {
value: 'I can not be more than 2 chars',
},
};
wrapper.find('input').simulate('blur', evt);
expect(wrapper.state('error')).toBe(TEST_ERROR_MESSAGE);
it('should validate with error onBlur', async () => {
render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
await userEvent.type(inputEl, 'abcde');
inputEl.blur();
await screen.findByText(TEST_ERROR_MESSAGE);
});
it('should validate without error onBlur', () => {
const wrapper = shallow(<Input validationEvents={testBlurValidation} />);
const evt = {
persist: jest.fn,
target: {
value: 'Hi',
},
};
wrapper.find('input').simulate('blur', evt);
expect(wrapper.state('error')).toBe(null);
it('should validate without error onBlur', async () => {
render(<Input validationEvents={testBlurValidation} placeholder={PLACEHOLDER_TEXT} />);
const inputEl = screen.getByPlaceholderText(PLACEHOLDER_TEXT);
await userEvent.type(inputEl, 'Hi');
inputEl.blur();
const errorMessage = screen.queryByText(TEST_ERROR_MESSAGE);
expect(errorMessage).not.toBeInTheDocument();
});
});

15
packages/grafana-ui/src/components/Forms/Legacy/Input/__snapshots__/Input.test.tsx.snap
View File

@ -1,15 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Input renders correctly 1`] = `
<div
style={
Object {
"flexGrow": 1,
}
}
>
<input
className="gf-form-input"
/>
</div>
`;