suchen

Heim >Web-Frontend >js-Tutorial >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:401244Durchsuche

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.

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

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