Merge pull request #15957 from millermedeiros/966516-picker-bigger-month

Bug 966516 - [B2G][Calender]Changing the month in an event doesn't update to the number associated with that month r=gaye
(cherry picked from commit 7dd74e8)

Conflicts:
	apps/calendar/test/unit/.jshintrc

apps/calendar/js/views/modify_event.js

@@ -13,6 +13,11 @@ Calendar.ns('Views').ModifyEvent = (function() {
 
     ERROR_PREFIX: 'event-error-',
 
+    formats: {
+      date: 'dateTimeFormat_%x',
+      time: 'shortTimeFormat'
+    },
+
     selectors: {
       element: '#modify-event-view',
       alarmList: '#modify-event-view .alarms',
@@ -569,32 +574,26 @@ Calendar.ns('Views').ModifyEvent = (function() {
         endDate = this.formatEndDate(endDate);
       }
 
-      this.getEl('startDate').value =
-        InputParser.exportDate(startDate);
-      this._updateDateTimeLocale(
+      this.getEl('startDate').value = InputParser.exportDate(startDate);
+      this._setupDateTimeSync(
         'date', 'startDate', 'start-date-locale', startDate);
 
-      this.getEl('endDate').value =
-        InputParser.exportDate(endDate);
-      this._updateDateTimeLocale(
+      this.getEl('endDate').value = InputParser.exportDate(endDate);
+      this._setupDateTimeSync(
         'date', 'endDate', 'end-date-locale', endDate);
 
-      this.getEl('startTime').value =
-        InputParser.exportTime(startDate);
-      this._updateDateTimeLocale(
+      this.getEl('startTime').value = InputParser.exportTime(startDate);
+      this._setupDateTimeSync(
         'time', 'startTime', 'start-time-locale', startDate);
 
-      this.getEl('endTime').value =
-        InputParser.exportTime(endDate);
-      this._updateDateTimeLocale(
+      this.getEl('endTime').value = InputParser.exportTime(endDate);
+      this._setupDateTimeSync(
         'time', 'endTime', 'end-time-locale', endDate);
 
-      this.getEl('description').textContent =
-        model.description;
+      this.getEl('description').textContent = model.description;
 
       // update calendar id
-      this.getEl('calendarId').value =
-        model.calendarId;
+      this.getEl('calendarId').value = model.calendarId;
 
       // calendar display
       var currentCalendar = this.getEl('currentCalendar');
@@ -613,42 +612,41 @@ Calendar.ns('Views').ModifyEvent = (function() {
      * Handling a layer over <input> to have localized
      * date/time
      */
-    _updateDateTimeLocale: function(type, date, target, value) {
-      var _ = navigator.mozL10n.get;
-      var localeFormat = Calendar.App.dateFormat.localeFormat;
-
-      var _formats = {
-        date: _('dateTimeFormat_%x'),
-        time: _('shortTimeFormat')
-      };
-
+    _setupDateTimeSync: function(type, src, target, value) {
       var targetElement = document.getElementById(target);
-      if (!targetElement)
+      if (!targetElement) {
         return;
+      }
+      this._renderDateTimeLocale(type, targetElement, value);
 
-      targetElement.textContent = localeFormat(
-        value, _formats[type]);
+      var callback = type === 'date' ?
+        this._updateDateLocaleOnInput : this._updateTimeLocaleOnInput;
 
-      this.getEl(date).addEventListener('input', function(e) {
-        var selected;
-        var newDate = new Date();
+      this.getEl(src)
+        .addEventListener('input', callback.bind(this, targetElement));
+    },
 
-        if (type == 'date') {
-          selected = InputParser.importDate(e.target.value);
-          newDate.setFullYear(selected.year);
-          newDate.setMonth(selected.month);
-          newDate.setDate(selected.date);
-        }
-        if (type == 'time') {
-          selected = InputParser.importTime(e.target.value);
-          newDate.setHours(selected.hours);
-          newDate.setMinutes(selected.minutes);
-          newDate.setSeconds(0);
-        }
+    _renderDateTimeLocale: function(type, targetElement, value) {
+      // we inject the targetElement to make it easier to test
+      var localeFormat = Calendar.App.dateFormat.localeFormat;
+      var format = navigator.mozL10n.get(this.formats[type]);
+      targetElement.textContent = localeFormat(value, format);
+    },
 
-        targetElement.textContent = localeFormat(
-          newDate, _formats[type]);
-      });
+    _updateDateLocaleOnInput: function(targetElement, e) {
+      var selected = InputParser.importDate(e.target.value);
+      // use date constructor to avoid issues, see Bug 966516
+      var date = new Date(selected.year, selected.month, selected.date);
+      this._renderDateTimeLocale('date', targetElement, date);
+    },
+
+    _updateTimeLocaleOnInput: function(targetElement, e) {
+      var selected = InputParser.importTime(e.target.value);
+      var date = new Date();
+      date.setHours(selected.hours);
+      date.setMinutes(selected.minutes);
+      date.setSeconds(0);
+      this._renderDateTimeLocale('time', targetElement, date);
     },
 
     /**

apps/calendar/test/unit/views/modify_event_test.js

@@ -4,6 +4,8 @@ requireLib('querystring.js');
 requireElements('calendar/elements/modify_event.html');
 requireElements('calendar/elements/show_event.html');
 
+mocha.globals(['InputParser']);
+
 suiteGroup('Views.ModifyEvent', function() {
   /** disabled because of intermittent failures see bug 917537 */
   return;
@@ -353,7 +355,7 @@ suiteGroup('Views.ModifyEvent', function() {
     });
 
 
-    // this allows to test _updateDateTimeLocale()
+    // this allows to test _setupDateTimeSync() - before user changes value
     test('date/time are displayed according to the locale', function(done) {
       remote.startDate = new Date(2012, 11, 30, 1, 2);
       remote.endDate = new Date(2012, 11, 31, 13, 4);
@@ -374,6 +376,50 @@ suiteGroup('Views.ModifyEvent', function() {
         });
       });
     });
+
+    suite('#_updateDateLocaleOnInput', function() {
+      var clock;
+      var element;
+      var evt;
+
+      setup(function() {
+        element = {};
+        evt = { target: {} };
+      });
+
+      teardown(function() {
+        clock.restore();
+      });
+
+      test('should localize date', function() {
+        var baseTimestamp = (new Date(2014, 0, 20).getTime());
+        clock = sinon.useFakeTimers(baseTimestamp);
+        evt.target.value = '2014-01-21';
+        subject._updateDateLocaleOnInput(element, evt);
+        assert.equal(element.textContent, '01/21/2014');
+      });
+
+      test('display proper month - Bug 966516', function() {
+        // it's really important to mock the Date to be able to reproduce the
+        // Bug 966516, since it only happened if system date was a day higher
+        // than next month end date (eg. Jan 31 and you pick Feb 28)
+        var baseTimestamp = (new Date(2014, 0, 31, 2, 30)).getTime();
+        clock = sinon.useFakeTimers(baseTimestamp);
+        evt.target.value = '2014-02-28';
+        subject._updateDateLocaleOnInput(element, evt);
+        assert.equal(element.textContent, '02/28/2014');
+      });
+    });
+
+    suite('#_updateTimeLocaleOnInput', function() {
+      test('should localize time', function() {
+        var element = {};
+        var evt = { target: { value: '22:31' } };
+        subject._updateTimeLocaleOnInput(element, evt);
+        assert.equal(element.textContent, '10:31 PM');
+      });
+    });
+
   });
 
   suite('#_overrideEvent', function(done) {