Merge remote-tracking branch 'origin/main' into feature/2224_add_loop

.eslintrc.js

@@ -114,7 +114,7 @@ module.exports = {
       },
     },
     {
-      files: ["*.ts"],
+      files: ["*.ts", "*.mts"],
       parser: "@typescript-eslint/parser",
       extends: ["plugin:@typescript-eslint/recommended-type-checked"],
       parserOptions: tsEslintOptions,

.github/workflows/chromatic.yml

@@ -1,9 +1,6 @@
 # Chromaticにmainブランチをpushする
 # お試し運用中なので消滅する可能性あり
 
-# TODO: Enable TurboSnap
-# https://www.chromatic.com/docs/github-actions/#enable-turbosnap
-
 name: "Chromatic"
 
 on:
@@ -33,3 +30,4 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: "storybook:build"
           exitZeroOnChanges: true
+          onlyChanged: true

.github/workflows/test.yml

@@ -56,33 +56,9 @@ jobs:
       - name: Setup environment
         uses: ./.github/actions/setup-environment
 
-      - run: npm run test:unit
-
-      - name: Setup playwright
-        run: npx playwright install
-      - name: Run Storybook tests
+      - name: Run test
         run: |
-          # .env
-          cp .env.test .env
-
-          # ランダムなポートを使う
-          PORT=$(node -r net -e "server=net.createServer();server.listen(0,()=>{console.log(server.address().port);server.close()})")
-          npx storybook dev --ci --port $PORT &
-
-          # 起動を待つ
-          elapsed=0
-          until curl --output /dev/null --silent --head --fail http://localhost:$PORT; do
-            echo "Waiting for Storybook to start on port $PORT..."
-            sleep 5
-            ((elapsed+=5))
-            if [ "$elapsed" -ge "60" ]; then
-              echo "Timed out waiting for Storybook to start."
-              exit 1
-            fi
-          done
-
-          # テスト
-          npm run test:storybook -- --url "http://127.0.0.1:$PORT"
+          npm run test:unit
 
   # e2e テスト
   e2e-test:
@@ -125,9 +101,6 @@ jobs:
 
       - name: Setup
         run: |
-          # playwright
-          npx playwright install
-
           # run.exe
           chmod +x ${{ steps.download-engine.outputs.run_path }}
 
@@ -162,6 +135,17 @@ jobs:
             npm run test:electron-e2e
           fi
 
+      - name: Run npm run test:storybook-vrt
+        run: |
+          if [ -n "${{ runner.debug }}" ]; then
+            export DEBUG="pw:browser*"
+          fi
+          ARGS=""
+          if [[ ${{ needs.config.outputs.shouldUpdateSnapshots }} == 'true' ]]; then
+            ARGS="--update-snapshots"
+          fi
+          npm run test:storybook-vrt -- $ARGS
+
       - name: Upload playwright report to artifact
         if: failure()
         uses: actions/upload-artifact@v4

.gitignore

@@ -41,3 +41,6 @@ electron-builder.yml
 
 # generated licenses.json
 /*licenses.json
+
+# Storybook
+storybook-static/

.storybook/main.ts

@@ -1,14 +1,17 @@
 import type { StorybookConfig } from "@storybook/vue3-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
+    "@storybook/experimental-addon-test",
   ],
+
   framework: {
     name: "@storybook/vue3-vite",
     options: {

.storybook/preview.ts

@@ -7,7 +7,10 @@ import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
 import "@quasar/extras/material-icons/material-icons.css";
 import "quasar/dist/quasar.sass";
-import "../src/styles/_index.scss";
+import "@/styles/_index.scss";
+import { UnreachableError } from "@/type/utility";
+import { setThemeToCss, setFontToCss } from "@/domain/dom";
+import { themes } from "@/domain/theme";
 
 setup((app) => {
   app.use(Quasar, {
@@ -61,6 +64,42 @@ const preview: Preview = {
       defaultTheme: "light",
       attributeName: "is-dark-theme",
     }),
+
+    // テーマの設定をCSSへ反映する
+    () => {
+      let observer: MutationObserver | undefined = undefined;
+      return {
+        async mounted() {
+          setFontToCss("default");
+
+          const root = document.documentElement;
+          let lastIsDark: boolean | undefined = undefined;
+          observer = new MutationObserver(() => {
+            const isDark = root.getAttribute("is-dark-theme") === "true";
+            if (lastIsDark === isDark) return;
+            lastIsDark = isDark;
+
+            const theme = themes.find((theme) => theme.isDark === isDark);
+            if (!theme)
+              throw new UnreachableError("assert: theme !== undefined");
+
+            setThemeToCss(theme);
+          });
+
+          observer.observe(root, {
+            attributes: true,
+            attributeFilter: ["is-dark-theme"],
+          });
+        },
+        unmounted() {
+          if (observer) {
+            observer.disconnect();
+          }
+        },
+
+        template: `<story />`,
+      };
+    },
   ],
   argTypesEnhancers: [addActionsWithEmits],
 };

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import { beforeAll } from "vitest";
+import { setProjectAnnotations } from "@storybook/vue3";
+import * as previewAnnotations from "./preview";
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+
+beforeAll(annotations.beforeAll);

README.md

@@ -40,8 +40,11 @@ Issue 側で取り組み始めたことを伝えるか、最初に Draft プル
 [.node-version](.node-version) に記載されているバージョンの Node.js をインストールしてください。  
 Node.js の管理ツール（[nvs](https://github.com/jasongin/nvs)や[Volta](https://volta.sh)など）を利用すると簡単にインストールでき、Node.js の自動切り替えもできます。
 
-Node.js をインストール後、[このリポジトリ](https://github.com/VOICEVOX/voicevox.git) を
-Fork して `git clone` し、次のコマンドを実行してください。
+Node.js をインストール後、[このリポジトリ](https://github.com/VOICEVOX/voicevox.git) を Fork して `git clone` してください。
+
+### 依存ライブラリをインストールする
+
+次のコマンドを実行することで依存ライブラリがインストール・アップデートされます。
 
 ```bash
 npm ci
@@ -88,6 +91,9 @@ Storybook を使ってコンポーネントを開発することができます
 npm run storybook
 ```
 
+main ブランチの Storybook は Chromatic から確認できます。  
+<https://main--667d9c007418420dbb5b0f75.chromatic.com/>
+
 ### ブラウザ版の実行（開発中）
 
 別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。
@@ -96,7 +102,8 @@ npm run storybook
 npm run browser:serve
 ```
 
-また、main ブランチのビルド結果がこちらにデプロイされています <https://voicevox-browser-dev.netlify.app/>  
+また、main ブランチのビルド結果がこちらにデプロイされています。  
+<https://voicevox-browser-dev.netlify.app/>  
 今はローカル PC 上で音声合成エンジンを起動する必要があります。
 
 ## ビルド
@@ -114,27 +121,27 @@ fork したリポジトリで Actions を ON にし、workflow_dispatch で`buil
 
 ### 単体テスト
 
+`./tests/unit/` 以下にあるテストと、Storybookのテストを実行します。
+
 ```bash
 npm run test:unit
 npm run test-watch:unit # 監視モード
+npm run test-ui:unit # VitestのUIを表示
 npm run test:unit -- --update # スナップショットの更新
 ```
 
-### コンポーネントのテスト
-
-Storybook を使ってコンポーネントのテストを行います。
-
-```bash
-npm run storybook # 先に Storybook を起動
-npm run test:storybook
-npm run test-watch:storybook # 監視モード
-```
+> [!NOTE]  
+> `./tests/unit` 下のテストは、ファイル名によってテストを実行する環境が変化します。
+>
+> - `.node.spec.ts`：Node.js 環境
+> - `.browser.spec.ts`：ブラウザ環境（Chromium）
+> - `.spec.ts`：ブラウザ環境（happy-domによるエミュレート）
 
 ### ブラウザ End to End テスト
 
 Electron の機能が不要な、UI や音声合成などの End to End テストを実行します。
 
-> **Note**
+> [!NOTE]
 > 一部のエンジンの設定を書き換えるテストは、CI(Github Actions)上でのみ実行されるようになっています。
 
 ```bash
@@ -152,9 +159,20 @@ npx playwright codegen http://localhost:5173/  --viewport-size=1024,630
 
 詳細は [Playwright ドキュメントの Test generator](https://playwright.dev/docs/codegen-intro) を参照してください。
 
+### Storybook の Visual Regression Testing
+
+Storybook のコンポーネントのスクリーンショットを比較して、変更がある場合は差分を表示します。
+
+> [!NOTE]
+> このテストは Windows でのみ実行できます。
+
+```bash
+npm run test:storybook-vrt
+```
+
 #### スクリーンショットの更新
 
-ブラウザ End to End テストでは Visual Regression Testing を行っています。
+ブラウザ End to End テストと Storybook では Visual Regression Testing を行っています。
 現在 VRT テストは Windows のみで行っています。
 以下の手順でスクリーンショットを更新できます：