Added Percy snapshot for ja translations (#73)

* Improved separation of concerns for <LocaleMenu>

* Standardized translations for <LocaleMenu>

* Added Percy snapshot for ja translations

* Added tests for <LocaleMenu>

Co-authored-by: ijlee2 <ijlee2@users.noreply.github.com>

Author: ijlee2

app/components/locale-menu/component.js

@@ -1,17 +1,13 @@
-import Component from '@glimmer/component';
-import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
 
 export default class LocaleMenuComponent extends Component {
-  @service intl;
+  @service locale;
 
-  supportedLocales = ['en-US', 'fr-FR', 'pt-BR', 'es', 'ja'];
+  @action updateLocale(event) {
+    const locale = event.target.value;
 
-  @action
-  updateLocale(evt) {
-    if (evt.target.value) {
-      this.intl.setLocale(evt.target.value);
-    }
+    this.locale.updateSiteLocale(locale);
   }
 }

app/components/locale-menu/template.hbs

@@ -1,14 +1,15 @@
- <select
-   data-test-field="Locale"
-   {{on "input" this.updateLocale}}
- >
-   <option value="">
-     {{t "component.locale-menu.select-your-preferred-language"}}
-   </option>
+<select
+  class="locale-menu"
+  data-test-field="Locale"
+  {{on "input" this.updateLocale}}
+>
+  <option value="" disabled selected>
+   {{t "component.locale-menu.select-your-preferred-language"}}
+  </option>
 
-   {{#each this.supportedLocales as |locale|}}
-     <option value={{locale}}>
-       {{t (concat "component.locale-menu.locale-" locale)}}
-     </option>
-   {{/each}}
+  {{#each this.locale.menuOptions as |menuOption|}}
+    <option data-test-option value={{menuOption.value}}>
+      {{menuOption.label}}
+    </option>
+  {{/each}}
  </select>

app/services/locale.js

@@ -0,0 +1,41 @@
+import Service, { inject as service } from '@ember/service';
+
+/*
+  To help with maintainenance, please list
+  the supported locales in alphabetical order.
+*/
+const supportedLocales = new Set([
+  'en-US',
+  'es',
+  'fr-FR',
+  'ja',
+  'pt-BR',
+]);
+
+export default class LocaleService extends Service {
+  @service intl;
+
+  menuOptions = Array.from(supportedLocales)
+    .map(locale => {
+      return {
+        label: this.intl.t(`component.locale-menu.locale-${locale}`).toString(),
+        value: locale,
+      };
+    })
+    .sort((a, b) => {
+      const aValue = a.label.toLowerCase();
+      const bValue = b.label.toLowerCase();
+
+      if (aValue > bValue) return 1;
+      if (aValue < bValue) return -1;
+      return 0;
+    });
+
+  updateSiteLocale(locale) {
+    if (!supportedLocales.has(locale)) {
+      return;
+    }
+
+    this.intl.setLocale(locale);
+  }
+}

app/styles/app.css

@@ -70,6 +70,11 @@ h2 .permalink {
   color: #c1c1c1;
   padding: 0 15px 0 5px;
 }
+
+.locale-menu {
+  padding: 0.25em 0.5em;
+}
+
 .intro {
   font-size: 1.1em;
   line-height: 1.5;

tests/acceptance/homepage/en-us-test.js

@@ -24,20 +24,20 @@ module('Acceptance | Homepage | en-US', function(hooks) {
       .hasAttribute('lang', 'en-us', 'We set the correct lang attribute.');
   });
 
+
   test('We can change the site language', async function(assert) {
     await visit('/');
+
     assert.dom('#generating-files')
       .hasText('§ Generating Files', 'We see the site in English.');
 
     await fillIn('[data-test-field="Locale"]', 'pt-BR');
-    assert.dom('#generating-files')
-      .hasText('§ Geração de arquivos', 'We see the site in Portugese (Brazil).');
 
-    await fillIn('[data-test-field="Locale"]', '');
     assert.dom('#generating-files')
-      .hasText('§ Geração de arquivos', 'We still see the site in Portugese (Brazil).');
+      .hasText('§ Geração de arquivos', 'We see the site in Portugese (Brazil).');
 
     await fillIn('[data-test-field="Locale"]', 'fr-FR');
+
     assert.dom('#generating-files')
       .hasText('§ Génération de fichiers', 'We see the site in French.');
   });

tests/acceptance/homepage/ja-test.js

@@ -0,0 +1,26 @@
+import { visit } from '@ember/test-helpers';
+import percySnapshot from '@percy/ember';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupApplicationTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Acceptance | Homepage | ja', function(hooks) {
+  setupApplicationTest(hooks);
+  setupIntl(hooks, 'ja');
+
+
+  test('Percy snapshot', async function(assert) {
+    await visit('/');
+    await percySnapshot(assert);
+
+    assert.ok(true);
+  });
+
+
+  test('We set the correct lang attribute in <html> element', async function(assert) {
+    await visit('/');
+
+    assert.dom(document.querySelector('html'))
+      .hasAttribute('lang', 'ja', 'We set the correct lang attribute.');
+  });
+});

tests/integration/components/locale-menu/component-test.js

@@ -1,16 +1,46 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { fillIn, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 module('Integration | Component | locale-menu', function(hooks) {
   setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+
+  test('renders options for supported locales', async function(assert) {
+    await render(hbs`
+      <LocaleMenu />
+    `);
+
+    assert.dom('[data-test-field="Locale"]')
+      .hasValue('', 'The default option is selected.')
+
+    assert.dom('[data-test-option]')
+      .exists({ count: 5 }, 'There are 5 non-default options.');
+  });
+
+
+  test('allows the user to update the site locale', async function(assert) {
+    await render(hbs`
+      <LocaleMenu />
+    `);
+
+    await fillIn('[data-test-field="Locale"]', 'pt-BR');
+
+    assert.strictEqual(
+      this.intl.primaryLocale,
+      'pt-br',
+      'The site locale is pt-BR.'
+    );
 
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
+    await fillIn('[data-test-field="Locale"]', 'fr-FR');
 
-    await render(hbs`<LocaleMenu />`);
-    assert.dom('select option').exists({ count: 6 });
+    assert.strictEqual(
+      this.intl.primaryLocale,
+      'fr-fr',
+      'The site locale is fr-FR.'
+    );
   });
 });

tests/unit/services/locale-test.js

@@ -0,0 +1,21 @@
+import { setupTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Unit | Service | locale', function(hooks) {
+  setupTest(hooks);
+
+  test('menuOptions includes user-friendly labels', function(assert) {
+    const locale = this.owner.lookup('service:locale');
+
+    assert.deepEqual(
+      locale.menuOptions.map(({ label }) => label),
+      [
+        'English (US)',
+        'Français',
+        'Português (do Brasil)',
+        'Spanish',
+        '日本語',
+      ]
+    );
+  });
+});

translations/en-us.yaml

@@ -18,8 +18,15 @@ component:
     edit-translation-text: Edit Translation
   locale-menu:
     select-your-preferred-language: Select your preferred language
+    #
+    # For convenience, the translations of locale menu options
+    # will be the same across all locales.
+    #
+    # To help with maintenance, please list keys in alphabetical
+    # order.
+    #
     locale-en-US: English (US)
-    locale-fr-FR: Français
-    locale-pt-BR: Português (do Brasil)
     locale-es: Spanish
+    locale-fr-FR: Français
     locale-ja: 日本語
+    locale-pt-BR: Português (do Brasil)

translations/es.yaml

@@ -18,8 +18,15 @@ component:
     edit-translation-text: Editar traducción
   locale-menu:
     select-your-preferred-language: Seleccione su idioma
-    locale-en-US: Ingles (US)
-    locale-fr-FR: Francés
-    locale-pt-BR: Portugués (de Brasil)
-    locale-es: Español
+    #
+    # For convenience, the translations of locale menu options
+    # will be the same across all locales.
+    #
+    # To help with maintenance, please list keys in alphabetical
+    # order.
+    #
+    locale-en-US: English (US)
+    locale-es: Spanish
+    locale-fr-FR: Français
     locale-ja: 日本語
+    locale-pt-BR: Português (do Brasil)