Angular ng-class 呈现正确的类，但 Karma 显示错误

Angular ng-class renders correct class but Karma shows ERROR

本文关键字：Karma 显示 错误 ng-class Angular      更新时间：2023-09-26

我试图超越《AngularJS - Up and Running》一书中给出的示例，并以HTML格式呈现结果。原始代码可以在这里找到：书籍示例（控制器.js和控制器规范.js

问题是，如果我使用此代码，Karma 会显示 SUCCESS，但 HTML 中的类不会按预期呈现（所有帖子都显示一个类".read"，就好像两者都是"read = true;"）：

angular.module('blogApp', [])
    .controller('MainCtrl', [function() {
        var self = this;
        self.items = [
            {title: 'First post', read: false},
            {title: 'Last post', read: true}
        ];
        self.getPostClass = function(status) {
            return {
                read: status.read,
                pending: !status.read
            };
        };
}]);

但是，如果我将返回值更改为：

return {
    read: status,
    pending: !status
};

它加载了正确的类，但 Karma 显示存在错误。喜欢这个：

Chromium 39.0.2171 (Ubuntu) Controller: MainCtrl should have highlight items based on state FAILED
Expected { title: 'Last post', read: false } to be falsy.
    at Object.<anonymous> (/home/estevan/teste/js/scriptSpec.js:28:30)
Expected false to be truthy.
    at Object.<anonymous> (/home/estevan/teste/js/scriptSpec.js:29:33) Chromium 39.0.2171 (Ubuntu): Executed 2 of 2 (1 FAILED) (0.023 secs / 0.021 secs)

这是 HTML：

<!DOCTYPE html>
<html lang="en" ng-app="blogApp">
<head>
  <meta charset="UTF-8">
  <title>Blog App</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body ng-controller="MainCtrl as ctrl">
  <div ng-repeat="post in ctrl.posts"
       ng-class="ctrl.getPostClass(post.read)">
    <h1>{{post.title}}</h1>
    <!-- It used to have an author -->
    <p ng-show="post.author"
       ng-bind="post.author">
    </p>
  </div>
  <script src="js/angular.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

这是测试（scriptSpec.js）：

describe('Controller: MainCtrl', function() {
  // Instantiate a new version o my module before each test
  beforeEach(module('blogApp'));
  var ctrl;
  // Before each unit test, instantiate a new instance of the controller
  beforeEach(inject(function($controller) {
    ctrl = $controller('MainCtrl');
  }));
  it('should have items available on load', function() {
    expect(ctrl.posts).toEqual([
      {title: 'First post', read: false},
      {title: 'Last post', read: true}
    ]);
  });
  it('should have highlight items based on state', function() {
    var post = {title: 'Last post', read: true};
    var actualClass = ctrl.getPostClass(post);
    expect(actualClass.read).toBeTruthy();
    expect(actualClass.pending).toBeFalsy();
    post.read = false;
    actualClass = ctrl.getPostClass(post);
    expect(actualClass.read).toBeFalsy();
    expect(actualClass.pending).toBeTruthy();
  });
});

出了什么问题？

那是因为你在帖子中传递的是{标题："最后一篇文章"，读作：假}。这使得你的返回值成为第二个：

actualClass  = {
    read: {title: 'Last post', read: false},
    pending: false
}

正因为如此 

expect(actualClass.read).toBeFalsy();

显然会失败，因为 actualClass.read 是一个对象。与：

expect(actualClass.pending).toBeTruthy();

因为 actualClass.pending 是假的。

要了解我的意思，请在每个实际类 = 之后放入控制台日志，如下所示：

it('should have highlight items based on state', function() {
    var post = {title: 'Last post', read: true};
    var actualClass = ctrl.getPostClass(post);
    console.log(actualClass);
    expect(actualClass.read).toBeTruthy();
    expect(actualClass.pending).toBeFalsy();
    post.read = false;
    actualClass = ctrl.getPostClass(post);
    console.log(actualClass);
    expect(actualClass.read).toBeFalsy();
    expect(actualClass.pending).toBeTruthy();
});
相关文章：