如何使用角度测试文件？答案

【问题标题】：How to use an angular test file?如何使用角度测试文件？
【发布时间】：2017-04-09 13:38:44
【问题描述】：

我有一个测试文件，就像最后一样。我试过节点文件名，npm 文件名，这让我出错。我也尝试过 npm test ，它似乎在测试其他东西（附在测试文件之后）。我是 Angular 新手，看了演示，但我不确定我应该做什么。

来自这里的代码：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

【问题讨论】：

标签： javascript angularjs node.js unit-testing

【解决方案1】：

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

当您在 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中，我在你的GitHubrepo看到里面有一个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 正在为您进行测试（顺便说一句，Karma 是一个测试框架）。您可以添加任何要测试的文件及其依赖项。

我还建议您先阅读一些教程，然后再深入了解角度单元测试。 This 博客非常适合。

【讨论】：