I wrote an angular directive to manipulate the DOM on scroll and now I am trying to write a test in Karma/Jasmine but I am having trouble getting even a simple test to pass, but I haven't been able to find a solution I could apply to my situation.
this is my directive:
'use strict';
angular.module('myApp.sticky', [])
.directive('sticky', ['$window', '$anchorScroll',
function($window, $anchorScroll) {
return {
restrict: 'A',
link: function(scope, elm, attrs) {
var atTop;
scope.atTop = atTop;
var stickyVal = elm.context.offsetTop;
scope.sticky = function () {
angular.element($window).bind("scroll", function() {
if (angular.element($window).scrollTop() > stickyVal) {
elm.css({position: 'fixed', top: '0px'});
if (elm.children().length === 1) {
elm.append(elm.next().next());
}
return true;
} else {
elm.css({position: 'static'});
return false;
}
});
};
scope.sticky();
}
};
}]);
and this is what I have so far for my test:
'use strict';
describe('myApp.sticky module', function () {
var scope,
element,
directive,
compiled,
html;
beforeEach(function () {
module('myApp.sticky');
html = '<span sticky>test</span>';
inject(function ($compile, $rootScope) {
scope = $rootScope.$new();
element = angular.element(html);
compiled = $compile(element);
compiled(scope);
scope.$digest();
});
});
describe('sticky directive', function () {
it('should exist', function () {
expect(element).toBeDefined();
});
it('should set the element to a fixed position at a break point',
function () {
});
});
});
and this is what my terminal is giving me:
Chrome 40.0.2214 (Mac OS X 10.10.1) myApp.sticky module sticky directive should exist FAILED
TypeError: Cannot read property 'offsetTop' of undefined
at link (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive.js:12:34)
at nodeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6752:13)
at compositeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6146:13)
at publicLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6042:30)
at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:35:7)
at Object.invoke (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:3965:17)
at workFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2177:20)
at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2163:37)
at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5)
Error: Declaration Location
at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2162:25)
at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5)
Chrome 40.0.2214 (Mac OS X 10.10.1) myApp.sticky module sticky directive should set the element to a fixed position at a break point FAILED
TypeError: Cannot read property 'offsetTop' of undefined
at link (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive.js:12:34)
at nodeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6752:13)
at compositeLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6146:13)
at publicLinkFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:6042:30)
at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:35:7)
at Object.invoke (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular/angular.js:3965:17)
at workFn (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2177:20)
at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2163:37)
at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5)
Error: Declaration Location
at window.inject.angular.mock.inject (/Users/meredithcapone/src/StickyChallenge/app/bower_components/angular-mocks/angular-mocks.js:2162:25)
at null.<anonymous> (/Users/meredithcapone/src/StickyChallenge/app/components/sticky/sticky-directive_test.js:31:5)
Chrome 40.0.2214 (Mac OS X 10.10.1): Executed 3 of 3 (2 FAILED) (0.378 secs / 0.025 secs)
and this is my conf file:
'use strict';
module.exports = function(config){
config.set({
basePath : '../',
files : [
'app/bower_components/jquery/jquery.js',
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/components/sticky/sticky-directive.js',
'app/view1/view1.js',
'app/app.js'
],
autoWatch : true,
frameworks: ['jasmine'],
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-jasmine'
],
junitReporter : {
outputFile: 'test_out/unit.xml',
suite: 'unit'
}
});
};
any help would be very much appreciated.
thanks
update: I've been able to get my code to throw the same error by commenting out the reference to jquery in my html file, so I wonder if there's a dependency that karma isn't getting or that is in the wrong order?
