自分の書いたコードの修正をしてもらったら、ちゃんとそれに対してテストをしてもらうようにテストコードも書いてもらいましょう。
普通にテストコードを依頼
- Nodejsなどは使わないで静的HTMLで確認できるような形で、このライブラリのテストコードを書いて。
テストコードは、test/フォルダ内に構築。
テストのやり方をtest/REARME.mdに記載して。
kiroは何も指示しないと、Nodejsベースでのテストを設計しがちなので、今回は静的HTMLのテストを書いてもらうように、無茶振りをしてみました。
すると、素敵な入り口ページが出来上がりました。
・・・なるほど、JSコードを使って、部分的なテストを書いてくれるんですね。
Focus Carousel - 基本機能テスト
テスト内容:
カルーセルの初期化
スクロール動作とフォーカスエフェクト
無限ループ機能
複数カルーセルの同時動作
Focus Carousel - オプション機能テスト
テスト内容:
無限ループのON/OFF
最小アイテム数の制限
カスタムオプションの適用
Focus Carousel - アクセシビリティテスト
テスト内容:
ARIA属性の確認
キーボード操作（Tab、矢印キー）
フォーカス管理
スクリーンリーダー対応
Focus Carousel - エッジケーステスト
テスト内容:
アイテム数が極端に少ない場合
アイテム数が極端に多い場合
画像なしのコンテンツ
Focus Carousel - レスポンシブテスト
テスト内容:
画面リサイズ時の動作
異なるビューポートサイズでの表示
中心位置の再計算
上記のように、かなりしっかりしたテストを構築してくれました。
そして、README.mdには、以下のように記述されていました。
# Focus Carousel テストガイド
このディレクトリには、Focus Carouselライブラリのテストファイルが含まれています。
## テスト環境
- Node.jsやビルドツール不要
- ブラウザで直接HTMLファイルを開くだけでテスト可能
- モダンブラウザ（Chrome、Firefox、Safari、Edge）推奨
## テストファイル一覧
### 1. test-basic.html
基本機能のテスト
- カルーセルの初期化
- スクロール動作
- フォーカスエフェクト
- 複数カルーセルの同時動作
### 2. test-options.html
設定オプションのテスト
- 無限ループのON/OFF
- 最小アイテム数の制限
- カスタムオプションの適用
### 3. test-accessibility.html
アクセシビリティのテスト
- キーボード操作（矢印キー）
- ARIA属性の確認
- フォーカス管理
- タブナビゲーション
### 4. test-edge-cases.html
エッジケースのテスト
- アイテム数が少ない場合（1-2個）
- アイテム数が多い場合（50個以上）
- 画像なしのテスト
- 異なるサイズのアイテム
### 5. test-responsive.html
レスポンシブ対応のテスト
- 画面リサイズ時の動作
- モバイルビューポート
- タブレットビューポート
- デスクトップビューポート
## テストの実行方法
### 方法1: ブラウザで直接開く
1. テストしたいHTMLファイルをブラウザにドラッグ&ドロップ
2. または、ファイルを右クリック → 「プログラムから開く」→ ブラウザを選択
### 方法2: ローカルサーバーを使用（推奨）
ES Modulesを使用しているため、ローカルサーバー経由での実行を推奨します。
#### Pythonを使用する場合:
```bash
# Python 3の場合
python3 -m http.server 8000
# Python 2の場合
python -m SimpleHTTPServer 8000
```
#### PHPを使用する場合:
```bash
php -S localhost:8000
```
#### VS Codeの場合:
Live Server拡張機能をインストールして使用
サーバー起動後、ブラウザで以下にアクセス:
```
http://localhost:8000/test/test-basic.html
```
## テストの確認項目
### 基本機能
- [ ] カルーセルが正しく表示される
- [ ] マウス/タッチでスクロールできる
- [ ] 中央のアイテムがフォーカスされる（拡大＋ぼかし解除）
- [ ] 無限ループが動作する
### キーボード操作
- [ ] Tabキーでカルーセルにフォーカスできる
- [ ] 左矢印キーで左にスクロールする
- [ ] 右矢印キーで右にスクロールする
### オプション機能
- [ ] infiniteLoop: false で無限ループが無効になる
- [ ] minItemsForLoop で最小アイテム数制限が機能する
### レスポンシブ
- [ ] 画面リサイズ時に正しく再計算される
- [ ] モバイルサイズで適切に表示される
### エッジケース
- [ ] アイテムが1個でもエラーが出ない
- [ ] アイテムが多数でもパフォーマンスが維持される
## デバッグ方法
### ブラウザの開発者ツールを使用
1. F12キーまたは右クリック → 「検証」で開発者ツールを開く
2. Consoleタブでエラーメッセージを確認
3. Elementsタブで DOM構造とARIA属性を確認
4. Networkタブでリソースの読み込みを確認
### テストページ内のコンソール
各テストページには、テスト結果を表示するコンソールが組み込まれています。
- ✓ 緑色: テスト成功
- ✗ 赤色: テスト失敗
- ℹ 青色: 情報メッセージ
## トラブルシューティング
### ES Moduleのエラーが出る場合
```
Access to script at 'file://...' from origin 'null' has been blocked by CORS policy
```
→ ローカルサーバーを使用してください（上記「方法2」参照）
### カルーセルが表示されない場合
1. ブラウザのコンソールでエラーを確認
2. 画像パスが正しいか確認
3. CSSファイルが正しく読み込まれているか確認
### キーボード操作が効かない場合
1. カルーセル要素にフォーカスがあるか確認（Tabキーで移動）
2. ブラウザのコンソールでエラーを確認
## ブラウザ互換性テスト
以下のブラウザでテストすることを推奨:
- Chrome（最新版）
- Firefox（最新版）
- Safari（最新版）
- Edge（最新版）
## 自動テストについて
現在は手動テストのみですが、将来的には以下の自動テストフレームワークの導入を検討:
- Playwright
- Cypress
- Jest + jsdom
## フィードバック
テストで問題を発見した場合は、以下の情報を含めて報告してください:
- 使用ブラウザとバージョン
- 再現手順
- 期待される動作
- 実際の動作
- エラーメッセージ（あれば）
Githubにpush済み
今回のテストコードを追加したコードは、Githubに更新しておきました。
focus_carousel
testフォルダを参照してみてください。
あとがき
もはや、テストはAIに任せた方が、抜け漏れなどがない上、かなり行きどいた構築をしてくれるので、正直エンジニアの効率化半端ないでしょう。
しかも、細かな指示も付け加えられる上、無茶振りも、文句一つ言わず対応してくれる。
今回は小さなライブラリのテストだったので、問題はなかったけど、もしかしたら、ここでもハルシネーション（AIが本当のように答える嘘）が起きる可能性もあるので、その対応は人の目と思考で確認するしかないですけどね。
でも、これを利用せずに今後のエンジニアリングは考えられないですね。
ちなみに、AIと言えば、一番メジャーなのが、ChatGPTだと思いますが、Kiroはプロジェクトファイル全てに対してAIがカバーしてくれるのがなんともWeb開発向きです。
0 件のコメント:
コメントを投稿