Angular/Karma：模拟数据未定义

Question

我正在尝试创建一个单元测试来检查 GET 请求是否返回正确数量的项目，但我正在使用模拟数据来执行此操作。

我的测试如下所示：

test.js

describe('Customer Controller', function () {
    var controller;
    var customers = mockData.getMockCustomers(); // fake customers (5 customers)

    beforeEach(function() {
      bard.appModule('app');
      bard.inject('$controller', '$q', '$rootScope');

      var cs = {
        getCustomers: function() {
          return $q.when(customers);
        }
      };

      controller = $controller('customersCtrl', {
        CustomerService: cs
      });
    });

    it('should return 5 customers', function() {
      $rootScope.$apply();
      expect(controller.customers).to.have.length(5);
    });
});

我在运行测试时不断收到此错误：

TypeError: 无法读取未定义的属性“长度”

看起来controller.customers 出于某种原因以undefined 的身份回归。我是否正确地模拟了数据？

我对此很陌生，无法弄清楚我做错了什么。我什至不知道如何调试这样的问题。

感谢任何帮助。提前致谢！

更新

我的控制器如下所示：

function customersCtrl(dataservice) {
  var vm = this;
  vm.customers = [];

  fetchCustomers();

  function fetchCustomers() {
    return dataservice.getCustomers()
    .then(function(data) {
      vm.customers = data.data;
      return vm.customers ;
    });
  }
}

更新 2

我在测试中放置了一个 console.log，我的 customers 变量返回了 5 个似乎为空的对象。也许这就是问题所在？

Answer 1

你看过 $httpBackend 吗？如果那是您所期望的，那么单元测试实际上并不会影响您的数据库。您必须模拟自己的响应。

即：

$httpBackend.whenGET(/MyEndPoint).respond([{}, {}, {}]);

然后你可以测试长度为 3 或任何你想要的

Answer 2

新答案，推荐使用sinon spys

我使用 mocha 进行一些节点测试，使用 chai 和 sinon - 这是一个使用 sinon 存根的示例。

var sinon = require('sinon');

describe('Customer Controller', function () {
        var controller;
        var customers = mockData.getMockCustomers(); // fake customers (5 customers)

    beforeEach(function() {
      bard.appModule('app');
      bard.inject('$controller', '$q', '$rootScope');

      var deferred = $q.defer();
      deferred.resolve(customers);
      var cs = {
         fetchCustomers: sinon.stub().returns(deferred.promise)
      };

      controller = $controller('scoreListCtrl', {
        CustomerService: cs
      });
    });

    it('should return 5 customers', function() {
      $rootScope.$apply();
      expect(controller.customers).to.have.length(5);
    });
});

下面的原始答案，建议使用茉莉花间谍

你以前用过茉莉间谍吗？我会使用它们，这可能不会是您的复制和粘贴答案，但应该为您提供大致的进入方向。

describe('Customer Controller', function () {
    var controller;
    var customers = mockData.getMockCustomers(); // fake customers (5 customers)

    beforeEach(function() {
      bard.appModule('app');
      bard.inject('$controller', '$q', '$rootScope');

      var cs = {};
      var deferred = $q.defer();
      deferred.resolve(customers);
      spyOn(cs, 'fetchCustomers').and.returnValue(deferred.promise);

      controller = $controller('scoreListCtrl', {
        CustomerService: cs
      });
    });

    it('should return 5 customers', function() {
      $rootScope.$apply();
      expect(controller.customers).to.have.length(5);
    });
});

你可以在这里查看更多关于茉莉花间谍的信息：http://jasmine.github.io/2.0/introduction.html