Merge pull request #46 from ReoHakase/44/add-e2e-tests

E2Eテストを追加した

.devcontainer/devcontainer.json

@@ -33,7 +33,8 @@
         "GitHub.vscode-pull-request-github",
         "unifiedjs.vscode-mdx",
         "csstools.postcss",
-        "vitest.explorer"
+        "vitest.explorer",
+        "ms-playwright.playwright"
       ]
     }
   },

.github/workflows/turbo_playwright:test.yml

@@ -0,0 +1,56 @@
+name: E2E Test with Playwright (Turbo)
+
+on:
+  - pull_request
+
+env:
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  RESAS_API_KEY: ${{ secrets.RESAS_API_KEY }}
+
+jobs:
+  e2e-test:
+    timeout-minutes: 40
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: moonrepo/setup-toolchain@v0
+        with:
+          # A GitHub action that sets up an environment for proto and moon.
+          # - Installs proto globally so that installed tools can also be executed globally.
+          # - Caches the toolchain (~/.proto) so subsequent runs are faster.
+          # - Hashes .prototools and .moon/toolchain.yml files to generate a unique cache key.
+          # - Cleans the toolchain before caching to remove unused or stale tools.
+          # See: https://github.com/moonrepo/setup-toolchain
+          auto-install: true
+
+      - name: Get pnpm Store
+        id: pnpm-cache
+        run: echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        name: Setup pnpm Cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: ${{ runner.os }}-pnpm-store-
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright with Dependencies
+        run: pnpm playwright install --with-deps
+
+      - name: Run E2E tests with Playwright and Turbo
+        run: pnpm turbo playwright:test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: apps/web/playwright-report/
+          retention-days: 30
+

apps/web/.gitignore

@@ -5,4 +5,8 @@ styled-system
 .contentlayer
 
 # Storybook build
-storybook-static
+storybook-static
+
+# Playwright report
+playwright-report
+test-results

apps/web/package.json

@@ -14,6 +14,7 @@
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
     "sb": "storybook dev -p 6006",
+    "playwright:test": "playwright test",
     "sb:build": "storybook build",
     "sb:test": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \\ \"pnpm dlx http-server storybook-static --port 6007 --silent\" \\ \"pnpm dlx wait-on tcp:127.0.0.1:6007 && test-storybook --url http://127.0.0.1:6007\"",
     "optimize:images": "optimizt --webp --output ./public ./public"
@@ -40,6 +41,7 @@
     "@funboxteam/optimizt": "5.0.2",
     "@next/env": "14.2.3",
     "@pandacss/dev": "0.36.1",
+    "@playwright/test": "1.44.1",
     "@radix-ui/colors": "3.0.0",
     "@storybook/addon-a11y": "8.0.5",
     "@storybook/addon-actions": "8.0.5",

apps/web/playwright.config.ts

