12
मैं एक सरल निर्देश लागू कर रहा हूं जो एक फ़ील्ड फ़ील्ड का प्रतिनिधित्व करता है जिसमें लेबल, त्रुटि क्षेत्र, रेगेक्स सभी को एक ही पंक्ति में सभी एक्स्ट्रा कलाकारों के साथ प्रस्तुत किया जाता है।
निर्देश का पालन है:
<div ng-controller="parentController">
{{username}}
<!-- the directive -- >
<form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value">
</form-field>
</div>
अब, मैं डेटा निर्देश गुंजाइश और माता पिता के दायरे के बीच बंधन परीक्षण करना चाहते हैं।
परीक्षा है:
it("should bind input field to the scope variable provided by parent scope ! ", function() {
var formInput = ele.find('.form-input');
formInput.val("some input");
expect(ele.find('p').text()).toEqual('some input');
});
यह समस्या है कि मैं क्यों टेस्ट पास नहीं है पता नहीं है, यहां तक कि निर्देश ठीक से काम करता है। Here is a fiddle of the directive.
और यहां संपूर्ण परीक्षण और परीक्षण स्थापित है।
var formsModule = angular.module('forms', []);
formsModule.controller('parentController', function ($scope) {
});
formsModule.directive('formField', function() {
var label;
var constrainsViolationMessage;
var placeHolder;
var model;
return {
restrict:'E',
transclude:true,
replace:false,
scope:{
model:'='
},
link:function (scope, element, attr) {
console.log("link function is executed .... ");
scope.$watch('formInput', function (newValue, oldValue) {
console.log("watch function is executed .... !")
scope.model = newValue;
});
scope.label = attr.label;
},
template:'<div class="control-group ">' +
'<div class="form-label control-label">{{label}}</div> ' +
'<div class="controls controls-row"> ' +
'<input type="text" size="15" class="form-input input-medium" ng-model="formInput" placeholder="{{placeHolder}}">' +
'<label class="error" ng-show={{hasViolationConstrain}}>{{constrainsViolationMessage}}</label>' +
'</div>'
}
});
beforeEach(module('forms'));
var ele;
var linkingFunction;
var elementBody;
var scope;
var text = "";
var placeHolder = "filed place holder";
var label = "someLabel";
var regex = "^[a-z]{5}$";
beforeEach(inject(function ($compile, $rootScope) {
scope = $rootScope;
elementBody = angular.element('<div ng-controller="parentController">' +
'<p>{{username}}</p>' +
'<form-field label="Username:" regex="someRegex" constrainsViolationMessage="someValidationMessage" model="username" place-holder="some input value"> </form-field>');
ele = $compile(elementBody)(scope);
scope.$digest();
}
));
afterEach(function() {
scope.$destroy();
});
iit("should bind input field to the scope variable provided by parent scope ! ", function() {
var formInput = ele.find('.form-input');
formInput.val("some input");
expect(ele.find('p').text()).toEqual('some input');
});
आप देख सकते हैं, मुझे लगता है कि प्रपत्र इनपुट माता पिता गुंजाइश द्वारा प्रदान की 'मॉडल' विशेषता में गुंजाइश चर सेट में दिखाई देता है पर जोर देना चाहते हैं।
क्या मुझे यहां कुछ याद आ रही है? मेरी मदद करने के लिए धन्यवाद ...!
एक सरल कोणीय ऐप लिखने और एक साधारण कोणीय ऐप का परीक्षण करने के लिए आपको क्या जानने की आवश्यकता है, इसके बीच एक गंभीर मेल नहीं है। इसके लिए धन्यवाद! –