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

Heim

Web-Frontend

js-Tutorial

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

高洛峰

Dec 09, 2016 am 09:33 AM

angular.js

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

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Repo: Wie man Teamkollegen wiederbelebt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

3 Wochen vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7345

Java-Tutorial

1627

CakePHP-Tutorial

1352

Laravel-Tutorial

1265

PHP-Tutorial

1214

Related knowledge

Angular Learning spricht über eigenständige Komponenten (Standalone Component) Dec 19, 2022 pm 07:24 PM

Dieser Artikel wird Sie dabei unterstützen, Angular weiter zu lernen und die eigenständige Komponente (Standalone Component) in Angular kurz zu verstehen. Ich hoffe, er wird Ihnen hilfreich sein!

Detaillierte Erläuterung des Angular Learning State Managers NgRx May 25, 2022 am 11:01 AM

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Angular-Statusmanagers NgRx und stellt Ihnen die Verwendung von NgRx vor. Ich hoffe, er wird Ihnen hilfreich sein!

Was soll ich tun, wenn das Projekt zu groß ist? Wie teilt man Angular-Projekte sinnvoll auf? Jul 26, 2022 pm 07:18 PM

Das Angular-Projekt ist zu groß. Wie kann man es sinnvoll aufteilen? Der folgende Artikel zeigt Ihnen, wie Sie Angular-Projekte sinnvoll aufteilen. Ich hoffe, er ist hilfreich für Sie!

Lassen Sie uns darüber sprechen, wie Sie das Angular-DateTime-Picker-Format anpassen Sep 08, 2022 pm 08:29 PM

Wie kann ich das Angular-DateTime-Picker-Format anpassen? Im folgenden Artikel geht es um die Anpassung des Formats. Ich hoffe, er ist für alle hilfreich!

Eine kurze Analyse unabhängiger Komponenten in Angular und deren Verwendung Jun 23, 2022 pm 03:49 PM

Dieser Artikel führt Sie durch die unabhängigen Komponenten in Angular, wie Sie eine unabhängige Komponente in Angular erstellen und wie Sie vorhandene Module in die unabhängige Komponente importieren. Ich hoffe, er wird Ihnen hilfreich sein!

Eine Schritt-für-Schritt-Anleitung zum Verständnis der Abhängigkeitsinjektion in Angular Dec 02, 2022 pm 09:14 PM

Dieser Artikel führt Sie durch die Abhängigkeitsinjektion, stellt die durch die Abhängigkeitsinjektion gelösten Probleme und ihre native Schreibmethode vor und spricht über das Abhängigkeitsinjektions-Framework von Angular. Ich hoffe, es wird Ihnen hilfreich sein!

Angulars :host-, :host-context- und ::ng-deep-Selektoren May 31, 2022 am 11:08 AM

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis mehrerer spezieller Selektoren in Angular: host, :host-context, ::ng-deep. Ich hoffe, er wird Ihnen hilfreich sein!

Vertiefte Kenntnisse von NgModule (Modul) in Angular Sep 05, 2022 pm 07:07 PM

Das NgModule-Modul ist ein wichtiger Punkt in Angular, da der Grundbaustein von Angular NgModule ist. Dieser Artikel führt Sie durch das NgModule-Modul in Angular. Ich hoffe, er wird Ihnen hilfreich sein!

See all articles