@dxc-technology/halstack-react 10.0.0 → 11.0.0

package/date-input/DateInput.test.js

@@ -1,51 +1,17 @@
 "use strict";
 
 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 _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 {
@@ -58,537 +24,566 @@ global.DOMRect = {
     };
   }
 };
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
 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"], {
-      label: "Example label",
-      helperText: "Example of helper text",
-      placeholder: true,
-      optional: true,
-      clearable: true
-    })),
-        getByText = _render.getByText,
-        getByRole = _render.getByRole,
-        getAllByRole = _render.getAllByRole;
-
-    var input = getByRole("textbox");
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("Example of helper text")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-    expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
-
-    _userEvent["default"].type(input, "10/10/2010");
-
-    var closeAction = getAllByRole("button")[0];
-
-    _userEvent["default"].click(closeAction);
-
-    expect(input.value).toBe("");
-  });
-  test("Renders with custom error", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      error: "Personalized error."
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("Personalized error.")).toBeTruthy();
-  });
-  test("Renders with an initial value when it is uncontrolled", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      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"].click(calendarAction);
-
-    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;
-
+  test("Renders with correct label, helper text, optional, placeholder and clearable action", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, getByText, getByRole, getAllByRole, input, closeAction;
     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();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Example label",
+            helperText: "Example of helper text",
+            placeholder: true,
+            optional: true,
+            clearable: true
+          })), getByText = _render.getByText, getByRole = _render.getByRole, getAllByRole = _render.getAllByRole;
+          input = getByRole("textbox");
+          expect(getByText("Example label")).toBeTruthy();
+          expect(getByText("Example of helper text")).toBeTruthy();
+          expect(getByText("(Optional)")).toBeTruthy();
+          expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
+          _userEvent["default"].type(input, "10/10/2010");
+          closeAction = getAllByRole("button")[0];
+          _context.next = 10;
+          return _userEvent["default"].click(closeAction);
+        case 10:
+          expect(input.value).toBe("");
+        case 11:
+        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;
-
+  test("Renders with custom error", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+        error: "Personalized error."
+      })),
+      getByText = _render2.getByText;
+    expect(getByText("Personalized error.")).toBeTruthy();
+  });
+  test("Read-only variant doesn't open the calendar", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render3, getByRole, queryByRole, calendarAction;
     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();
-        }
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            value: "20-10-2019",
+            readOnly: true
+          })), getByRole = _render3.getByRole, queryByRole = _render3.queryByRole;
+          calendarAction = getByRole("combobox");
+          _context2.next = 4;
+          return _userEvent["default"].click(calendarAction);
+        case 4:
+          expect(queryByRole("dialog")).toBeFalsy();
+        case 5:
+        case "end":
+          return _context2.stop();
       }
     }, _callee2);
   })));
