@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3ac293

package/date-input/DateInput.test.js

@@ -2,14 +2,62 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _DateInput = _interopRequireDefault(require("./DateInput"));
-
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _DateInput = _interopRequireDefault(require("./DateInput.tsx"));
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
 describe("DateInput component tests", function () {
   test("Renders with correct label, helper text, optional, placeholder and clearable action", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
@@ -37,7 +85,7 @@ describe("DateInput component tests", function () {
 
     expect(input.value).toBe("");
   });
-  test("Renders with personalized error", function () {
+  test("Renders with custom error", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       error: "Personalized error."
     })),
@@ -45,120 +93,184 @@ describe("DateInput component tests", function () {
 
     expect(getByText("Personalized error.")).toBeTruthy();
   });
-  test("Renders with correct format: user typed date but it's invalid, onBlur error", function () {
-    var onBlur = jest.fn(function (_ref) {
-      var value = _ref.value,
-          error = _ref.error;
-      expect(value).toBe("10/90/2010");
-      expect(error).toBe("Invalid date.");
-    });
-
+  test("Renders with an initial value when it is uncontrolled", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      label: "With format MM/dd/yyyy",
-      format: "MM/dd/yyyy",
-      onBlur: onBlur
+      label: "Default label",
+      placeholder: "Placeholder",
+      defaultValue: "21-10-2015"
     })),
+        getByText = _render3.getByText,
         getByRole = _render3.getByRole;
 
     var input = getByRole("textbox");
+    var calendarAction = getByRole("combobox");
+    expect(input.value).toBe("21-10-2015");
 
-    _userEvent["default"].type(input, "10/90/2010");
-
-    _react2.fireEvent.blur(input);
-  });
-  test("Renders with correct format: user typed date but it's invalid, onChange error", function () {
-    var onChange = jest.fn();
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      label: "With format MM/dd/yyyy",
-      format: "MM/dd/yyyy",
-      onChange: onChange
-    })),
-        getByRole = _render4.getByRole;
-
-    var input = getByRole("textbox");
-
-    _userEvent["default"].type(input, "10/90/2010");
+    _userEvent["default"].click(calendarAction);
 
-    expect(onChange).toHaveBeenCalledTimes(10);
-    expect(onChange).toHaveBeenCalledWith({
-      value: "10/90/2010",
-      error: "Invalid date.",
-      date: null
-    });
+    expect(getByText("21").getAttribute("aria-selected")).toBe("true");
+    expect(getByText("October 2015")).toBeTruthy();
   });
+  test("Renders with correct format: user typed date but it's invalid, onBlur error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var onBlur, _render4, getByRole, input;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            onBlur = jest.fn(function (_ref2) {
+              var value = _ref2.value,
+                  error = _ref2.error;
+              expect(value).toBe("10/90/2010");
+              expect(error).toBe("Invalid date.");
+            });
+            _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+              label: "With format MM/dd/yyyy",
+              format: "MM/dd/yyyy",
+              onBlur: onBlur
+            })), getByRole = _render4.getByRole;
+            input = getByRole("textbox");
+
+            _userEvent["default"].click(input);
+
+            _context.next = 6;
+            return _userEvent["default"].keyboard("10");
+
+          case 6:
+            _context.next = 8;
+            return _userEvent["default"].keyboard("/");
+
+          case 8:
+            _context.next = 10;
+            return _userEvent["default"].keyboard("90");
+
+          case 10:
+            _context.next = 12;
+            return _userEvent["default"].keyboard("/");
+
+          case 12:
+            _context.next = 14;
+            return _userEvent["default"].keyboard("2010");
+
+          case 14:
+            _react2.fireEvent.blur(input);
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test("Renders with correct format: user typed date but it's invalid, onChange error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var onChange, _render5, getByRole, input;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            onChange = jest.fn();
+            _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+              label: "With format MM/dd/yyyy",
+              format: "MM/dd/yyyy",
+              onChange: onChange
+            })), getByRole = _render5.getByRole;
+            input = getByRole("textbox");
+
+            _userEvent["default"].click(input);
+
+            _context2.next = 6;
+            return _userEvent["default"].keyboard("10");
+
+          case 6:
+            _context2.next = 8;
+            return _userEvent["default"].keyboard("/");
+
+          case 8:
+            _context2.next = 10;
+            return _userEvent["default"].keyboard("90");
+
+          case 10:
+            _context2.next = 12;
+            return _userEvent["default"].keyboard("/");
+
+          case 12:
+            _context2.next = 14;
+            return _userEvent["default"].keyboard("2010");
+
+          case 14:
+            expect(onChange).toHaveBeenCalledTimes(10);
+            expect(onChange).toHaveBeenCalledWith({
+              value: "10/90/2010",
+              error: "Invalid date."
+            });
+
+          case 16:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
   test("Calendar renders with correct date: today's date", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render5.getByText,
-        getByRole = _render5.getByRole;
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole,
+        getAllByText = _render6.getAllByText;
 
-    var calendarAction = getByRole("button");
-    var d = new Date();
-    var options = {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    };
+    var calendarAction = getByRole("combobox");
+    var d = (0, _dayjs["default"])();
 
     _userEvent["default"].click(calendarAction);
 
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+    expect(document.activeElement === getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 ? getAllByText(d.get("date"))[1] : getAllByText(d.get("date"))[0]).toBeTruthy();
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
   });
   test("Calendar renders with correct date: value prop", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       value: "20-10-2019"
     })),
