@enact/ui/Slider/tests/Slider-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _ProgressBar = _interopRequireDefault(require("../../ProgressBar"));
var _Knob = _interopRequireDefault(require("../Knob"));
var _Slider = _interopRequireDefault(require("../Slider"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('Slider', function () {
  function CustomProgressBar() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {});
  }
  test('should return a DOM node reference for `componentRef`', function () {
    var ref = jest.fn();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
      progressBarComponent: CustomProgressBar,
      ref: ref
    }));
    var expected = 'DIV';
    var actual = ref.mock.calls[0][0].nodeName;
    expect(actual).toBe(expected);
  });
  test('should set \'ui-slider-proportion-end-knob\' to 0 when \'defaultValue\' is smaller than min value', function () {
    jest.spyOn(console, 'warn').mockImplementation(function () {});
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
      defaultValue: -10,
      knobComponent: _Knob["default"],
      max: 100,
      min: 0,
      progressBarComponent: _ProgressBar["default"],
      step: 3
    }));
    var slider = _react.screen.getByRole('progressbar').parentElement;
    var expected = '0';
    expect(slider).toHaveStyle({
      '--ui-slider-proportion-end-knob': expected
    });
  });
  test('should set \'ui-slider-proportion-end-knob\' to 1 when \'defaultValue\' is bigger than max value', function () {
    jest.spyOn(console, 'warn').mockImplementation(function () {});
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
      defaultValue: 110,
      knobComponent: _Knob["default"],
      max: 100,
      min: 0,
      progressBarComponent: _ProgressBar["default"],
      step: 3
    }));
    var slider = _react.screen.getByRole('progressbar').parentElement;
    var expected = '1';
    expect(slider).toHaveStyle({
      '--ui-slider-proportion-end-knob': expected
    });
  });
  test('should set \'ui-slider-proportion-end-knob\' to 0.5 when \'defaultValue\' is half of the range between min and max value', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
      defaultValue: 50,
      knobComponent: _Knob["default"],
      max: 100,
      min: 0,
      progressBarComponent: _ProgressBar["default"],
      step: 3
    }));
    var slider = _react.screen.getByRole('progressbar').parentElement;
    var expected = '0.5';
    expect(slider).toHaveStyle({
      '--ui-slider-proportion-end-knob': expected
    });
  });
  test('should fire `onChange` with `onChange` type of horizontal slider when value changed', function () {
    var handleChange = jest.fn();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
      defaultValue: 50,
      onChange: handleChange,
      progressBarComponent: _ProgressBar["default"],
      step: 5
    }));
    var knob = _react.screen.getByRole('progressbar').children.item(1);
    _react.fireEvent.mouseDown(knob);
    var expected = {
      type: 'onChange'
    };
    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
    expect(actual).toMatchObject(expected);
  });
  test('should fire `onChange` with `onChange` type of vertical slider when value changed', function () {
    var handleChange = jest.fn();
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
      defaultValue: 50,
      onChange: handleChange,
      progressBarComponent: _ProgressBar["default"],
      orientation: "vertical",
      step: 5
    }));
    var knob = _react.screen.getByRole('progressbar').children.item(1);
    _react.fireEvent.mouseDown(knob);
    var expected = {
      type: 'onChange'
    };
    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
    expect(actual).toMatchObject(expected);
  });
});
describe('Knob', function () {
  test('should render a knob', function () {
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Knob["default"], {
      role: "knob"
    }));
    var knob = _react.screen.queryByRole('knob');
    expect(knob).toBeInTheDocument();
  });
});