@@ -0,0 +1,42 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  // Look for test files in the "tests" directory, relative to this configuration file.
+  testDir: 'tests',
+
+  // Run all tests in parallel.
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only.
+  retries: process.env.CI ? 2 : 0,
+
+  // Opt out of parallel tests on CI.
+  workers: process.env.CI ? 1 : undefined,
+
+  // Reporter to use
+  reporter: 'html',
+
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`.
+    baseURL: 'http://127.0.0.1:3000',
+
+    // Collect trace when retrying the failed test.
+    trace: 'on-first-retry',
+  },
+  // Configure projects for major browsers.
+  projects: [
+    {
+      name: 'Chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  // Run your local dev server before starting the tests.
+  webServer: {
+    command: 'pnpm -F web start',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});

apps/web/tests/e2e.spec.ts

@@ -0,0 +1,82 @@
+import { test, expect } from '@playwright/test';
+
+test('/', async ({ page }) => {
+  // `/` ページにアクセス
+  await page.goto('/');
+
+  const suggestionLinks = await page.locator('main nav a').all(); // 使用例の提案リンク
+  const headerLinks = await page.locator('header *:not(nav) a').all(); // トップページへのアイコン型リンクとGitHubリンク
+  const headerNavigationLinks = await page.locator('header nav a').all(); // 各人口統計ページへのリンク
+
+  expect(suggestionLinks).toHaveLength(3);
+  expect(headerLinks).toHaveLength(2);
+  expect(headerNavigationLinks).toHaveLength(4);
+
+  const suggestions = [
+    {
+      name: '四大都市圏の総人口はどのくらい？',
+      title: '東京都、愛知県、大阪府、福岡県の総人口',
+    },
+    {
+      name: '都市部と近郊の子供の数の違いは？',
+      title: '茨城県、千葉県、東京都の年少人口',
+    },
+    {
+      name: '北と南で総人口が多いのは？',
+      title: '北海道、沖縄県の総人口',
+    },
+  ];
+
+  for (const { name, title } of suggestions) {
+    const link = await page.locator(`main nav a`, { hasText: name });
+    await link.click();
+    await expect(page.locator('h1')).toHaveText(title);
+    await page.goBack();
+  }
+
+  const prefectures = {
+    '1': '北海道',
+    '8': '茨城県',
+    '47': '沖縄県',
+  };
+
+  for (const [prefCode] of Object.entries(prefectures)) {
+    const checkbox = await page.locator(`input[type="checkbox"]#prefecture-${prefCode}`);
+    await expect(checkbox).toBeTruthy();
+    const label = await page.locator(`label#prefecture-${prefCode}-label`);
+    await label.click();
+    await expect(checkbox).toBeChecked();
+    await expect(page).toHaveURL(`/?prefCodes=${prefCode}`);
+    await label.click();
+    await expect(checkbox).not.toBeChecked();
+    await expect(page).toHaveURL('/');
+  }
+});
+
+test('/[statLabel]', async ({ page }) => {
+  // `/all?prefCodes=13,23,27,40` ページにアクセス
+  await page.goto('/all?prefCodes=13,23,27,40');
+
+  // 選択している都道府県の数を確認
+  const selectionStateLabel = await page.locator('h2#selection-state-label');
+  await expect(selectionStateLabel).toHaveText('4つの都道府県を選択中');
+
+  // グラフが表示されていることを確認
+  const chart = await page.locator('main div .recharts-wrapper');
+  await expect(chart).toBeVisible();
+
+  // グラフの線(都道府県)の数を確認
+  await page.waitForSelector('main div .recharts-surface .recharts-line-dots');
+  const lines = await page.locator('main div .recharts-surface .recharts-line-dots').all();
+  await expect(lines).toHaveLength(4);
+
+  // グラフの線一つについて、データポイントの数を確認
+  await page.waitForSelector('main div .recharts-surface .recharts-line-dots circle');
+  const firstLineDots = await page.locator('main div .recharts-surface .recharts-line-dots circle').all();
+  await expect(firstLineDots.length).toBeGreaterThanOrEqual(18); // 1960年から2045年まで5年刻み
+
+  // クリアボタンを押すと `/all` に遷移することを確認
+  const clearButton = await page.locator('#selection-state-label a', { hasText: 'クリア' });
+  await clearButton.click();
+  await expect(page).toHaveURL('/all');
+});

apps/web/vitest.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
   plugins: [tsconfigPaths(), react()],
   test: {
     environment: 'jsdom',
-    setupFiles: ['test/setup.ts'],
+    setupFiles: ['tests/setup.ts'],
+    include: ['src/**/*.test.ts', 'src/**/*.test.tsx'],
   },
 });

package.json

@@ -16,7 +16,7 @@
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "patch-package": "8.0.0",
-    "playwright": "1.42.1",
+    "playwright": "1.44.1",
     "prettier": "3.2.5",
     "tsup": "8.0.2",
     "turbo": "1.13.0",

turbo.json

@@ -1,6 +1,11 @@
 {
   "$schema": "https://turbo.build/schema.json",
   "pipeline": {
+    "start": {
+      "dependsOn": ["build"],
+      "outputs": [],
+      "cache": false
+    },
     "build": {
       "dependsOn": ["^build"],
       "outputs": ["dist/**", ".next/**"],
@@ -20,6 +25,10 @@
     "sb:test": {
       "dependsOn": ["sb:build"]
     },
+    "playwright:test": {
+      "dependsOn": ["build"],
+      "outputs": ["playwright-report/**"]
+    },
     "lint": {
       "outputs": []
     },