I am doing Unit Tests for a directive. I have the configurations below. The error that I am getting is: ReferenceError: Can't find variable: moment
LOG ERROR
ReferenceError: Can't find variable: moment
updateMonthList@/angular/td-ng-datepicker/src/scripts/datepicker-month- directive.js:44:20
controller@/angular/td-ng-datepicker/src/scripts/datepicker-month- directive.js:55:20
invoke@/angular/td-ng-datepicker/src/libraries/angular/angular.js:4182:22
/angular/td-ng-datepicker/src/libraries/angular/angular.js:8441:27
/angular/td-ng-datepicker/src/libraries/angular/angular.js:7693:23
forEach@/angular/td-ng-datepicker/src/libraries/angular/angular.js:331:24
nodeLinkFn@/angular/td-ng-datepicker/src/libraries/angular/angular.js:7692:18
compositeLinkFn@/angular/td-ng- datepicker/src/libraries/angular/angular.js:7075:23
publicLinkFn@/angular/td-ng- datepicker/src/libraries/angular/angular.js:6954:45
/angular/td-ng-datepicker/test/unit/datepicker-month-directive.spec.js:26:41
invoke@/angular/td-ng-datepicker/src/libraries/angular/angular.js:4182:22
workFn@/angular/td-ng-datepicker/src/libraries/angular-mocks/angular-mocks.js:2350:26
inject@/angular/td-ng-datepicker/src/libraries/angular-mocks/angular-mocks.js:2322:41
/angular/td-ng-datepicker/test/unit/datepicker-month-directive.spec.js:13:15
inject@/angular/td-ng-datepicker/src/libraries/angular-mocks/angular-mocks.js:2321:34
/angular/td-ng-datepicker/test/unit/datepicker-month-directive.spec.js:13:15
Safari 8.0.6 (Mac OS X 10.10.3): Executed 1 of 1 (1 FAILED) (0 secs / 0.538 secs)
Safari 8.0.6
Please advise how I am not able to use a call to a method belonging to module "moment", when I am loading it in the Karma.conf.js?
Karma file
module.exports = function (config) {
config.set({
// root path location that will be used to resolve all relative paths in files and exclude sections
basePath: '../',
// files to include, ordered by dependencies
files: [
'src/libraries/angular/angular.js',
'src/libraries/angular-mocks/angular-mocks.js',
'src/libraries/jquery/dist/jquery.min.js',
'src/libraries/jquery-ui/jquery-ui.min.js',
'src/libraries/lodash/lodash.min.js',
'src/libraries/angular-route/angular-route.js',
'src/libraries/angular-resource/angular-resource.js',
'src/libraries/angular-sanitize/angular-sanitize.js',
'src/libraries/angular-bootstrap/ui-bootstrap-tpls.min.js',
'src/libraries/angular-moment/angular-moment.js',
'src/libraries/angular-translate/angular-translate.js',
'src/libraries/angular-translate-loader-static-files/angular-translate-loader-static-files.js',
'src/libraries/angular-ui-sortable/src/sortable.js',
'src/libraries/ng-teradata/modules/**/*.js',
'src/scripts/*.html',//load my html
'test/lib/*.js',
'test/lib/tmp/*.js',
'test/lib/tmp/*.tpl.html',//load all my test templates
'test/unit/*.js',//load all my unit tests
'src/*.html',
'src/scripts/*.js'//load all source javascript
],
// files to exclude
exclude: [],
// karma has its own autoWatch feature but Grunt watch can also do this
autoWatch: false,
// testing framework, be sure to install the correct karma plugin
frameworks: ['jasmine'],
// browsers to test against, be sure to install the correct browser launcher plugins
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Safari'],
// map of preprocessors that is used mostly for plugins
preprocessors: {
'src/**/*.html': ['ng-html2js'],
'src/*.html': ['ng-html2js']
//'mock_data/**/*': ['ng-json2js']
},
ngHtml2JsPreprocessor: {
cacheIdFromPath: function(filepath) {
return filepath.substr(filepath.indexOf('td-ng-datepicker')+8);
//
//
},
moduleName: 'karmaTemplates',
stripPrefix: 'src/scripts/'
},
// test coverage
'src/scripts/controllers/*.js': ['jshint', 'coverage'],
'src/scripts/directives/*.js': ['jshint', 'coverage'],
'src/scripts/services/app.js': ['jshint', 'coverage'],
'src/scripts/*.js': ['jshint', 'coverage'],
reporters: ['progress', 'coverage'],
logLevel: config.LOG_DEBUG,
loggers: [{ type: 'console' }],
// list of karma plugins
plugins: [
'karma-*'
],
coverageReporter: {
// type of file to output, use text to output to console
type: 'html',
// directory where coverage results are saved
dir: 'test/test-results/coverage/'
// if type is text or text-summary, you can set the file name
// file: 'coverage.txt'
},
junitReporter: {
outputFile: 'test/test-results/test-results.xml'
},
// enable / disable colors in the output (reporters and logs)
colors: true,
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true
})
};
Spec File
'use strict';
describe('Testing the Date Picker Month', function () {
var $compile, element, $httpBackend, $scope, ctrl, $controller, template, calendarElement, view;
beforeEach(function () {
angular.mock.module('td.Datepicker');
});
beforeEach(function () {
angular.mock.module('ngTemplates');
inject(function ($injector, _$httpBackend_, $rootScope, _$controller_, _$compile_, _$rootScope_, $templateCache) {
$httpBackend = _$httpBackend_;
view = $templateCache.get('scripts/monthpicker-view.html');
//prime the templates for use in the unit test
$httpBackend.whenGET('scripts/monthpicker-view.html').respond(200, '');
$templateCache.put('scripts/monthpicker-view.html', view);
$controller = _$controller_;
$compile = _$compile_;
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$compile = _$compile_;
element = angular.element('<div td-datepicker-month></div>');
template = $compile(element)($scope);
$scope.$digest();
ctrl = $controller(template.controller, {
$scope: $scope
});
});
});
afterEach(function () {
});
it('should be true', function () {
// ctrl.setMonth = jasmine.createSpy();
//var calendarIcon = element.find('input-group-addon');
//browserTrigger(calendarIcon, 'click');
// calendarIcon.triggerHandler('click');
// expect(ctrl.setMonth).toHaveBeenCalled();
expect(true).toBe(true);
});
});
DIRECTIVE
(function () {
'use strict';
angular
.module('td.Datepicker')
.directive('tdDatepickerMonth', [DatepickerMonthDirective]);
function DatepickerMonthDirective() {
return {
restrict: 'A',
templateUrl: '', //'scripts/datepicker-month-view.html',
scope: { month: '=' },
controller: function ($scope) {
/*jshint validthis:true */
var vm = this;
vm.$controller = undefined;
vm.monthList = undefined;
vm.setMonth = function setMonth(month) {
vm.selectedMonth = month;
$scope.$emit('selectedMonth', month);
};
function updateMonthList() {
var i;
var months = [];
for (i = 0; i < 12; i++) {
months.push({
name: moment().month(i).format('MMMM').substr(0, 3),
value: i + 1
});
}
vm.monthList = [];
for (i = 0; i < 3; i++) {
vm.monthList.push(months.slice(i * 4, (i * 4) + 4));
}
}
updateMonthList();
if (!_.isUndefined($scope.month)) {
vm.setMonth($scope.month);
}
},
controllerAs: 'vm'
};
}
})();
Template
<table class="td-datepicker-month">
<tbody>
<tr ng-repeat="grouping in vm.monthList">
<td ng-click="vm.setMonth(month.value)" ng-repeat="month in grouping" ng-class="{ selected: month.value === vm.selectedMonth }">{{ month.name }}</td>
</tr>
</tbody>
