@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
573 lines (571 loc) • 22 kB
JavaScript
;
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Slider = _interopRequireDefault(require("../Slider"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var focus = function focus(slider) {
return _react.fireEvent.focus(slider);
};
var blur = function blur(slider) {
return _react.fireEvent.blur(slider);
};
var activate = function activate(slider) {
return _react.fireEvent.keyUp(slider, {
keyCode: 13
});
};
var keyDown = function keyDown(keyCode) {
return function (slider) {
return _react.fireEvent.keyDown(slider, {
keyCode: keyCode
});
};
};
var leftKeyDown = keyDown(37);
var rightKeyDown = keyDown(39);
var upKeyDown = keyDown(38);
var downKeyDown = keyDown(40);
var getElementClientCenter = function getElementClientCenter(element) {
var _element$getBoundingC = element.getBoundingClientRect(),
left = _element$getBoundingC.left,
top = _element$getBoundingC.top,
width = _element$getBoundingC.width,
height = _element$getBoundingC.height;
return {
x: left + width / 2,
y: top + height / 2
};
};
var drag = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(function* (element, _ref) {
var delta = _ref.delta,
_ref$steps = _ref.steps,
steps = _ref$steps === void 0 ? 1 : _ref$steps;
var from = getElementClientCenter(element);
var to = {
x: from.x + delta.x,
y: from.y + delta.y
};
var step = {
x: (to.x - from.x) / steps,
y: (to.y - from.y) / steps
};
var current = {
clientX: from.x,
clientY: from.y
};
_react.fireEvent.mouseEnter(element, current);
_react.fireEvent.mouseOver(element, current);
_react.fireEvent.mouseMove(element, current);
_react.fireEvent.mouseDown(element, current);
for (var i = 0; i < steps; i++) {
current.clientX += step.x;
current.clientY += step.y;
(0, _react.act)(function () {
return jest.advanceTimersByTime(1000 / steps);
});
_react.fireEvent.mouseMove(element, current);
}
_react.fireEvent.mouseUp(element, current);
});
return function drag(_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
describe('Slider', function () {
beforeEach(function () {
jest.useFakeTimers();
});
afterEach(function () {
jest.useRealTimers();
});
test('should set "aria-valuetext" to hint string for the first render when vertical is false', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {}));
var slider = _react.screen.getByRole('slider');
var expectedAttribute = 'aria-valuetext';
var expectedValue = 'From 0 to 100 0 change a value with left right button';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set "aria-valuetext" to hint string for the first render when vertical is true', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
var expectedAttribute = 'aria-valuetext';
var expectedValue = 'From 0 to 100 0 change a value with up down button';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set "aria-valuetext" to value when value is changed', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 10
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
rightKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '11';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should activate the slider on enter keyup', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
var expected = 'active';
expect(slider).toHaveClass(expected);
});
test('should change value of slider on drag', /*#__PURE__*/_asyncToGenerator(function* () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
yield drag(slider, {
delta: {
x: 50,
y: 0
}
});
var expectedAttribute = 'aria-valuetext';
var unexpectedValue = '50 change a value with left right button';
expect(slider).not.toHaveAttribute(expectedAttribute, unexpectedValue);
}));
test('should deactivate the slider on blur', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true
}));
var slider = _react.screen.getByRole('slider');
var notExpected = 'active';
activate(slider);
expect(slider).toHaveClass(notExpected);
blur(slider);
expect(slider).not.toHaveClass(notExpected);
});
test('should not activate the slider on enter', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {}));
var slider = _react.screen.getByRole('slider');
activate(slider);
var notExpected = 'active';
expect(slider).not.toHaveClass(notExpected);
});
test('should fire `onChange` with `onChange` type when value changed', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
onChange: handleChange
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
leftKeyDown(slider);
var expected = {
type: 'onChange'
};
var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
expect(actual).toMatchObject(expected);
});
test('should decrement the value of horizontal slider on key left when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
leftKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '49';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value of horizontal slider on key left', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
leftKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '49';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value of horizontal slider on wheel down when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
_react.fireEvent.wheel(slider, {
deltaY: 10
});
var expectedAttribute = 'aria-valuetext';
var expectedValue = '49';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value of vertical slider on key down when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
downKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '49';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value of vertical slider on key down', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50,
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
downKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '49';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value of vertical slider on wheel down when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
_react.fireEvent.wheel(slider, {
deltaY: 10
});
var expectedAttribute = 'aria-valuetext';
var expectedValue = '49';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value of horizontal slider on key right when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
rightKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '51';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value of horizontal slider on key right', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
rightKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '51';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value of vertical slider on key up when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
upKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '51';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value of horizontal slider on wheel up when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
_react.fireEvent.wheel(slider, {
deltaY: -10
});
var expectedAttribute = 'aria-valuetext';
var expectedValue = '51';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value of vertical slider on key up', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50,
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
upKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '51';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value of vertical slider on wheel up when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
orientation: "vertical"
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
_react.fireEvent.wheel(slider, {
deltaY: -10
});
var expectedAttribute = 'aria-valuetext';
var expectedValue = '51';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value by \'knobStep\' on key left when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
knobStep: 5
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
leftKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '45';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value by \'knobStep\' on key right when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
knobStep: 5
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
rightKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '55';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should decrement the value by \'step\' on key left when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
step: 5
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
leftKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '45';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should increment the value by \'step\' on key right when active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
defaultValue: 50,
step: 5
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
rightKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '55';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
// these tests validate behavior relating to `value` defaulting to `min`
test('should not emit onChange when decrementing at the lower bound when value is unset', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
min: 0,
max: 10,
onChange: handleChange
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
leftKeyDown(slider);
expect(handleChange).not.toBeCalled();
});
test('should increment from the lower bound when value is unset', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
activateOnSelect: true,
min: 0,
max: 10,
onChange: handleChange
}));
var slider = _react.screen.getByRole('slider');
activate(slider);
rightKeyDown(slider);
var expectedAttribute = 'aria-valuetext';
var expectedValue = '1';
expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should call onSpotlightLeft on horizontal slider at min value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 0,
onSpotlightLeft: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
leftKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should call onSpotlightLeft on vertical slider at any value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50,
orientation: "vertical",
onSpotlightLeft: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
leftKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should not call onSpotlightLeft on horizontal slider at greater than min value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 1,
onSpotlightLeft: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
leftKeyDown(slider);
expect(handleSpotlight).not.toBeCalled();
});
test('should call onSpotlightDown on vertical slider at min value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 0,
orientation: "vertical",
onSpotlightDown: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
downKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should call onSpotlightDown on horizontal slider at any value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50,
onSpotlightDown: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
downKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should not call onSpotlightDown on vertical slider at greater than min value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 1,
orientation: "vertical",
onSpotlightDown: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
downKeyDown(slider);
expect(handleSpotlight).not.toBeCalled();
});
test('should call onSpotlightRight on horizontal slider at max value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 100,
onSpotlightRight: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
rightKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should call onSpotlightRight on vertical slider at any value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50,
orientation: "vertical",
onSpotlightRight: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
rightKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should not call onSpotlightRight on horizontal slider at less than max value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 99,
onSpotlightRight: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
rightKeyDown(slider);
expect(handleSpotlight).not.toBeCalled();
});
test('should call onSpotlightUp on vertical slider at max value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 100,
max: 100,
orientation: "vertical",
onSpotlightUp: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
upKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should call onSpotlightUp on horizontal slider at any value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 50,
onSpotlightUp: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
upKeyDown(slider);
var expected = 1;
expect(handleSpotlight).toBeCalledTimes(expected);
});
test('should not call onSpotlightUp on vertical slider at less than max value', function () {
var handleSpotlight = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
defaultValue: 99,
orientation: "vertical",
onSpotlightUp: handleSpotlight
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
upKeyDown(slider);
expect(handleSpotlight).not.toBeCalled();
});
test('should set the tooltip to visible when focused', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
tooltip: true
}));
var slider = _react.screen.getByRole('slider');
focus(slider);
var actual = _react.screen.getByText('0');
var expected = 'tooltipLabel';
expect(actual).toHaveClass(expected);
});
test('should set the tooltip to not visible when unfocused', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
tooltip: true
}));
var tooltip = _react.screen.queryByText('0');
expect(tooltip).toBeNull();
});
});