Hi everyone,
I've created a small directive for creating a select box with all the
countries inside.
The directive code is as follow:
<select-country id="billingAddressCountry" name="billingAddressCountry"
class="form-control"
ng-model="account.billingAddress.country"></select-country>
My directive is defined like this:
angular.module('myApp').directive('selectCountry', ['$parse', function
($parse) {
return {
restrict: 'E',
template: '<select ng-options="country.value as country.name for
country in countries"></select>',
controller: ['$scope', 'countries', function($scope,
countriesService) {
$scope.countries = [];
angular.forEach(countriesService.getCountryCodes(),
function(countryCode) {
$scope.countries.push({value:countryCode,
name:countriesService.getCountryName(countryCode)});
});
// The countries are sorted in alphabetical order
$scope.countries.sort(function(a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
});
}],
replace: true,
link: function (scope, elem, attrs) {
if (!!attrs.ngModel) {
var assignCountry = $parse(attrs.ngModel).assign;
elem.bind('change', function (e) {
assignCountry(elem.val());
});
scope.$watch(attrs.ngModel, function (country) {
elem.val(country);
});
}
}
};
}]);
As you see my directive relies on a Service called "countries".
Here it is:
angular.module('myApp').service('countries', function () {
this.countryCodes = [
"AD","AE","AF","AG","AI","AL","AM","AN","AO","AQ","AR","AS","AT","AU","AW","AX","AZ","BA","BB","BD","BE","BF","BG",
"BH","BI","BJ","BL","BM","BN","BO","BR","BS","BT","BV","BW","BY","BZ","CA","CC","CD","CF","CG","CH","CI","CK","CL",
"CM","CN","CO","CR","CS","CU","CV","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","EH","ER","ES","ET",
"FI","FJ","FK","FM","FO","FR","GA","GB","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GS","GT","GU",
"GW","GY","HK","HM","HN","HR","HT","HU","ID","IE","IL","IM","IN","IO","IQ","IR","IS","IT","JE","JM","JO","JP","KE",
"KG","KH","KI","KM","KN","KP","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC",
"MD","ME","MF","MG","MH","MK","ML","MM","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC",
"NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PN","PR","PS","PT",
"PW","PY","QA","QO","QU","RE","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SJ","SK","SL","SM","SN",
"SO","SR","ST","SV","SY","SZ","TC","TD","TF","TG","TH","TJ","TK","TL","TM","TN","TO","TR","TT","TV","TW","TZ","UA",
"UG","UM","US","UY","UZ","VA","VC","VE","VG","VI","VN","VU","WF","WS","YE","YT","ZA","ZM","ZW","ZZ"
];
/**
* Return the country codes
* @returns {String[]}
*/
this.getCountryCodes = function() {
return this.countryCodes;
};
/**
* Return the translated country name
* @param {String} countryCode The country code
* @returns {String}
*/
this.getCountryName = function(countryCode) {
// The country code will be translated there but in order to
simplify let's return the country code as well
return countryCode;
};
});
Everything works perfectly but my issue comes when I want to unit test it
properly.
I try the following code:
'use strict';
describe('crmApp.common.directives.selectCountry', function() {
var scope, elm;
// load the controller's module
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $compile) {
elm =
angular.element('<form><select-country></select-country></form>');
scope = $rootScope;
$compile(elm)(scope);
scope.$digest();
}));
it('should render a list', function() {
console.log(elm.html());
});
});
When I run the following test I got:
<select ng-options="country.value as country.name for country in
countries"></select>
This is fine, as the directive has been replaced by the select directive
properly.
But I would like to test the "final" stage, this mean after the
transformation of this directive (the "select" one).
In fact I would like to be able to test the number of "option" elements
that are rendered under the select tag.
How can I do this ?
Thanks In advance
Daniel
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
