Angularjsのユニットとエンドテスト - SitePoint-jsチュートリアル-php.cn

Angularjsのユニットとエンドテスト - SitePoint

尊渡假赌尊渡假赌尊渡假赌

リリース： 2025-02-22 10:17:13

オリジナル

966 人が閲覧しました

Unit and End to End Testing in AngularJS - SitePoint

キーポイント

angularjsのユニットテストとエンドツーエンド（E2E）テストにジャスミンとカルマを使用して、コードの信頼性を確保し、開発の初期にエラーを検出します。
独立したコードスニペットを検証するために、コントローラー、命令、フィルター、工場などのAngularJSコンポーネントのユニットテストの書き込み。
エンドツーエンド（E2E）テストを実装して、AngularJSアプリケーションでのコンポーネントの統合を検証して、実際のシナリオで期待どおりに機能するようにします。
単体テストでモックとスパイを使用して、機能的および分離するテスト環境をシミュレートします。これは、LocalStorageなどの外部リソースと相互作用するサービスや工場に特に役立ちます。

ユニットテストは、開発者が独立したコードスニペットを検証するのに役立つ手法です。エンドツーエンド（E2E）テストを使用して、コンポーネントのセットが統合された後に期待どおりに機能するかどうかを判断します。 AngularJSは、単体テストとE2Eテストを完全にサポートする最新のJavaScript MVCフレームワークです。角度アプリケーションを開発しながらテストを作成すると、時間を大幅に節約できます。そうしないと、予期しないエラーの修正で無駄になります。このチュートリアルでは、角度アプリケーションにユニットテストとE2Eテストを含める方法について説明します。このチュートリアルでは、AngularJSの開発に精通していることを前提としています。また、角度アプリケーションを構成するさまざまなコンポーネントに精通している必要があります。ジャスミンをテストフレームワークとして、カルマをテストランナーとして使用します。 Yeomanを使用してプロジェクトを簡単に構築したり、GithubからAngular Seedアプリケーションを直接入手できます。テスト環境がない場合は、次の手順に従ってください。1。node.jsをダウンロードしてインストールします（まだない場合）。 2。NPM（NPMインストール-Gカルマ）を使用してKarmaをインストールします。 3. githubからこのチュートリアルのデモアプリケーションをダウンロードして、それを解凍します。

解凍されたアプリケーションでは、テスト/ユニットとテスト/E2Eディレクトリのテストを見つけることができます。ユニットテストの結果を表示するには、Scripts/test.batを実行するだけでKarmaサーバーが起動します。主なHTMLファイルはApp/Notes.htmlで、

https://www.php.cn/link/1d7466dd4217d4f000c48e9f2cdbfce9からアクセスできます。

ユニットテストの初心者

単体テストの書き込みを見るだけでなく、単純な角度アプリケーションを構築し、ユニットテストが開発プロセスにどのように適合するかを確認します。それでは、アプリケーションから始めて、個々のコンポーネントにユニットテストを同時に適用しましょう。このセクションでは、ユニットテストの実行方法を学びます。-コントローラー - 命令 - フィルター - ファクトリー

非常に簡単なTo Do Notesアプリケーションを構築します。タグには、ユーザーが簡単なメモを書くことができるテキストフィールドが含まれます。ボタンが押されたときにメモリストにメモが追加されます。 HTML5ローカルストレージを使用してメモを保存します。最初のHTMLタグを以下に示します。ブートストラップは、レイアウトをすばやく構築するために使用されます。

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <🎜>
    <🎜>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css"/>
    <🎜>
    <style>
      .center-grey{
             background:#f2f2f2;
             margin-top:20;
      }
      .top-buffer {
              margin-top:20px; 
      }
      button{
              display: block; 
              width: 100%;
      }
    </style>
    <title>Angular Todo Note App</title>
</head>
<body>
    <div class="container center-grey" ng-controller="TodoController">
      <div class="row top-buffer" >
        <div class="col-md-3"></div>
        <div class="col-md-5">
          <input class="form-control" type="text" ng-model="note" placeholder="Add a note here"/> 
        </div>
        <div class="col-md-1">
          <button ng-click="createNote()" class="btn btn-success">Add</button>
        </div>
        <div class="col-md-3"></div>
      </div>
      <div class="row top-buffer" >
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <ul class="list-group">
            <li ng-repeat="note in notes track by $index" class="list-group-item">
              {{note}}
            </li>
          </ul>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
</body>
</html>

ログイン後にコピー

上記のマークに示すように、角度モジュールはTODOAPPであり、コントローラーはTodocontrollerです。入力テキストはノートモデルにバインドされています。追加されたすべてのメモのリストもあります。さらに、ボタンがクリックされると、TodocontrollerのCreateNote（）関数が実行されます。次に、付属のapp.jsファイルを開き、モジュールとコントローラーを作成しましょう。次のコードをapp.jsに追加します

var todoApp = angular.module('todoApp',[]);

todoApp.controller('TodoController', function($scope, notesFactory) {
  $scope.notes = notesFactory.get();
  $scope.createNote = function() {
    notesFactory.put($scope.note);
    $scope.note = '';
    $scope.notes = notesFactory.get();
  }
});

todoApp.factory('notesFactory', function() {
  return {
    put: function(note) {
      localStorage.setItem('todo' + (Object.keys(localStorage).length + 1), note);
    },
    get: function() {
      var notes = [];
      var keys = Object.keys(localStorage);

      for(var i = 0; i < keys.length; i++) {
        notes.push(localStorage.getItem(keys[i]));
      }

      return notes;
    }
  };
});

ログイン後にコピー

私たちのTodocontrollerは、NoteFactoryという工場を使用してメモを保存して取得します。 CreateNote（）関数が実行されると、工場を使用してメモをLocalStorageに入れてから、ノートモデルをクリアします。したがって、Todocontrollerをユニットテストしている場合は、コントローラーが初期化されたときに、スコープに一定数のメモが含まれていることを確認する必要があります。 scoped createNote（）関数を実行した後、メモの数は以前の数よりも1つになる必要があります。単体テストコードを以下に示します。

...（後続のコンテンツは入力テキストに似ています。スペースの制限のため、残りのコードと説明の部分はここで省略されています。これは、入力テキストの書き直しであり、元の意味を維持することに注意してください。いくつかのステートメントを実行し、擬似オリジナルの目的を達成するための代替と文の調整

以上がAngularjsのユニットとエンドテスト - SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。