-  test("Calendar renders with correct date: today's date", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render6.getByText,
-        getByRole = _render6.getByRole,
-        getAllByText = _render6.getAllByText;
-
-    var calendarAction = getByRole("combobox");
-    var d = (0, _dayjs["default"])();
-
-    _userEvent["default"].click(calendarAction);
-
-    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 _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      value: "20-10-2019"
-    })),
-        getByText = _render7.getByText,
-        getByRole = _render7.getByRole,
-        getAllByText = _render7.getAllByText;
-
-    var calendarAction = getByRole("combobox");
-    var d = (0, _dayjs["default"])("2019-10-20");
-
-    _userEvent["default"].click(calendarAction);
-
-    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 _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByText = _render8.getByText,
-        getByRole = _render8.getByRole,
-        getAllByText = _render8.getAllByText;
-
-    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(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 _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      onBlur: onBlur
-    })),
-        getByText = _render9.getByText,
-        getByRole = _render9.getByRole,
-        getAllByText = _render9.getAllByText;
-
-    var calendarAction = getByRole("combobox");
-    var d = (0, _dayjs["default"])();
-    var input = getByRole("textbox");
-
-    _userEvent["default"].type(input, "01-01-xxxx");
-
-    _react2.fireEvent.blur(input);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "01-01-xxxx",
-      error: "Invalid date."
-    });
-
-    _userEvent["default"].click(calendarAction);
-
-    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 _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      label: "With format M-dd-yyyy",
-      format: "M-dd-yyyy"
-    })),
-        getAllByText = _render10.getAllByText,
-        getByText = _render10.getByText,
-        getByRole = _render10.getByRole;
-
-    var input = getByRole("textbox");
-    var calendarAction = getByRole("combobox");
-
-    _userEvent["default"].click(calendarAction);
-
-    var dayButton = getAllByText("10")[0].closest("button");
-
-    _react2.fireEvent.click(dayButton);
-
-    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: "Escape",
-      code: "Escape",
-      keyCode: 27,
-      charCode: 27
-    });
-
-    expect(input.value).toBe(d.format("DD-MM-YYYY"));
-  });
-  test("Selecting a date from the calendar (using keyboard presses)", function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)),
-        getByRole = _render14.getByRole,
-        getAllByText = _render14.getAllByText,
-        getByText = _render14.getByText;
-
-    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: "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
-    });
-
-    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
-    });
-
-    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: "Escape",
-      code: "Escape",
-      keyCode: 27,
-      charCode: 27
-    });
-
-    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("Renders with an initial value when it is uncontrolled", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render4, getByText, getByRole, input, calendarAction;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Default label",
+            defaultValue: "21-10-2015"
+          })), getByText = _render4.getByText, getByRole = _render4.getByRole;
+          input = getByRole("textbox");
+          calendarAction = getByRole("combobox");
+          expect(input.value).toBe("21-10-2015");
+          _context3.next = 6;
+          return _userEvent["default"].click(calendarAction);
+        case 6:
+          expect(getByText("21").getAttribute("aria-selected")).toBe("true");
+          expect(getByText("October 2015")).toBeTruthy();
+        case 8:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  test("Renders with correct format: user typed date but it's invalid, onBlur error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var onBlur, _render5, getByRole, input;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          onBlur = jest.fn(function (_ref5) {
+            var value = _ref5.value,
+              error = _ref5.error;
+            expect(value).toBe("10/90/2010");
+            expect(error).toBe("Invalid date.");
+          });
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "With format MM/dd/yyyy",
+            format: "MM/dd/yyyy",
+            onBlur: onBlur
+          })), getByRole = _render5.getByRole;
+          input = getByRole("textbox");
+          _context4.next = 5;
+          return _userEvent["default"].click(input);
+        case 5:
+          _context4.next = 7;
+          return _userEvent["default"].keyboard("10");
+        case 7:
+          _context4.next = 9;
+          return _userEvent["default"].keyboard("/");
+        case 9:
+          _context4.next = 11;
+          return _userEvent["default"].keyboard("90");
+        case 11:
+          _context4.next = 13;
+          return _userEvent["default"].keyboard("/");
+        case 13:
+          _context4.next = 15;
+          return _userEvent["default"].keyboard("2010");
+        case 15:
+          _react2.fireEvent.blur(input);
+        case 16:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  test("Renders with correct format: user typed date but it's invalid, onChange error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var onChange, _render6, getByRole, input;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          onChange = jest.fn();
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "With format MM/dd/yyyy",
+            format: "MM/dd/yyyy",
+            onChange: onChange
+          })), getByRole = _render6.getByRole;
+          input = getByRole("textbox");
+          _context5.next = 5;
+          return _userEvent["default"].click(input);
+        case 5:
+          _context5.next = 7;
+          return _userEvent["default"].keyboard("10");
+        case 7:
+          _context5.next = 9;
+          return _userEvent["default"].keyboard("/");
+        case 9:
+          _context5.next = 11;
+          return _userEvent["default"].keyboard("90");
+        case 11:
+          _context5.next = 13;
+          return _userEvent["default"].keyboard("/");
+        case 13:
+          _context5.next = 15;
+          return _userEvent["default"].keyboard("2010");
+        case 15:
+          expect(onChange).toHaveBeenCalledTimes(10);
+          expect(onChange).toHaveBeenCalledWith({
+            value: "10/90/2010",
+            error: "Invalid date."
+          });
+        case 17:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  test("Calendar renders with correct date: today's date", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var _render7, getByText, getByRole, getAllByText, calendarAction, d;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)), getByText = _render7.getByText, getByRole = _render7.getByRole, getAllByText = _render7.getAllByText;
+          calendarAction = getByRole("combobox");
+          d = (0, _dayjs["default"])();
+          _context6.next = 5;
+          return _userEvent["default"].click(calendarAction);
+        case 5:
+          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();
+        case 7:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  test("Calendar renders with correct date: value prop", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var _render8, getByText, getByRole, getAllByText, calendarAction, d;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            value: "20-10-2019"
+          })), getByText = _render8.getByText, getByRole = _render8.getByRole, getAllByText = _render8.getAllByText;
+          calendarAction = getByRole("combobox");
+          d = (0, _dayjs["default"])("2019-10-20");
+          _context7.next = 5;
+          return _userEvent["default"].click(calendarAction);
+        case 5:
+          expect(getAllByText(d.get("date"))[0].getAttribute("aria-selected")).toBe("true");
+          expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+        case 7:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  test("Calendar renders with correct date: user typed value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var _render9, getByText, getByRole, getAllByText, calendarAction, d, input;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)), getByText = _render9.getByText, getByRole = _render9.getByRole, getAllByText = _render9.getAllByText;
+          calendarAction = getByRole("combobox");
+          d = (0, _dayjs["default"])("2010-1-1");
+          input = getByRole("textbox");
+          _userEvent["default"].type(input, "01-01-2010");
+          _context8.next = 7;
+          return _userEvent["default"].click(calendarAction);
+        case 7:
+          expect(getAllByText(d.get("date"))[0].getAttribute("aria-selected")).toBe("true");
+          expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+        case 9:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+  test("Calendar renders with correct date: invalid date, renders with today's date", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+    var onBlur, _render10, getByText, getByRole, getAllByText, calendarAction, d, input;
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          onBlur = jest.fn();
+          _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            onBlur: onBlur
+          })), getByText = _render10.getByText, getByRole = _render10.getByRole, getAllByText = _render10.getAllByText;
+          calendarAction = getByRole("combobox");
+          d = (0, _dayjs["default"])();
+          input = getByRole("textbox");
+          _userEvent["default"].type(input, "01-01-xxxx");
+          _react2.fireEvent.blur(input);
+          expect(onBlur).toHaveBeenCalled();
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "01-01-xxxx",
+            error: "Invalid date."
+          });
+          _context9.next = 11;
+          return _userEvent["default"].click(calendarAction);
+        case 11:
+          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();
+        case 13:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  })));
+  test("Selecting a date from the calendar with an specific format", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var _render11, getAllByText, getByText, getByRole, input, calendarAction, dayButton, d;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "With format M-dd-yyyy",
+            format: "M-dd-yyyy"
+          })), getAllByText = _render11.getAllByText, getByText = _render11.getByText, getByRole = _render11.getByRole;
+          input = getByRole("textbox");
+          calendarAction = getByRole("combobox");
+          _context10.next = 5;
+          return _userEvent["default"].click(calendarAction);
+        case 5:
+          dayButton = getAllByText("10")[0].closest("button");
+          _react2.fireEvent.click(dayButton);
+          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"));
+        case 13:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee10);
+  })));
+  test("Changing months using the arrows", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    var _render12, getByText, getByRole, getByTitle, calendarAction, d, previousMonth, nextMonth;
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "label",
+            format: "dd-mm-yyyy",
+            defaultValue: "10-10-2000"
+          })), getByText = _render12.getByText, getByRole = _render12.getByRole, getByTitle = _render12.getByTitle;
+          calendarAction = getByRole("combobox");
+          _context11.next = 4;
+          return _userEvent["default"].click(calendarAction);
+        case 4:
+          d = (0, _dayjs["default"])("10-10-2000", "DD-MM-YYYY", true);
+          d = d.set("date", 10);
+          expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+          previousMonth = getByTitle("Previous month");
+          _context11.next = 10;
+          return _userEvent["default"].click(previousMonth);
+        case 10:
+          expect(getByText(d.set("month", d.get("month") - 1).format("MMMM YYYY"))).toBeTruthy();
+          nextMonth = getByTitle("Next month");
+          _context11.next = 14;
+          return _userEvent["default"].click(nextMonth);
+        case 14:
+          expect(getByText(d.format("MMMM YYYY"))).toBeTruthy();
+        case 15:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  })));
+  test("Selecting a date from the calendar from another month", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+    var _render13, getAllByText, getByText, getByRole, input, calendarAction, dayButton, d;
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            format: "dd-mm-yyyy",
+            defaultValue: "10-08-2021"
+          })), getAllByText = _render13.getAllByText, getByText = _render13.getByText, getByRole = _render13.getByRole;
+          input = getByRole("textbox");
+          calendarAction = getByRole("combobox");
+          _context12.next = 5;
+          return _userEvent["default"].click(calendarAction);
+        case 5:
+          dayButton = getAllByText("31")[0].closest("button");
+          _react2.fireEvent.click(dayButton);
+          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"));
+        case 13:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee12);
+  })));
+  test("Selecting a year from the calendar year picker", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+    var _render14, getByText, getByRole, input, calendarAction, d;
+    return _regenerator["default"].wrap(function _callee13$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            format: "dd-mm-yyyy",
+            defaultValue: "10-08-2021"
+          })), getByText = _render14.getByText, getByRole = _render14.getByRole;
+          input = getByRole("textbox");
+          calendarAction = getByRole("combobox");
+          _context13.next = 5;
+          return _userEvent["default"].click(calendarAction);
+        case 5:
+          d = (0, _dayjs["default"])("10-08-2021", "DD-MM-YYYY", true);
+          _context13.next = 8;
+          return _userEvent["default"].click(getByText(d.format("MMMM YYYY")));
+        case 8:
+          expect(getByText("2024")).toBeTruthy();
+          _context13.next = 11;
+          return _userEvent["default"].click(getByText("2024"));
+        case 11:
+          _context13.next = 13;
+          return _userEvent["default"].click(getByText(d.set("year", 2024).format("MMMM YYYY")));
+        case 13:
+          _react2.fireEvent.keyDown(document, {
+            key: "Escape",
+            code: "Escape",
+            keyCode: 27,
+            charCode: 27
+          });
+          expect(input.value).toBe(d.format("DD-MM-YYYY"));
+        case 15:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee13);
+  })));
+  test("Selecting a date from the calendar (using keyboard presses)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    var _render15, getByRole, getAllByText, getByText, calendarAction, input;
+    return _regenerator["default"].wrap(function _callee14$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)), getByRole = _render15.getByRole, getAllByText = _render15.getAllByText, getByText = _render15.getByText;
+          calendarAction = getByRole("combobox");
+          input = getByRole("textbox");
+          _userEvent["default"].type(input, "01-01-2010");
+          expect(input.value).toBe("01-01-2010");
+          _context14.next = 7;
+          return _userEvent["default"].click(calendarAction);
+        case 7:
+          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
+          });
+          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
+          });
+          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
+          });
+          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: "Escape",
+            code: "Escape",
+            keyCode: 27,
+            charCode: 27
+          });
+          expect(input.value).toBe("02-01-2010");
+        case 25:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee14);
+  })));
+  test("Selecting a date from the calendar (using keyboard presses) part II", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+    var _render16, getByRole, getAllByText, calendarAction, input;
+    return _regenerator["default"].wrap(function _callee15$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
+        case 0:
+          _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], null)), getByRole = _render16.getByRole, getAllByText = _render16.getAllByText;
+          calendarAction = getByRole("combobox");
+          input = getByRole("textbox");
+          _userEvent["default"].type(input, "01-01-2010");
+          expect(input.value).toBe("01-01-2010");
+          _context15.next = 7;
+          return _userEvent["default"].click(calendarAction);
+        case 7:
+          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");
+        case 19:
+        case "end":
+          return _context15.stop();
+      }
+    }, _callee15);
+  })));
   test("onChange & onBlur functions are called correctly", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
-
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render16.getByRole;
-
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByRole = _render17.getByRole;
     var input = getByRole("textbox");
     var d = new Date(2011, 9, 10);
-
     _userEvent["default"].type(input, "10-10-2011");
-
     expect(input.value).toBe("10-10-2011");
     expect(onChange).toHaveBeenCalledTimes(10);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-2011",
       date: d
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-2011",
@@ -598,26 +593,20 @@ describe("DateInput component tests", function () {
   test("onChange & onBlur functions are called correctly, also with errors", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
-
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render17.getByRole;
-
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+        onChange: onChange,
+        onBlur: onBlur
+      })),
+      getByRole = _render18.getByRole;
     var input = getByRole("textbox");
-
     _userEvent["default"].type(input, "10-10-");
-
     expect(input.value).toBe("10-10-");
     expect(onChange).toHaveBeenCalledTimes(6);
     expect(onChange).toHaveBeenCalledWith({
       value: "10-10-",
       error: "Invalid date."
     });
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "10-10-",
@@ -626,35 +615,24 @@ describe("DateInput component tests", function () {
   });
   test("onBlur function removes the error when it is fixed", function () {
     var onBlur = jest.fn();
-
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      onBlur: onBlur
-    })),
-        getByRole = _render18.getByRole;
-
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+        onBlur: onBlur
+      })),
+      getByRole = _render19.getByRole;
     var input = getByRole("textbox");
     var d = new Date(2002, 1, 20);
