[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]

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

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

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

[Hiroshiba]

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

[voicevox-preview-pages]

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

• 📝 エディタ
• 📖 Storybook

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

[Hiroshiba]

📝
モック部分は完成。
あとは切り分けてプルリクエストにしていく。

とりあえず第1弾として、engineMockディレクトリと、そのモックを使ったスナップショットテストだけプルリクエストを送信する。
これのレビューは不可能なので、えいやで実装しちゃう。

その後モックを使ったいろんなコード変更をプルリクエストしていく。
こっちは結構分かりやすいはず！