2016-05-17 72 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