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

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

高洛峰

Freigeben： 2016-12-09 09:33:40

Original

1218 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;, []);

Nach dem Login kopieren

Ü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)

Nach dem Login kopieren

Eigentlich schreiben wir es jedoch so: >

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

Nach dem Login kopieren

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;
 };
});

Nach dem Login kopieren

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>

Nach dem Login kopieren

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;
 };
});

Nach dem Login kopieren

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);
 });
 });
 
});

Nach dem Login kopieren

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;));

Nach dem Login kopieren

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_;
}));

Nach dem Login kopieren

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 });

Nach dem Login kopieren

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) { ... }

Nach dem Login kopieren

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;

Nach dem Login kopieren

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);

Nach dem Login kopieren

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();

Nach dem Login kopieren

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