I'm trying to implement a test that relies on a scope variable. I want to enable ng-switch-when to resolve an expression. This is what I'm trying to do (UPDATE using $rootScope):
it('should switch on array changes', inject(function($rootScope, $compile) {
element = $compile(
'<div ng-switch="select">' +
'<div ng-switch-when="test[0]">test[0]:{{test[0]}}</div>' +
'</div>')($rootScope);
expect(element.html()).toEqual('<!-- ngSwitchWhen: test[0] -->');
$rootScope.test = ["leog"];
$rootScope.select = "leog";
$rootScope.$apply();
expect(element.text()).toEqual('test[0]:leog');
}));
My problem is that the implementation I have for this to work does not get the scope variable "test" to evaluate and work as I expect. Here is the implementation:
var ngSwitchWhenDirective = ngDirective({
transclude: 'element',
priority: 800,
require: '^ngSwitch',
compile: function(element, attrs) {
return function(scope, element, attr, ctrl, $transclude) {
var expr = scope.$eval(attrs.ngSwitchWhen),
ngSwitchWhen = expr !== undefined ? expr : attrs.ngSwitchWhen;
ctrl.cases['!' + ngSwitchWhen] = (ctrl.cases['!' + ngSwitchWhen] || []);
ctrl.cases['!' + ngSwitchWhen].push({ transclude: $transclude, element: element });
};
}
});
Does anybody knows what I'm doing wrong? Any help will be appreciated.
Thanks in advance!
UPDATE
Just to clarify, this is an example of how ng-switch it's being tested from the Angular team. Just to show that I'm doing my test in a similar way but not having the expected result.
And also, I forgot to reverse my code to $rootScope, what you've been seeing up until now was one of my attempts to make this work creating a new scope to avoid relying on $rootScope for a change.
it('should switch on value change', inject(function($rootScope, $compile) {
element = $compile(
'<div ng-switch="select">' +
'<div ng-switch-when="1">first:{{name}}</div>' +
'<div ng-switch-when="2">second:{{name}}</div>' +
'<div ng-switch-when="true">true:{{name}}</div>' +
'</div>')($rootScope);
expect(element.html()).toEqual(
'<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->');
$rootScope.select = 1;
$rootScope.$apply();
expect(element.text()).toEqual('first:');
$rootScope.name="shyam";
$rootScope.$apply();
expect(element.text()).toEqual('first:shyam');
$rootScope.select = 2;
$rootScope.$apply();
expect(element.text()).toEqual('second:shyam');
$rootScope.name = 'misko';
$rootScope.$apply();
expect(element.text()).toEqual('second:misko');
$rootScope.select = true;
$rootScope.$apply();
expect(element.text()).toEqual('true:misko');
}));
So, after moving some code around I found that the variables not involved on making $rootScope change to test the feature, should be defined before compiling the element to test. Thanks @Jonathan for the hint.
Here is the working code with additional test cases:
it('should evaluate expressions to match switch value', inject(function($rootScope, $compile) {
$rootScope.array = ["leog", ".me"];
$rootScope.obj = {"key": "value"};
$rootScope.$apply();
element = $compile(
'<div ng-switch="select">' +
'<div ng-switch-when="obj.key">obj.key:{{obj.key}}</div>' +
'<div ng-switch-when="array[0]">array[0]:{{array[0]}}</div>' +
'<div ng-switch-when="array[1]">array[1]:{{array[1]}}</div>' +
'</div>')($rootScope);
expect(element.html()).toEqual('<!-- ngSwitchWhen: obj.key -->' +
'<!-- ngSwitchWhen: array[0] -->' +
'<!-- ngSwitchWhen: array[1] -->');
$rootScope.select = "value1";
$rootScope.$apply();
expect(element.text()).toEqual('obj.key:value');
$rootScope.select = "leog";
$rootScope.$apply();
expect(element.text()).toEqual('array[0]:leog');
$rootScope.select = ".me";
$rootScope.$apply();
expect(element.text()).toEqual('array[1]:.me');
}));
Thanks you all.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments