这应该是一个非常简单的问题,我希望…我是一个角色的新手,和一个新手写作测试的整个过程.
这是我的控制器
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发现的详细教程.希望有帮助.