# 画面設計書 5-v1テストスイート

## 概要

本ドキュメントは、CoffeeScript 1.x系のブラウザベーステスト画面（docs/v1/test.html）の画面設計書です。v1系コンパイラの各種機能をブラウザ上でテストし、結果を表示します。

### 本画面の処理概要

**業務上の目的・背景**：
CoffeeScript 1.x系コンパイラの品質を保証するため、ブラウザ環境でのテスト実行機能を提供します。v1系を使用している既存プロジェクトのメンテナンスや、v1系固有の動作確認に使用されます。レガシー環境でのコンパイラ動作を検証します。

**画面へのアクセス方法**：
v1ドキュメントページからのリンク、または直接 /v1/test.html にアクセスすることで表示されます。

**主要な操作・処理内容**：
1. ページ読み込み時に自動的にテストを開始
2. text/coffeescript および text/x-literate-coffeescript タイプのscriptタグを実行
3. 各テストケースの成功/失敗を表示
4. テスト完了後にサマリーを表示

**画面遷移**：
- このページに遷移してくる画面: v1ドキュメントページ
- このページから遷移できる画面: なし

**権限による表示制御**：
特になし。全ユーザーがアクセス可能です。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 51 | ブラウザコンパイラ | 主機能 | v1コンパイラでテストコードをブラウザ上で実行 |
| 53 | scriptタグ実行 | 主機能 | text/coffeescriptタイプのscriptタグを自動コンパイル・実行 |
| 1 | CoffeeScript コンパイル | 主機能 | テストコードのコンパイルと実行 |

## 画面種別

テスト実行 / 結果表示画面

## URL/ルーティング

- パス: `/v1/test.html`
- ファイル: `docs/v1/test.html`（ビルド済み静的HTML）

## 入出力項目

本画面は自動実行されるため、ユーザー入力項目はありません。

| 項目名 | 種別 | データ型 | 必須 | 説明 |
|--------|------|---------|------|------|
| テストコード | 入力（自動） | CoffeeScript | - | scriptタグ内のテストコード |
| テスト結果 | 出力 | HTML | - | 各テストケースの成功/失敗表示 |

## 表示項目

| 表示項目 | データソース | 表示形式 | 説明 |
|---------|-------------|---------|------|
| タイトル | 固定 | H1 | "CoffeeScript Test Suite" |
| テスト結果エリア | 動的生成 | pre#stdout | テスト結果を順次表示 |
| 成功結果 | 動的生成 | div.good | 緑色(#22b24c)で成功メッセージ |
| 失敗結果 | 動的生成 | div.bad | 赤色(#eb6864)でエラー詳細 |

## イベント仕様

### 1-ページ読み込み・テスト開始

v1コンパイラの自動実行機能によりテストが開始されます。

- トリガー: ページ読み込み完了
- 処理:
  1. browser-compiler/coffee-script.js の読み込み
  2. text/coffeescriptタイプのscriptタグを検出
  3. 各スクリプトを順次コンパイル・実行
- 備考: v1系ではDOMContentLoadedを待たずに自動実行

### 2-テストケース実行

各テストスクリプトの実行と結果の記録を行います。

- トリガー: test()関数の呼び出し
- 処理:
  1. テスト関数を実行
  2. 成功時: success++
  3. 失敗時: エラーメッセージを表示、コンソールに出力

### 3-テスト完了・サマリー表示

全テスト完了後にサマリーを表示します。

- トリガー: 全テストスクリプトの実行完了
- 処理: "passed X tests in Y seconds" を表示

## データベース更新仕様

該当なし

## メッセージ仕様

| メッセージID | 種別 | メッセージ内容 | 表示条件 |
|-------------|------|---------------|---------|
| TEST_PASSED | 成功 | passed X tests in Y.ZZ seconds | 全テスト成功時 |
| TEST_FAILED | 失敗 | failed X tests and passed Y tests in Z seconds | テスト失敗時 |

## 例外処理

| 例外状況 | 処理内容 |
|---------|---------|
| コンパイルエラー | エラーメッセージをbadクラスで表示 |
| アサーション失敗 | エラー詳細を表示、console.errorに出力 |

## 備考

- v2テストスイートと比較して、非同期テスト（Promise）のサポートがない
- v1系専用のbrowser-compiler/coffee-script.jsを使用
- Underscore.jsを使用してdeepEqual比較を実装
- テストヘルパー関数（test, ok, eq, arrayEq, throws, doesNotThrow）を定義

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

v1テストフレームワークの構造を理解します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | test.html | `docs/v1/test.html` | テストフレームワークのグローバル変数と関数 |

**読解のコツ**: v1系はv2系と比較してシンプルな構造で、非同期テストサポートがありません。

#### Step 2: テスト実行フローを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | test.html | `docs/v1/test.html` | test(), ok(), eq()関数の実装 |

**主要処理フロー**:
- **行39-51**: グローバル変数初期化（testingBrowser, stdout, success, total等）
- **行53-62**: test()関数 - テストケースの実行と結果記録
- **行64-65**: ok()関数 - 条件チェック
- **行90-91**: eq()関数 - 値の比較
- **行127-131**: サマリー表示

### プログラム呼び出し階層図

```
docs/v1/test.html
    |
    +-- browser-compiler/coffee-script.js (v1)
    |
    +-- Underscore.js (CDN)
    |
    +-- メインテストスクリプト
    |       |
    |       +-- グローバル変数初期化
    |       +-- test(), ok(), eq() 定義
    |
    +-- テストスクリプト (class="test")
            |
            +-- CoffeeScript.run()
            +-- test(description, fn)
                    |
                    +-- fn() 実行
                    +-- 成功/失敗の記録
```

### データフロー図

```
[入力]                    [処理]                          [出力]

テストスクリプト          v1 CoffeeScript                 JavaScript実行
(scriptタグ)    -------> .run()           ------------>
                              |
                              v
                         test(desc, fn)
                              |
                              +----> 成功 -----> success++ -----> div.good表示
                              |
                              +----> 失敗 -----> console.error --> div.bad表示
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| test.html | `docs/v1/test.html` | HTML | v1テストスイートページ |
| coffee-script.js | `docs/v1/browser-compiler/coffee-script.js` | 生成コード | v1系ブラウザコンパイラ |
| underscore-min.js | CDN | 外部ライブラリ | deepEqual比較用 |
