@instructure/ui-date-time-input 8.55.1-snapshot-0 → 8.55.1-snapshot-3

package/lib/DateTimeInput/__new-tests__/DateTimeInput.test.js

@@ -3,8 +3,12 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
-var _index = _interopRequireDefault(require("../index"));
+var _index = require("../index");
+var _ApplyLocale = require("@instructure/ui-i18n/lib/ApplyLocale");
+var _DateTime = require("@instructure/ui-i18n/lib/DateTime.js");
+var _DateTimeInput, _DateTimeInput2, _DateTimeInput3;
 /*
  * The MIT License (MIT)
  *
@@ -28,205 +32,681 @@ var _index = _interopRequireDefault(require("../index"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-// import { userEvent } from '@testing-library/user-event'
-
 describe('<DateTimeInput />', () => {
-  it('should render', async () => {
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
+  it('should use the default value', () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date-input",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      defaultValue: dateTime.toISOString()
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    expect(dateInput).toHaveValue(dateTime.format('LL'));
+    expect(timeInput).toHaveValue(dateTime.format('LT'));
+  });
+  it('should use the value', () => {
+    const onChange = jest.fn();
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T23:30Z', locale, timezone);
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date-input",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      value: dateTime.toISOString(),
+      onChange: onChange
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    expect(dateInput).toHaveValue(dateTime.format('LL'));
+    expect(timeInput).toHaveValue(dateTime.format('LT'));
+  });
+  it('should prefer value to defaultValue', () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const value = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const defaultValue = _DateTime.DateTime.parse('2016-04-01T17:00Z', locale, timezone);
+    const onChange = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      dateRenderLabel: "date-input",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      value: value.toISOString(),
+      defaultValue: defaultValue.toISOString(),
+      onChange: onChange
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    expect(dateInput).toHaveValue(value.format('LL'));
+    expect(timeInput).toHaveValue(value.format('LT'));
+  });
+  it('should set time to local midnight when only date is set', () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateObj = _DateTime.DateTime.parse('2017-04-01T18:30Z', locale, timezone);
+    const date = dateObj.toISOString().split('T')[0];
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      defaultValue: date
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    expect(dateInput).toHaveValue(dateObj.format('LL'));
+    expect(timeInput).toHaveValue('12:00 AM');
+  });
+  it('should call invalidDateTimeMessage if time is set w/o a date and is required', async () => {
+    const invalidDateTimeMessage = jest.fn(_rawd => 'whoops');
+    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        locale: "en-US",
+        timezone: "US/Eastern",
+        isRequired: true,
+        invalidDateTimeMessage: invalidDateTimeMessage
+      })),
+      container = _render.container;
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    await _userEvent.default.type(timeInput, '1:00 PM');
+    _react2.fireEvent.blur(timeInput);
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('whoops');
+      expect(invalidDateTimeMessage).toHaveBeenCalled();
+    });
+  });
+  it('should not call invalidDateTimeMessage if time is set w/o a date', async () => {
+    const invalidDateTimeMessage = jest.fn(_rawd => 'whoops');
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      locale: "en-US",
+      timezone: "US/Eastern",
+      invalidDateTimeMessage: invalidDateTimeMessage
+    }));
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    await _userEvent.default.type(timeInput, '1:00 PM{enter}');
+    await (0, _react2.waitFor)(() => {
+      const errorMessages = _react2.screen.queryByText('whoops');
+      expect(errorMessages).not.toBeInTheDocument();
+      expect(invalidDateTimeMessage).not.toHaveBeenCalled();
+    });
+  });
+  it('should fire the onChange event when TimeInput value changes', async () => {
+    const onChange = jest.fn();
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const defaultValue = _DateTime.DateTime.parse('2017-05-01T17:00', locale, timezone);
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: locale,
+      timezone: timezone,
+      onChange: onChange,
+      defaultValue: defaultValue.toISOString()
+    }));
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    _react2.fireEvent.change(timeInput, {
+      target: {
+        value: '3:00 AM'
+      }
+    });
+    _react2.fireEvent.keyDown(timeInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    _react2.fireEvent.blur(timeInput);
+    await (0, _react2.waitFor)(() => {
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange.mock.calls[0][0].target.value).toMatch('3:00 AM');
+    });
+  });
+  it('should show correct message when TimeInput value changes', () => {
+    const _render2 = (0, _react2.render)(_DateTimeInput || (_DateTimeInput = /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        invalidDateTimeMessage: "whoops",
+        locale: "en-US",
+        timezone: "US/Eastern",
+        defaultValue: "2018-01-18T13:00"
+      }))),
+      container = _render2.container;
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    _react2.fireEvent.change(timeInput, {
+      target: {
+        value: '5:00 PM'
+      }
+    });
+    _react2.fireEvent.keyDown(timeInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    _react2.fireEvent.blur(timeInput);
+    expect(container).toHaveTextContent('Thursday, January 18, 2018 5:00 PM');
+  });
+  it('should show the formatted date-time message', () => {
     const locale = 'en-US';
     const timezone = 'US/Eastern';
-    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
-        description: "date time",
+    const defaultValue = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
         nextMonthLabel: "Next month",
-        dateRenderLabel: "date",
-        timeRenderLabel: "time",
+        timeRenderLabel: "time-input",
         invalidDateTimeMessage: "whoops",
         locale: locale,
         timezone: timezone,
-        initialTimeForNewDate: "05:05"
+        defaultValue: defaultValue.toISOString()
       })),
-      container = _render.container;
-    expect(container.firstChild).toBeInTheDocument();
+      container = _render3.container;
+    expect(container).toHaveTextContent('Monday, May 1, 2017 1:30 PM');
+  });
+  it('should show the formatted date-time message in the proper locale', () => {
+    const timezone = 'US/Eastern';
+    const locale = 'fr';
+    const defaultValue = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        invalidDateTimeMessage: "whoops",
+        locale: locale,
+        timezone: timezone,
+        defaultValue: defaultValue.toISOString()
+      })),
+      container = _render4.container;
+    expect(container).toHaveTextContent('1 mai 2017 13:30');
+  });
+  it('should provide the html elements for date and time input', () => {
+    let dref;
+    let tref;
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: "en-US",
+      timezone: "US/Eastern",
+      dateInputRef: el => {
+        dref = el;
+      },
+      timeInputRef: el => {
+        tref = el;
+      }
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    expect(dateInput).toEqual(dref);
+    expect(timeInput).toEqual(tref);
+  });
+  it('should update message when value prop changes', () => {
+    const onChange = jest.fn();
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      dateRenderLabel: 'date',
+      timeRenderLabel: 'time',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      value: dateTime.toISOString(),
+      onChange
+    };
+    const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render5.container,
+      rerender = _render5.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      value: "2018-03-29T16:30Z"
+    })));
+    expect(container).toHaveTextContent('March 29, 2018 12:30 PM');
+  });
+  it('should update message when locale changed', () => {
+    const onChange = jest.fn();
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      onChange,
+      value: dateTime.toISOString()
+    };
+    const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render6.container,
+      rerender = _render6.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      locale: "fr"
+    })));
+    expect(container).toHaveTextContent('1 mai 2017 13:30');
+  });
+  it('should update message when timezone changed', () => {
+    const onChange = jest.fn();
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      onChange,
+      value: dateTime.toISOString()
+    };
+    const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render7.container,
+      rerender = _render7.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      timezone: "Europe/Paris"
+    })));
+    expect(container).toHaveTextContent('May 1, 2017 7:30 PM');
+  });
+  it('should show error message if initial value is invalid', async () => {
+    const _render8 = (0, _react2.render)(_DateTimeInput2 || (_DateTimeInput2 = /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        invalidDateTimeMessage: "whoops",
+        value: "totally not a date"
+      }))),
+      container = _render8.container;
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('whoops');
+    });
+  });
+  it('should show error message if initial defaultValue is invalid', async () => {
+    const _render9 = (0, _react2.render)(_DateTimeInput3 || (_DateTimeInput3 = /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        invalidDateTimeMessage: "whoops",
+        defaultValue: "totally not a date"
+      }))),
+      container = _render9.container;
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('whoops');
+    });
+  });
+  it('should update error message when value is invalid', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      value: dateTime.toISOString()
+    };
+    const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render10.container,
+      rerender = _render10.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      value: "A very invalid date"
+    })));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('whoops');
+    });
+  });
+  it('should show supplied message', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      value: dateTime.toISOString()
+    };
+    const _render11 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render11.container,
+      rerender = _render11.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      messages: [{
+        text: 'message_text',
+        type: 'success'
+      }]
+    })));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+      expect(container).toHaveTextContent('message_text');
+    });
+  });
+  it('should not show built in message when `showMessages` is false', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      value: dateTime.toISOString()
+    };
+    const _render12 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+        showMessages: false
+      }))),
+      container = _render12.container,
+      rerender = _render12.rerender;
+    expect(container).not.toHaveTextContent('2017');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      showMessages: false,
+      messages: [{
+        text: 'message_text',
+        type: 'success'
+      }]
+    })));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(container).not.toHaveTextContent('2017');
+      expect(container).toHaveTextContent('message_text');
+    });
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      messages: [{
+        text: 'message_text',
+        type: 'success'
+      }],
+      showMessages: true
+    })));
+    _react2.fireEvent.blur(_react2.screen.getByLabelText('date-input'));
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('2017');
+      expect(container).toHaveTextContent('message_text');
+    });
+  });
+  it('should read locale and timezone from context', () => {
+    const onChange = jest.fn();
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const _render13 = (0, _react2.render)(
+      /*#__PURE__*/
+      // Africa/Nairobi is GMT +3
+      _react.default.createElement(_ApplyLocale.ApplyLocale, {
+        locale: "fr",
+        timezone: "Africa/Nairobi"
+      }, /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        invalidDateTimeMessage: "whoops",
+        value: dateTime.toISOString(),
+        onChange: onChange
+      }))),
+      container = _render13.container;
+    expect(container).toHaveTextContent('lundi 1 mai 2017 20:30');
+  });
+  it('should format date according to dateFormat', async () => {
+    const onChange = jest.fn();
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      value: dateTime.toISOString(),
+      onChange
+    };
+    const _render14 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+        dateFormat: "l" // localized numeric date like 9/4/2017
+      }))),
+      rerender = _render14.rerender;
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    expect(dateInput).toHaveValue('5/1/2017');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      dateFormat: "yyyy MMMM"
+    })));
+    _react2.fireEvent.blur(_react2.screen.getByLabelText('date-input'));
+    await (0, _react2.waitFor)(() => {
+      expect(dateInput).toHaveValue('2017 May');
+    });
+  });
+  it('should format bottom message according to messageFormat', async () => {
+    const onChange = jest.fn();
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      value: dateTime.toISOString(),
+      onChange,
+      locale: 'en-US',
+      timezone: 'US/Eastern'
+    };
+    const _render15 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render15.container,
+      rerender = _render15.rerender;
+    expect(container).toHaveTextContent('Monday, May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      messageFormat: "l, LT"
+    })));
+    _react2.fireEvent.blur(_react2.screen.getByLabelText('date-input'));
+    await (0, _react2.waitFor)(() => {
+      expect(container).toHaveTextContent('5/1/2017, 1:30 PM');
+    });
+  });
+  it('should update Date and Time inputs when value prop changes', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const dateTime = _DateTime.DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const props = {
+      description: 'date_time',
+      dateRenderLabel: 'date-input',
+      prevMonthLabel: 'Previous month',
+      nextMonthLabel: 'Next month',
+      timeRenderLabel: 'time-input',
+      invalidDateTimeMessage: 'whoops',
+      locale,
+      timezone,
+      value: dateTime.toISOString()
+    };
+    const _render16 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, props)),
+      container = _render16.container,
+      rerender = _render16.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    const newDateStr = '2022-03-29T19:00Z';
+    const newDateTime = _DateTime.DateTime.parse(newDateStr, locale, timezone);
+    rerender( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, Object.assign({}, props, {
+      value: newDateStr
+    })));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(dateInput).toHaveValue(newDateTime.format('LL'));
+      expect(timeInput).toHaveValue(newDateTime.format('LT'));
+    });
+  });
+  it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
+    const initialTimeForNewDate = 'WRONG_FORMAT';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: 'en-US',
+      timezone: 'US/Eastern',
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    expect(consoleErrorMock.mock.calls[0][2]).toEqual(expect.stringContaining(`Invalid prop \`initialTimeForNewDate\` \`${initialTimeForNewDate}\` supplied to \`DateTimeInput\`, expected a HH:MM formatted string.`));
+  });
+  it("should throw warning if date select and initialTimeForNewDate prop's value is not HH:MM", async () => {
+    const initialTimeForNewDate = 'WRONG_FORMAT';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: 'en-US',
+      timezone: 'US/Eastern',
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.change(dateInput, {
+      target: {
+        value: 'May 1, 2017'
+      }
+    });
+    _react2.fireEvent.keyDown(dateInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(consoleErrorMock.mock.calls[0][0]).toBe(`Warning: [DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`);
+    });
+  });
+  it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
+    const initialTimeForNewDate = '99:99';
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+      description: "date_time",
+      dateRenderLabel: "date-input",
+      prevMonthLabel: "Previous month",
+      nextMonthLabel: "Next month",
+      timeRenderLabel: "time-input",
+      invalidDateTimeMessage: "whoops",
+      locale: 'en-US',
+      timezone: 'US/Eastern',
+      initialTimeForNewDate: initialTimeForNewDate
+    }));
+    const dateInput = _react2.screen.getByLabelText('date-input');
+    _react2.fireEvent.change(dateInput, {
+      target: {
+        value: 'May 1, 2017'
+      }
+    });
+    _react2.fireEvent.keyDown(dateInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    _react2.fireEvent.blur(dateInput);
+    await (0, _react2.waitFor)(() => {
+      expect(consoleErrorMock.mock.calls[0][0]).toEqual(expect.stringContaining(`Warning: [DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`));
+    });
+  });
+  it('should initial render prefer defaultValue time over initialTimeForNewDate', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const initialTimeForNewDate = '16:16';
+    const defaultValue = '2018-01-18T13:30';
+    const _render17 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        timeRenderLabel: "time-input",
+        invalidDateTimeMessage: "whoops",
+        defaultValue: defaultValue,
+        locale: locale,
+        timezone: timezone,
+        initialTimeForNewDate: initialTimeForNewDate
+      })),
+      container = _render17.container;
+    const timeInput = _react2.screen.getByLabelText('time-input');
+    expect(timeInput).toHaveValue('1:30 PM');
+    expect(container).toHaveTextContent('Thursday, January 18, 2018 1:30 PM');
   });
