samedi 30 mai 2015

ReferenceError: Can't find variable: moment

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>

Aucun commentaire:

Enregistrer un commentaire