QuestionDialogの文字色を修正、StorybookのVRTを改善

.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) {
@@ -39,6 +38,17 @@ jobs:
             core.setOutput("shouldUpdateSnapshots", shouldUpdateSnapshots);
             console.log(`shouldUpdateSnapshots: ${shouldUpdateSnapshots}`);
 
+            const pushTokenProvided = `${{ secrets.PUSH_TOKEN }}` !== "";
+            if (shouldUpdateSnapshots && !pushTokenProvided) {
+              core.warning(
+                "PUSH_TOKENがSecretsに設定されていません。\n" +
+                "スナップショットを更新するコミットはpushされますが、" +
+                "Pull RequestのCIは手動で再実行する必要があります。\n" +
+                "詳細はREADME.mdを参照してください。"
+              );
+            }
+            console.log(`pushTokenProvided: ${pushTokenProvided}`);
+
   # ビルドのテスト
   build-test:
     runs-on: windows-latest
@@ -175,6 +185,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 +199,7 @@ jobs:
           merge-multiple: true
 
       - name: Commit updated snapshots
+        id: commit-updated-snapshots
         run: |
           # パッチを適用
           for patch in patches/*.diff; do
@@ -197,11 +213,21 @@ 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@master
+        with:
+          github_token: ${{ secrets.PUSH_TOKEN || secrets.GITHUB_TOKEN }}
+          branch: ${{ github.ref }}
+
   lint:
     runs-on: ubuntu-latest
     steps:

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 を表示
 ```
 
 #### スクリーンショットの更新
@@ -188,6 +191,15 @@ npm run test:storybook-vrt
 
 4. Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。
 
+> [!NOTE]
+> Secrets に `PUSH_TOKEN` という名前で [Fine-granted Tokens](https://github.com/settings/personal-access-tokens/new) を設定すると、そのトークンを使ってコミットを Push します。  
+> これが設定されていると Pull Request のテストが自動的にもう一度回るので、設定することを強く推奨します。  
+> トークンには `ユーザー名/voicevox` へのアクセス権を与え、 Repository permissions の Contents を Read and write に設定する必要があります。
+> <details>
+> <summary>トークンの設定例</summary>
+> <img src="./docs/res/Fine-granted_Tokensの作成.png" width="50%">
+> </details>
+
 ##### ローカルで更新する場合
 
 ローカル PC の OS に対応したもののみが更新されます。

package.json

@@ -20,7 +20,10 @@
     "test-watch:electron-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=electron playwright test",
     "test:browser-e2e": "cross-env VITE_TARGET=browser playwright test",
     "test-watch:browser-e2e": "cross-env PWTEST_WATCH=1 VITE_TARGET=browser playwright test",
+    "test-ui:browser-e2e": "cross-env VITE_TARGET=browser playwright test --ui",
     "test:storybook-vrt": "cross-env TARGET=storybook playwright test",
+    "test-watch:storybook-vrt": "cross-env TARGET=storybook PWTEST_WATCH=1 playwright test",
+    "test-ui:storybook-vrt": "cross-env TARGET=storybook playwright test --ui",
     "lint": "eslint --ext .js,.vue,.ts,.mts *.config.* src tests build .storybook",
     "fmt": "eslint --ext .js,.vue,.ts,.mts *.config.* src tests build .storybook --fix",
     "markdownlint": "markdownlint --ignore node_modules/ --ignore dist/ --ignore dist_electron/ ./",

src/components/Dialog/SettingDialog/FileNameTemplateDialog.stories.ts

@@ -148,6 +148,7 @@ export const Close: Story = {
 
 export const Closed: Story = {
   name: "閉じている",
+  tags: ["no-vrt"],
   args: {
     openDialog: false,
   },

src/components/Dialog/TextDialog/MessageDialog.stories.ts

@@ -49,6 +49,7 @@ export const Close: Story = {
 
 export const Closed: Story = {
   name: "閉じている",
+  tags: ["no-vrt"],
   args: {
     modelValue: false,
   },

src/components/Dialog/TextDialog/QuestionDialog.stories.ts

@@ -76,6 +76,7 @@ export const ClickBackdropWithCancel: Story = {
 
 export const Closed: Story = {
   name: "閉じている",
+  tags: ["no-vrt"],
   args: {
     modelValue: false,
   },

src/components/Dialog/TextDialog/QuestionDialog.vue

@@ -32,8 +32,7 @@
           :key="index"
           flat
           :label="button"
-          color="toolbar-button"
-          textColor="toolbar-button-display"
+          color="display"
           class="text-no-wrap text-bold"
           @click="onClick(index)"
         />

src/components/Dialog/UpdateNotificationDialog/index.stories.ts

@@ -95,4 +95,5 @@ export const OpenOfficialSite: Story = {
 
 export const Closed: Story = {
   name: "閉じている",
+  tags: ["no-vrt"],
 };

tests/e2e/storybook/スクリーンショット.spec.mts

@@ -52,18 +52,44 @@ for (const story of currentStories) {
 for (const [story, stories] of Object.entries(allStories)) {
   test.describe(story, () => {
     for (const story of stories) {
-      test(story.name, async ({ page }) => {
-        test.skip(
-          process.platform !== "win32",
-          "Windows以外のためスキップします",
-        );
+      if (story.tags.includes("no-vrt")) {
+        continue;
+      }
+      test.describe(story.name, () => {
+        for (const [theme, name] of [
+          ["light", "ライト"],
+          ["dark", "ダーク"],
+        ]) {
+          test(`テーマ：${name}`, async ({ page }) => {
+            test.skip(
+              process.platform !== "win32",
+              "Windows以外のためスキップします",
+            );
 
-        await page.goto(`http://localhost:7357/iframe.html?id=${story.id}`);
-        const body = page.locator("body.sb-show-main");
-        await body.waitFor({ state: "visible" });
-        await expect(page).toHaveScreenshot(`${story.id}.png`, {
-          fullPage: true,
-        });
+            const params = new URLSearchParams();
+            params.append("id", story.id);
+            params.append("globals", `theme:${theme}`);
+            await page.goto(
+              `http://localhost:7357/iframe.html?${params.toString()}`,
+            );
+            const root = page.locator("#storybook-root");
+            const dialogRoot = page.locator("div[id^=q-portal--dialog--]");
+            const firstVisible = await Promise.race([
+              root.waitFor({ state: "visible" }).then(() => "root"),
+              dialogRoot.waitFor({ state: "attached" }).then(() => "dialog"),
+            ]);
+
+            // ダイアログの場合はダイアログのスクリーンショットを、そうでない場合は#storybook-rootのスクリーンショットを撮る。
+            // q-portal-dialogはそのまま撮るとvisible扱いにならずtoHaveScreenshotが失敗するので、
+            // 子要素にある実際のダイアログ（.q-dialog）を撮る。
+            if (firstVisible === "dialog") {
+              const dialog = dialogRoot.locator(".q-dialog");
+              await expect(dialog).toHaveScreenshot(`${story.id}-${theme}.png`);
+            } else {
+              await expect(root).toHaveScreenshot(`${story.id}-${theme}.png`);
+            }
+          });
+        }
       });
     }
   });