WIP: E2Eテストを改善

src/components/App.vue

@@ -157,6 +157,7 @@ onMounted(async () => {
     isAcceptTermsDialogOpen:
       import.meta.env.MODE !== "development" &&
       store.state.acceptTerms !== "Accepted",
+    isInitialSettingsDialogOpen: store.state.openedEditor == undefined,
   });
 
   // プロジェクトファイルが指定されていればロード

src/components/Dialog/AllDialog.vue

@@ -23,6 +23,7 @@
   />
   <ExportSongAudioDialog v-model="isExportSongAudioDialogOpen" />
   <ImportSongProjectDialog v-model="isImportSongProjectDialogOpenComputed" />
+  <InitialSettingsDialog v-model="isInitialSettingsDialogOpenComputed" />
 </template>
 
 <script setup lang="ts">
@@ -38,6 +39,7 @@ import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.v
 import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
 import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";
 import ImportSongProjectDialog from "@/components/Dialog/ImportSongProjectDialog.vue";
+import InitialSettingsDialog from "@/components/Dialog/InitialSettingsDialog.vue";
 import ExportSongAudioDialog from "@/components/Dialog/ExportSongAudioDialog/Container.vue";
 import { useStore } from "@/store";
 import { filterCharacterInfosByStyleType } from "@/store/utility";
@@ -142,6 +144,20 @@ const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
     }),
 });
 
