对Angular.js Controller如何进行单元测试
一、写个简单的Angular App
在开始写测试之前，我们先写一个简单的计算App,它会计算两个数字之和。
代码如下：
<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 'calculatorApp'
angular.module('calculatorApp', []);
// Registers a controller to our module 'calculatorApp'.
angular.module('calculatorApp').controller('CalculatorController', 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, ['calculatorApp']);
});
</script>
</html>
二、简单说说里面涉及的一些基本概念:
创建一个 module
什么是angular.module？它是用于创建，回收模块的地方 。我们创建一个名为calculatorApp新的模块，我们并将组件添加到这个模块里。
angular.module('calculatorApp', []);
关于第二个参数？第二个参数必须的，表明我们正在创造一个新的模块。如果需要我们的应用程序有其他的依赖，我们可以将它们['ngResource'，'ngCookies']传入进去。 第二个参数的存在的表示这是一个请求返回的模块的实例。
从概念上讲，它本意是类似下面的意思:
* angular.module.createInstance(name, requires); * angular.module.getInstance(name)
然而实际我们是这样写的:
* angular.module('calculatorApp', []); // i.e. createInstance
* angular.module('calculatorApp'); // i.e. getInstance
关于module的更多信息 https://docs.angularjs.org/api/ng/function/angular.module
2.给module添加controller
接着我们给angular module的示例添加一个controller
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
控制器主要负责业务逻辑和视图绑定，$scope者是视图的控制器直线的信使。
3.连接视图中的元素
在下面 HTML 中，我们需要计算input里面的值，而这些都包含在这个controller的div中。
<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>
input 中的ng-model绑定的的值及时$scope上定义的比如$scope.x,我们还在button元素使用ng-click绑定了$scope.sum方法。
三、添加测试
接下来终于到了我们的主题，添加一些单元测试给controller,我们忽略代码中html部分，主要集中在controller的代码中。
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
为了测试 controller，我们还得提及下面几点？ + 如何创建一个controller实例 + 如何get/set一个对象的属性 + 如何调用$scope里面的函数
describe('calculator', function () {
beforeEach(angular.mock.module('calculatorApp'));
var $controller;
beforeEach(angular.mock.inject(function(_$controller_){
$controller = _$controller_;
}));
describe('sum', function () {
it('1 + 1 should equal 2', function () {
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
$scope.x = 1;
$scope.y = 2;
$scope.sum();
expect($scope.z).toBe(3);
});
});
});
开始前我们需要引入ngMock,我们在测试的代码加入angular.mock
,ngMock模块提供了一种机制进行诸如以及虚拟的service进行单元测试。
四、如何获取controller的实例
使用ngMock我们可以注册一个calculator app实例。
beforeEach(angular.mock.module('calculatorApp'));
一旦calculatorApp初始化后，我们可以使用inject函数，这样可以解决controller的引用问题。
beforeEach(angular.mock.inject(function(_$controller_) {
$controller = _$controller_;
}));
一旦app加载完了，我们使用了inject函数，$controller service可以获取 CalculatorController 的实例。
var controller = $controller('CalculatorController', { $scope: $scope });
五、如何get/set一个对象的属性
在上篇代码中我们已经可以获取一个controller的实例，在括号的第二个参数实际是controller自己，我们的controller只有一个参数 $scope对象
function CalculatorController($scope) { ... }
在我们的测试中$scope代表的就是一个简单的JavaScript对象。
var $scope = {};
var controller = $controller('CalculatorController', { $scope: $scope });
// set some properties on the scope object
$scope.x = 1;
$scope.y = 2;
我们设置x,y的值，模拟刚才的gif中的所展示的一样。我们同意也可以读取对象中的属性，就像下面这段测试的断言：
expect($scope.z).toBe(3);
六、如何调用$scope里面的函数
最后一件事情就是我们如何模拟用户的点击，就像我们在绝大多数JS中使用的一致，，其实就是简单的调用函数就行，
$scope.sum();
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
L'apprentissage angulaire parle de composants autonomes (Standalone Component)
Dec 19, 2022 pm 07:24 PM
Cet article vous amènera à continuer à apprendre Angular et à comprendre brièvement le composant autonome (Standalone Component) dans Angular. J'espère qu'il vous sera utile !
Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx
May 25, 2022 am 11:01 AM
Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !
Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ?
Jul 26, 2022 pm 07:18 PM
Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !
Parlons de la façon de personnaliser le format angulaire-datetime-picker
Sep 08, 2022 pm 08:29 PM
Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !
Une brève analyse des composants indépendants dans Angular et voir comment les utiliser
Jun 23, 2022 pm 03:49 PM
Cet article vous présentera les composants indépendants dans Angular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !
Un guide étape par étape pour comprendre l'injection de dépendances dans Angular
Dec 02, 2022 pm 09:14 PM
Cet article vous guidera à travers l'injection de dépendances, présentera les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et parlera du framework d'injection de dépendances d'Angular. J'espère qu'il vous sera utile !
Sélecteurs :host, :host-context, ::ng-deep d'Angular
May 31, 2022 am 11:08 AM
Cet article vous donnera une compréhension approfondie de plusieurs sélecteurs spéciaux dans Angular : host, :host-context, ::ng-deep. J'espère qu'il vous sera utile !
Compréhension approfondie de NgModule (module) en Angular
Sep 05, 2022 pm 07:07 PM
Le module NgModule est un point important dans Angular, car l'élément de base d'Angular est NgModule. Cet article vous fera découvrir le module NgModule dans Angular. J'espère qu'il vous sera utile !
