概要
このプロジェクトでは、構築済みのアプリに対して、Playwright を用いた E2E テストを追加します。
既存のコードベースに対してテストを書くことで、より実務的な流れを体験します。
学習目標
Next.js/App Router における、フロントエンド E2E テストを学びます。
テスト対象となる「コンテンツ販売アプリ」は、記事や電子書籍を、有料/無料で販売・閲覧できるアプリです。
ログインや、コンテンツの購入(決済)などの機能があるため、
シンプルな UI/ページ遷移のテストから、認証/決済フロー/ルート保護に関する E2E テストを確認します。
推奨技術
E2E テストでは、Playwright の使用をお勧めします。
テスト対象となる「コンテンツ販売アプリ」の技術スタック:
- Auth.js v5 による認証(GitHub ソーシャルログイン)
- Stripe によるオンライン決済
- GitHub API によるコンテンツ取得
- Next.js 15 App Router
- TypeScript
- Tailwind CSS
- shadcn/ui
🎯 お題
- 全ての「必須テストケース」を、テストコードとして記述し、自動テストを行なってください
- 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
必須テストケース
- 基本的なナビゲーションとレンダリング
- トップページが正しくレンダリングされることを確認
- 特集コンテンツが正しく表示されることを確認
- ナビゲーションバーが全ページで正しく表示されることを確認
- 記事の一覧が正しく表示されることを確認
- 本の一覧が正しく表示されることを確認
- 認証機能:
- ログインボタンのクリックで、GitHub 認証画面に遷移することを確認
- ログイン時に、GitHub のアバターが表示される
- アバターをクリックするとドロップダウンが開き、ログアウトボタンからログアウトできる
- 認証状態が保持されることを確認(ページリロード後も)
- 有料コンテンツの購入フロー:
- 未ログイン状態に購入ボタンをクリックしたら、ログインページへリダイレクトされる
- ログイン状態で有料コンテンツの購入ボタンをクリックしたら、Stripe チェックアウトページへ遷移する
- Stripe のテスト用クレジットカード情報を入力し、決済を完了できる
- 購入済みコンテンツの購入ボタンをクリックしたら、コンテンツ詳細ページにリダイレクトされる(決済ページには遷移しない)
- アクセス制御
- 購入済みの有料コンテンツへ、アクセスできることを確認
- 未購入の有料記事へのアクセス試行で、記事一覧にリダイレクトされることを確認
- 未購入の有料本の章へのアクセス試行で、本の詳細にリダイレクトされることを確認
- 未ログイン状態でも、無料のコンテンツには直接アクセスできる
- 本のナビゲーション
- 本の詳細ページから、各章へのリンクが正常に動作することを確認
- 章ページの前後ナビゲーションが、正しく機能することを確認
- 章ページのサイドバー目次が、各章へのリンクが正常に動作することを確認
追加情報
「コンテンツ販売アプリ」のコードは、最初にこちらからクローン(複製)できます!
また、今回のアプリで使用可能な、テスト用のダミーデータ(リポジトリ)を使用できます:
「コンテンツ販売アプリ」のセットアップ
ソースコードをクローンしたら、
外部サービスと連携するために、環境変数を設定してください!
# Auth.js
AUTH_SECRET= # `npx auth secret` で自動的に追加されます
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
# 開発環境
NEXT_PUBLIC_BASE_URL=http://localhost:3000
問題なく、ローカルでサーバーが立ち上げることを確認できたら、セットアップは完了です!