test: トップページのタイトル判定を関数に切り出して分岐を固定する

翻訳のあるロケールと固定文へのフォールバックを両方テストする。
useHead が locale を見られているかは index.head.spec で見る。

Author: yuiseki

lib/siteMeta.ts

@@ -0,0 +1,18 @@
+// トップページのタイトルと説明。翻訳が揃っているロケールは翻訳を使い、
+// それ以外は英語の固定文にフォールバックする。
+// "kr" は移行前からの誤りで、ロケールコードは ko である。挙動を変えないためそのまま残す。
+const TRANSLATED_LOCALES = ["ja", "en", "kr"];
+
+export function getSiteMeta(
+  locale: string | undefined,
+  // eslint-disable-next-line no-unused-vars -- 型注釈の引数名を未使用変数と誤検知するため
+  t: (key: string) => string
+): { siteName: string; siteDesc: string } {
+  if (locale && TRANSLATED_LOCALES.includes(locale)) {
+    return { siteName: t("common.site_name"), siteDesc: t("common.site_desc") };
+  }
+  return {
+    siteName: "KamiMap",
+    siteDesc: "Paper Map for printable map information",
+  };
+}

pages/index.vue

@@ -51,6 +51,7 @@
 import mapList from "~/assets/config/list.json";
 import Modal from "~/components/Modal.vue";
 import { getMapConfig } from "~/lib/mapConfigs";
+import { getSiteMeta } from "~/lib/siteMeta";
 
 const maps = mapList.map((name) => getMapConfig(name));
 
@@ -70,21 +71,7 @@ export default defineNuxtComponent({
     // 移さないと this.locale が undefined になって常に default 分岐に落ち、
     // 日本語でもタイトルが "KamiMap" になってしまう。
     useHead(() => {
-      let siteName, siteDesc;
-      switch (locale.value) {
-        // "kr" は移行前からの誤りで、ロケールコードは ko である。
-        // 挙動を変えないためそのまま残す
-        case "ja":
-        case "en":
-        case "kr":
-          siteName = t("common.site_name");
-          siteDesc = t("common.site_desc");
-          break;
-        default:
-          siteName = "KamiMap";
-          siteDesc = "Paper Map for printable map information";
-          break;
-      }
+      const { siteName, siteDesc } = getSiteMeta(locale.value, t);
       return {
         title: siteName,
         meta: [

test-unit/lib/siteMeta.spec.ts

@@ -0,0 +1,29 @@
+import { getSiteMeta } from '~/lib/siteMeta';
+
+const t = (key: string) => ({ 'common.site_name': '紙マップ', 'common.site_desc': '説明' }[key] ?? key);
+
+describe('getSiteMeta', () => {
+  test.each(['ja', 'en', 'kr'])('%s は翻訳を使う', (locale) => {
+    expect(getSiteMeta(locale, t)).toEqual({ siteName: '紙マップ', siteDesc: '説明' });
+  });
+
+  // 翻訳が揃っていないロケールで空にならないことを確認する。
+  // ここが空になると日本語圏以外の利用者にタイトルも説明も出なくなる。
+  test.each(['zh', 'th', 'ne', 'si'])('%s は英語の固定文にフォールバックする', (locale) => {
+    expect(getSiteMeta(locale, t)).toEqual({
+      siteName: 'KamiMap',
+      siteDesc: 'Paper Map for printable map information',
+    });
+  });
+
+  // head() が setup 経由で評価されると locale が undefined になる。
+  // その場合も落ちずに固定文を返すが、ja でこれになっては困る（回帰は index.head.spec が見る）
+  test('locale が undefined でも落ちない', () => {
+    expect(getSiteMeta(undefined, t).siteName).toBe('KamiMap');
+  });
+
+  // ko は翻訳ファイルがあるのに "kr" と書かれているため翻訳されない（移行前からの誤り）
+  test('ko は現状フォールバックする（移行前からの誤りを保持）', () => {
+    expect(getSiteMeta('ko', t).siteName).toBe('KamiMap');
+  });
+});

test-unit/pages/index.head.spec.ts

@@ -8,21 +8,29 @@ import IndexPage from '~/pages/index.vue';
 // undefined になり、日本語でもタイトルが "KamiMap" になっていた。
 // 例外は出ず画面も崩れないので、実際に描画したタイトルで固定する。
 
-const titleFor = async (locale: string) => {
+const titleFor = async (locale: string, expected: string) => {
   const { $i18n } = useNuxtApp() as any;
-  $i18n.locale.value = locale;
-  await mountSuspended(IndexPage);
-  // useHead はクライアントでは document に反映されるので、実際のタイトルを見る
-  await new Promise((r) => setTimeout(r, 0));
-  return document.title;
+  // lazy: true なので locale.value を直接書き換えても翻訳は読み込まれない。
+  // setLocale を使って読み込みまで待つ
+  await $i18n.setLocale(locale);
+  const wrapper = await mountSuspended(IndexPage);
+  // useHead が document に反映されるのは非同期なので、期待値になるまで待つ。
+  // 壊れているときは変わらないままタイムアウトして、その値で落ちる
+  for (let i = 0; i < 40 && document.title !== expected; i++) {
+    await new Promise((r) => setTimeout(r, 25));
+  }
+  const title = document.title;
+  // 前のマウントが残るとその useHead が document.title を握り続けるため必ず破棄する
+  wrapper.unmount();
+  await new Promise((r) => setTimeout(r, 25));
+  return title;
 };
 
+// 分岐そのものは test-unit/lib/siteMeta.spec.ts で見ている。
+// ここは useHead が実際に locale を見られているか（head() のままなら見られない）だけを見る。
+// 同じ app に2回マウントすると前の useHead が document.title を握るため、1件に絞る。
 describe('トップページのタイトル', () => {
-  test('ja では翻訳された名前を使う', async () => {
-    expect(await titleFor('ja')).toBe('紙マップ');
-  });
-
-  test('翻訳のないロケールでは英語の固定名にフォールバックする', async () => {
-    expect(await titleFor('zh')).toBe('KamiMap');
+  test('ja では翻訳された名前が実際に描画される', async () => {
+    expect(await titleFor('ja', '紙マップ')).toBe('紙マップ');
   });
 });