[refactor] アップデート通知ダイアログ周りをEditorHome.vueから分離

.eslintrc.js

@@ -55,6 +55,12 @@ module.exports = {
         order: ["template", "script", "style"],
       },
     ],
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        ignores: ["Container", "Presentation"],
+      },
+    ],
     "import/order": "error",
     "no-restricted-syntax": [
       "warn",

README.md

@@ -105,7 +105,7 @@ npm run test-watch:browser-e2e -- --headed # テスト中の UI を表示
 ```
 
 Playwright を使用しているためテストパターンを生成することもできます。
-ブラウザ版を起動している状態で以下のコマンドを実行してください。
+**ブラウザ版を起動している状態で**以下のコマンドを実行してください。
 
 ```bash
 npx playwright codegen http://localhost:5173/#/home  --viewport-size=800,600

src/components/UpdateNotificationDialog/Container.vue

@@ -0,0 +1,89 @@
+<!-- 
+  アップデート通知ダイアログのコンテナ。
+  スキップしたバージョンより新しいバージョンがあれば、ダイアログを表示する。
+-->
+
+<template>
+  <update-notification-dialog
+    v-if="newUpdateResult.status == 'updateAvailable'"
+    v-model="isDialogOpenComputed"
+    :latest-version="newUpdateResult.latestVersion"
+    :new-update-infos="newUpdateResult.newUpdateInfos"
+    @skip-this-version-click="handleSkipThisVersionClick"
+  />
+</template>
+
+<script setup lang="ts">
+import semver from "semver";
+import { computed, watch } from "vue";
+import UpdateNotificationDialog from "./Presentation.vue";
+import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
+import { useStore } from "@/store";
+import { UrlString } from "@/type/preload";
+
+const props =
+  defineProps<{
+    canOpenDialog: boolean; // ダイアログを開いても良いかどうか
+  }>();
+
+const store = useStore();
+
+const isDialogOpenComputed = computed({
+  get: () => store.state.isUpdateNotificationDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isUpdateNotificationDialogOpen: val,
+    }),
+});
+
+// エディタのアップデート確認
+if (!import.meta.env.VITE_LATEST_UPDATE_INFOS_URL) {
+  throw new Error(
+    "環境変数VITE_LATEST_UPDATE_INFOS_URLが設定されていません。.envに記載してください。"
+  );
+}
+
+// アプリのバージョンとスキップしたバージョンのうち、新しい方を返す
+const currentVersionGetter = async () => {
+  const appVersion = await window.electron
+    .getAppInfos()
+    .then((obj) => obj.version);
+
+  await store.dispatch("WAIT_VUEX_READY", { timeout: 15000 });
+  const skipUpdateVersion = store.state.skipUpdateVersion ?? "0.0.0";
+  if (semver.valid(skipUpdateVersion) == undefined) {
+    throw new Error(`skipUpdateVersionが不正です: ${skipUpdateVersion}`);
+  }
+
+  return semver.gt(appVersion, skipUpdateVersion)
+    ? appVersion
+    : skipUpdateVersion;
+};
+
+// 新しいバージョンがあれば取得
+const newUpdateResult = useFetchNewUpdateInfos(
+  currentVersionGetter,
+  UrlString(import.meta.env.VITE_LATEST_UPDATE_INFOS_URL)
+);
+
+// 新しいバージョンのアップデートがスキップされたときの処理
+const handleSkipThisVersionClick = (version: string) => {
+  store.dispatch("SET_ROOT_MISC_SETTING", {
+    key: "skipUpdateVersion",
+    value: version,
+  });
+};
+
+// ダイアログを開くかどうか
+watch(
+  () => [props.canOpenDialog, newUpdateResult],
+  () => {
+    if (
+      props.canOpenDialog &&
+      newUpdateResult.value.status == "updateAvailable"
+    ) {
+      isDialogOpenComputed.value = true;
+    }
+  }
+);
+</script>

src/components/help/HelpDialog.vue

@@ -95,7 +95,7 @@ import UpdateInfo from "./UpdateInfo.vue";
 import OssCommunityInfo from "./OssCommunityInfo.vue";
 import QAndA from "./QAndA.vue";
 import ContactInfo from "./ContactInfo.vue";
-import { UpdateInfo as UpdateInfoObject } from "@/type/preload";
+import { UpdateInfo as UpdateInfoObject, UrlString } from "@/type/preload";
 import { useStore } from "@/store";
 import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
 
@@ -139,7 +139,7 @@ if (!import.meta.env.VITE_LATEST_UPDATE_INFOS_URL) {
 }
 const newUpdateResult = useFetchNewUpdateInfos(
   () => window.electron.getAppInfos().then((obj) => obj.version), // アプリのバージョン
-  import.meta.env.VITE_LATEST_UPDATE_INFOS_URL
+  UrlString(import.meta.env.VITE_LATEST_UPDATE_INFOS_URL)
 );
 
 // エディタのOSSライセンス取得

src/composables/useFetchNewUpdateInfos.ts

@@ -1,15 +1,15 @@
 import { ref } from "vue";
 import semver from "semver";
 import { z } from "zod";
-import { UpdateInfo, updateInfoSchema } from "@/type/preload";
+import { UpdateInfo, UrlString, updateInfoSchema } from "@/type/preload";
 
 /**
  * 現在のバージョンより新しいバージョンがリリースされているか調べる。
  * あれば最新バージョンと、現在より新しいバージョンの情報を返す。
  */
 export const useFetchNewUpdateInfos = (
   currentVersionGetter: () => Promise<string>,
-  newUpdateInfosUrl: string
+  newUpdateInfosUrl: UrlString
 ) => {
   const result = ref<
     | {

src/store/type.ts

@@ -1266,6 +1266,10 @@ export type UiStoreTypes = {
     action(): void;
   };
 
+  WAIT_VUEX_READY: {
+    action(palyoad: { timeout: number }): Promise<void>;
+  };
+
   HYDRATE_UI_STORE: {
     action(): void;
   };

src/store/ui.ts

@@ -269,6 +269,22 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  // Vuexが準備できるまで待つ
+  WAIT_VUEX_READY: {
+    async action({ state }, { timeout }) {
+      if (state.isVuexReady) return;
+
+      let vuexReadyTimeout = 0;
+      while (!state.isVuexReady) {
+        if (vuexReadyTimeout >= timeout) {
+          throw new Error("Vuexが準備できませんでした");
+        }
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        vuexReadyTimeout += 300;
+      }
+    },
+  },
+
   SET_INHERIT_AUDIOINFO: {
     mutation(state, { inheritAudioInfo }: { inheritAudioInfo: boolean }) {
       state.inheritAudioInfo = inheritAudioInfo;

src/type/preload.ts

@@ -27,6 +27,10 @@ function checkIsMac(): boolean {
 }
 export const isMac = checkIsMac();
 
+const urlStringSchema = z.string().url().brand("URL");
+export type UrlString = z.infer<typeof urlStringSchema>;
+export const UrlString = (url: string): UrlString => urlStringSchema.parse(url);
+
 export const engineIdSchema = z.string().brand<"EngineId">();
 export type EngineId = z.infer<typeof engineIdSchema>;
 export const EngineId = (id: string): EngineId => engineIdSchema.parse(id);

src/type/utility.ts

@@ -4,3 +4,12 @@ export type IsEqual<X, Y> = (<T>() => T extends X ? 1 : 2) extends <
 >() => T extends Y ? 1 : 2
   ? true
   : false;
+
+// undefinedかnullでないことを保証する
+export function assertNonNullable<T>(
+  value: T
+): asserts value is NonNullable<T> {
+  if (value == undefined) {
+    throw new Error("Value is null or undefined");
+  }
+}

src/views/EditorHome.vue

@@ -177,12 +177,8 @@
     v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
   />
   <accept-terms-dialog v-model="isAcceptTermsDialogOpenComputed" />
-  <update-notification-dialog
-    v-if="newUpdateResult.status == 'updateAvailable'"
-    v-model="isUpdateNotificationDialogOpenComputed"
-    :latest-version="newUpdateResult.latestVersion"
-    :new-update-infos="newUpdateResult.newUpdateInfos"
-    @skip-this-version-click="handleSkipThisVersionClick"
+  <update-notification-dialog-container
+    :can-open-dialog="canOpenNotificationDialog"
   />
 </template>
 
@@ -193,7 +189,6 @@ import draggable from "vuedraggable";
 import { QResizeObserver } from "quasar";
 import cloneDeep from "clone-deep";
 import Mousetrap from "mousetrap";
-import semver from "semver";
 import { useStore } from "@/store";
 import HeaderBar from "@/components/HeaderBar.vue";
 import AudioCell from "@/components/AudioCell.vue";
@@ -212,8 +207,7 @@ import AcceptTermsDialog from "@/components/AcceptTermsDialog.vue";
 import DictionaryManageDialog from "@/components/DictionaryManageDialog.vue";
 import EngineManageDialog from "@/components/EngineManageDialog.vue";
 import ProgressDialog from "@/components/ProgressDialog.vue";
-import UpdateNotificationDialog from "@/components/UpdateNotificationDialog.vue";
-import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
+import UpdateNotificationDialogContainer from "@/components/UpdateNotificationDialog/Container.vue";
 import { AudioItem, EngineState } from "@/store/type";
 import {
   AudioKey,
@@ -553,23 +547,6 @@ watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
   }
 });
 
-// エディタのアップデート確認
-if (!import.meta.env.VITE_LATEST_UPDATE_INFOS_URL) {
-  throw new Error(
-    "環境変数VITE_LATEST_UPDATE_INFOS_URLが設定されていません。.envに記載してください。"
-  );
-}
-const newUpdateResult = useFetchNewUpdateInfos(
-  () => window.electron.getAppInfos().then((obj) => obj.version), // アプリのバージョン
-  import.meta.env.VITE_LATEST_UPDATE_INFOS_URL
-);
-const handleSkipThisVersionClick = (version: string) => {
-  store.dispatch("SET_ROOT_MISC_SETTING", {
-    key: "skipUpdateVersion",
-    value: version,
-  });
-};
-
 // ソフトウェアを初期化
 const isCompletedInitialStartup = ref(false);
 onMounted(async () => {
@@ -647,14 +624,7 @@ onMounted(async () => {
 
   // 設定の読み込みを待機する
   // FIXME: 設定が必要な処理はINIT_VUEXを実行しているApp.vueで行うべき
-  let vuexReadyTimeout = 0;
-  while (!store.state.isVuexReady) {
-    if (vuexReadyTimeout >= 15000) {
-      throw new Error("Vuexが準備できませんでした");
-    }
-    await new Promise((resolve) => setTimeout(resolve, 300));
-    vuexReadyTimeout += 300;
-  }
+  await store.dispatch("WAIT_VUEX_READY", { timeout: 15000 });
 
   isAcceptRetrieveTelemetryDialogOpenComputed.value =
     store.state.acceptRetrieveTelemetry === "Unconfirmed";
@@ -663,22 +633,6 @@ onMounted(async () => {
     import.meta.env.MODE !== "development" &&
     store.state.acceptTerms !== "Accepted";
 
-  // アップデート通知ダイアログ
-  if (newUpdateResult.value.status === "updateAvailable") {
-    const skipUpdateVersion = store.state.skipUpdateVersion ?? "0.0.0";
-    if (semver.valid(skipUpdateVersion) == undefined) {
-      // 処理を止めるほどではないので警告だけ
-      store.dispatch(
-        "LOG_WARN",
-        `skipUpdateVersionが不正です: ${skipUpdateVersion}`
-      );
-    } else if (
-      semver.gt(newUpdateResult.value.latestVersion, skipUpdateVersion)
-    ) {
-      isUpdateNotificationDialogOpenComputed.value = true;
-    }
-  }
-
   isCompletedInitialStartup.value = true;
 });
 
@@ -854,13 +808,15 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
     }),
 });
 
-// アップデート通知
-const isUpdateNotificationDialogOpenComputed = computed({
-  get: () => store.state.isUpdateNotificationDialogOpen,
-  set: (val) =>
-    store.dispatch("SET_DIALOG_OPEN", {
-      isUpdateNotificationDialogOpen: val,
-    }),
+// エディタのアップデート確認ダイアログ
+const canOpenNotificationDialog = computed(() => {
+  return (
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
+    isCompletedInitialStartup.value
+  );
 });
 
 // ドラッグ＆ドロップ

tests/e2e/browser/アップデート通知ダイアログ.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from "@playwright/test";
+import dotenv from "dotenv";
+import semver from "semver";
+import { navigateToMain, gotoHome } from "../navigators";
+import { getNewestQuasarDialog } from "../locators";
+import { UpdateInfo } from "@/type/preload";
+import { assertNonNullable } from "@/type/utility";
+
+// アップデート通知が出る環境にする
+test.beforeEach(async ({ page }) => {
+  dotenv.config();
+
+  // 動作環境より新しいバージョン
+  const latestVersion = semver.inc(
+    process.env.VITE_APP_VERSION ?? process.env.npm_package_version ?? "0.0.0",
+    "major"
+  );
+  assertNonNullable(latestVersion);
+
+  // アップデート情報を返すAPIのモック
+  if (process.env.VITE_LATEST_UPDATE_INFOS_URL == undefined) {
+    throw new Error("VITE_LATEST_UPDATE_INFOS_URL is not defined");
+  }
+  page.route(process.env.VITE_LATEST_UPDATE_INFOS_URL, (route) => {
+    const updateInfos: UpdateInfo[] = [
+      {
+        version: latestVersion,
+        descriptions: [],
+        contributors: [],
+      },
+    ];
+    route.fulfill({
+      status: 200,
+      body: JSON.stringify(updateInfos),
+    });
+  });
+});
+
+test.beforeEach(async ({ page }) => {
+  await gotoHome({ page });
+
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+});
+
+test("アップデートが通知されたりスキップしたりできる", async ({ page }) => {
+  await page.waitForTimeout(500);
+
+  // 通知されている
+  const dialog = getNewestQuasarDialog(page);
+  await expect(dialog.getByText("アップデートのお知らせ")).toBeVisible();
+
+  // 普通に閉じると消える
+  await dialog.getByRole("button", { name: "閉じる" }).click();
+  await page.waitForTimeout(500);
+  await expect(dialog).not.toBeVisible();
+
+  // 再度開くとまた表示される
+  await page.reload();
+  await expect(dialog.getByText("アップデートのお知らせ")).toBeVisible();
+
+  // スキップすると消える
+  await dialog
+    .getByRole("button", { name: "このバージョンをスキップ" })
+    .click();
+  await page.waitForTimeout(500);
+  await expect(dialog).not.toBeVisible();
+
+  // 再度開いても表示されない（スキップされた）
+  await page.reload();
+  await page.waitForTimeout(5000); // エンジン読み込み待機
+  await expect(dialog).not.toBeVisible();
+});