wix-style-react/dist/es/src/Slider/Slider.spec.js

wix-style-react

var _this = this;

import React from 'react';
import Slider from './Slider';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import sliderDriverFactory from './Slider.driver';

describe('Slider', function () {
  var createDriver = createDriverFactory(sliderDriverFactory);
  var driver = void 0;

  it('should render slider', function () {
    var onChange = jest.fn(function (value) {
      return _this.setState({ value: value });
    });
    var props = { value: [3], min: 1, max: 10, onChange: onChange };

    driver = createDriver(React.createElement(Slider, props));

    expect(driver.numOfSliderDots()).toBe(10);
    expect(driver.numOfSliderHandles()).toBe(1);
    expect(driver.isDotSelected(3)).toBe(true);
  });

  it('should render slider with multi-range', function () {
    var onChange = jest.fn(function (value) {
      return _this.setState({ value: value });
    });
    var props = { value: [3, 5, 7], min: 1, max: 10, onChange: onChange };

    driver = createDriver(React.createElement(Slider, props));

    expect(driver.numOfSliderDots()).toBe(10);
    expect(driver.numOfSliderHandles()).toBe(3);

    props.value.forEach(function (selectedValue) {
      expect(driver.isDotSelected(selectedValue)).toBe(true);
    });
  });

  it('should show correct value on hover', function () {
    var onChange = jest.fn(function (value) {
      return _this.setState({ value: value });
    });
    var props = { value: [3, 5, 7], min: 1, max: 10, onChange: onChange };

    driver = createDriver(React.createElement(Slider, props));

    driver.hoverHandle({ handleIndex: 0 });

    expect(driver.getToolTipValue()).toBe('' + props.value[0]);

    driver.unHoverHandle({ handleIndex: 0 });
    driver.hoverHandle({ handleIndex: 1 });

    expect(driver.getToolTipValue()).toBe('' + props.value[1]);
  });

  it('should not display tooltip if `displayTooltip` is set to false', function () {
    var onChange = jest.fn(function (value) {
      return _this.setState({ value: value });
    });
    var props = { value: [4], displayTooltip: false, onChange: onChange };

    driver = createDriver(React.createElement(Slider, props));

    driver.hoverHandle({ handleIndex: 0 });

    expect(driver.getToolTipValue()).toBeFalsy();

    driver.unHoverHandle({ handleIndex: 0 });
  });
});