アップデート通知のe2eテスト (#1716)

* e2eテスト追加

* バグフィックス

Author: Hiroshiba

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/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

@@ -856,7 +856,12 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
 
 // アップデート通知
 const isUpdateNotificationDialogOpenComputed = computed({
-  get: () => store.state.isUpdateNotificationDialogOpen,
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
+    store.state.isUpdateNotificationDialogOpen,
   set: (val) =>
     store.dispatch("SET_DIALOG_OPEN", {
       isUpdateNotificationDialogOpen: val,

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();
+});