Question

我试图用AngularJS 1.5.5测试一个非常简单的指令。

指令本身：

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执行任务我使用:( gulp test：client）：

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/`))
});

Karma文件：

// 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}'
],

Phantom JS "phantomjs-prebuilt": "^2.1.4"

Answer 1

我很喜欢Jasmine，我没有意识到我在Chai断言库上。

Undefined不是构造函数，angularjs指令测试

1 个答案: