How to test a control controller using angularJS-karma-jasmine?

Question

Goal:

Write a passing test for the waCarousel scope waCarousel : self.awesomeThings . Expect this test to pass when self.awsomeThings.length.toBe(3) to is correct?

Question:

How can I write this test correctly? rather, how do I introduce a directive controller?

---

Directive

 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 Test:

 describe('waCarousel Unit', function() { // am I missing a $controller & namespace variable init? var $compile, $rootScope; // Load the myApp module, which contains the directive beforeEach(module('carouselApp')); // Store references to $rootScope and $compile and $controller // so they are available to all tests in this describe block beforeEach(inject(function(_$compile_, _$rootScope_, _$controller_){ // The injector unwraps the underscores (_) from around the parameter names when matching $compile = _$compile_; $rootScope = _$rootScope_; $controller = _$controller_; // WaCarouselCtrl = $controller('WaCarouselCtrl', { // $scope: scope // }); })); it('should have a list of awesomeThings', function() { // This wont pass expect(scope.awesomeThings.length).toBe(3); }); }); 

Here is how I would do it for a typical view, not a directive:

 describe('Controller: MainCtrl', function() { // load the controller module beforeEach(module('carouselApp')); var MainCtrl, scope; // Initialize the controller and a mock scope beforeEach(inject(function($controller, $rootScope) { scope = $rootScope.$new(); // !!*** this is how I would inject the typical controller of a view **!! // MainCtrl = $controller('MainCtrl', { $scope: scope }); })); it('should attach a list of awesomeThings to the scope', function() { expect(scope.awesomeThings.length).toBe(3); }); }); 

How to combine these two concepts so that I can expect self.awesomeThings.length).toBe(3) ?

UPDATE:

Answer 1

Compile this element and after calling $digest() , you will have access to the area containing the carousel object with the awesomeThings array:

 describe('waCarousel Unit', function() { var scope; beforeEach(module('carouselApp')); beforeEach(inject(function($rootScope, $compile) { var element = '<test></test>'; scope = $rootScope.$new(); element = $compile(element)(scope); scope.$digest(); })); it('should have a list of awesomeThings', function() { expect(scope.carousel.awesomeThings.length).toBe(3); }); }); 

In addition, here are some useful links for testing directives in angular:

• Testing Directives
• Testing AngularJS controllers with jasmine and karma
• Unit Test Introduction: Directives