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

package.json

@@ -93,6 +93,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",
@@ -122,6 +123,7 @@
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-vue": "9.26.0",
     "happy-dom": "8.4.2",
+    "kuromoji": "0.1.2",
     "license-checker-rseidelsohn": "4.3.0",
     "markdownlint-cli": "0.37.0",
     "playwright": "1.48.0",

src/sing/convertToWavFileData.ts → src/helpers/convertToWavFileData.ts

@@ -1,4 +1,13 @@
-export const convertToWavFileData = (audioBuffer: AudioBuffer) => {
+export const convertToWavFileData = (
+  audioBuffer:
+    | AudioBuffer
+    | {
+        sampleRate: number;
+        length: number;
+        numberOfChannels: number;
+        getChannelData(channel: number): Float32Array;
+      },
+) => {
   const bytesPerSample = 4; // Float32
   const formatCode = 3; // WAVE_FORMAT_IEEE_FLOAT
 

src/infrastructures/EngineConnector.ts

@@ -1,3 +1,5 @@
+import { createEngineUrl, EngineUrlParams } from "@/domain/url";
+import { createOpenAPIEngineMock } from "@/mock/engineMock";
 import { Configuration, DefaultApi, DefaultApiInterface } from "@/openapi";
 
 export interface IEngineConnectorFactory {
@@ -22,5 +24,35 @@ const OpenAPIEngineConnectorFactoryImpl = (): IEngineConnectorFactory => {
   };
 };
 
+/** WEB APIを持つエンジン用 */
 export const OpenAPIEngineConnectorFactory =
   OpenAPIEngineConnectorFactoryImpl();
+
+const OpenAPIMockEngineConnectorFactoryImpl = (): IEngineConnectorFactory => ({
+  instance: () => createOpenAPIEngineMock(),
+});
+
+/** WEB APIを持つエンジンを模したモック用 */
+export const OpenAPIMockEngineConnectorFactory =
+  OpenAPIMockEngineConnectorFactoryImpl();
+
+/** モック用エンジンのURLは `http://mock` とする */
+export const mockUrlParams = {
+  protocol: "http:",
+  hostname: "mock",
+  port: "",
+  pathname: "",
+} satisfies EngineUrlParams;
+
+/**
+ * WEB API エンジンとモックを使い分ける用。
+ * モック用エンジンのURLのときはモックを返す。
+ */
+export const OpenAPIEngineAndMockConnectorFactory: IEngineConnectorFactory = {
+  instance: (host: string) => {
+    if (host === createEngineUrl(mockUrlParams)) {
+      return OpenAPIMockEngineConnectorFactory.instance(host);
+    }
+    return OpenAPIEngineConnectorFactory.instance(host);
+  },
+};

src/mock/engineMock/README.md

@@ -0,0 +1,39 @@
+# エンジンモックのドキュメント
+
+## 概要
+
+通信を介さずに音声合成できるエンジンのモックです。
+
+同じ入力には同じ出力を返し、別の入力には別の出力を返すようになっています。
+また出力を見たときにUIや処理の実装の異常に気付けるように、ある程度直感に合う出力を返すよう努力されています。
+
+例：音量を下げると音声が小さくなる、音程と周波数が一致する、など。
+
+モックの実装は気軽に破壊的変更しても問題ありません。
+
+## ビルド戦略
+
+ブラウザ版でも使えるようにすべく、ソフトウェアにも組み込める形で実装されています。
+ビルド時のモックエンジンの取り扱いポリシーはこんな感じです。
+
+- 重い処理が一切実行されないようにする
+  - 辞書の初期化、画像の読み込みなど
+- なるべく重いファイルはビルドに含まれないようにする
+  - 形態素解析の辞書ファイルやダミー画像など
+
+## ファイル構成
+
+- `talkModelMock.ts`
+  - トーク用の音声クエリを作るまでの処理周り
+- `singModelMock.ts`
+  - ソング用の音声クエリを作るまでの処理周り
+- `audioQueryMock.ts`
+  - 音声クエリ周り
+- `synthesisMock.ts`
+  - 音声波形の合成周り
+- `characterResourceMock.ts`
+  - キャラ名や画像などのリソース周り
+- `phonemeMock.ts`
+  - 音素周り
+- `manifestMock.ts`
+  - エンジンのマニフェスト周り