Skip to content

Commit

Permalink
Fix RangeWidgetUI tests by changing selectors (temporarily?)
Browse files Browse the repository at this point in the history
  • Loading branch information
VictorVelarde committed Oct 21, 2022
1 parent ccb6237 commit 2dfc0be
Showing 1 changed file with 30 additions and 13 deletions.
43 changes: 30 additions & 13 deletions packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,16 @@ describe('RangeWidgetUI', () => {

test('renders with default props', () => {
const { container } = render(<Widget />);
const minValue = screen.getByRole('slider', { name: 'min value' });
const maxValue = screen.getByRole('slider', { name: 'max value' });

// const minValue = screen.getByLabelText('min value');
// const maxValue = screen.getByLabelText('max value');
const minValue = document.querySelector(
'input[type="range"][aria-label="min value"]'
);
const maxValue = document.querySelector(
'input[type="range"][aria-label="max value"]'
);

const inputMin = screen.getByRole('spinbutton', { name: 'min value' });
const inputMax = screen.getByRole('spinbutton', { name: 'max value' });

Expand All @@ -29,8 +37,8 @@ describe('RangeWidgetUI', () => {
test('renders specified limits', () => {
const { container } = render(<Widget limits={[20, 50]} />);

const minLimit = screen.getByRole('slider', { name: 'min limit' });
const maxLimit = screen.getByRole('slider', { name: 'max limit' });
const minLimit = screen.getByLabelText('min limit');
const maxLimit = screen.getByLabelText('max limit');

expect(minLimit).toHaveAttribute('aria-valuemin', '0');
expect(minLimit).toHaveAttribute('aria-valuemax', '100');
Expand All @@ -46,8 +54,8 @@ describe('RangeWidgetUI', () => {
test('renders specified limits with same min and max values', () => {
const { container } = render(<Widget limits={[50, 50]} />);

const minLimit = screen.getByRole('slider', { name: 'min limit' });
const maxLimit = screen.getByRole('slider', { name: 'max limit' });
const minLimit = screen.getByLabelText('min limit');
const maxLimit = screen.getByLabelText('max limit');

expect(minLimit).toHaveAttribute('aria-valuemin', '0');
expect(minLimit).toHaveAttribute('aria-valuemax', '100');
Expand All @@ -63,8 +71,9 @@ describe('RangeWidgetUI', () => {
test('renders specified limits and values', () => {
const { container } = render(<Widget limits={[20, 80]} data={[40, 60]} />);

const minLimit = screen.getByRole('slider', { name: 'min limit' });
const maxLimit = screen.getByRole('slider', { name: 'max limit' });
const minLimit = screen.getByLabelText('min limit');
const maxLimit = screen.getByLabelText('max limit');

const inputMin = screen.getByRole('spinbutton', { name: 'min value' });
const inputMax = screen.getByRole('spinbutton', { name: 'max value' });

Expand All @@ -85,8 +94,8 @@ describe('RangeWidgetUI', () => {
test('renders specified limits out of min-max range', () => {
const { container } = render(<Widget limits={[101, 200]} />);

const minLimit = screen.getByRole('slider', { name: 'min limit' });
const maxLimit = screen.getByRole('slider', { name: 'max limit' });
const minLimit = screen.getByLabelText('min limit');
const maxLimit = screen.getByLabelText('max limit');

expect(minLimit).toHaveAttribute('aria-valuemin', '0');
expect(minLimit).toHaveAttribute('aria-valuemax', '100');
Expand All @@ -99,13 +108,21 @@ describe('RangeWidgetUI', () => {
expect(container.getElementsByClassName('MuiSlider-mark').length).toBe(0);
});

test('On selected method is called when we change slider values', async () => {
test('on selected method is called when we change slider values', async () => {
const mockOnSelectedRangeChange = jest.fn();
render(<Widget onSelectedRangeChange={mockOnSelectedRangeChange} />);

const inputMin = screen.getByRole('spinbutton', { name: 'min value' });
const inputMax = screen.getByRole('spinbutton', { name: 'max value' });
const minValue = screen.getByRole('slider', { name: 'min value' });
const maxValue = screen.getByRole('slider', { name: 'max value' });

// const minValue = screen.getByLabelText('min value');
// const maxValue = screen.getByLabelText('max value');
const minValue = document.querySelector(
'input[type="range"][aria-label="min value"]'
);
const maxValue = document.querySelector(
'input[type="range"][aria-label="max value"]'
);

fireEvent.change(inputMin, { target: { value: 20 } });
fireEvent.blur(inputMin);
Expand Down

0 comments on commit 2dfc0be

Please sign in to comment.