[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト

.storybook/preview.ts

@@ -52,6 +52,7 @@ const preview: Preview = {
       ],
     },
   },
+
   decorators: [
     withThemeByDataAttribute({
       themes: {

README.md

@@ -88,6 +88,9 @@ Storybook を使ってコンポーネントを開発することができます
 npm run storybook
 ```
 
+また、main ブランチの Storybook が Chromatic から見れます。
+<https://main--667d9c007418420dbb5b0f75.chromatic.com/>
+
 ### ブラウザ版の実行（開発中）
 
 別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。
@@ -96,7 +99,7 @@ npm run storybook
 npm run browser:serve
 ```
 
-また、main ブランチのビルド結果がこちらにデプロイされています <https://voicevox-browser-dev.netlify.app/>  
+また、main ブランチのビルド結果がこちらにデプロイされています。 <https://voicevox-browser-dev.netlify.app/>  
 今はローカル PC 上で音声合成エンジンを起動する必要があります。
 
 ## ビルド

package.json

@@ -87,6 +87,7 @@
     "@types/async-lock": "1.4.0",
     "@types/encoding-japanese": "1.0.18",
     "@types/glob": "8.0.0",
+    "@types/kuromoji": "0.1.3",
     "@types/markdown-it": "12.2.0",
     "@types/multistream": "4.1.0",
     "@types/semver": "7.3.9",

src/backend/browser/sandbox.ts

@@ -295,32 +295,15 @@ export const api: Sandbox = {
     // TODO: Impl
     return;
   },
-  async theme(newData?: string) {
-    if (newData != undefined) {
-      await this.setSetting("currentTheme", newData);
-      return;
-    }
+  async getAvailableThemes() {
     // NOTE: Electron版では起動時にテーマ情報が必要なので、
     //       この実装とは違って起動時に読み込んだキャッシュを返すだけになっている。
     return Promise.all(
       // FIXME: themeファイルのいい感じのパスの設定
       ["/themes/default.json", "/themes/dark.json"].map((url) =>
-        fetch(url).then((res) => res.json()),
+        fetch(url).then((res) => res.json() as Promise<ThemeConf>),
       ),
-    )
-      .then((v) => ({
-        currentTheme: "Default",
-        availableThemes: v,
-      }))
-      .then((v) =>
-        this.getSetting("currentTheme").then(
-          (currentTheme) =>
-            ({
-              ...v,
-              currentTheme,
-            }) as { currentTheme: string; availableThemes: ThemeConf[] },
-        ),
-      );
+    );
   },
   vuexReady() {
     // NOTE: 何もしなくて良さそう

src/backend/electron/main.ts

@@ -906,6 +906,10 @@ registerIpcMainHandle<IpcMainHandle>({
     }
   },
 
+  GET_AVAILABLE_THEMES: () => {
+    return themes;
+  },
+
   OPEN_LOG_DIRECTORY: () => {
     void shell.openPath(app.getPath("logs"));
   },
@@ -946,17 +950,6 @@ registerIpcMainHandle<IpcMainHandle>({
     return configManager.get("hotkeySettings");
   },
 
-  THEME: (_, { newData }) => {
-    if (newData != undefined) {
-      configManager.set("currentTheme", newData);
-      return;
-    }
-    return {
-      currentTheme: configManager.get("currentTheme"),
-      availableThemes: themes,
-    };
-  },
-
   ON_VUEX_READY: () => {
     win.show();
   },

src/backend/electron/preload.ts

@@ -217,8 +217,8 @@ const api: Sandbox = {
     void ipcRendererInvokeProxy.SET_NATIVE_THEME(source);
   },
 
-  theme: (newData) => {
-    return ipcRendererInvokeProxy.THEME({ newData });
+  getAvailableThemes: () => {
+    return ipcRendererInvokeProxy.GET_AVAILABLE_THEMES();
   },
 
   vuexReady: () => {

src/components/App.vue

@@ -36,6 +36,7 @@ import AllDialog from "@/components/Dialog/AllDialog.vue";
 import MenuBar from "@/components/Menu/MenuBar/MenuBar.vue";
 import { useMenuBarData as useTalkMenuBarData } from "@/components/Talk/menuBarData";
 import { useMenuBarData as useSingMenuBarData } from "@/components/Sing/menuBarData";
+import { setFont, themeToCss } from "@/domain/dom";
 import { ExhaustiveError } from "@/type/utility";
 
 const store = useStore();
@@ -69,7 +70,7 @@ watch(
 watch(
   () => store.state.editorFont,
   (editorFont) => {
-    document.body.setAttribute("data-editor-font", editorFont);
+    setFont(editorFont);
   },
   { immediate: true },
 );
@@ -84,6 +85,33 @@ watch(
   },
 );
 
+// テーマの変更を監視してCSS変数を変更する
+watch(
+  () =>
+    [
+      store.state.currentTheme,
+      store.state.availableThemes,
+      store.state.isVuexReady,
+    ] as const,
+  ([currentTheme, availableThemes, isVuexReady]) => {
+    const theme = availableThemes.find((value) => {
+      return value.name == currentTheme;
+    });
+
+    if (theme == undefined) {
+      // NOTE: Vuexが初期化されていない場合はまだテーマが読み込まれていないので無視
+      if (isVuexReady) {
+        throw Error(`Theme not found: ${currentTheme}`);
+      } else {
+        return;
+      }
+    }
+
+    themeToCss(theme);
+  },
+  { immediate: true },
+);
+
 // ソフトウェアを初期化
 const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -678,14 +678,14 @@ const undoableTrackOperations = computed({
 
 // 外観
 const currentThemeNameComputed = computed({
-  get: () => store.state.themeSetting.currentTheme,
+  get: () => store.state.currentTheme,
   set: (currentTheme: string) => {
-    void store.dispatch("SET_THEME_SETTING", { currentTheme: currentTheme });
+    void store.dispatch("SET_CURRENT_THEME_SETTING", { currentTheme });
   },
 });
 
 const availableThemeNameComputed = computed(() => {
-  return [...store.state.themeSetting.availableThemes]
+  return [...store.state.availableThemes]
     .sort((a, b) => a.order - b.order)
     .map((theme) => {
       return { label: theme.displayName, value: theme.name };

src/components/Sing/ScoreSequencer.vue

@@ -216,6 +216,10 @@ import { applyGaussianFilter, linearInterpolation } from "@/sing/utility";
 import { useLyricInput } from "@/composables/useLyricInput";
 import { ExhaustiveError } from "@/type/utility";
 import { uuid4 } from "@/helpers/random";
+import {
+  onMountedOrActivated,
+  onUnmountedOrDeactivated,
+} from "@/composables/onMountOrActivate";
 
 type PreviewMode =
   | "ADD_NOTE"
@@ -1333,7 +1337,7 @@ onMounted(() => {
 let firstActivation = true;
 
 // スクロール位置を設定する
-onActivated(() => {
+onMountedOrActivated(() => {
   const sequencerBodyElement = sequencerBody.value;
   if (!sequencerBodyElement) {
     throw new Error("sequencerBodyElement is null.");
@@ -1362,7 +1366,7 @@ onActivated(() => {
 });
 
 // リスナー登録
-onActivated(() => {
+onMountedOrActivated(() => {
   void store.dispatch("ADD_PLAYHEAD_POSITION_CHANGE_LISTENER", {
     listener: playheadPositionChangeListener,
   });
@@ -1371,7 +1375,7 @@ onActivated(() => {
 });
 
 // リスナー解除
-onDeactivated(() => {
+onUnmountedOrDeactivated(() => {
   void store.dispatch("REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER", {
     listener: playheadPositionChangeListener,
   });

src/components/Sing/SingEditor.stories.ts

@@ -0,0 +1,179 @@
+import {
+  userEvent,
+  within,
+  expect,
+  fn,
+  waitFor,
+  fireEvent,
+} from "@storybook/test";
+
+import { Meta, StoryObj } from "@storybook/vue3";
+import { provide, toRaw } from "vue";
+import SingEditor from "./SingEditor.vue";
+import { createStoreWrapper, storeKey } from "@/store";
+import { HotkeyManager, hotkeyManagerKey } from "@/plugins/hotkeyPlugin";
+import { createOpenAPIEngineMock, mockHost } from "@/mock/engineMock";
+import { proxyStoreCreator } from "@/store/proxy";
+import {
+  CharacterInfo,
+  defaultHotkeySettings,
+  DefaultStyleId,
+  EngineId,
+  EngineInfo,
+  SpeakerId,
+  StyleId,
+  ThemeConf,
+} from "@/type/preload";
+import { getEngineManifestMock } from "@/mock/engineMock/manifestMock";
+import {
+  getSpeakerInfoMock,
+  getSpeakersMock,
+} from "@/mock/engineMock/speakerResourceMock";
+import { setFont, themeToCss } from "@/domain/dom";
+import defaultTheme from "@/../public/themes/default.json";
+import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
+import { assetsPath } from "@/mock/engineMock/constants";
+
+const meta: Meta<typeof SingEditor> = {
+  component: SingEditor,
+  args: {
+    isEnginesReady: true,
+    isProjectFileLoaded: false,
+    onCompleteInitialStartup: fn(),
+  },
+  decorators: [
+    (story, context) => {
+      // CSS関連
+      themeToCss(defaultTheme as ThemeConf);
+      setFont("default");
+
+      // ショートカットキーの管理
+      const hotkeyManager = new HotkeyManager();
+      provide(hotkeyManagerKey, hotkeyManager);
+      hotkeyManager.load(defaultHotkeySettings);
+
+      hotkeyManager.onEditorChange("talk");
+
+      // setup store
+      const store = createStoreWrapper({
+        proxyStoreDI: proxyStoreCreator(createOpenAPIEngineMock()),
+      });
+      provide(storeKey, store);
+
+      // なぜか必要、これがないとdispatch内でcommitしたときにエラーになる
+      store.replaceState({
+        ...cloneWithUnwrapProxy(store.state),
+      });
+
+      context.parameters.vuexState = store.state;
+
+      // エンジンの情報
+      const engineManifest = getEngineManifestMock();
+      const engineId = EngineId(engineManifest.uuid);
+      const engineInfo: EngineInfo = {
+        uuid: engineId,
+        host: mockHost,
+        name: engineManifest.name,
+        path: undefined,
+        executionEnabled: false,
+        executionFilePath: "not_found",
+        executionArgs: [],
+        isDefault: true,
+        type: "path",
+      };
+      store.commit("SET_ENGINE_INFOS", {
+        engineIds: [engineId],
+        engineInfos: [engineInfo],
+      });
+      store.commit("SET_ENGINE_MANIFESTS", {
+        engineManifests: { [engineId]: engineManifest },
+      });
+      store.commit("SET_ENGINE_SETTING", {
+        engineId,
+        engineSetting: {
+          outputSamplingRate: engineManifest.defaultSamplingRate,
+          useGpu: false,
+        },
+      });
+      store.commit("SET_ENGINE_STATE", { engineId, engineState: "READY" });
+
+      // キャラクター情報
+      const speakers = getSpeakersMock();
+      const characterInfos: CharacterInfo[] = speakers.map((speaker) => {
+        const speakerInfo = getSpeakerInfoMock(speaker.speakerUuid, assetsPath);
+        return {
+          portraitPath: speakerInfo.portrait,
+          metas: {
+            speakerUuid: SpeakerId(speaker.speakerUuid),
+            speakerName: speaker.name,
+            styles: speakerInfo.styleInfos.map((styleInfo) => {
+              const style = speaker.styles.find((s) => s.id === styleInfo.id);
+              if (style == undefined) throw new Error("style not found");
+              return {
+                styleName: style.name,
+                styleId: StyleId(style.id),
+                styleType: style.type,
+                iconPath: styleInfo.icon,
+                portraitPath: styleInfo.portrait ?? speakerInfo.portrait,
+                engineId,
+                voiceSamplePaths: styleInfo.voiceSamples,
+              };
+            }),
+            policy: speakerInfo.policy,
+          },
+        };
+      });
+      store.commit("SET_CHARACTER_INFOS", { engineId, characterInfos });
+      store.commit("SET_USER_CHARACTER_ORDER", {
+        userCharacterOrder: store.state.characterInfos[engineId].map(
+          (c) => c.metas.speakerUuid,
+        ),
+      });
+
+      // デフォルトスタイルID
+      const defaultStyleIds: DefaultStyleId[] = speakers.map((speaker) => ({
+        engineId: engineId,
+        speakerUuid: SpeakerId(speaker.speakerUuid),
+        defaultStyleId: StyleId(speaker.styles[0].id),
+      }));
+      store.commit("SET_DEFAULT_STYLE_IDS", { defaultStyleIds });
+
+      return story();
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "デフォルト",
+  play: async ({ args }) => {
+    // 準備が完了するまで待機する
+    await waitFor(
+      () => expect(args.onCompleteInitialStartup).toHaveBeenCalled(),
+      { timeout: 5000 },
+    );
+  },
+};
+
+export const NowLoading: Story = {
+  name: "プロジェクトファイルを読み込み中",
+  args: {
+    isProjectFileLoaded: "waiting",
+  },
+};
+
+export const AddNote: Story = {
+  name: "ノート追加のテスト",
+  play: async ({ context, canvasElement, parameters }) => {
+    await Default.play?.(context);
+
+    const canvas = within(canvasElement);
+
+    // たぶんドラッグができなくてテスト不可能
+
+    // const { audioItems, audioKeys } = parameters.vuexState;
+    // await window.storybookTestSnapshot?.({ audioItems, audioKeys });
+  },
+};