Objective:
To create a passing test for the waCarousel directive scope variable: self.awesomeThings. How can we ensure that the test passes when self.awsomeThings.length.toBe(3) is true?
Inquiry:
What is the correct method to write this test and how can I inject a directive's controller?
Directive Information:
angular.module('carouselApp')
.directive('waCarousel', function() {
return {
templateUrl: '../../../views/carousel/wa.carousel.html',
controller: function($scope) {
var self = this;
self.awesomeThings = [1, 2, 3];
return $scope.carousel = self;
}
}
});
Unit Testing:
describe('waCarousel Unit Test', function() {
var $compile,
$rootScope;
beforeEach(module('carouselApp'));
beforeEach(inject(function(_$compile_, _$rootScope_){
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('should have a list of awesomeThings', function() {
expect(scope.awesomeThings.length).toBe(3);
});
});
A common approach in testing a typical view and not a directive:
describe('Controller: MainCtrl', function() {
beforeEach(module('carouselApp'));
var MainCtrl,
scope;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function() {
expect(scope.awesomeThings.length).toBe(3);
});
});
Is there a way to combine these approaches to successfully anticipate
self.awesomeThings.length).toBe(3)UPDATE: