这应该是一个非常简单的问题,我希望…我是一个角色的新手,和一个新手写作测试的整个过程.
这是我的控制器
angular
.module('myModule',[])
.controller('myCtrl',['$scope',function ($scope) {
$scope.questionIndex = -1;
$scope.text = "Hello world";
}]);
我的观点(index.html)如下：
<div id="text">{{ text }}</div>
这是我的测试,这是罚款：
describe('Controller: myCtrl',function () {
// load the controller's module
beforeEach(module('myApp'));
var MainCtrl,scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller,$rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('myCtrl',{
$scope: scope
});
}));
it('should have the initial question index set to -1',function () {
expect(scope.questionIndex).toBe(-1);
});
});
现在我想写一个测试来检查文本元素是否实际呈现给页面.
我如何在茉莉花中做到这一点？对不起,这可能是一个愚蠢的问题,但我无法从文档中找出来.
我会给你两个答案你的问题：
首先：在视图中测试绑定应该在端到端(E2E)测试中完成.并且使用端对端测试来确保控制器,模型和视图按预期一起工作,同时适当地集成您的后端(如果您有).这是你测试给定的div有预期文本的地方.您可以在开发人员指南here中阅读所有内容.您使用E2E测试的原因是因为绑定不是您的控制器的真正责任.控制器处理/操纵模型.然后将模型传递给视图,然后使用该模型渲染DOM元素是视图的责任.测试DOM元素的唯一可靠方法是通过E2E测试.
第二：实际上可以在单元测试中完成,但是这样做的方式并不完美.您可以使用角度的$compile服务来做到这一点.这个服务是什么角度用来解析DOM,并将所有绑定/指令/ etc转换成最终产品.这是一个如何做的例子：
var scope,compile,elem;
beforeEach(inject(function ($controller,$rootScope,$compile) {
scope = $rootScope.$new();
compile = $compile;
MainCtrl = $controller('myCtrl',{
$scope: scope
});
}));
it('should set the div content to "' + scope.text + '"',function(){
var html = '<div id="text">{{ text }}</div>';
elem = angular.element(html); // turn html into an element object
compile(elem)(scope); // compile the html
scope.$digest(); // update the scope
expect(elem.text()).toBe(scope.text); //test to see if it was updated.
});
有关此第二个选项的更多信息,请参阅here发现的详细教程.希望有帮助.
