@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
968 lines (956 loc) • 37.7 kB
JavaScript
"use strict";
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _Picker = _interopRequireDefault(require("../Picker"));
var _PickerItem = _interopRequireDefault(require("../PickerItem"));
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 keyDown = function keyDown(keyCode) {
return function (picker) {
return _react.fireEvent.keyDown(picker, {
keyCode: keyCode
});
};
};
var leftKeyDown = keyDown(37);
var rightKeyDown = keyDown(39);
describe('Picker Specs', function () {
test('should have a default \'value\' of 0', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 0,
min: 0
}));
var valueText = _react.screen.getAllByRole('button')[0].nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
var expectedValue = '0';
var expectedAttribute = 'aria-valuetext';
expect(valueText).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should return an object {value: Number} that represents the next value of the Picker component when pressing the increment <span>', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.firstElementChild);
var expected = 1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should return an object {value: Number} that represents the next value of the Picker component when pressing the decrement <span>', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.lastElementChild.previousElementSibling); // there is a dummy sibling by Spottable
var expected = -1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should not run the onChange handler when disabled', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
disabled: true,
index: 0,
max: 0,
min: 0,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.firstElementChild);
expect(handleChange).not.toHaveBeenCalled();
}));
test('should wrap to the beginning of the value range if \'wrap\' is true', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 0,
min: -1,
onChange: handleChange,
value: 0,
wrap: true
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.firstElementChild);
var expected = -1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should wrap to the end of the value range if \'wrap\' is true', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 1,
min: 0,
onChange: handleChange,
value: 0,
wrap: true
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.lastElementChild.previousElementSibling); // there is a dummy sibling by Spottable
var expected = 1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should increment by \'step\' value', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 6,
min: 0,
onChange: handleChange,
step: 3,
value: 0
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.firstElementChild);
var expected = 3;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should decrement by \'step\' value', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 3,
min: 0,
onChange: handleChange,
step: 3,
value: 3
}));
var picker = _react.screen.getByLabelText('3 next item').parentElement;
yield user.click(picker.lastElementChild.previousElementSibling); // there is a dummy sibling by Spottable
var expected = 0;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should call onKeyDown when right key pressed', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 6,
min: 0,
onKeyDown: handleChange,
step: 3,
value: 0
}));
var picker = _react.screen.getAllByRole('button')[0];
rightKeyDown(picker);
expect(handleChange).toHaveBeenCalled();
});
test('should call onKeyDown when left key pressed', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 6,
min: 0,
onKeyDown: handleChange,
step: 3,
value: 0
}));
var picker = _react.screen.getAllByRole('button')[1];
leftKeyDown(picker);
expect(handleChange).toHaveBeenCalled();
});
test('should increment by \'step\' value and wrap successfully', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 3,
min: 0,
onChange: handleChange,
step: 3,
value: 3,
wrap: true
}));
var picker = _react.screen.getByLabelText('3 next item').parentElement;
yield user.click(picker.firstElementChild);
var expected = 0;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should call onWheel event when \'joined\' and \'value\' is between \'max\' and \'min\'', function () {
var handleWheelEvent = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 3,
min: 0,
noAnimation: true,
step: 1,
value: 1,
onWheel: handleWheelEvent
}));
var picker = _react.screen.getByLabelText('1 press ok button to change the value');
(0, _react.act)(function () {
picker.focus();
});
_react.fireEvent.wheel(picker, {
deltaY: 10
});
expect(handleWheelEvent).toHaveBeenCalled();
});
test('should call onWheel event when \'joined\' and \'value\' is \'max\' and \'deltaY\' is positive', function () {
var handleWheelEvent = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 3,
min: 0,
noAnimation: true,
step: 1,
value: 3,
onWheel: handleWheelEvent
}));
var picker = _react.screen.getByLabelText('3 press ok button to change the value');
(0, _react.act)(function () {
picker.focus();
});
_react.fireEvent.wheel(picker, {
deltaY: 10
});
expect(handleWheelEvent).toHaveBeenCalled();
});
test('should call onWheel event when \'joined\' and \'value\' is \'min\' and \'deltaY\' is negative', function () {
var handleWheelEvent = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 3,
min: 0,
noAnimation: true,
step: 1,
value: 0,
onWheel: handleWheelEvent
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
(0, _react.act)(function () {
picker.focus();
});
_react.fireEvent.wheel(picker, {
deltaY: -10
});
expect(handleWheelEvent).toHaveBeenCalled();
});
test('should decrement by \'step\' value and wrap successfully', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 9,
min: 0,
onChange: handleChange,
step: 3,
value: 0,
wrap: true
}));
var picker = _react.screen.getByLabelText('0 next item').parentElement;
yield user.click(picker.lastElementChild.previousElementSibling); // there is a dummy sibling by Spottable
var expected = 9;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
}));
test('should enable the increment button when there is a wrapped value to increment', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 2,
min: 0,
value: 2,
wrap: true
}));
var expectedAttribute = 'aria-disabled';
var expectedValue = 'false';
var actual = _react.screen.getAllByRole('button')[0];
expect(actual).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should enable the decrement button when there is a wrapped value to decrement', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 2,
min: 0,
value: 2,
wrap: true
}));
var expectedAttribute = 'aria-disabled';
var expectedValue = 'false';
var actual = _react.screen.getAllByRole('button')[1];
expect(actual).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should disable the increment button when there is no value to increment', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 2,
min: 0,
value: 2
}));
var expectedAttribute = 'disabled';
var actual = _react.screen.getAllByRole('button')[0];
expect(actual).toHaveAttribute(expectedAttribute);
});
test('should disable the decrement button when there is no value to decrement', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 2,
min: 0,
value: 0
}));
var expectedAttribute = 'disabled';
var actual = _react.screen.getAllByRole('button')[1];
expect(actual).toHaveAttribute(expectedAttribute);
});
test('should disable the increment and decrement buttons when wrapped and there is a single value', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 0,
min: 0,
value: 0,
wrap: true
}));
var incrementButton = _react.screen.getAllByRole('button')[0];
var decrementButton = _react.screen.getAllByRole('button')[1];
var expectedAttribute = 'disabled';
expect(incrementButton).toHaveAttribute(expectedAttribute);
expect(decrementButton).toHaveAttribute(expectedAttribute);
});
// TODO: ui-tests for select keys for joined horizontal pickers
// Note: Because of the limitation of the unit test environment, simulating `keyCode: 13` or the select/enter key will not forward the mouse events that'll trigger `onChange` like it's supposed to
test('should allow keyboard increment via enter key when \'joined\' and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
_react.fireEvent.keyDown(picker, {
keyCode: 13
});
_react.fireEvent.mouseDown(picker);
expect(handleChange).toHaveBeenCalled();
});
test('should increment via mousedown when \'joined\' and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
_react.fireEvent.mouseDown(picker);
var expected = 1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
test('should increment via mousedown when \'joined\' and \'horizontal\' and wrap successfully', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 2,
joined: true,
max: 3,
min: 0,
onChange: handleChange,
value: 3
}));
var picker = _react.screen.getByLabelText('3 press ok button to change the value');
_react.fireEvent.mouseDown(picker);
var expected = 0;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
// TODO: ui-tests for select keys for joined horizontal pickers
// Note: Because of the limitation of the unit test environment, simulating `keyCode: 13` or the select/enter key will not forward the mouse events that'll trigger `onChange` like it's supposed to
test('should increment keyboard select when \'joined\' and \'horizontal\' and wrap successfully', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 2,
joined: true,
max: 3,
min: 0,
onChange: handleChange,
value: 3
}));
var picker = _react.screen.getByLabelText('3 press ok button to change the value');
_react.fireEvent.keyDown(picker, {
keyCode: 13
});
_react.fireEvent.mouseDown(picker);
var expected = 0;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
test('should not allow keyboard decrement via left arrow keys when \'joined\' and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
_react.fireEvent.keyDown(picker, {
keyCode: 37
});
expect(handleChange).not.toHaveBeenCalled();
});
test('should not allow keyboard increment via right arrow keys when \'joined\' and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
_react.fireEvent.keyDown(picker, {
keyCode: 39
});
expect(handleChange).not.toHaveBeenCalled();
});
test('should allow keyboard decrement via left arrow keys when \'changedBy="arrow"\', \'joined\', and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
changedBy: "arrow",
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with left right button');
_react.fireEvent.keyDown(picker, {
keyCode: 37
});
_react.fireEvent.mouseDown(picker);
var expected = -1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
test('should allow keyboard increment via right arrow keys when \'changedBy="arrow"\', \'joined\', and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
changedBy: "arrow",
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with left right button');
_react.fireEvent.keyDown(picker, {
keyCode: 39
});
_react.fireEvent.mouseDown(picker);
var expected = 1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
test('should allow keyboard decrement via down arrow keys when \'joined\' and \'vertical\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "vertical",
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with up down button');
_react.fireEvent.keyDown(picker, {
keyCode: 40
});
_react.fireEvent.mouseDown(picker);
var expected = -1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
test('should allow keyboard decrement via up arrow keys when \'joined\' and \'vertical\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "vertical",
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with up down button');
_react.fireEvent.keyDown(picker, {
keyCode: 38
});
_react.fireEvent.mouseDown(picker);
var expected = 1;
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(expected);
});
test('should not allow keyboard decrement via left arrow keys when \'joined\' and \'vertical\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "vertical",
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with up down button');
_react.fireEvent.keyDown(picker, {
keyCode: 37
});
_react.fireEvent.mouseDown(picker);
expect(handleChange).not.toHaveBeenCalled();
});
test('should not allow keyboard increment via right arrow keys when \'joined\' and \'vertical\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "vertical",
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with up down button');
_react.fireEvent.keyDown(picker, {
keyCode: 39
});
_react.fireEvent.mouseDown(picker);
expect(handleChange).not.toHaveBeenCalled();
});
test('should not allow keyboard decrement via down arrow keys when \'joined\' and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "horizontal",
value: 0
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
_react.fireEvent.keyDown(picker, {
keyCode: 40
});
expect(handleChange).not.toHaveBeenCalled();
});
test('should not allow keyboard increment via up arrow keys when \'joined\' and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "horizontal",
value: 0
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
_react.fireEvent.keyDown(picker, {
keyCode: 38
});
expect(handleChange).not.toHaveBeenCalled();
});
test('should not allow keyboard decrement via down arrow keys when \'changedBy="arrow"\', \'joined\', and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
changedBy: "arrow",
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "horizontal",
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with left right button');
_react.fireEvent.keyDown(picker, {
keyCode: 40
});
expect(handleChange).not.toHaveBeenCalled();
});
test('should not allow keyboard increment via up arrow keys when \'changedBy="arrow"\', \'joined\', and \'horizontal\'', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
changedBy: "arrow",
index: 0,
joined: true,
max: 1,
min: -1,
onChange: handleChange,
orientation: "horizontal",
value: 0
}));
var picker = _react.screen.getByLabelText('0 change a value with left right button');
_react.fireEvent.keyDown(picker, {
keyCode: 38
});
expect(handleChange).not.toHaveBeenCalled();
});
test('indicator Container should not show any indicator when \'joined\' and \'horizontal\' and has no children', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
joined: true,
max: 1,
min: -1,
orientation: "horizontal"
}));
var picker = _react.screen.getByLabelText('0 press ok button to change the value');
var expected = 2; // there is a dummy sibling by Spottable
// The indicator will be a child of picker's children
// With it there will be 2 child elements
var actual = picker.children.item(0).children.length;
expect(actual).toBe(expected);
});
test('indicator Container should not show any indicator when \'joined\' and \'horizontal\' and has one children', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker["default"], {
index: 0,
max: 1,
min: -1,
joined: true,
orientation: "horizontal",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "Test one picker"
})
}));
var picker = _react.screen.getByRole('spinbutton', {
hidden: true
});
var expected = 2; // there is a dummy sibling by Spottable
// The indicator will be a child of picker's children
// With it there will be 2 child elements
var actual = picker.children.length;
expect(actual).toBe(expected);
});
test('indicator Container should show with the exact number of children indicator when \'joined\' and \'horizontal\'', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 0,
max: 2,
min: 0,
joined: true,
orientation: "horizontal",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "Test one picker"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "Test two picker"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "Test three picker"
})]
}));
var picker = _react.screen.getByRole('spinbutton', {
hidden: true
});
var expected = 3;
var actual = picker.children.item(2).children.length; // there is a dummy sibling by Spottable
expect(actual).toBe(expected);
});
describe('accessibility', function () {
test('should set the aria-label attribute properly in the next icon button', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var incrementButton = _react.screen.getAllByRole('button')[0];
var expectedAttribute = 'aria-label';
var expectedValue = '2 next item';
expect(incrementButton).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set the aria-label attribute properly in the previous icon button', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var decrementButton = _react.screen.getAllByRole('button')[1];
var expectedAttribute = 'aria-label';
var expectedValue = '2 previous item';
expect(decrementButton).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set the aria-label attribute properly in the next icon button with title', function () {
var titleText = 'title text';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
max: 3,
min: 0,
title: titleText,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var incrementButton = _react.screen.getAllByRole('button')[0];
var expectedAttribute = 'aria-label';
var expectedValue = titleText + ' ' + '2 next item';
expect(incrementButton).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set the aria-label attribute properly in the previous icon button with title', function () {
var titleText = 'title text';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
max: 3,
min: 0,
title: titleText,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var decrementButton = _react.screen.getAllByRole('button')[1];
var expectedAttribute = 'aria-label';
var expectedValue = titleText + ' ' + '2 previous item';
expect(decrementButton).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set the aria-valuetext attribute properly to read it when changing the value', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var pickerItem = _react.screen.getByLabelText('2 next item').nextElementSibling.nextElementSibling; // there is a dummy sibling by Spottable
// I chosen this and not getByText because in get by test you have to go 4 parentElements up
var expectedAttribute = 'aria-valuetext';
var expectedValue = '2';
expect(pickerItem).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have aria-hidden=true when \'joined\' and not active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
joined: true,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getByLabelText('2 press ok button to change the value').children.item(0);
// I chosen this and not getByText because in get by test you have to go 4 parentElements up
var expectedAttribute = 'aria-hidden';
var expectedValue = 'true';
expect(picker).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should be aria-hidden=false when \'joined\' and active', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
index: 1,
joined: true,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getByLabelText('2 press ok button to change the value').children.item(0);
// I chosen this and not getByText because in get by test you have to go 4 parentElements up
_react.fireEvent.focus(picker);
var expectedAttribute = 'aria-hidden';
var expectedValue = 'false';
expect(picker).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set picker \'decrementAriaLabel\' to decrement button', function () {
var customLabel = 'custom decrement aria-label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
decrementAriaLabel: customLabel,
index: 1,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getAllByRole('button')[1];
var expectedAttribute = 'aria-label';
expect(picker).toHaveAttribute(expectedAttribute, customLabel);
});
test('should set picker \'incrementAriaLabel\' to decrement button', function () {
var customLabel = 'custom increment aria-label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
incrementAriaLabel: customLabel,
index: 1,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getAllByRole('button')[0];
var expectedAttribute = 'aria-label';
expect(picker).toHaveAttribute(expectedAttribute, customLabel);
});
test('should set picker \'decrementAriaLabel\' to decrement button with title', function () {
var titleText = 'title text';
var customLabel = 'custom decrement aria-label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
decrementAriaLabel: customLabel,
index: 1,
max: 3,
min: 0,
title: titleText,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getAllByRole('button')[1];
var expectedAttribute = 'aria-label';
expect(picker).toHaveAttribute(expectedAttribute, titleText + ' ' + customLabel);
});
test('should set picker \'incrementAriaLabel\' to decrement button with title', function () {
var titleText = 'title text';
var customLabel = 'custom increment aria-label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
incrementAriaLabel: customLabel,
index: 1,
max: 3,
min: 0,
title: titleText,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getAllByRole('button')[0];
var expectedAttribute = 'aria-label';
expect(picker).toHaveAttribute(expectedAttribute, titleText + ' ' + customLabel);
});
test('should set \'aria-label\' to joined picker', function () {
var customLabel = 'custom joined picker aria-label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Picker["default"], {
"aria-label": customLabel,
index: 1,
joined: true,
max: 3,
min: 0,
value: 1,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "1"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "2"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "3"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerItem["default"], {
children: "4"
})]
}));
var picker = _react.screen.getByLabelText(customLabel);
expect(picker).toBeInTheDocument();
});
});
});