Merge pull request #23979 from millermedeiros/1030798-month-view-l10n

Bug 1030798 - [Calendar] Month view: day header and event time are not localized when changing languages r=gaye

apps/calendar/js/templates/months_day.js

@@ -14,46 +14,37 @@ var MonthsDay = create({
       this.h('classes')
     ].join(' ');
 
-    var containerClassList = [
-      'container',
-      'calendar-id-' + calendarId
-    ].join(' ');
-
-    this.eventTime = function() {
+    var eventTime = (function() {
       if (this.arg('isAllDay')) {
         return '<div class="all-day" data-l10n-id="hour-allday"></div>';
       }
       var startTime = formatTime(this.arg('startTime'));
       var endTime = formatTime(this.arg('endTime'));
       return `<div class="start-time">${startTime}</div>
               <div class="end-time">${endTime}</div>`;
-    };
+    }.call(this));
 
-    this.eventDetails = function() {
+    var eventDetails = (function() {
       var result = '<h5>' + this.h('title') + '</h5>';
       var location = this.h('location');
       if (location && location.length > 0) {
-        result += '<span class="details">';
-        result += '<span class="location">';
-        result += location;
-        result += '</span>';
-        result += '</span>';
+        result += `<span class="details">
+          <span class="location">${location}</span>
+        </span>`;
       }
-
       return result;
-    };
-
-    return '<section class="' + sectionClassList + '" ' +
-                    'data-id="' + this.h('busytimeId') + '">' +
-           '<div class="' + containerClassList + '">' +
-             '<div class="gaia-icon icon-calendar-dot calendar-text-color">' +
-             '</div>' +
-             '<div class="event-time">' + this.eventTime() + '</div>' +
-             '<div class="event-details">' + this.eventDetails() + '</div>' +
-             '<div class="gaia-icon icon-calendar-alarm ' +
-               'calendar-text-color"></div>' +
-           '</div>' +
-           '</section>';
+    }.call(this));
+
+    var busytimeId = this.h('busytimeId');
+
+    return `<section class="${sectionClassList}" data-id="${busytimeId}">
+      <div class="container calendar-id-${calendarId}">
+        <div class="gaia-icon icon-calendar-dot calendar-text-color"></div>
+        <div class="event-time">${eventTime}</div>
+        <div class="event-details">${eventDetails}</div>
+        <div class="gaia-icon icon-calendar-alarm calendar-text-color"></div>
+      </div>
+      </section>`;
   }
 });
 module.exports = MonthsDay;

apps/calendar/js/views/months_day.js

@@ -46,11 +46,19 @@ MonthsDay.prototype = {
 
   changeDate: function(date) {
     Parent.prototype.changeDate.apply(this, arguments);
-    this.currentDate.innerHTML = dateFormat.localeFormat(
+    var formatId = 'months-day-view-header-format';
+    this.currentDate.textContent = dateFormat.localeFormat(
       date,
-      navigator.mozL10n.get('months-day-view-header-format')
+      navigator.mozL10n.get(formatId)
     );
+    // we need to set the [data-date] and [data-l10n-date-format] because
+    // locale might change while the app is still open
+    this.currentDate.dataset.date = date;
+    this.currentDate.dataset.l10nDateFormat = formatId;
+    this._toggleEmptyMessage();
+  },
 
+  _toggleEmptyMessage: function() {
     var children = this.events.children;
     this.emptyMessage.classList.toggle(
       'active',
@@ -108,20 +116,12 @@ MonthsDay.prototype = {
 
   add: function() {
     Parent.prototype.add.apply(this, arguments);
-
-    // If we were showing "No Events" before,
-    // we should remove it now.
-    this.emptyMessage.classList.remove('active');
+    this._toggleEmptyMessage();
   },
 
   remove: function() {
     Parent.prototype.remove.apply(this, arguments);
-    // If the only event today was just removed,
-    // we should add the "No Events" label.
-    var children = this.events.children;
-    if (!children || children.length === 0) {
-      this.emptyMessage.classList.add('active');
-    }
+    this._toggleEmptyMessage();
   },
 
   render: function() {

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

@@ -4,6 +4,7 @@ define(function(require) {
 var DayChild = require('views/day_child');
 var DayTemplate = require('templates/day');
 var MonthsDay = require('views/months_day');
+var dateFormat = require('date_format');
 
 suite('Views.MonthsDay', function() {
   var subject,
@@ -46,6 +47,36 @@ suite('Views.MonthsDay', function() {
     assert.isFalse(subject.renderAllHours);
   });
 
+  test('#changeDate', function() {
+    var currentDate = {
+      textContent: '',
+      dataset: {}
+    };
+    sinon.stub(subject, '_findElement')
+      .withArgs('currentDate')
+      .returns(currentDate);
+
+    subject._toggleEmptyMessage = sinon.spy();
+
+    var now = new Date();
+    var format = 'months-day-view-header-format';
+    subject.changeDate(now);
+
+    assert.deepEqual(currentDate.textContent, dateFormat.localeFormat(
+      now,
+      navigator.mozL10n.get(format)
+    ), 'should set the currentDate textContent');
+
+    assert.deepEqual(currentDate.dataset, {
+      date: now,
+      l10nDateFormat: format
+    }, 'should set l10n dataset');
+
+    assert.ok(
+      subject._toggleEmptyMessage.calledOnce,
+      'should call _toggleEmptyMessage'
+    );
+  });
 
   suite('#handleEvent', function() {