タグ別アーカイブ: AngularJS

Protractor で AngularJS を e2e テストする

はじめに

 前回AngularJS チュートリアルStep2 にあるテストを実行ました。
 今回は Step3 にある、e2e テストを実行してみたいと思います。

 e2e テスト実行環境について、はじめに簡単に構成を整理します。
 Webdriver Manager は e2e テストで使用されるブラウザを管理します (Protractor からの指示により、Angular アプリの URL を取得して実行)。プロジェクトとは独立して動作します。
 Protractor はテストコードに従い、Webdriver Manager に接続してブラウザを操作しながらテストを実行します(テストコードに従い、Webdriver Manager に指示を出しながらテストを実行)。デフォルトで Jasmine フレームワークを使う設定になっていますので、karma を使った単体テストと同様の書き方ができます。
 あと、テスト対象のアプリに HTTP(S) でアクセスできるよう、Webサーバーにアップロードしたり、簡易 Web サーバーを起動したりする必要があります。本投稿では Python の SimpleHTTPServer モジュールを使用して、プロジェクトのベースディレクトリで簡易 Web サーバーを起動することにします。

 3 つのコンポーネントが出てきましたが、下記のような構成を想定しています。
・CentOS 上のターミナルで常時起動しておく… Webdriver Manager、簡易 Web サーバー
・手元の開発環境から SSH 経由のターミナルなどで都度実行する … Protractor

 大まかな流れは下記のとおりです。

  • Webdriver Manager と Protractor のインストール
  • Webdriver Manager 起動
  • 簡易 Web サーバー起動
  • e2e テストコード作成
  • e2e テスト実行
続きを読む

karma + Jasmine で AngularJS を TDD する

はじめに

 AngularJS 公式サイトにあるチュートリアル AngularJS PhoneCat Tutorial AppStep2 で Jasmine なテストコードが出てきますが、その記事だけではゼロからテストを実行できないので、今回はこれを実行するまでの手順を明確にしてみたいと思います。
 チュートリアルではテンプレートに関する話題になっていますが、テストコードはコントローラーがきちんと 3 つの Phones を出力できているか、という点をテストしています。
 また、チュートリアルでは実装を先にしていますが、本投稿ではディレクトリ・ファイル構成のスケルトン (空ファイル) の状態からはじめて、TDD で進めたいと思います。はやる気持ちを抑えて、ソースコード、テストコードはまだ書かないでください。
 Jasmine 実行環境はこちらを参考に準備しておきます。

 本投稿での大まかな流れは下記のとおりです。

  • プロジェクトの作成
  • ソース監視の開始
  • テストコード作成と実装
続きを読む