QuestionDialogの文字色を修正、StorybookのVRTを改善 (#2314)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

.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:

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 を追加します。
 
 ##### ローカルで更新する場合
 

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: ["skip-screenshot"],
   args: {
     openDialog: false,
   },

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

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

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

@@ -76,6 +76,7 @@ export const ClickBackdropWithCancel: Story = {
 
 export const Closed: Story = {
   name: "閉じている",
+  tags: ["skip-screenshot"],
   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: ["skip-screenshot"],
 };

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

@@ -1,6 +1,6 @@
 // 起動中のStorybookで様々なStoryを表示し、スクリーンショットを撮って比較するVRT。
 // テスト自体はend-to-endではないが、Playwrightを使う関係でe2eディレクトリ内でテストしている。
-import { test, expect } from "@playwright/test";
+import { test, expect, Locator } from "@playwright/test";
 import z from "zod";
 
 // Storybook 8.3.5時点でのindex.jsonのスキーマ。
@@ -52,18 +52,53 @@ 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("skip-screenshot")) {
+        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()}`,
+            );
+
+            // Storybookのroot要素を取得。
+            // data-v-appが存在する（＝Vueのアプリケーションのマウントが完了している）かどうかを
+            // ロードが完了したかどうかとして扱う。
+            const root = page.locator("#storybook-root[data-v-app]");
+            const quasarDialogRoot = page.locator(
+              "div[id^=q-portal--dialog--]",
+            );
+
+            await root.waitFor({ state: "attached" });
+
+            // Quasarのダイアログが存在する場合はダイアログのスクリーンショットを、そうでない場合は#storybook-rootのスクリーンショットを撮る。
+            // q-portal-dialogはそのまま撮るとvisible扱いにならずtoHaveScreenshotが失敗するので、
+            // 子要素にある実際のダイアログ（.q-dialog__inner）を撮る。
+            let elementToScreenshot: Locator;
+            if ((await quasarDialogRoot.count()) > 0) {
+              const dialog = quasarDialogRoot.locator(".q-dialog__inner");
+
+              elementToScreenshot = dialog;
+            } else {
+              elementToScreenshot = root;
+            }
+            await expect(elementToScreenshot).toHaveScreenshot(
+              `${story.id}-${theme}.png`,
+            );
+          });
+        }
       });
     }
   });