-        getByText = _render6.getByText,
-        getByRole = _render6.getByRole;
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole,
+        getAllByText = _render7.getAllByText;
 
-    var calendarAction = getByRole("button");
-    var d = new Date(2019, 9, 20);
-    var options = {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    };
+    var calendarAction = getByRole("combobox");
+    var d = (0, _dayjs["default"])("2019-10-20");
 
     _userEvent["default"].click(calendarAction);
 
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+    expect(getAllByText(d.get("date"))[0].getAttribute("aria-selected")).toBe("true");
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
   });
   test("Calendar renders with correct date: user typed value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render7.getByText,
-        getByRole = _render7.getByRole;
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole,
+        getAllByText = _render8.getAllByText;
 
-    var calendarAction = getByRole("button");
-    var d = new Date(2010, 0, 1);
-    var options = {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    };
+    var calendarAction = getByRole("combobox");
+    var d = (0, _dayjs["default"])("2010-1-1");
     var input = getByRole("textbox");
 
     _userEvent["default"].type(input, "01-01-2010");
 
     _userEvent["default"].click(calendarAction);
 
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+    expect(getAllByText(d.get("date"))[0].getAttribute("aria-selected")).toBe("true");
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
   });
   test("Calendar renders with correct date: invalid date, renders with today's date", function () {
     var onBlur = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur
     })),
-        getByText = _render8.getByText,
-        getByRole = _render8.getByRole;
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole,
+        getAllByText = _render9.getAllByText;
 
-    var calendarAction = getByRole("button");
-    var d = new Date();
-    var options = {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    };
+    var calendarAction = getByRole("combobox");
+    var d = (0, _dayjs["default"])();
     var input = getByRole("textbox");
 
     _userEvent["default"].type(input, "01-01-xxxx");
@@ -168,106 +280,300 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "01-01-xxxx",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].click(calendarAction);
 
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+    expect(document.activeElement === getAllByText(d.get("date")).length === 2 && +d.get("date") > 20 ? getAllByText(d.get("date"))[1] : getAllByText(d.get("date"))[0]).toBeTruthy();
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
   });
   test("Selecting a date from the calendar with an specific format", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "With format M-dd-yyyy",
       format: "M-dd-yyyy"
     })),
-        getByText = _render9.getByText,
-        getByRole = _render9.getByRole;
+        getAllByText = _render10.getAllByText,
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole;
 
     var input = getByRole("textbox");
-    var calendarAction = getByRole("button");
+    var calendarAction = getByRole("combobox");
 
     _userEvent["default"].click(calendarAction);
 
-    var dayButton = getByText("10").closest("button");
+    var dayButton = getAllByText("10")[0].closest("button");
 
     _react2.fireEvent.click(dayButton);
 
