Merge pull request #8001 from michaelchadwick/frontend-5606-waag-tran…

…slate-month-names Week at a Glance now translates month names when displaying
ilios · Jul 26, 2024 · a6fcada · a6fcada
2 parents 9b21f04 + 6fa4a6e
commit a6fcada
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/packages/ilios-common/addon/components/week-glance.js b/packages/ilios-common/addon/components/week-glance.js
@@ -62,15 +62,23 @@ export default class WeeklyGlance extends Component {
       return '';
     }
 
-    const from = this.midnightAtTheStartOfTheWeekDateTime.toFormat('MMMM d');
+    const from =
+      this.intl.formatDate(this.midnightAtTheStartOfTheWeekDateTime, { month: 'long' }) +
+      ' ' +
+      this.midnightAtTheStartOfTheWeekDateTime.toFormat('d');
+
     let to = this.midnightAtTheEndOfTheWeekDateTime.toFormat('d');
+
     if (
       !this.midnightAtTheStartOfTheWeekDateTime.hasSame(
         this.midnightAtTheEndOfTheWeekDateTime,
         'month',
       )
     ) {
-      to = this.midnightAtTheEndOfTheWeekDateTime.toFormat('MMMM d');
+      to =
+        this.intl.formatDate(this.midnightAtTheEndOfTheWeekDateTime, { month: 'long' }) +
+        ' ' +
+        this.midnightAtTheEndOfTheWeekDateTime.toFormat('d');
       return `${from} - ${to}`;
     }
     return `${from}-${to}`;

diff --git a/packages/test-app/tests/integration/components/week-glance-test.js b/packages/test-app/tests/integration/components/week-glance-test.js
@@ -7,10 +7,13 @@ import { hbs } from 'ember-cli-htmlbars';
 import { setupMirage } from 'test-app/tests/test-support/mirage';
 import { component } from 'ilios-common/page-objects/components/week-glance';
 import { a11yAudit } from 'ember-a11y-testing/test-support';
+import { setLocale, setupIntl } from 'ember-intl/test-support';
 
 module('Integration | Component | week glance', function (hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
+  setupIntl(hooks, 'en-us');
+
   const testDate = DateTime.fromObject({
     year: 2017,
     month: 1,
@@ -79,22 +82,26 @@ module('Integration | Component | week glance', function (hooks) {
     });
 
     this.getTitle = function (fullTitle) {
+      this.intl = this.owner.lookup('service:intl');
       const ld = this.owner.lookup('service:locale-days');
       const startOfWeek = DateTime.fromJSDate(ld.firstDayOfDateWeek(testDate.toJSDate()));
       const endOfWeek = DateTime.fromJSDate(ld.lastDayOfDateWeek(testDate.toJSDate()));
 
       let expectedTitle;
       if (startOfWeek.month != endOfWeek.month) {
-        const from = startOfWeek.toFormat('MMMM d');
-        const to = endOfWeek.toFormat('MMMM d');
+        const from =
+          this.intl.formatDate(startOfWeek, { month: 'long' }) + ' ' + startOfWeek.toFormat('d');
+        const to =
+          this.intl.formatDate(endOfWeek, { month: 'long' }) + ' ' + endOfWeek.toFormat('d');
         expectedTitle = `${from} - ${to}`;
       } else {
-        const from = startOfWeek.toFormat('MMMM d');
+        const from =
+          this.intl.formatDate(startOfWeek, { month: 'long' }) + ' ' + startOfWeek.toFormat('d');
         const to = endOfWeek.toFormat('d');
         expectedTitle = `${from}-${to}`;
       }
       if (fullTitle) {
-        expectedTitle += ' Week at a Glance';
+        expectedTitle += ' ' + this.intl.t('general.weekAtAGlance');
       }
 
       return expectedTitle;
@@ -206,7 +213,7 @@ module('Integration | Component | week glance', function (hooks) {
     assert.ok(true, 'no a11y errors found!');
   });
 
-  test('click to expend', async function (assert) {
+  test('click to expand', async function (assert) {
     assert.expect(1);
     this.owner.register('service:user-events', this.blankEventsMock);
     this.userEvents = this.owner.lookup('service:user-events');
@@ -317,4 +324,24 @@ module('Integration | Component | week glance', function (hooks) {
 
     return settled();
   });
+
+  test('title month is properly translated', async function (assert) {
+    this.set('today', testDate.toJSDate());
+    this.set('week', testDate.weekNumber);
+    await render(hbs`<WeekGlance
+      @collapsible={{true}}
+      @collapsed={{true}}
+      @showFullTitle={{true}}
+      @year={{format-date this.today year="numeric"}}
+      @week={{this.week}}
+    />`);
+
+    assert.strictEqual(component.title, this.getTitle(true));
+
+    await setLocale('es');
+    assert.strictEqual(component.title, this.getTitle(true));
+
+    await setLocale('fr');
+    assert.strictEqual(component.title, this.getTitle(true));
+  });
 });
diff --git a/packages/test-app/tests/integration/components/weekly-events-test.js b/packages/test-app/tests/integration/components/weekly-events-test.js
@@ -3,11 +3,14 @@ import { setupRenderingTest } from 'test-app/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { component } from 'ilios-common/page-objects/components/weekly-events';
+import { setLocale, setupIntl } from 'ember-intl/test-support';
 
 module('Integration | Component | weekly events', function (hooks) {
   setupRenderingTest(hooks);
+  setupIntl(hooks, 'en-us');
 
   test('it renders', async function (assert) {
+    this.intl = this.owner.lookup('service:intl');
     this.set('year', 2017);
     await render(hbs`<WeeklyEvents
       @year={{this.year}}
@@ -23,6 +26,14 @@ module('Integration | Component | weekly events', function (hooks) {
     assert.strictEqual(component.bottomNavigation.previousYear.title, 'Go to previous year');
     assert.strictEqual(component.bottomNavigation.nextYear.title, 'Go to next year');
     assert.strictEqual(component.weeks.length, 52);
+
+    assert.strictEqual(component.weeks[0].title, 'January 1-7');
+
+    await setLocale('es');
+    assert.strictEqual(component.weeks[0].title, 'enero 2-8');
+
+    await setLocale('fr');
+    assert.strictEqual(component.weeks[0].title, 'janvier 2-8');
   });
 
   test('top navigation - go to next year', async function (assert) {