Heim > Artikel > Web-Frontend > So testen Sie den Angular.js-Controller in einer Einheit

So testen Sie den Angular.js-Controller in einer Einheit

高洛峰Original: 2016-12-09 09:33:401167Durchsuche

1. Schreiben Sie eine einfache Angular-App

Bevor wir mit dem Schreiben des Tests beginnen, schreiben wir zunächst eine einfache Berechnungs-App, die die Summe zweier Zahlen berechnet.

Der Code lautet wie folgt:

<html>
 <head>
 <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
 </head>
 <body>
 <!-- This div element corresponds to the CalculatorController we created via the JavaScript-->
 <div ng-controller="CalculatorController">
  <input ng-model="x" type="number">
  <input ng-model="y" type="number">
  <strong>{{z}}</strong>
  <!-- the value for ngClick maps to the sum function within the controller body -->
  <input type="button" ng-click="sum()" value="+">
 </div>
 </body>
 <script type="text/javascript">
 
 // Creates a new module called &#39;calculatorApp&#39;
 angular.module(&#39;calculatorApp&#39;, []);
 
 // Registers a controller to our module &#39;calculatorApp&#39;.
 angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, function CalculatorController($scope) {
  $scope.z = 0;
  $scope.sum = function() {
  $scope.z = $scope.x + $scope.y;
  };
 });
 
 // load the app
 angular.element(document).ready(function() {
  angular.bootstrap(document, [&#39;calculatorApp&#39;]);
 });
 
 </script>
</html>

2. Sprechen Sie kurz über einige grundlegende Konzepte beteiligt:

Erstellen Sie ein Modul

Was ist angle.module? Es ist ein Ort zum Erstellen und Recyceln von Modulen. Wir erstellen ein neues Modul namens „calculatorApp“ und fügen die Komponente zu diesem Modul hinzu.

angular.module(&#39;calculatorApp&#39;, []);

Über den zweiten Parameter? Der zweite Parameter ist erforderlich und zeigt an, dass wir ein neues Modul erstellen. Wenn unsere Anwendung andere Abhängigkeiten benötigt, können wir diese übergeben ['ngResource', 'ngCookies']. Das Vorhandensein des zweiten Parameters zeigt an, dass es sich um eine Instanz des von der Anfrage zurückgegebenen Moduls handelt.

Konzeptionell bedeutet es etwa Folgendes:

* angular.module.createInstance(name, requires);
* angular.module.getInstance(name)

Eigentlich schreiben wir es jedoch so: >

* angular.module(&#39;calculatorApp&#39;, []); // i.e. createInstance
* angular.module('calculatorApp'); // i.e. getInstance

Weitere Informationen zum Modul https://docs.angularjs.org/api/ng/function/angular.module

2. Controller hinzufügen

zum Modul. Dann fügen wir einen Controller

angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, function CalculatorController($scope) {
 $scope.z = 0;
 $scope.sum = function() {
 $scope.z = $scope.x + $scope.y;
 };
});

zum Winkelmodul hinzu.

Der Controller ist hauptsächlich für die Geschäftslogik verantwortlich ist an die Ansicht gebunden und $scope ist der direkte Bote zum Controller der Ansicht.

3. Verbinden Sie die Elemente in der Ansicht

Im folgenden HTML müssen wir den Wert in der Eingabe berechnen, und diese sind im div dieses Controllers enthalten.

<div ng-controller="CalculatorController">
 <input ng-model="x" type="number">
 <input ng-model="y" type="number">
 <strong>{{z}}</strong>
 <!-- the value for ngClick maps to the sum function within the controller body -->
 <input type="button" ng-click="sum()" value="+">
</div>

Der an ng-model in der Eingabe gebundene Wert wird auf $scope wie $scope.x definiert, das wir auch im Schaltflächenelement verwenden ng-click ist an die Methode $scope.sum gebunden.

3. Tests hinzufügen

Als nächstes kommen wir endlich zu unserem Thema, dem Hinzufügen einiger Unit-Tests zum Controller. Wir ignorieren den HTML-Teil des Codes und konzentrieren uns hauptsächlich auf den Controller-Code .

angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, function CalculatorController($scope) {
 $scope.z = 0;
 $scope.sum = function() {
 $scope.z = $scope.x + $scope.y;
 };
});

Um den Controller zu testen, müssen wir folgende Punkte erwähnen? + So erstellen Sie eine Controller-Instanz + So erhalten/setzen Sie die Eigenschaften eines Objekts + So rufen Sie Funktionen in $scope auf

describe(&#39;calculator&#39;, function () {
 
 beforeEach(angular.mock.module(&#39;calculatorApp&#39;));
 
 var $controller;
 
 beforeEach(angular.mock.inject(function(_$controller_){
 $controller = _$controller_;
 }));
 
 describe(&#39;sum&#39;, function () {
 it(&#39;1 + 1 should equal 2&#39;, function () {
  var $scope = {};
  var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });
  $scope.x = 1;
  $scope.y = 2;
  $scope.sum();
  expect($scope.z).toBe(3);
 });
 });
 
});

Bevor wir beginnen , wir müssen ngMock einführen. Wir haben angle.mock

zum Testcode hinzugefügt. Das ngMock-Modul bietet einen Mechanismus zum Unit-Testen virtueller Dienste.

4. So erhalten Sie die Instanz des Controllers

Mit ngMock können wir eine Taschenrechner-App-Instanz registrieren.

beforeEach(angular.mock.module(&#39;calculatorApp&#39;));

Sobald die RechnerApp initialisiert ist, können wir die Injektionsfunktion verwenden, die das Controller-Referenzproblem lösen kann.

beforeEach(angular.mock.inject(function(_$controller_) {
 $controller = _$controller_;
}));

Sobald die App geladen ist, verwenden wir die Injektionsfunktion und der $controller-Dienst kann eine Instanz von CalculatorController abrufen.

var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });

5. So erhalten/setzen Sie die Attribute eines Objekts

Im vorherigen Code können wir bereits erhalten an Für die Instanz des Controllers ist der zweite Parameter in den Klammern tatsächlich der Controller selbst. Unser Controller hat nur einen Parameter $scope-Objekt

function CalculatorController($scope) { ... }

In Unser Test-$scope stellt ein einfaches JavaScript-Objekt dar.

var $scope = {};
var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });
// set some properties on the scope object
$scope.x = 1;
$scope.y = 2;

Wir legen die Werte von x und y fest, um zu simulieren, was gerade im GIF angezeigt wird. Wir sind uns einig, dass wir auch die Eigenschaften im Objekt lesen können, genau wie die Behauptung im folgenden Test:

expect($scope.z).toBe(3);

6. So rufen Sie Funktionen auf $scope

Das Letzte ist, wie wir den Klick des Benutzers simulieren, genau wie wir es in den meisten JS verwenden. Tatsächlich handelt es sich nur um eine einfache Aufruffunktion,

$scope.sum();

So testen Sie den Angular.js-Controller in einer Einheit

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der JavaScript-PrototypeneigenschaftNächster Artikel：Detaillierte Erläuterung der JavaScript-Prototypeneigenschaft

In Verbindung stehende Artikel

Mehr sehen