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

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

@@ -1,3 +1,4 @@
+var _DateTimeInput, _DateTimeInput2, _DateTimeInput3;
 /*
  * The MIT License (MIT)
  *
@@ -23,206 +24,686 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-// import { userEvent } from '@testing-library/user-event'
-import DateTimeInput from '../index';
+import { DateTimeInput } from '../index';
+import { ApplyLocale, DateTime } from '@instructure/ui-i18n';
 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.parse('2017-05-01T17:30Z', locale, timezone);
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    const timeInput = 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.parse('2017-05-01T23:30Z', locale, timezone);
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    const timeInput = 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.parse('2017-05-01T17:30Z', locale, timezone);
+    const defaultValue = DateTime.parse('2016-04-01T17:00Z', locale, timezone);
+    const onChange = jest.fn();
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    const timeInput = 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.parse('2017-04-01T18:30Z', locale, timezone);
+    const date = dateObj.toISOString().split('T')[0];
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    const timeInput = 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 = render( /*#__PURE__*/React.createElement(DateTimeInput, {
-        description: "date time",
+        description: "date_time",
+        dateRenderLabel: "date-input",
         prevMonthLabel: "Previous month",
         nextMonthLabel: "Next month",
-        dateRenderLabel: "date",
-        timeRenderLabel: "time",
+        timeRenderLabel: "time-input",
+        locale: "en-US",
+        timezone: "US/Eastern",
+        isRequired: true,
+        invalidDateTimeMessage: invalidDateTimeMessage
+      })),
+      container = _render.container;
+    const timeInput = screen.getByLabelText('time-input');
+    await userEvent.type(timeInput, '1:00 PM');
+    fireEvent.blur(timeInput);
+    await 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');
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('time-input');
+    await userEvent.type(timeInput, '1:00 PM{enter}');
+    await waitFor(() => {
+      const errorMessages = 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.parse('2017-05-01T17:00', locale, timezone);
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('time-input');
+    fireEvent.change(timeInput, {
+      target: {
+        value: '3:00 AM'
+      }
+    });
+    fireEvent.keyDown(timeInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    fireEvent.blur(timeInput);
+    await 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 = render(_DateTimeInput || (_DateTimeInput = /*#__PURE__*/React.createElement(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 = screen.getByLabelText('time-input');
+    fireEvent.change(timeInput, {
+      target: {
+        value: '5:00 PM'
+      }
+    });
+    fireEvent.keyDown(timeInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    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 defaultValue = DateTime.parse('2017-05-01T17:30Z', locale, timezone);
+    const _render3 = render( /*#__PURE__*/React.createElement(DateTimeInput, {
+        description: "date_time",
+        dateRenderLabel: "date-input",
+        prevMonthLabel: "Previous month",
+        nextMonthLabel: "Next month",
+        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.parse('2017-05-01T17:30Z', locale, timezone);
+    const _render4 = render( /*#__PURE__*/React.createElement(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;
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    const timeInput = 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.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 = render( /*#__PURE__*/React.createElement(DateTimeInput, props)),
+      container = _render5.container,
+      rerender = _render5.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/React.createElement(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.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 = render( /*#__PURE__*/React.createElement(DateTimeInput, props)),
+      container = _render6.container,
+      rerender = _render6.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/React.createElement(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.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 = render( /*#__PURE__*/React.createElement(DateTimeInput, props)),
+      container = _render7.container,
+      rerender = _render7.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/React.createElement(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 = render(_DateTimeInput2 || (_DateTimeInput2 = /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    fireEvent.blur(dateInput);
+    await waitFor(() => {
+      expect(container).toHaveTextContent('whoops');
+    });
+  });
+  it('should show error message if initial defaultValue is invalid', async () => {
+    const _render9 = render(_DateTimeInput3 || (_DateTimeInput3 = /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    fireEvent.blur(dateInput);
+    await 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.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 = render( /*#__PURE__*/React.createElement(DateTimeInput, props)),
+      container = _render10.container,
+      rerender = _render10.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      value: "A very invalid date"
+    })));
+    const dateInput = screen.getByLabelText('date-input');
+    fireEvent.blur(dateInput);
+    await waitFor(() => {
+      expect(container).toHaveTextContent('whoops');
+    });
+  });
+  it('should show supplied message', async () => {
+    const locale = 'en-US';
+    const timezone = 'US/Eastern';
+    const 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 = render( /*#__PURE__*/React.createElement(DateTimeInput, props)),
+      container = _render11.container,
+      rerender = _render11.rerender;
+    expect(container).toHaveTextContent('May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      messages: [{
+        text: 'message_text',
+        type: 'success'
+      }]
+    })));
+    const dateInput = screen.getByLabelText('date-input');
+    fireEvent.blur(dateInput);
+    await 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.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 = render( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+        showMessages: false
+      }))),
+      container = _render12.container,
+      rerender = _render12.rerender;
+    expect(container).not.toHaveTextContent('2017');
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      showMessages: false,
+      messages: [{
+        text: 'message_text',
+        type: 'success'
+      }]
+    })));
+    const dateInput = screen.getByLabelText('date-input');
+    fireEvent.blur(dateInput);
+    await waitFor(() => {
+      expect(container).not.toHaveTextContent('2017');
+      expect(container).toHaveTextContent('message_text');
+    });
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      messages: [{
+        text: 'message_text',
+        type: 'success'
+      }],
+      showMessages: true
+    })));
+    fireEvent.blur(screen.getByLabelText('date-input'));
+    await 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.parse('2017-05-01T17:30Z', 'en-US', 'GMT');
+    const _render13 = render(
+      /*#__PURE__*/
+      // Africa/Nairobi is GMT +3
+      React.createElement(ApplyLocale, {
+        locale: "fr",
+        timezone: "Africa/Nairobi"
+      }, /*#__PURE__*/React.createElement(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.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 = render( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+        dateFormat: "l" // localized numeric date like 9/4/2017
+      }))),
+      rerender = _render14.rerender;
+    const dateInput = screen.getByLabelText('date-input');
+    expect(dateInput).toHaveValue('5/1/2017');
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      dateFormat: "yyyy MMMM"
+    })));
+    fireEvent.blur(screen.getByLabelText('date-input'));
+    await waitFor(() => {
+      expect(dateInput).toHaveValue('2017 May');
+    });
+  });
+  it('should format bottom message according to messageFormat', async () => {
+    const onChange = jest.fn();
+    const 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 = render( /*#__PURE__*/React.createElement(DateTimeInput, props)),
+      container = _render15.container,
+      rerender = _render15.rerender;
+    expect(container).toHaveTextContent('Monday, May 1, 2017 1:30 PM');
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      messageFormat: "l, LT"
+    })));
+    fireEvent.blur(screen.getByLabelText('date-input'));
+    await 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.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 = render( /*#__PURE__*/React.createElement(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.parse(newDateStr, locale, timezone);
+    rerender( /*#__PURE__*/React.createElement(DateTimeInput, Object.assign({}, props, {
+      value: newDateStr
+    })));
+    const dateInput = screen.getByLabelText('date-input');
+    const timeInput = screen.getByLabelText('time-input');
+    fireEvent.blur(dateInput);
+    await 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';
+    render( /*#__PURE__*/React.createElement(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';
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    fireEvent.change(dateInput, {
+      target: {
+        value: 'May 1, 2017'
+      }
+    });
+    fireEvent.keyDown(dateInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    fireEvent.blur(dateInput);
+    await 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';
+    render( /*#__PURE__*/React.createElement(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 = screen.getByLabelText('date-input');
+    fireEvent.change(dateInput, {
+      target: {
+        value: 'May 1, 2017'
+      }
+    });
+    fireEvent.keyDown(dateInput, {
+      key: 'Enter',
+      code: 'Enter'
+    });
+    fireEvent.blur(dateInput);
+    await 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 = render( /*#__PURE__*/React.createElement(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 = 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()
-  //   })
 });