Unit Testing AngularJS Directive that uses ng-switch - angularjs

Question

I want to unit test my directive. Here is the code:
.directive('getData', function() {
return {
restrict: 'C',
replace: true,
transclude: true,
scope: { myData:'#myData' },
template: '<div ng-switch="myData">' +
'<div ng-switch-when="4">Real Data</div>' +
'<div ng-switch-when="5">False Data</div>' +
'<div ng-switch-default>No Data</div>' +
'</div>'
}
Here is my attempt for unit testing:
describe('Testing', function() {
var $compile, $rootScope;
beforeEach(module('myApp'));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('get some data', function() {
var c = $compile("<get-data></get-data>")($rootScope);
$rootScope.$digest();
expect(c.html()).toContain(''); //don't know how to do this part
});
});
I don't know how to test ng-switch. I feel like I am missing a lots of things here. Any help would be greatly appreciated. Here is the plnkr: http://plnkr.co/edit/kgygmzXT3eUMw1iNWnwP?p=preview

Answer 1

Try this:
Directive
app.directive('getData', function () {
return {
restrict: 'E,C', // Added E so <get-data></get-data> works
replace: true,
transclude: true,
scope: {
myData: '#' // Removed #myData since it's not needed here
},
template: '<div ng-switch on="myData">' +
' <div ng-switch-when="4">Real Data</div>' +
' <div ng-switch-when="5">False Data</div>' +
' <div ng-switch-default class="grid">No Data</div>' +
'</div>'
}
});
Tests
describe('get-data test', function() {
var $scope,
$compile;
beforeEach(function() {
module('plunker');
inject(function($rootScope, _$compile_) {
$scope = $rootScope.$new();
$compile = _$compile_;
});
});
it('renders Real Data when my-data is 4', function() {
// Arrange
var element = $compile('<get-data my-data="4"></get-data>')($scope);
// Act
element.scope().$digest();
// Assert
expect(element.find('div').html()).toBe('Real Data');
});
// Other tests omitted for brevity's sake
});
Check out this Plunker to see the other tests.
Notice that in order for the directive to render its markup, a digest cycle must occur in the directive's scope. To do that, you need to use element.scope() to get to that scope and call $digest on it.
Finally, since testing directives is almost all about checking if the DOM is being correctly manipulated I recommend adding jQuery as a dependency of your tests so you can take advantage of its selectors. It wasn't needed here, but it can save you a lot of time as your directive becomes more complex.