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

[Hiroshiba]

内容

• Vuexのレイヤーでエンジンのmockを作る #2144

の解決を目指したプルリクエストです。
ついでにストーリーブック上でコンポーネントテストする方法を色々試そうとしてます。

TalkEditorの表示と、モックエンジンを使ったピッチ推論までできたのですが、なぜかscssが読み込まれずにスプリッターの色指定がうまくいってないです。
Viteとかの設定な気がしないでもないので、詳しい方いらっしゃったらヘルプいただけると助かります 🙇

追記：わかりました！！！たぶん色の初期化をしてないからでした！！

関連 Issue

fix #2144

スクリーンショット・動画など

こんな感じで境界線がない。多分正確には透明になってる。

その他

[Hiroshiba]

テーマ周りで気になった挙動まとめ

• ipcのset/getが同じ関数になってる
• availableThemesだけセットしたいのにcurrentThemeもセットするmutationしかない
• currentThemeのセッターに副作用がある

[Hiroshiba]

とりあえずスナップショットテストができた！
それとは関係ないところでeslintエラーが出たのでissue立ててみました

• Support for new context syntax in rules/context-in-play-function not working as expected storybookjs/eslint-plugin-storybook#162

[Hiroshiba]

playwrightの通信をモックする形でエンジンAPIを偽装していたけど、VuexにDIする形にするならこれが不要になるはず。
けどなんかもったいないのと、いつか使うかもなので、ここにメモしておきます。

  await page.route(/\/version$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify("mock"),
    });
  });

  await page.route(/\/engine_manifest$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(EngineManifestToJSON(getEngineManifestMock())),
    });
  });

  await page.route(/\/supported_devices$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(
        SupportedDevicesInfoToJSON({ cpu: true, cuda: false, dml: false }),
      ),
    });
  });

  await page.route(new RegExp(`/${assetsPath}/`), async (route) => {
    const filePath = path.join(
      __dirname,
      "..",
      "..",
      "..",
      new URL(route.request().url()).pathname,
    );
    const body = await fs.readFile(filePath);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "image/png",
      },
      body,
    });
  });

  await page.route(/\/speakers$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(speakers.map(SpeakerToJSON)),
    });
  });

  await page.route(/\/speaker_info\?/, async (route) => {
    const query = new URLSearchParams(route.request().url().split("?")[1]);
    const speakerUuid = query.get("speaker_uuid");
    if (speakerUuid == null) {
      throw new Error("speaker_uuid is required");
    }

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(SpeakerInfoToJSON(getSpeakerInfoMock(speakerUuid))),
    });
  });

  await page.route(/\/singers$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(singers.map(SpeakerToJSON)),
    });
  });

  await page.route(/\/singer_info\?/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speakerUuid = payload.get("speaker_uuid");
    if (speakerUuid == undefined) {
      throw new Error("speaker_uuid is required");
    }

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(SpeakerInfoToJSON(getSpeakerInfoMock(speakerUuid))),
    });
  });

  await page.route(/\/is_initialized_speaker/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(true),
    });
  });

  await page.route(/\/initialize_speaker/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
    });
  });

  // NOTE: 空のユーザ辞書を返す
  await page.route(/\/user_dict$/, async (route) => {
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify([]),
    });
  });

  await page.route(/\/audio_query/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const text = payload.get("text");
    const speaker = Number(payload.get("speaker"));
    if (text == undefined || speaker == undefined) {
      throw new Error("text, speaker is required");
    }

    const accentPhrases = await textToActtentPhrasesMock(text, speaker);
    return route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(
        AudioQueryToJSON({
          accentPhrases,
          speedScale: 1.0,
          pitchScale: 0.0,
          intonationScale: 1.0,
          volumeScale: 1.0,
          prePhonemeLength: 0.1,
          postPhonemeLength: 0.1,
          outputSamplingRate: getEngineManifestMock().defaultSamplingRate,
          outputStereo: false,
        }),
      ),
    });
  });

  await page.route(/\/accent_phrases/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const text = payload.get("text");
    const speaker = Number(payload.get("speaker"));
    if (text == undefined || speaker == undefined) {
      throw new Error("text, speaker is required");
    }

    const isKana = payload.get("is_kana") === "true";
    if (isKana) {
      throw new Error("AquesTalk風記法は未対応です");
    }

    const accentPhrases = await textToActtentPhrasesMock(text, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(accentPhrases.map(AccentPhraseToJSON)),
    });
  });

  await page.route(/\/mora_data/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const accentPhraseRaw = route.request().postData();
    if (accentPhraseRaw == undefined || speaker == undefined) {
      throw new Error("accent_phrase, speaker is required");
    }

    const accentPhrase = (JSON.parse(accentPhraseRaw) as []).map(
      AccentPhraseFromJSON,
    );
    replaceLengthMock(accentPhrase, speaker);
    replacePitchMock(accentPhrase, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(accentPhrase.map(AccentPhraseToJSON)),
    });
  });

  await page.route(/\/synthesis/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const enableInterrogativeUpspeak =
      payload.get("enable_interrogative_upspeak") === "true";
    const audioQueryRaw = route.request().postData();
    if (audioQueryRaw == undefined || speaker == undefined) {
      throw new Error("audio_query, speaker is required");
    }

    const audioQuery = AudioQueryFromJSON(JSON.parse(audioQueryRaw));
    const frameAudioQuery = audioQueryToFrameAudioQueryMock(audioQuery, {
      enableInterrogativeUpspeak,
    });
    const buffer = synthesisFrameAudioQueryMock(frameAudioQuery, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "audio/wav",
      },
      body: Buffer.from(buffer),
    });
  });

  await page.route(/\/sing_frame_audio_query/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const scoreRaw = route.request().postData();
    if (scoreRaw == undefined || speaker == undefined) {
      throw new Error("score, speaker is required");
    }

    const score = ScoreFromJSON(JSON.parse(scoreRaw));
    const phonemes = notesToFramePhonemesMock(score.notes, speaker);
    const f0 = notesAndFramePhonemesToPitchMock(score.notes, phonemes, speaker);
    const volume = notesAndFramePhonemesAndPitchToVolumeMock(
      score.notes,
      phonemes,
      f0,
      speaker,
    );

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(
        FrameAudioQueryToJSON({
          f0,
          volume,
          phonemes,
          volumeScale: 1.0,
          outputSamplingRate: getEngineManifestMock().defaultSamplingRate,
          outputStereo: false,
        }),
      ),
    });
  });

  await page.route(/\/sing_frame_volume/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const raw = route.request().postData();
    if (raw == undefined || speaker == undefined) {
      throw new Error("score, speaker is required");
    }

    const { score, frameAudioQuery } =
      BodySingFrameVolumeSingFrameVolumePostFromJSON(JSON.parse(raw));
    const volume = notesAndFramePhonemesAndPitchToVolumeMock(
      score.notes,
      frameAudioQuery.phonemes,
      frameAudioQuery.f0,
      speaker,
    );

    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(volume),
    });
  });

  await page.route(/\/frame_synthesis/, async (route) => {
    const payload = new URLSearchParams(new URL(route.request().url()).search);
    const speaker = Number(payload.get("speaker"));
    const frameAudioQueryRaw = route.request().postData();
    if (frameAudioQueryRaw == undefined || speaker == undefined) {
      throw new Error("frame_audio_query, speaker is required");
    }

    const frameAudioQuery = FrameAudioQueryFromJSON(
      JSON.parse(frameAudioQueryRaw),
    );
    const buffer = synthesisFrameAudioQueryMock(frameAudioQuery, speaker);
    await route.fulfill({
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "audio/wav",
      },
      body: Buffer.from(buffer),
    });

[Hiroshiba]

📝 とりあえずデフォルトエンジンURLにhttp://mockを指定するとモックが動くようにはできた。
画像ファイルがどうしようもない。もうGithubの特定コミットハッシュのテスト用画像とかで良さそう。CORSが許すなら。
それか軽いSVGファイルをimportなりなんなりするか。

[Hiroshiba]

📝
audio.spec.tsのテストが通らない。
e2eテストするときはmockを使うようにしたい。
electronは.envを見るので、.env.test辺りを見るようにしたい。たぶんviteの仕組みを使えば良い？

Nodeのときもkuromojiのブラウザの方のクラスを使いたい。
package.jsonをパッチで書き換えるか、直接インポートしてBuliderの代わりに実行する。

あと実装を外のリポジトリに配置したい。

[Hiroshiba]

（プレビュービルドでモック使えるかと思ったけど、ビルド時の.envのエンジンパスをまだ変えてないのでダメだった）

[voicevox-preview-pages]

🚀 プレビュー用ページを作成しました 🚀

• 📝 エディタ
• 📖 Storybook

更新時点でのコミットハッシュ：d6c3fd0