2016-05-17 58 views
2

我想用AngularJS 1.5.5测试一个非常简单的指令。未定义不是构造函数,angularjs指令测试

指令本身:

angular.module('whatToPlayWithFriendsApp.card').directive('card', function() { 
    return { 
    restrict: 'EA', 
    link: function link(scope, element, attrs) { 
     element.bind('click', function() { 
     angular.element(this).toggleClass('selected'); 
     }); 
    } 
    }; 
}); 

测试:

'use strict'; 

describe('Directive: card', function() { 

    // load the directive's module 
    beforeEach(module('myApp.card')); 

    var element, scope; 

    beforeEach(inject(function ($rootScope) { 
    scope = $rootScope.$new(); 
    })); 

    it('should make element to have selected class on click', inject(function ($compile) { 
    element = angular.element('<div card></div>'); 
    $compile(element)(scope); 
    scope.$digest(); 
    element.triggerHandler('click'); 
    expect(element.hasClass('selected')).toBe(true); 
    })); 
}); 

但我的测试失败,因为这个错误的:

Undefined is not a constructor (evaluating 'expect(element.hasClass('selected')).toBe(true)') 

我抬头看了看这个问题:https://github.com/angular/angular.js/issues/14251 ,但我对所有的angularjs套件都使用相同的版本。我在这里错过了什么?

使用一饮而尽的任务我和运行它们:(一整套测试:客户端):

gulp.task('test:client', ['wiredep:test', 'constant'], (done) => { 
    new KarmaServer({ 
     configFile: `${__dirname}/${paths.karma}`, 
     singleRun: true 
    }, done).start(); 
}); 

gulp.task('wiredep:test',() => { 
    return gulp.src(paths.karma) 
     .pipe(wiredep({ 
      exclude: [ 
       '/json3/', 
       '/es5-shim/', 
       /font-awesome\.css/ 
      ], 
      devDependencies: true 
     })) 
     .pipe(gulp.dest('./')); 
}); 

gulp.task('constant', function() { 
    let sharedConfig = require(`./${serverPath}/config/environment/shared`); 
    return plugins.ngConstant({ 
    name: 'myApp.constants', 
    deps: [], 
    wrap: true, 
    stream: true, 
    constants: { appConfig: sharedConfig } 
    }) 
    .pipe(plugins.rename({ 
     basename: 'app.constant' 
    })) 
    .pipe(gulp.dest(`${clientPath}/app/`)) 
}); 

噶文件:

// list of files/patterns to load in the browser 
files: [ 
    // bower:js 
    'client/bower_components/jquery/dist/jquery.js', 
    'client/bower_components/angular/angular.js', 
    'client/bower_components/angular-resource/angular-resource.js', 
    'client/bower_components/angular-cookies/angular-cookies.js', 
    'client/bower_components/angular-sanitize/angular-sanitize.js', 
    'client/bower_components/lodash/dist/lodash.compat.js', 
    'client/bower_components/angular-ui-router/release/angular-ui-router.js', 
    'client/bower_components/semantic/dist/semantic.js', 
    'client/bower_components/moment/moment.js', 
    'client/bower_components/angular-moment/angular-moment.js', 
    'client/bower_components/angular-mocks/angular-mocks.js', 
    // endbower 
    'client/app/app.js', 
    'client/{app,components}/**/*.module.js', 
    'client/{app,components}/**/*.js', 
    'client/{app,components}/**/*.{jade,html}' 
], 

幻影JS "phantomjs-prebuilt": "^2.1.4"

+0

你可以发布你的测试配置吗?包含哪些文件? – mariocatch

+0

@mariocatch添加配置的东西,需要更多? –

+0

@ MaximeRoussin-Bélanger:你在使用PhantomJS吗?什么版本?卡指令看起来像什么(转译版本)? – gkalpak

回答

1

我已经习惯茉莉花,我没有意识到我是在柴的断言库。

+0

如果解决了这个问题,您应该将其标记为已接受(以便将来面临同样问题的人们将能够轻松发现它)。 – gkalpak

+0

那么你是如何修复它的?无法理解你的溶剂? – Juri