-
     _userEvent["default"].type(input, "test");
-
     expect(input.value).toBe("test");
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
       error: "Invalid date."
     });
-
     _userEvent["default"].clear(input);
-
     _userEvent["default"].type(input, "20-02-2002");
-
     expect(input.value).toBe("20-02-2002");
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "20-02-2002",
@@ -663,31 +641,22 @@ describe("DateInput component tests", function () {
   });
   test("onBlur function removes the error when the input is empty", function () {
     var onBlur = jest.fn();
-
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      onBlur: onBlur,
-      optional: true
-    })),
-        getByRole = _render19.getByRole;
-
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+        onBlur: onBlur,
+        optional: true
+      })),
+      getByRole = _render20.getByRole;
     var input = getByRole("textbox");
-
     _userEvent["default"].type(input, "test");
-
     expect(input.value).toBe("test");
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
       error: "Invalid date."
     });
-
     _userEvent["default"].clear(input);
-
     _react2.fireEvent.blur(input);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: ""
@@ -696,23 +665,16 @@ describe("DateInput component tests", function () {
   test("onBlur & onChange functions error: required field (not optional)", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
-
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByRole = _render20.getByRole;
-
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+        onBlur: onBlur,
+        onChange: onChange
+      })),
+      getByRole = _render21.getByRole;
     var date = getByRole("textbox");
