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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1422

Laravel チュートリアル

1316

PHP チュートリアル

1267

C# チュートリアル

1239

Related knowledge

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScript：Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合） Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

See all articles