Failed tests of `localizeAndFormatDate`

[cq-grzegorz-zadora]

locaizeAndFormatDate formats the first hour of the day as 24:00 instead of 00:00 for en-US

To Reproduce Steps to reproduce the behavior:

1. Run yarn test
2. There are three failing tests:

FAIL  src/util/dates.test.js
  ● date utils › getMonthStartInTimeZone() for 2019-11-23 › should return correct start of the month

    expect(received).toEqual(expected) // deep equality

    Expected: "11/1/2019, 00:00"
    Received: "11/1/2019, 24:00"

      313 |           getMonthStartInTimeZone(date, 'Australia/Eucla')
      314 |         )
    > 315 |       ).toEqual('11/1/2019, 00:00');
          |         ^
      316 |       expect(
      317 |         localizeAndFormatDate(
      318 |           intl,

      at Object.<anonymous> (src/util/dates.test.js:315:9)

  ● date utils › nextMonthFn() for 2019-11-23 › should return correct start of the next month

    expect(received).toEqual(expected) // deep equality

    Expected: "12/1/2019, 00:00"
    Received: "12/1/2019, 24:00"

      337 |       expect(
      338 |         localizeAndFormatDate(intl, 'Australia/Eucla', nextMonthFn(date, 'Australia/Eucla'))
    > 339 |       ).toEqual('12/1/2019, 00:00');
          |         ^
      340 |       expect(
      341 |         localizeAndFormatDate(intl, 'Europe/Helsinki', nextMonthFn(date, 'Europe/Helsinki'))
      342 |       ).toEqual('12/1/2019, 00:00');

      at Object.<anonymous> (src/util/dates.test.js:339:9)

  ● date utils › prevMonthFn() for 2019-11-23 › should return correct start of the next month

    expect(received).toEqual(expected) // deep equality

    Expected: "10/1/2019, 00:00"
    Received: "10/1/2019, 24:00"

      353 |       expect(
      354 |         localizeAndFormatDate(intl, 'Australia/Eucla', prevMonthFn(date, 'Australia/Eucla'))
    > 355 |       ).toEqual('10/1/2019, 00:00');
          |         ^
      356 |       expect(
      357 |         localizeAndFormatDate(intl, 'Europe/Helsinki', prevMonthFn(date, 'Europe/Helsinki'))
      358 |       ).toEqual('10/1/2019, 00:00');

Screenshots

Expected behavior

locaizeAndFormatDate should format the first hour of the day as 00:00 and tests should not fail.

Additional context

The issue is due to insufficient configuration of intl.formatTime function. It does not accept hourCycle: 'h11' that is required for the expected format.

More on that here: formatjs/formatjs#1577

[Kimmo Puputti]

Thanks for posting this issue report with good details! I apologise that it took this long to respond, but we have addressed this in #171

See more details and screenshots in the linked PR, but the main problem was that we didn't use the default time formatting for the locale. In addition, it wasn't possible to override the behavior with hourCycle when we used the hour12: false in the formatting options.

The new default should be more correct for the locale, but to get the behavior that you are requesting, you should change the options to have hourCycle: 'h23'. Let me know if you need more help with this.