如何使用角度测试文件?

时间:2017-04-09 05:05:46

标签: javascript angularjs node.js unit-testing

我有一个测试文件,就像最后一样。我试过节点FILENAME,npm FILENAME,这让我错了。我也尝试了npm测试,它似乎测试了其他东西(在测试文件之后附加)。我是棱角分明的新人,看着演示,但我不确定我应该做什么。

此处的代码:https://github.com/vega/vega-lite-ui(不是我的)

测试文件:

'use strict';

/* global vl:true */

describe('Directive: bookmarkList', function () {
  var element,
    scope;

  afterEach(inject(function(Modals) {
    // Remove any modals registered during the tests
    Modals.empty();
  }));

  beforeEach(module('vlui', function($provide) {
    // mock vega lite
    $provide.constant('vl', vl);
  }));

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

  it('requires a parent modal directive', inject(function ($compile) {
    // This is a side-effect of the modalCloseButton directive inside bookmarkList
    element = angular.element('<bookmark-list></bookmark-list>');
    expect(function() {
      $compile(element)(scope);
    }).to.throw;
    element = angular.element('<modal><bookmark-list></bookmark-list></modal>');
    expect(function() {
      $compile(element)(scope);
    }).not.to.throw;
  }));

  describe('when opened', function() {
    beforeEach(inject(function(Modals, $compile) {
      var template = '<modal id="test-bookmarks"><bookmark-list></bookmark-list></modal>';
      element = $compile(angular.element(template))(scope);
      Modals.open('test-bookmarks');
      scope.$digest();
    }));

    // TODO: Tests that validate the directive works properly
  });
});

npm测试结果:

START:
09 04 2017 01:03:39.411:WARN [watcher]: Pattern "/Users/me/psa/polestar/src/vendor/*.js" does not match any file.
09 04 2017 01:03:39.522:INFO [karma]: Karma v1.6.0 server started at http://0.0.0.0:9875/
09 04 2017 01:03:39.523:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
09 04 2017 01:03:39.531:INFO [launcher]: Starting browser PhantomJS
09 04 2017 01:03:40.644:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket BU46HqpjWzeEkmYvAAAA with id 72055404
  Service: Spec
    ✔ should be defined
    ✔ functions should be defined
    _removeEmptyFieldDefs
      empty spec
        ✔ should be cleaned
  Directive: configurationEditor
    ✔ should insert form
    ✔ should attach config to scope
  Directive: jsonInput
    ✔ should make hidden element visible
  Directive: lyraExport
    ✔ should make hidden element visible
  Directive: vgSpecEditor
    ✔ should show source code
  Directive: vlSpecEditor
    ✔ should show source code

Finished in 0.26 secs / 0.066 secs

SUMMARY:
✔ 9 tests completed
[01:03:41] Finished 'test' after 2.17 s

1 个答案:

答案 0 :(得分:0)

我将尝试解释当您测试项目以及如何测试某些特定文件时发生的情况。

当你在shell中输入npm test时,对应于此package.json文件中有一个脚本。

"scripts": {
    "postinstall": "bower install",
    "deploy": "npm run lint && npm run test && scripts/deploy.sh",
    "watch": "gulp watch",
    "build": "gulp build",
    "lint": "gulp jshint",
    "test": "gulp test"
},

如您所见,gulp test上运行npm test命令。

所以,现在让我们转移到gulpfile.js

在文件底部,有一行

gulp.task('default', ['jshint', 'test', 'build', 'watch']);

所有这些任务都添加到了gulp这里,我在你的GitHub repo中看到其中有一个gulp目录。

在其中,有unit-tests.js文件,具有此功能

function runTests (singleRun, done) {
 karma.start({
    configFile: __dirname + '/../karma.conf.js',
    singleRun: singleRun
  }, function() { done(); });
}

正如你所看到的,它通过传递配置文件和回调的路径来开始业力。

所以,让我们移动karma.conf.js

var testFiles = [
  // add bind polyfill since Function.prototype.bind is missing from PhantomJS
  './node_modules/phantomjs-polyfill/bind-polyfill.js',
].concat(bowerDeps.js).concat([
  src + '/vendor/*.js',
  src + '/index.js',
  src + '/**/*.js',
  tmp + '/partials/templateCacheHtml.js',
  tmp + '/schema/vl-schema.js'
]);

这些是文件和deps,Karma正在测试你(btw Karma是一个测试框架)。您可以使用其依赖项添加要测试的任何文件。

我还建议您在深入角度单元测试之前先阅读一些教程This博客非常好。