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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

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

Feb 22, 2025 am 10:17 AM

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles