<commit_before><commit_msg>chore: add test for range input (#299)<commit_after>import { ThemeProvider } from '@sajari/react-sdk-utils';
import { fireEvent, render } from '@testing-library/react';
import React from 'react';

import RangeInput from '..';

describe('RangeInput', () => {
  it('should call the onChange handler', () => {
    const onChange = jest.fn();
    const { getAllByRole } = render(
      <ThemeProvider>
        <RangeInput value={[50, 75]} onChange={onChange} />
      </ThemeProvider>,
    );

    const [leftSlider] = Array.from(getAllByRole('slider'));
    const times = 13;
    for (let i = 0; i < times; i += 1) {
      fireEvent.keyDown(leftSlider, { keyCode: 37 });
    }
    expect(leftSlider.dataset.value).toBe(`${50 - times}`);
    expect(onChange).toHaveBeenCalledWith([50 - times, 75]);
  });

  it('should render ticks', () => {
    const { getByText } = render(
      <ThemeProvider>
        <RangeInput value={[50, 75]} tick={100} min={0} max={500} />
      </ThemeProvider>,
    );
    const ticks = [0, 100, 200, 300, 400, 500];
    // eslint-disable-next-line no-restricted-syntax
    for (const tick of ticks) {
      expect(getByText(tick.toString())).toBeInTheDocument();
    }
  });

  it('should increase value by provided steps', () => {
    const onChange = jest.fn();
    const { getAllByRole } = render(
      <ThemeProvider>
        <RangeInput value={[50, 75]} onChange={onChange} tick={100} min={0} max={500} step={25} />
      </ThemeProvider>,
    );
    const [, rightSlider] = Array.from(getAllByRole('slider'));
    const times = 3;
    const steps = 25;
    for (let i = 0; i < times; i += 1) {
      fireEvent.keyDown(rightSlider, { keyCode: 39 });
    }
    expect(rightSlider.dataset.value).toBe(`${75 + times * steps}`);
    expect(onChange).toHaveBeenCalledWith([50, 75 + times * steps]);
  });

  it('should increase value when input value changes', () => {
    const onChange = jest.fn();
    const { container, getAllByRole } = render(
      <ThemeProvider>
        <RangeInput value={[50, 75]} showInputs onChange={onChange} tick={100} min={0} max={500} step={25} />
      </ThemeProvider>,
    );
    const [leftSlider] = Array.from(getAllByRole('slider'));
    const [leftInput] = Array.from<HTMLInputElement>(container.querySelectorAll('input[type=number]'));
    fireEvent.change(leftInput, { target: { value: '21' } });
    expect(leftSlider.dataset.value).toBe('21');
    expect(onChange).toHaveBeenCalledWith([21, 75]);
  });
});

{'fraction_non_alphanumeric': 0.17724550898203592, 'fraction_numerical': 0.037125748502994015, 'mean_word_length': 3.4353982300884955, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3433580', 'n_tokens_mistral': 864, 'n_tokens_neox': 803, 'n_words': 179}