@enact/limestone 1.3.0

package/internal/Picker/tests/Picker-specs.js

@@ -0,0 +1,968 @@
+"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(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+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 chose 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 chose 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 chose 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();
+    });
+  });
+});