+// 初期設定ダイアログ
+const isInitialSettingsDialogOpenComputed = computed({
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
+    store.state.isInitialSettingsDialogOpen,
+  set: (val) =>
+    store.actions.SET_DIALOG_OPEN({
+      isInitialSettingsDialogOpen: val,
+    }),
+});
+
 // エディタのアップデート確認ダイアログ
 const canOpenNotificationDialog = computed(() => {
   return (

src/components/Dialog/InitialSettingsDialog.vue

@@ -0,0 +1,92 @@
+<template>
+  <QDialog v-model="isInitialSettingsDialogOpenComputed">
+    <QCard class="q-pa-md">
+      <QCardSection class="dialog-text">
+        <div class="text-h5">どちらに興味がありますか？</div>
+        <div class="text-body2 text-grey-8">
+          選択したエディタを開きます。アプリケーション右上からトークとソングを切り替えることができます。
+        </div>
+      </QCardSection>
+      <QCardActions class="q-px-md q-py-sm">
+        <div class="button-group col q-px-md">
+          <QBtn
+            outline
+            textColor="display"
+            class="text-no-wrap text-h4 text-bold q-mr-sm"
+            @click="selectEditor('talk')"
+            @update:modelValue="selectEditor"
+          >
+            <label>トーク</label>
+            <QIcon
+              name="mic"
+              class="q-icon material-icons"
+              aria-hidden="true"
+              size="5rem"
+            />
+          </QBtn>
+          <QBtn
+            outline
+            textColor="display"
+            class="text-no-wrap text-h4 text-bold q-mr-sm"
+            @click="selectEditor('song')"
+            @update:modelValue="selectEditor"
+          >
+            <label>ソング</label>
+            <QIcon
+              name="music_note"
+              class="q-icon material-icons"
+              aria-hidden="true"
+              size="5rem"
+            />
+          </QBtn>
+        </div>
+      </QCardActions>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { QIcon } from "quasar";
+import { useStore } from "@/store";
+import { EditorType } from "@/type/preload";
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const isInitialSettingsDialogOpenComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const store = useStore();
+
+const selectEditor = async (editorType: EditorType) => {
+  await store.actions.SET_ROOT_MISC_SETTING({
+    key: "openedEditor",
+    value: editorType,
+  });
+
+  isInitialSettingsDialogOpenComputed.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/colors" as colors;
+
+.dialog-text {
+  text-align: center;
+}
+
+.button-group {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: 1rem;
+  width: fit-content;
+}
+</style>

src/store/type.ts

@@ -1912,9 +1912,7 @@ export type SettingStoreState = {
   experimentalSetting: ExperimentalSettingType;
   confirmedTips: ConfirmedTips;
   engineSettings: EngineSettings;
-} & Omit<RootMiscSettingType, "openedEditor"> & {
-    openedEditor: EditorType | undefined; // undefinedのときはどのエディタを開くか定まっていない
-  };
+} & RootMiscSettingType;
 
 // keyとvalueの型を連動するようにしたPayloadを作る
 type KeyValuePayload<R, K extends keyof R = keyof R> = K extends keyof R
@@ -2035,6 +2033,7 @@ export type DialogStates = {
   isUpdateNotificationDialogOpen: boolean;
   isExportSongAudioDialogOpen: boolean;
   isImportSongProjectDialogOpen: boolean;
+  isInitialSettingsDialogOpen: boolean;
 };
 
 export type UiStoreTypes = {

src/store/ui.ts

@@ -78,6 +78,7 @@ export const uiStoreState: UiStoreState = {
   isUpdateNotificationDialogOpen: false,
   isExportSongAudioDialogOpen: false,
   isImportSongProjectDialogOpen: false,
+  isInitialSettingsDialogOpen: false,
   isMaximized: false,
   isPinned: false,
   isFullscreen: false,

src/type/preload.ts

@@ -370,7 +370,7 @@ export type ConfirmedTips = {
 
 // ルート直下にある雑多な設定値
 export const rootMiscSettingSchema = z.object({
-  openedEditor: z.enum(["talk", "song"]).default("talk"),
+  openedEditor: z.enum(["talk", "song"]).optional(),
   editorFont: z.enum(["default", "os"]).default("default"),
   showTextLineNumber: z.boolean().default(false),
   showAddAudioItemButton: z.boolean().default(true),

tests/e2e/browser/アクセント.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk, navigateToSong } from "../navigators";
 
 test.beforeEach(gotoHome);
 
 test("アクセント分割したらアクセント区間が増える", async ({ page }) => {
-  await navigateToMain(page);
+  await navigateToSong(page);
   await expect(page.locator(".audio-cell").first()).toBeVisible();
   await page.locator(".audio-cell input").first().fill("こんにちは");
   await page.locator(".audio-cell input").first().press("Enter");
   await page.waitForTimeout(500);
@@ -19,7 +19,7 @@
 test("アクセントの読み部分をクリックすると読みを変更できる", async ({
   page,
 }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
 
   await page.getByRole("textbox", { name: "1行目" }).click();
   await page.getByRole("textbox", { name: "1行目" }).fill("テストです");

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

@@ -1,7 +1,7 @@
 import { test, expect } from "@playwright/test";
 import dotenv from "dotenv";
 import semver from "semver";
-import { navigateToMain, gotoHome } from "../navigators";
+import { navigateToTalk, gotoHome } from "../navigators";
 import { getNewestQuasarDialog } from "../locators";
 import { UpdateInfo } from "@/type/preload";
 import { assertNonNullable } from "@/type/utility";
@@ -39,7 +39,7 @@ test.beforeEach(async ({ page }) => {
 test.beforeEach(async ({ page }) => {
   await gotoHome({ page });
 
-  await navigateToMain(page);
+  await navigateToTalk(page);
   await page.waitForTimeout(100);
 });
 

tests/e2e/browser/キャラクター並び替えダイアログ.spec.ts

@@ -1,13 +1,13 @@
 import { test, expect } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk } from "../navigators";
 
 test.beforeEach(gotoHome);
 
 test("「設定」→「キャラクター並び替え・視聴」で「設定 / キャラクター並び替え・視聴」ページが表示される", async ({
   page,
 }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
   await page.getByText("設定").click();
   await page.waitForTimeout(100);
   await page.getByText("キャラクター並び替え・試聴").click();

tests/e2e/browser/スクリーンショット.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect } from "@playwright/test";
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk } from "../navigators";
 
 test.beforeEach(gotoHome);
 
 test("メイン画面の表示", async ({ page }) => {
   test.skip(process.platform !== "win32", "Windows以外のためスキップします");
-  await navigateToMain(page);
+  await navigateToTalk(page);
 
   // トーク画面の表示
   while (true) {

tests/e2e/browser/ツールバーカスタマイズダイアログ.spec.ts

@@ -1,14 +1,14 @@
 import { test, expect } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk } from "../navigators";
 import { getNewestQuasarDialog, getQuasarMenu } from "../locators";
 
 test.beforeEach(gotoHome);
 
 test("ツールバーのカスタマイズでボタンを追加でき、デフォルトに戻すこともできる", async ({
   page,
 }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
   // 全部書き出しボタンはデフォルトでないことを確認
   expect(
     await page

tests/e2e/browser/テキスト追加・削除・入れ替え.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect, Locator, Page } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToSong } from "../navigators";
 
 test.beforeEach(gotoHome);
 
@@ -27,10 +27,10 @@
 
 test("テキストの追加・入れ替え・削除", async ({ page }) => {
   // デフォルトでaudioCellは一つなのを確認
-  await navigateToMain(page);
+  await navigateToSong(page);
   await expect(
     page.getByRole("button").filter({ hasText: "add" }),
   ).toBeVisible();
   expect(await page.locator(".audio-cell").count()).toBe(1);
   // ３つAudioCellを追加したらAudioCellが４つになるのを確認
   await page.getByRole("button").filter({ hasText: "add" }).click();

tests/e2e/browser/デフォルトスタイルダイアログ.spec.ts

@@ -1,13 +1,13 @@
 import { test, expect } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk } from "../navigators";
 
 test.beforeEach(gotoHome);
 
 test("「設定」→「デフォルトスタイル」で「設定 / デフォルトスタイル・試聴」ダイアログが表示される", async ({
   page,
 }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
   await page.getByRole("button", { name: "設定" }).click();
   await page.getByText("デフォルトスタイル").click();
   await expect(page.getByText("設定 / デフォルトスタイル・試聴")).toBeVisible();

tests/e2e/browser/複数選択/値変更.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { toggleSetting, navigateToMain, gotoHome } from "../../navigators";
+import { toggleSetting, navigateToTalk, gotoHome } from "../../navigators";
 import { addAudioCells } from "./utils";
 
 /*
@@ -70,7 +70,7 @@ async function getAudioInfoParameters(
 test.beforeEach(async ({ page }) => {
   await gotoHome({ page });
 
-  await navigateToMain(page);
+  await navigateToTalk(page);
   await page.waitForTimeout(100);
   await toggleSetting(page, "複数選択");
 

tests/e2e/browser/複数選択/選択.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect, Page } from "@playwright/test";
-import { toggleSetting, navigateToMain, gotoHome } from "../../navigators";
+import { toggleSetting, navigateToTalk, gotoHome } from "../../navigators";
 import { ctrlLike, addAudioCells } from "./utils";
 
 test.beforeEach(async ({ page }) => {
   await gotoHome({ page });
 
-  await navigateToMain(page);
+  await navigateToTalk(page);
   await page.waitForTimeout(100);
   await toggleSetting(page, "複数選択");
 

tests/e2e/browser/調整結果.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Page } from "@playwright/test";
-import { toggleSetting, navigateToMain, gotoHome } from "../navigators";
+import { toggleSetting, navigateToTalk, gotoHome } from "../navigators";
 
 test.beforeEach(gotoHome);
 
@@ -26,7 +26,7 @@ async function getSliderValues(page: Page) {
 }
 
 test("実験的機能：調整結果の保持", async ({ page }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
 
   await toggleSetting(page, "調整結果の保持");
   await page.waitForTimeout(100);

tests/e2e/browser/辞書ダイアログ.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Page, Locator } from "@playwright/test";
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk } from "../navigators";
 import { getNewestQuasarDialog } from "../locators";
 
 test.beforeEach(gotoHome);
@@ -50,7 +50,7 @@ async function validateInputTag(
 test("「設定」→「読み方＆アクセント辞書」で「読み方＆アクセント辞書」ページが表示される", async ({
   page,
 }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
 
   const targetString = "あいうえお";
 

tests/e2e/browser/音声.spec.ts

@@ -1,13 +1,13 @@
 import { test } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../navigators";
+import { gotoHome, navigateToTalk } from "../navigators";
 
 test.beforeEach(gotoHome);
 
 test("テキストを入力→アクセントを変更→音声合成→再生ができる", async ({
   page,
 }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
 
   await page.getByRole("textbox", { name: "1行目" }).click();
   await page.getByRole("textbox", { name: "1行目" }).fill("テストです");

tests/e2e/browser/音声パラメータ.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect, Locator } from "@playwright/test";
 
-import { gotoHome, navigateToMain, toggleSetting } from "../navigators";
+import { gotoHome, navigateToTalk, toggleSetting } from "../navigators";
 
 test.beforeEach(gotoHome);
 
@@ -10,7 +10,7 @@ async function validateValue(locator: Locator, expectedValue: string) {
 }
 
 test("音声パラメータ引き継ぎの設定", async ({ page }) => {
-  await navigateToMain(page);
+  await navigateToTalk(page);
   await page.waitForTimeout(100);
   await page.locator(".audio-cell input").first().press("Enter");
   await page.waitForTimeout(100);