-    var d = new Date();
-    d.setDate(10);
-    var options = {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    };
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
+    var d = (0, _dayjs["default"])();
+    d = d.set("date", 10);
+    expect(getAllByText(d.get("date"))[0].getAttribute("aria-selected")).toBe("true");
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Escape",
+      code: "Escape",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe(d.format("M-DD-YYYY"));
+  });
+  test("Changing months using the arrows", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "label",
+      format: "dd-mm-yyyy",
+      defaultValue: "10-10-2000"
+    })),
+        getByText = _render11.getByText,
+        getByRole = _render11.getByRole,
+        getByTitle = _render11.getByTitle;
+
+    var calendarAction = getByRole("combobox");
+
+    _userEvent["default"].click(calendarAction);
+
+    var d = (0, _dayjs["default"])("10-10-2000", "DD-MM-YYYY", true);
+    d = d.set("date", 10);
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+    var previousMonth = getByTitle("Previous month");
+
+    _userEvent["default"].click(previousMonth);
+
+    expect(getByText(d.set("month", d.get("month") - 1).format("MMMM YYYY"))).toBeTruthy();
+    var nextMonth = getByTitle("Next month");
+
+    _userEvent["default"].click(nextMonth);
+
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+  });
+  test("Selecting a date from the calendar from another month", function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      format: "dd-mm-yyyy",
+      defaultValue: "10-08-2021"
+    })),
+        getAllByText = _render12.getAllByText,
+        getByText = _render12.getByText,
+        getByRole = _render12.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("combobox");
+
+    _userEvent["default"].click(calendarAction);
+
+    var dayButton = getAllByText("31")[0].closest("button");
+
+    _react2.fireEvent.click(dayButton);
+
+    var d = (0, _dayjs["default"])("10-08-2021", "DD-MM-YYYY", true);
+    d = d.set("date", 31).set("month", 6);
+    expect(getAllByText(d.get("date"))[0].getAttribute("aria-selected")).toBe("true");
+    expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Escape",
+      code: "Escape",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe(d.format("DD-MM-YYYY"));
+  });
+  test("Selecting a year from the calendar year picker", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      format: "dd-mm-yyyy",
+      defaultValue: "10-08-2021"
+    })),
+        getByText = _render13.getByText,
+        getByRole = _render13.getByRole;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("combobox");
+
+    _userEvent["default"].click(calendarAction);
+
+    var d = (0, _dayjs["default"])("10-08-2021", "DD-MM-YYYY", true);
+
+    _userEvent["default"].click(getByText(d.format("MMMM YYYY")));
+
+    expect(getByText("2024")).toBeTruthy();
+
+    _userEvent["default"].click(getByText("2024"));
+
+    _userEvent["default"].click(getByText(d.set("year", 2024).format("MMMM YYYY")));
 
     _react2.fireEvent.keyDown(document, {
-      key: "Esc",
-      code: "Esc",
+      key: "Escape",
+      code: "Escape",
       keyCode: 27,
       charCode: 27
     });
 
