テスト動かしてみる

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+# Chromaticにmainブランチをpushする
+# お試し運用中なので消滅する可能性あり
+
+# TODO: Enable TurboSnap
+# https://www.chromatic.com/docs/github-actions/#enable-turbosnap
+
+name: "Chromatic"
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'VOICEVOX'
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup environment
+        uses: ./.github/actions/setup-environment
+      - name: Run Chromatic
+        uses: chromaui/action@v11
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true

.github/workflows/test.yml

@@ -58,6 +58,29 @@ jobs:
 
       - run: npm run test:unit
 
+      - name: Setup playwright
+        run: npx playwright install
+      - name: Run Storybook tests
+        run: |
+          # ランダムなポートを使う
+          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 -- --port $PORT
+
   # e2e テスト
   e2e-test:
     runs-on: ${{ matrix.os }}
@@ -71,7 +94,7 @@ jobs:
             voicevox_engine_asset_name: linux-cpu
           - os: macos-latest
             voicevox_engine_asset_name: macos-x64
-          # TODO: voicevox_nemo_negineがarm64に対応したら変更する 
+          # TODO: voicevox_nemo_negineがarm64に対応したら変更する
           # - os: macos-latest
           #   voicevox_engine_asset_name: macos-arm64
           - os: windows-latest

.storybook/preview.ts

@@ -33,6 +33,11 @@ setup((app) => {
 
 const preview: Preview = {
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
   argTypesEnhancers: [
     addActionsWithEmits,
   ],