# バッチ設計書 26-e2e-angular-cli

## 概要

本ドキュメントは、BabelプロジェクトにおけるAngular CLIフレームワークとのE2Eテストバッチ（e2e-angular-cli）の設計仕様を記載する。

### 本バッチの処理概要

このバッチは、Angular CLIを使用して新規Angularプロジェクトを作成し、Babelの最新パッケージでビルドとテストを実行することで、Angular開発環境との互換性を検証する。

**業務上の目的・背景**：Angular CLIは、Angularアプリケーションの標準的な開発ツールであり、内部でBabelを使用している。AngularはTypeScriptベースのフレームワークであり、Babelとの互換性を確認することは、企業向けWebアプリケーション開発において重要である。本バッチは、新規Angularプロジェクトを作成し、Babel依存関係を更新した上でビルドとユニットテストを実行することで、互換性を検証する。

**バッチの実行タイミング**：GitHub Actionsワークフローにおいて、e2e-publishジョブ完了後に自動実行される。mainブランチへのpushまたはプルリクエスト発生時にトリガーされる。

**主要な処理内容**：
1. ローカルVerdaccioレジストリを起動
2. Angular CLIで新規プロジェクトを作成（ng new）
3. resolutionsでBabel依存関係をバンプ
4. Yarn stable版に更新
5. 依存関係をインストール
6. Playwrightブラウザテスト環境をセットアップ
7. プロジェクトをビルド（yarn run build）
8. ChromiumHeadlessでユニットテストを実行

**前後の処理との関連**：e2e-publishバッチで作成されたverdaccio-workspaceアーティファクトに依存する。他のE2Eテストと並列実行される。

**影響範囲**：一時ディレクトリ（tmp/ngx）、ビルド成果物、テスト結果。本番環境やnpmレジストリには影響しない。

## バッチ種別

E2Eテスト / フレームワーク統合テスト

## 実行スケジュール

| 項目 | 内容 |
|-----|------|
| 実行頻度 | イベント駆動（push/プルリクエスト時） |
| 実行時刻 | 随時（e2e-publish完了後） |
| 実行曜日 | 該当なし |
| 実行日 | 該当なし |
| トリガー | GitHub Actions（needs: e2e-publish） |

## 実行条件

### 前提条件

| 条件 | 説明 |
|-----|------|
| e2e-publishジョブ完了 | verdaccio-workspaceアーティファクトが利用可能であること |
| Node.js環境 | Node.js最新版がインストールされていること |
| npx | npxが利用可能であること |
| ネットワーク | npmレジストリおよびローカルVerdaccioへのアクセスが可能 |

### 実行可否判定

- e2e-publishジョブが成功していること
- matrix.projectがangular-cliの場合に実行

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | デフォルト値 | 説明 |
|-------------|-----|-----|-------------|------|
| matrix.project | string | Yes | angular-cli | テスト対象プロジェクト名 |

### 入力データソース

| データソース | 形式 | 説明 |
|-------------|------|------|
| verdaccio-workspace.tar | tar | 公開済みBabelパッケージのアーカイブ |
| verdaccio-config.yml | YAML | Verdaccioレジストリ設定ファイル |
| @angular/cli | npm | Angular CLI |

## 出力仕様

### 出力データ

| 出力先 | 形式 | 説明 |
|-------|------|------|
| ビルド成果物 | dist/ | Angularビルド出力 |
| テスト結果 | 標準出力 | テストスイート実行結果 |
| 一時ディレクトリ | ディレクトリ | tmp/ngx |

### 出力ファイル仕様

| 項目 | 内容 |
|-----|------|
| ファイル名 | dist/配下のビルド成果物 |
| 出力先 | tmp/ngx/dist |
| 文字コード | UTF-8 |
| 区切り文字 | 該当なし |

## 処理フロー

### 処理シーケンス

```
1. Verdaccio起動
   └─ startLocalRegistry
2. 一時ディレクトリ作成
   └─ mkdir tmp && cd tmp
3. Angularプロジェクト作成
   └─ npx -p @angular/cli ng new --defaults ngx --package-manager yarn --skip-git --skip-install
4. resolutionsバンプ
   └─ node bump-babel-dependencies.js resolutions
5. Yarn stable設定
   └─ touch yarn.lock && yarn set version stable
6. 環境変数設定
   └─ export YARN_ENABLE_IMMUTABLE_INSTALLS=false
7. 依存関係インストール
   └─ yarn install
8. Playwrightセットアップ
   └─ yarn add playwright @vitest/browser-playwright --dev
   └─ yarn playwright install --with-deps
9. ビルド実行
   └─ yarn run build
10. テスト実行
    └─ yarn run ng test --watch=false --browsers ChromiumHeadless
11. クリーンアップ
    └─ cleanup
```