-
-  // it("should change value of TimeSelect to initialTimeForNewDate prop's value", async () => {
-  //   const locale = 'en-US'
-  //   const timezone = 'US/Eastern'
-
-  //   render(
-  //     <DateTimeInput
-  //       description="date time"
-  //       prevMonthLabel="Previous month"
-  //       nextMonthLabel="Next month"
-  //       dateRenderLabel="date"
-  //       timeRenderLabel="time"
-  //       invalidDateTimeMessage="whoops"
-  //       locale={locale}
-  //       timezone={timezone}
-  //       initialTimeForNewDate="05:05"
-  //     />
-  //   )
-
-  //   const input = screen.getAllByRole('combobox')[0]
-
-  //   fireEvent.click(input)
-
-  //   const firstDay = screen.getByText('15')
-
-  //   await userEvent.click(firstDay)
-
-  //   const allInputs = screen.getAllByRole('combobox')
-  //   const targetInput = allInputs.find(
-  //     (input) => (input as HTMLInputElement).value === '5:05 AM'
-  //   )
-  //   expect(targetInput).toBeInTheDocument()
-  // })
-
-  //   it("should throw warning if initialTimeForNewDate prop's value is not HH:MM", async () => {
-  //     const locale = 'en-US'
-  //     const timezone = 'US/Eastern'
-
-  //     const consoleError = jest
-  //       .spyOn(console, 'error')
-  //       .mockImplementation(() => {})
-
-  //     const initialTimeForNewDate = 'WRONG_FORMAT'
-
-  //     render(
-  //       <DateTimeInput
-  //         description="date time"
-  //         prevMonthLabel="Previous month"
-  //         nextMonthLabel="Next month"
-  //         dateRenderLabel="date"
-  //         timeRenderLabel="time"
-  //         invalidDateTimeMessage="whoops"
-  //         locale={locale}
-  //         timezone={timezone}
-  //         initialTimeForNewDate={initialTimeForNewDate}
-  //       />
-  //     )
-
-  //     expect(consoleError.mock.calls[0][2]).toContain(
-  //       `Invalid prop \`initialTimeForNewDate\` \`${initialTimeForNewDate}\` supplied to \`DateTimeInput\`, expected a HH:MM formatted string.`
-  //     )
-
-  //     const input = screen.getAllByRole('combobox')[0]
-
-  //     fireEvent.click(input)
-
-  //     const firstDay = screen.getByText('15')
-
-  //     await userEvent.click(firstDay)
-
-  //     expect(consoleError.mock.calls[1][0]).toBe(
-  //       `Warning: [DateTimeInput] initialTimeForNewDate prop is not in the correct format. Please use HH:MM format.`
-  //     )
-  //   })
-
-  //   it('should throw warning if initialTimeForNewDate prop hour and minute values are not in interval', async () => {
-  //     const locale = 'en-US'
-  //     const timezone = 'US/Eastern'
-
-  //     const consoleError = jest
-  //       .spyOn(console, 'error')
-  //       .mockImplementation(() => {})
-
-  //     const initialTimeForNewDate = '99:99'
-
-  //     render(
-  //       <DateTimeInput
-  //         description="date time"
-  //         prevMonthLabel="Previous month"
-  //         nextMonthLabel="Next month"
-  //         dateRenderLabel="date"
-  //         timeRenderLabel="time"
-  //         invalidDateTimeMessage="whoops"
-  //         locale={locale}
-  //         timezone={timezone}
-  //         initialTimeForNewDate={initialTimeForNewDate}
-  //       />
-  //     )
-
-  //     const input = screen.getAllByRole('combobox')[0]
-
-  //     fireEvent.click(input)
-
-  //     const firstDay = screen.getByText('15')
-
-  //     await userEvent.click(firstDay)
-
-  //     expect(consoleError.mock.calls[0][0]).toContain(
-  //       `Warning: [DateTimeInput] 0 <= hour < 24 and 0 <= minute < 60 for initialTimeForNewDate prop.`
-  //     )
-  //   })
-
-  /*
-   * TODO write this test with Cypress
-   * Steps:
-   * 0. Set initialTimeForNewDate and defaultValue props -> check if defaultValue is rendered in the date input and time input fields
-   * 1. Clear date input field
-   * 2. Click on an area outside of the component
-   * 3. Check if time input field got cleared as well
-   * 4. Click on the date input and select a date
-   * 5. Observe if the time input has the value of initialTimeForNewDate
-   */
-
-  // it('should merge defaultValue and initialTimeForNewDate when the user clears date input', async () => {
-  //   const locale = 'en-US'
-  //   const timezone = 'US/Eastern'
-  //
-  //   // const consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => {})
-  //
-  //   const initialTimeForNewDate = '16:16'
-  //   const defaultValue = '2018-01-18T13:30'
-  //
-  //   const {container} = render(
-  //     <DateTimeInput
-  //       description="date time"
-  //       prevMonthLabel="Previous month"
-  //       nextMonthLabel="Next month"
-  //       dateRenderLabel="date"
-  //       timeRenderLabel="time"
-  //       invalidDateTimeMessage="whoops"
-  //       defaultValue={defaultValue}
-  //       locale={locale}
-  //       timezone={timezone}
-  //       initialTimeForNewDate={initialTimeForNewDate}
-  //     />
-  //   )
-  //
-  //   const dateInput = container.querySelector('input')
-  //
-  //   const timeInput = container.querySelectorAll('input')[1]
-  //
-  //   fireEvent.change(dateInput as Element, { target: { value: '' } })
-  //
-  //
-  //   await waitFor(() => {
-  //   fireEvent.keyDown(dateInput as Element, { key: 'Escape' })
-  //
-  //   expect(timeInput).toHaveValue('')
-  //   })
-  //
-  //   // fireEvent.
-  //   // fireEvent.change(timeInput as Element, { target: { value: '' } })
-  //
-  //
-  //   const firstDay = screen.getByText('15')
-  //
-  //   await userEvent.click(firstDay)
-  //
-  //   const time = screen.getByText('4:16 PM')
-  //
-  //   expect(time).toBeInTheDocument()
-  //
-  //   // expect(consoleWarn.mock.calls[0][0]).toContain(
-  //   //   `Warning: [DateTimeInput] if defaultValue is set, initialTimeForNewDate will be ignored.`
-  //   // )
-  // })
-
-  //   afterEach(() => {
-  //     jest.resetAllMocks()
-  //   })
 });