-    expect(input.value).toBe("".concat(d.getMonth() + 1, "-10-").concat(d.getFullYear()));
+    expect(input.value).toBe(d.format("DD-MM-YYYY"));
   });
   test("Selecting a date from the calendar (using keyboard presses)", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByRole = _render10.getByRole;
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByRole = _render14.getByRole,
+        getAllByText = _render14.getAllByText,
+        getByText = _render14.getByText;
 
-    var calendarAction = getByRole("button");
+    var calendarAction = getByRole("combobox");
     var input = getByRole("textbox");
 
     _userEvent["default"].type(input, "01-01-2010");
 
+    expect(input.value).toBe("01-01-2010");
+
     _userEvent["default"].click(calendarAction);
 
-    _react2.fireEvent.keyDown(document, {
+    expect(document.activeElement === getAllByText("1")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("1")[0].closest("button"), {
       key: "ArrowRight",
       code: "ArrowRight",
       keyCode: 39,
       charCode: 39
     });
 
-    _react2.fireEvent.keyDown(document, {
-      key: "ArrowRight",
-      code: "ArrowRight",
-      keyCode: 39,
-      charCode: 39
+    expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+      key: "PageUp",
+      code: "PageUp",
+      keyCode: 33,
+      charCode: 33
     });
 
-    _react2.fireEvent.keyDown(document, {
-      key: "ArrowRight",
-      code: "ArrowRight",
-      keyCode: 39,
-      charCode: 39
+    expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
+    expect(getByText("December 2009")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+      key: "PageDown",
+      code: "PageDown",
+      keyCode: 34,
+      charCode: 34
     });
 
-    _react2.fireEvent.keyDown(document, {
-      key: "ArrowLeft",
-      code: "ArrowLeft",
-      keyCode: 37,
-      charCode: 37
+    expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
+    expect(getByText("January 2010")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+      key: "PageDown",
+      code: "PageDown",
+      keyCode: 34,
+      charCode: 34,
+      shiftKey: true
+    });
+
+    expect(getByText("January 2011")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("2")[0].closest("button"), {
+      key: "PageUp",
+      code: "PageUp",
+      keyCode: 33,
+      charCode: 33,
+      shiftKey: true
+    });
+
+    expect(getByText("January 2010")).toBeTruthy();
+    expect(document.activeElement === getAllByText("2")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.click(getAllByText("2")[0].closest("button"), {
+      key: " ",
+      code: "Space",
+      keyCode: 32,
+      charCode: 32
     });
 
+    expect(getAllByText("2")[0].closest("button").getAttribute("aria-selected")).toBe("true");
+
     _react2.fireEvent.keyDown(document, {
-      key: "Esc",
-      code: "Esc",
+      key: "Escape",
+      code: "Escape",
       keyCode: 27,
       charCode: 27
     });
 
-    expect(input.value).toBe("03-01-2010");
+    expect(input.value).toBe("02-01-2010");
+  });
+  test("Selecting a date from the calendar (using keyboard presses) part II", function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
+        getByRole = _render15.getByRole,
+        getAllByText = _render15.getAllByText;
+
+    var calendarAction = getByRole("combobox");
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "01-01-2010");
+
+    expect(input.value).toBe("01-01-2010");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(document.activeElement === getAllByText("1")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("1")[0].closest("button"), {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(document.activeElement === getAllByText("8")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("8")[0].closest("button"), {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(document.activeElement === getAllByText("15")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("15")[0].closest("button"), {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(document.activeElement === getAllByText("8")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("8")[0].closest("button"), {
+      key: "End",
+      code: "End",
+      keyCode: 35,
+      charCode: 35
+    });
+
+    expect(document.activeElement === getAllByText("10")[0].closest("button")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(getAllByText("10")[0].closest("button"), {
+      key: "Home",
+      code: "Home",
+      keyCode: 36,
+      charCode: 36
+    });
+
+    _react2.fireEvent.keyDown(getAllByText("10")[0].closest("button"), {
+      key: " ",
+      code: "Space",
+      keyCode: 32,
+      charCode: 32
+    });
+
+    expect(input.value).toBe("10-01-2010");
   });
   test("onChange & onBlur functions are called correctly", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render11.getByRole;
+        getByRole = _render16.getByRole;
 
     var input = getByRole("textbox");
     var d = new Date(2011, 9, 10);
@@ -278,7 +584,6 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(10);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-2011",
-      error: null,
       date: d
     });
 
@@ -287,7 +592,6 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-2011",
-      error: null,
       date: d
     });
   });
@@ -295,11 +599,11 @@ describe("DateInput component tests", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render12.getByRole;
+        getByRole = _render17.getByRole;
 
     var input = getByRole("textbox");
 
@@ -309,8 +613,7 @@ describe("DateInput component tests", function () {
     expect(onChange).toHaveBeenCalledTimes(6);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _react2.fireEvent.blur(input);
@@ -318,17 +621,16 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
   });
   test("onBlur function removes the error when it is fixed", function () {
     var onBlur = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur
     })),
-        getByRole = _render13.getByRole;
+        getByRole = _render18.getByRole;
 
     var input = getByRole("textbox");
     var d = new Date(2002, 1, 20);
@@ -342,8 +644,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].clear(input);
@@ -357,18 +658,17 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "20-02-2002",
-      error: null,
       date: d
     });
   });
   test("onBlur function removes the error when the input is empty", function () {
     var onBlur = jest.fn();
 
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur,
       optional: true
     })),