### フローチャート

```mermaid
flowchart TD
    A[バッチ開始] --> B[Verdaccio起動]
    B --> C[一時ディレクトリ作成]
    C --> D[ng new でプロジェクト作成]
    D --> E[resolutionsバンプ]
    E --> F[Yarn stable設定]
    F --> G[yarn install]
    G --> H[Playwrightセットアップ]
    H --> I[yarn run build]
    I --> J{ビルド成功?}
    J -->|Yes| K[ng test実行]
    J -->|No| L[エラーログ出力]
    K --> M{テスト成功?}
    M -->|Yes| N[クリーンアップ]
    M -->|No| L
    L --> N
    N --> O[バッチ終了]
```

## データベース操作仕様

### 操作別データベース影響一覧

本バッチではデータベース操作は行わない。

| 処理 | 対象テーブル | 操作種別 | 概要 |
|-----|-------------|---------|------|
| - | - | - | データベース操作なし |

### テーブル別操作詳細

該当なし

## エラー処理

### エラーケース一覧

| エラーコード | エラー種別 | 発生条件 | 対処方法 |
|------------|----------|---------|---------|
| ERR_INIT | プロジェクト作成エラー | ng new失敗 | Angular CLIバージョンを確認 |
| ERR_YARN | 依存関係エラー | yarn install失敗 | package.jsonと依存関係を確認 |
| ERR_VERDACCIO | レジストリエラー | Verdaccio起動失敗 | ポート4873の使用状況を確認 |
| ERR_BUILD | ビルドエラー | yarn run build失敗 | ビルドログを確認 |
| ERR_TEST | テストエラー | ng test失敗 | テストログとブラウザ設定を確認 |
| ERR_PLAYWRIGHT | ブラウザエラー | Playwright設定失敗 | ブラウザインストール状況を確認 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし |
| リトライ間隔 | - |
| リトライ対象エラー | - |

### 障害時対応

1. GitHub Actionsのログを確認し、エラー発生箇所を特定
2. Angular CLIのバージョンとBabelの互換性を確認
3. Playwrightのブラウザインストール状況を確認
4. 必要に応じてワークフローを手動で再実行

## トランザクション仕様

| 項目 | 内容 |
|-----|------|
| トランザクション範囲 | 該当なし |
| コミットタイミング | - |
| ロールバック条件 | エラー発生時はcleanup関数でクリーンアップ |

## パフォーマンス要件

| 項目 | 内容 |
|-----|------|
| 想定処理件数 | 1プロジェクトのビルド・テスト |
| 目標処理時間 | 15分以内 |
| メモリ使用量上限 | GitHub Actions標準ランナーの制限内 |

## 排他制御

- 同一ワークフロー・同一refに対する重複実行はキャンセル

## ログ出力

| ログ種別 | 出力タイミング | 出力内容 |
|---------|--------------|---------|
| 開始ログ | バッチ開始時 | スクリプト実行開始 |
| 進捗ログ | 処理中 | 各コマンドの実行内容（set -xによるトレース） |
| ビルドログ | ビルド中 | Angularビルド出力 |
| テストログ | テスト中 | Karma/Jasmine出力 |
| 終了ログ | バッチ終了時 | "Exiting without error." |
| エラーログ | エラー発生時 | エラー詳細 |

## 監視・アラート

| 監視項目 | 閾値 | アラート先 |
|---------|-----|----------|
| ジョブ実行時間 | 60分 | GitHub Actions |
| ジョブ失敗 | 失敗時 | プルリクエストステータス |

## 備考

- ng newオプション：
  - --defaults: デフォルト設定を使用
  - --package-manager yarn: Yarnを使用
  - --skip-git: Git初期化をスキップ
  - --skip-install: 初期インストールをスキップ
- Yarn stable版に更新（yarn set version stable）
- YARN_ENABLE_IMMUTABLE_INSTALLS=falseでlockfile変更を許可
- Playwrightを使用したChromiumHeadlessブラウザでのテスト実行
- @vitest/browser-playwrightをテスト依存関係として追加
- --watch=falseでCIモードのテスト実行