-
     _userEvent["default"].type(date, "t");
-
     expect(date.value).toBe("t");
-
     _userEvent["default"].clear(date);
-
     _react2.fireEvent.blur(date);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "",
@@ -724,112 +686,123 @@ describe("DateInput component tests", function () {
       error: "This field is required. Please, enter a value."
     });
   });
-  test("Disabled date input (calendar action must be shown but not clickable)", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      disabled: true
-    })),
-        getByRole = _render21.getByRole,
-        queryByText = _render21.queryByText;
-
-    var calendarAction = getByRole("button");
-    var d = new Date();
-    var options = {
-      weekday: "short",
-      month: "short",
-      day: "numeric"
-    };
-    expect(getByRole("textbox").disabled).toBeTruthy();
-
-    _userEvent["default"].click(calendarAction);
-
-    expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
-  });
-  test("Input has correct accesibility attributes", function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
-      label: "Date input label"
-    })),
-        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("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"
+  test("Disabled date input (calendar action must be shown but not clickable)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+    var _render22, getByRole, queryByText, calendarAction, d, options;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            disabled: true
+          })), getByRole = _render22.getByRole, queryByText = _render22.queryByText;
+          calendarAction = getByRole("button");
+          d = new Date();
+          options = {
+            weekday: "short",
+            month: "short",
+            day: "numeric"
+          };
+          expect(getByRole("textbox").disabled).toBeTruthy();
+          _context16.next = 7;
+          return _userEvent["default"].click(calendarAction);
+        case 7:
+          expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
+        case 8:
+        case "end":
+          return _context16.stop();
       }