-        getByRole = _render14.getByRole;
+        getByRole = _render19.getByRole;
 
     var input = getByRole("textbox");
 
@@ -381,8 +681,7 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Invalid date.",
-      date: null
+      error: "Invalid date."
     });
 
     _userEvent["default"].clear(input);
@@ -391,20 +690,18 @@ describe("DateInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: null,
-      date: null
+      value: ""
     });
   });
   test("onBlur & onChange functions error: required field (not optional)", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       onBlur: onBlur,
       onChange: onChange
     })),
-        getByRole = _render15.getByRole;
+        getByRole = _render20.getByRole;
 
     var date = getByRole("textbox");
 
@@ -419,22 +716,20 @@ describe("DateInput component tests", function () {
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "",
-      error: "This field is required. Please, enter a value.",
-      date: null
+      error: "This field is required. Please, enter a value."
     });
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "",
-      error: "This field is required. Please, enter a value.",
-      date: null
+      error: "This field is required. Please, enter a value."
     });
   });
   test("Disabled date input (calendar action must be shown but not clickable)", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       disabled: true
     })),
-        getByRole = _render16.getByRole,
-        queryByText = _render16.queryByText;
+        getByRole = _render21.getByRole,
+        queryByText = _render21.queryByText;
 
     var calendarAction = getByRole("button");
     var d = new Date();
@@ -450,20 +745,91 @@ describe("DateInput component tests", function () {
     expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
   });
   test("Input has correct accesibility attributes", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
       label: "Date input label"
     })),
-        getByRole = _render17.getByRole;
+        getByRole = _render22.getByRole;
 
     var input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();
     expect(input.getAttribute("aria-controls")).toBeNull();
     expect(input.getAttribute("aria-expanded")).toBeNull();
-    var calendarAction = getByRole("button");
+    var calendarAction = getByRole("combobox");
+    expect(calendarAction.getAttribute("aria-autocomplete")).toBeNull();
+    expect(calendarAction.getAttribute("aria-controls")).toBeTruthy();
+    expect(calendarAction.getAttribute("aria-describedby")).toBeTruthy();
+    expect(calendarAction.getAttribute("aria-describedby") === calendarAction.getAttribute("aria-controls")).toBeTruthy();
+    expect(calendarAction.getAttribute("aria-expanded")).toBe("false");
 
     _userEvent["default"].click(calendarAction);
 
     var datePicker = getByRole("dialog");
     expect(datePicker.getAttribute("aria-modal")).toBe("true");
+    expect(calendarAction.getAttribute("aria-expanded")).toBe("true");
+    expect(document.getElementById(calendarAction.getAttribute("aria-describedby"))).toBeTruthy();
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Escape",
+      code: "Escape",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(calendarAction.getAttribute("aria-expanded")).toBe("false");
+  });
+  test("Chooses the correct year when two digit format", function () {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+      label: "Default label",
+      placeholder: "Placeholder",
+      format: "dd-mm-yy",
+      defaultValue: "21-10-80"
+    })),
+        getByText = _render23.getByText,
+        getByRole = _render23.getByRole,
+        getAllByText = _render23.getAllByText;
+
+    var input = getByRole("textbox");
+    var calendarAction = getByRole("combobox");
+    expect(input.value).toBe("21-10-80");
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText("21").getAttribute("aria-selected")).toBe("true");
+    expect(getByText("October 1980")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(document, {
+      key: "Escape",
+      code: "Escape",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "21-10-10"
+      }
+    });
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText("October 1910")).toBeTruthy();
+
+    _userEvent["default"].click(getByText("October 1910"));
+
+    _userEvent["default"].click(getByText("2010"));
+
+    _userEvent["default"].click(getAllByText("1")[0]);
+
+    expect(input.value).toBe("01-10-10");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "21-10-80"
+      }
+    });
+
+    _userEvent["default"].click(calendarAction);
+
+    expect(getByText("October 2080")).toBeTruthy();
   });
 });