如何测试在Angularjs中包含文本字段的指令

我有一个包含文本字段的指令，并且我想测试以确保输入到字段的文本使它成为模型。如何测试在Angularjs中包含文本字段的指令

的指令：

define(function(require) { 
    'use strict'; 

    var module = require('reporting/js/directives/app.directives'); 
    var template = require('text!reporting/templates/text.box.tpl'); 

    module.directive('textField', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     template:template, 
     scope: { 
     textField : "=", 
     textBoxResponses : "=" 
     }, 
     link: function(scope) { 
     scope.debug = function() { 
      scope; 
      // debugger; 
     }; 
     } 
    }; 
    }); 

    return module; 
});

的标记：

<div ng-form name="textBox"> 
    <!-- <button ng-click="debug()">debug the text box button</button> --> 
    <h1>Text Box!</h1> 
    {{textField.label}} <input type="text" name="textBox" ng-model="textBoxResponses[textField.fieldName]">{{name}} 
</div>

测试代码：

/* global inject, expect, angular */ 

define(function(require){ 
    'use strict'; 
    require('angular'); 
    require('angularMock'); 
    require('reporting/js/directives/app.directives'); 
    require('reporting/js/directives/text.box.directive'); 

    describe("builder experimenter", function() { 
    var directive, scope; 
    beforeEach(module('app.directives')); 
    beforeEach(inject(function($compile, $rootScope) { 
     scope = $rootScope; 

     scope.textBoxResponses = {}; 
     scope.textBoxField = { 
     fieldName : "textBox1" 
     }; 
     directive = angular.element('<div text-field="textBoxField" text-box-responses="textBoxResponses"></div>'); 
     $compile(directive)(scope); 
     scope.$digest(); 


    })); 
    it('should put the text box value on the model', inject(function() { 
     directive.find(":text").val("something"); 
     expect(scope.textBoxResponses.textBox1).toBe("something"); 
    })); 
    }); 
});

那么，是什么我想在最后它块做的是模拟在文本字段中输入内容，然后检查以确保文本字段的新值使其成为模型。问题在于模型不会随新值更新。

来源

2014-02-26 Dane

问题是ng-model永远不会被告知任何内容在文本框中。 ng-model正在监听input事件。所有你需要做修复您的代码是：

var text = directive.find(":text"); 
    text.val("something"); 
    text.trigger('input'); 
    expect(scope.textBoxResponses.textBox1).toBe("something");

当ng-model获取事件input，然后检查你的范围，一切都将是你所期望的。

来源

2014-02-26 17:13:02 jhamm

很好的答案。在'expect（）'之前，因为输入指令的事件处理函数将调用包含到'ngModelCtrl。$ setViewValue（txt）'中，所以在'scope'中应用$ apply（）就不需要明确的'scope。$ digest （）'按需要 – Nikita

我通过使用嗅探器服务完成了这项工作。

你的测试将是这样的：

var sniffer; 
beforeEach(inject(function($compile, $rootScope, $sniffer) { 
    scope = $rootScope; 
    sniffer = $sniffer; 
    scope.textBoxResponses = {}; 
    scope.textBoxField = { 
    fieldName : "textBox1" 
    }; 
    directive = angular.element('<div text-field="textBoxField" text-box-responses="textBoxResponses"></div>'); 
    $compile(directive)(scope); 
    scope.$digest(); 
})); 
it('should put the text box value on the model', inject(function() { 
    directive.find(":text").val("something"); 
    directive.find(":text").trigger(sniffer.hasEvent('input') ? 'input' : 'change'); 
    expect(directive.isolateScope().textBoxResponses.textBox1).toBe("something"); 
}));

我在这里找到了此模式：angular-ui-bootstrap typeahead test

触发基本上使得角度值进入模型。

希望这会有帮助

来源

2014-02-26 18:08:31 JoelV

如何测试在Angularjs中包含文本字段的指令

回答

相关问题