-    });
-
-    _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"
+    }, _callee16);
+  })));
+  test("Input has correct accessibility attributes", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
+    var _render23, getByRole, input, calendarAction, datePicker;
+    return _regenerator["default"].wrap(function _callee17$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
+        case 0:
+          _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Date input label"
+          })), getByRole = _render23.getByRole;
+          input = getByRole("textbox");
+          expect(input.getAttribute("aria-autocomplete")).toBeNull();
+          expect(input.getAttribute("aria-controls")).toBeNull();
+          expect(input.getAttribute("aria-expanded")).toBeNull();
+          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");
+          _context17.next = 13;
+          return _userEvent["default"].click(calendarAction);
+        case 13:
+          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();
+          _context17.next = 19;
+          return _userEvent["default"].type(calendarAction, "{esc}");
+        case 19:
+          expect(calendarAction.getAttribute("aria-expanded")).toBe("false");
+        case 20:
+        case "end":
+          return _context17.stop();
       }
-    });
-
-    _userEvent["default"].click(calendarAction);
-
-    expect(getByText("October 2080")).toBeTruthy();
-  });
+    }, _callee17);
+  })));
+  test("Chooses the correct year when two digit format", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
+    var _render24, getByText, getByRole, getAllByText, input, calendarAction;
+    return _regenerator["default"].wrap(function _callee18$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_DateInput["default"], {
+            label: "Default label",
+            format: "dd-mm-yy",
+            defaultValue: "21-10-80"
+          })), getByText = _render24.getByText, getByRole = _render24.getByRole, getAllByText = _render24.getAllByText;
+          input = getByRole("textbox");
+          calendarAction = getByRole("combobox");
+          expect(input.value).toBe("21-10-80");
+          _context18.next = 6;
+          return _userEvent["default"].click(calendarAction);
+        case 6:
+          expect(getByText("21").getAttribute("aria-selected")).toBe("true");
+          expect(getByText("October 1980")).toBeTruthy();
+          _context18.next = 10;
+          return _userEvent["default"].type(calendarAction, "{esc}");
+        case 10:
+          _react2.fireEvent.change(input, {
+            target: {
+              value: "21-10-10"
+            }
+          });
+          _context18.next = 13;
+          return _userEvent["default"].click(calendarAction);
+        case 13:
+          expect(getByText("October 1910")).toBeTruthy();
+          _context18.next = 16;
+          return _userEvent["default"].click(getByText("October 1910"));
+        case 16:
+          _context18.next = 18;
+          return _userEvent["default"].click(getByText("2010"));
+        case 18:
+          _context18.next = 20;
+          return _userEvent["default"].click(getAllByText("1")[0]);
+        case 20:
+          expect(input.value).toBe("01-10-10");
+          _context18.next = 23;
+          return _userEvent["default"].type(calendarAction, "{esc}");
+        case 23:
+          _react2.fireEvent.change(input, {
+            target: {
+              value: "21-10-80"
+            }
+          });
+          _context18.next = 26;
+          return _userEvent["default"].click(calendarAction);
+        case 26:
+          expect(getByText("October 2080")).toBeTruthy();
+        case 27:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee18);
+  })));
 });