Angular-全栈测试似乎很脆弱？

Question

我是 angular 的新手，最近一直在使用 'yo angular-fullstack' 生成我的框架。这很好用。但是今天，我发现了一个关于测试新指令的问题。

第一次生成时 - 很好。然后用intellij检查文件后，我发现template.html文件中新添加的换行符导致测试失败。这看起来很奇怪......也就是说，如果 testit.html 文件末尾有一个额外的换行符，测试应该不会失败。

是否真的有必要在测试中执行 trim() 或类似的操作？？？任何帮助，将不胜感激。我是 angular 的新手，但我也想确保代码中的其他地方没有问题。其他人见过这个吗？或者是否有一种简单的方法可以使 angular 转储出 verbose/debug 信息？

这是失败的 grunt 测试输出的相关部分：

PhantomJS 1.9.8 (Linux) Directive: testit should make hidden element visible FAILED
Expected 'this is the testit directive
' to be 'this is the testit directive'.

相关文件为：

testit.directive.js:

'use strict';

angular.module('trackerFooApp')
  .directive('testit', function () {
    return {
      templateUrl: 'app/testit/testit.html',
      restrict: 'EA',
      link: function (scope, element, attrs) {
      }
    };
  });

tesit.directive.spec.js:

'use strict';

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

  // load the directive's module and view
  beforeEach(module('trackerFooApp'));
  beforeEach(module('app/testit/testit.html'));

  var element, scope;

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

  it('should make hidden element visible', inject(function ($compile) {
    element = angular.element('<testit></testit>');
    element = $compile(element)(scope);
    scope.$apply();
    expect(element.text()).toBe('this is the testit directive');
  }));
});

testit.html:

<div>this is the testit directive</div>

感谢您的帮助！

Answer 1

为了解决这个问题，我修改了：

expect(element.text()).toBe('this is the testit directive');

->

expect(element.text().trim()).toBe('this is the testit directive');

这解决了问题...并清楚地表明在这种情况下额外的换行符是问题所在。我希望这对像我这样的新手有所帮助:-)

Answer 2

toBe() 匹配器使用 === 比较。对于 HTML 中可能有也可能没有换行符的文本字符串，您可能想要使用 toContain().

话虽如此，如果您想强制执行准确的格式，toBe() 或 toEqual() 就是您想要的。

Angular-全栈测试似乎很脆弱？

Angular-fullstack testing seems fragile?

jasmine

angularjs