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

Chore: convert Slider tests to RTL (#48262)

Browse Source 
* convert Slider tests to RTL

* slight update

* don't need to check they're in the document

* Update packages/grafana-ui/src/components/Slider/Slider.test.tsx

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>

* check below minimum value as well

Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
This commit is contained in:
Ashley Harrison 2022-05-03 13:33:30 +01:00 committed by GitHub
parent 7f4b1b767e
commit 806ea058ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -41,9 +41,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:375894800": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/Slider/Slider.test.tsx:751112695": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx:1751923376": [
[0, 31, 13, "RegExp match", "2409514259"]
],

95
packages/grafana-ui/src/components/Slider/Slider.test.tsx
View File

@ -1,4 +1,6 @@
import { mount } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UserEvent } from '@testing-library/user-event/dist/types/setup';
import React from 'react';
import { Slider } from './Slider';
@ -10,46 +12,79 @@ const sliderProps: SliderProps = {
};
describe('Slider', () => {
let user: UserEvent;
beforeEach(() => {
user = userEvent.setup();
});
it('renders without error', () => {
mount(<Slider {...sliderProps} />);
expect(() => render(<Slider {...sliderProps} />)).not.toThrow();
});
it('renders correct contents', () => {
const wrapper = mount(<Slider {...sliderProps} />);
expect(wrapper.html()).toContain('aria-valuemin="10"');
expect(wrapper.html()).toContain('aria-valuemax="20"');
expect(wrapper.html()).toContain('aria-valuenow="10"');
render(<Slider {...sliderProps} />);
const slider = screen.getByRole('slider');
const sliderInput = screen.getByRole('textbox');
expect(slider).toHaveAttribute('aria-valuemin', '10');
expect(slider).toHaveAttribute('aria-valuemax', '20');
expect(slider).toHaveAttribute('aria-valuenow', '10');
expect(sliderInput).toHaveValue('10');
});
it('renders correct contents with a value', () => {
const wrapper = mount(<Slider {...sliderProps} value={15} />);
expect(wrapper.html()).toContain('aria-valuenow="15"');
expect(wrapper.html()).not.toContain('aria-valuenow="20"');
expect(wrapper.html()).not.toContain('aria-valuenow="10"');
render(<Slider {...sliderProps} value={15} />);
const slider = screen.getByRole('slider');
const sliderInput = screen.getByRole('textbox');
expect(slider).toHaveAttribute('aria-valuenow', '15');
expect(sliderInput).toHaveValue('15');
});
it('allows for custom values to be set in the input', () => {
const wrapper = mount(<Slider {...sliderProps} value={10} min={10} max={100} />);
const sliderInput = wrapper.find('input');
sliderInput.simulate('focus');
sliderInput.simulate('change', { target: { value: 50 } });
sliderInput.simulate('blur');
expect(wrapper.html()).toContain('aria-valuenow="50"');
it('allows for custom values to be set in the input', async () => {
render(<Slider {...sliderProps} value={10} min={10} max={100} />);
const slider = screen.getByRole('slider');
const sliderInput = screen.getByRole('textbox');
await user.clear(sliderInput);
await user.type(sliderInput, '50');
expect(slider).toHaveAttribute('aria-valuenow', '50');
expect(sliderInput).toHaveValue('50');
// click outside the input field to blur
await user.click(document.body);
expect(slider).toHaveAttribute('aria-valuenow', '50');
expect(sliderInput).toHaveValue('50');
});
it('defaults after blur if input value is outside of range', () => {
const wrapper = mount(<Slider {...sliderProps} value={10} min={10} max={100} />);
const sliderInput = wrapper.find('input');
sliderInput.simulate('focus');
sliderInput.simulate('change', { target: { value: 200 } });
// re-grab to check value is out of range before blur
const sliderInputIncorrect = wrapper.find('input');
expect(sliderInputIncorrect.get(0).props.value).toEqual('200');
it('sets value to the closest available one after blur if input value is outside of range', async () => {
render(<Slider {...sliderProps} value={10} min={10} max={100} />);
sliderInput.simulate('blur');
expect(wrapper.html()).toContain('aria-valuenow="100"');
// re-grab to check value is back inside range
const sliderInputCorrect = wrapper.find('input');
expect(sliderInputCorrect.get(0).props.value).toEqual('100');
const slider = screen.getByRole('slider');
const sliderInput = screen.getByRole('textbox');
// Check what happens above the maximum value
await user.clear(sliderInput);
await user.type(sliderInput, '200');
expect(sliderInput).toHaveValue('200');
expect(slider).toHaveAttribute('aria-valuenow', '100');
await user.click(document.body); // click outside the input field to blur
expect(sliderInput).toHaveValue('100');
expect(slider).toHaveAttribute('aria-valuenow', '100');
// Check what happens below the minimum value
await user.clear(sliderInput);
await user.type(sliderInput, '1');
expect(sliderInput).toHaveValue('1');
expect(slider).toHaveAttribute('aria-valuenow', '10');
await user.click(document.body); // click outside the input field to blur
expect(sliderInput).toHaveValue('10');
expect(slider).toHaveAttribute('aria-valuenow', '10');
});
});