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

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/vue3-vite";
+import { assetsPath, dicPath } from "@/mock/engineMock";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -8,12 +9,20 @@ const config: StorybookConfig = {
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
   ],
+  core: {
+    builder: "@storybook/builder-vite",
+  },
   framework: {
     name: "@storybook/vue3-vite",
     options: {
       docgen: "vue-component-meta",
     },
   },
+  staticDirs: [
+    // モックエンジン用のファイル
+    { from: "../node_modules/kuromoji/dict", to: dicPath },
+    { from: "../tests/assets", to: assetsPath },
+  ],
 };
 
 export default config;

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<!-- %BROWSER_PRELOAD% -->
+<!-- FIXME: 色取得のために必要。DIできるようにしたい。 -->
+<script type="module" src="/src/backend/browser/preload.ts"></script>

.storybook/preview.ts

@@ -1,8 +1,9 @@
 import { setup, Preview } from "@storybook/vue3";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
 import { addActionsWithEmits } from "./utils/argTypesEnhancers";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
+import { resetMockMode } from "@/helpers/random";
 
 import "@quasar/extras/material-icons/material-icons.css";
 import "quasar/dist/quasar.sass";
@@ -34,7 +35,10 @@
       toc: true,
     },
   },
-  argTypesEnhancers: [addActionsWithEmits],
+
+  beforeEach() {
+    resetMockMode();
+  },
 };
 
 export default preview;

.storybook/test-runner.ts

@@ -0,0 +1,18 @@
+import { type TestRunnerConfig } from "@storybook/test-runner";
+
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    // テスト用のスナップショット関数を追加する。
+    // *.stories.ts内で`window.storybookTestSnapshot`を使って呼び出せる。
+    if (await page.evaluate(() => !("storybookTestSnapshot" in window))) {
+      await page.exposeBinding(
+        "storybookTestSnapshot",
+        async (_, obj: unknown) => {
+          expect(obj).toMatchSnapshot();
+        },
+      );
+    }
+  },
+};
+
+export default config;

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 上で音声合成エンジンを起動する必要があります。
 
 ## ビルド