Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

.github/workflows/test.yml

@@ -25,7 +25,6 @@ jobs:
         id: check-whether-to-update-snapshots
         uses: actions/github-script@v7
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const commits = ${{ toJson(github.event.commits) }};
             if (!commits) {
@@ -175,6 +174,11 @@ jobs:
     if: needs.config.outputs.shouldUpdateSnapshots == 'true'
     steps:
       - uses: actions/checkout@v4
+        with:
+          # NOTE: デフォルトの設定だとgithub-push-actionが動いてくれないので設定を変えている。
+          # ref: https://github.com/ad-m/github-push-action/issues/44#issuecomment-581706892
+          persist-credentials: false
+          fetch-depth: 0
 
       - name: Download artifacts
         uses: actions/download-artifact@v4
@@ -184,6 +188,7 @@ jobs:
           merge-multiple: true
 
       - name: Commit updated snapshots
+        id: commit-updated-snapshots
         run: |
           # パッチを適用
           for patch in patches/*.diff; do
@@ -197,11 +202,36 @@ jobs:
             git config --global user.email "github-actions[bot]@users.noreply.github.com"
             git add tests/
             git commit -m "（スナップショットを更新）"
-            git push
+
+            echo "changes_exist=true" >> $GITHUB_OUTPUT
           else
             echo "No changes to commit"
+
+            echo "changes_exist=false" >> $GITHUB_OUTPUT
           fi
 
+      - name: Push changes
+        if: steps.commit-updated-snapshots.outputs.changes_exist == 'true'
+        uses: ad-m/github-push-action@77c5b412c50b723d2a4fbc6d71fb5723bcd439aa
+        with:
+          github_token: ${{ secrets.PUSH_TOKEN || secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref }}
+
+      - name: Show warning if token is not set
+        if: steps.commit-updated-snapshots.outputs.changes_exist == 'true'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const pushTokenProvided = `${{ secrets.PUSH_TOKEN }}` !== "";
+            if (!pushTokenProvided) {
+              core.warning(
+                "スクリーンショットを更新したので、空コミットをプッシュしてテストを再実行してください。\n" +
+                "PUSH_TOKENをSecretsに追加すると次からこの操作を省けます。\n" +
+                "Secretsの設定方法はREADME.mdを参照してください。"
+              );
+            }
+            console.log(`pushTokenProvided: ${pushTokenProvided}`);
+
   lint:
     runs-on: ubuntu-latest
     steps:

.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],
 };

README.md

@@ -148,6 +148,7 @@ Electron の機能が不要な、UI や音声合成などの End to End テス
 npm run test:browser-e2e
 npm run test-watch:browser-e2e # 監視モード
 npm run test-watch:browser-e2e -- --headed # テスト中の UI を表示
+npm run test-ui:browser-e2e # Playwright の UI を表示
 ```
 
 Playwright を使用しているためテストパターンを生成することもできます。
@@ -168,6 +169,8 @@ Storybook のコンポーネントのスクリーンショットを比較して
 
 ```bash
 npm run test:storybook-vrt
+npm run test-watch:storybook-vrt # 監視モード
+npm run test-ui:storybook-vrt # Playwright の UI を表示
 ```
 
 #### スクリーンショットの更新
@@ -187,6 +190,25 @@ npm run test:storybook-vrt
    ```
 
 4. Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。
+5. プルした後、空コミットをプッシュしてテストを再実行します。
+
+   ```bash
+   git commit --allow-empty -m "（テストを再実行）"
+   git push
+   ```
+
+> [!NOTE]
+> トークンを作成して Secrets に追加することで、自動的にテストを再実行できます。
+>
+> 1. [Fine-granted Tokens](https://github.com/settings/personal-access-tokens/new) にアクセスします。
+> 2. 適当な名前を入力し、 `ユーザー名/voicevox` へのアクセス権を与え、 Repository permissions の Contents で Read and write を選択します。
+>    <details>
+>    <summary>設定例</summary>
+>    <img src="./docs/res/Fine-granted_Tokensの作成.png" width="320">
+>    </details>
+> 3. トークンを作成して文字列をコピーします。
+> 4. `ユーザー名/voicevox` のリポジトリの Settings > Secrets and variables > Actions > New repository secret を開きます。
+> 5. 名前に `PUSH_TOKEN` と入力し、先ほどの文字列を貼り付けて Secrets を追加します。
 
 ##### ローカルで更新する場合