angularjs - 使用 Angular 数据表时如何创建 Jasmine 单元测试

Question

我在我的项目中使用 Angular 数据表，我想为它编写一个 Jasmine/Karma 单元测试。

这是来 self 的 Controller 的代码:

 $scope.dtOptions = DTOptionsBuilder.fromSource('/api/books/')
                .withBootstrap()
                .withPaginationType('simple_numbers')
                .withDisplayLength(10)
                //.withOption('serverSide', true)
                .withOption('processing', true)
                .withOption('createdRow', createdRow);

            $scope.dtColumns = [
                DTColumnBuilder.newColumn('id').withTitle('ID'),
                DTColumnBuilder.newColumn('name').withTitle('Name')
                DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
                    .renderWith(actionsHtml)
            ];

我现在如何为它编写单元测试，伪造来自 /api/books 的 JSON 响应？

Answer 1

var $scope, $state, DTColumnBuilder, DTOptionsBuilder, createController, $httpBackend;

beforeEach(function () {
  DTColumnBuilder  = {};
  DTOptionsBuilder = {};
  $state           = {};
  $httpBackend     = {};

  module('app', function ($provide) {
    $provide.value('$state', $state);
    $provide.value('$httpBackend', $httpBackend);
    $provide.value('DTColumnBuilder', DTColumnBuilder);
    $provide.value('DTOptionsBuilder', DTOptionsBuilder);
  });

  inject(function ($controller, $injector) {
    $scope = $injector.get('$rootScope').$new();
    $state = $injector.get('$state');
    $httpBackend = $injector.get('$httpBackend');
    DTColumnBuilder  = $injector.get('DTColumnBuilder');
    DTOptionsBuilder = $injector.get('DTOptionsBuilder');

    aliasOfYourController = function () {
      return $controller('originalNameOfController', {
        $scope: scope,
        $state: $state,
        DTOptionsBuilder: DTOptionsBuilder,
        DTColumnBuilder: DTColumnBuilder        
      });
    }

    spyOn($state, 'go');

    $httpBackend.flush();
  });

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  // Stub out the methods of interest. 
  DTOptionsBuilder.fromSource = angular.noop;
  DTColumnBuilder.bar = function () { return 'bar'; };
});

---

spy 的本质是让原始实现执行其任务，但记录 对所述函数的所有调用以及相关数据的分类。

另一方面，stub 是一个带有扩展 API 的 spy，您可以在其中完全修改所述函数的工作方式。返回值、预期参数等。

假设我们使用前面提到的 beforeEach block ，此时 DTOptionsBuilder.fromSource 将是一个 noop。因此，监视 并期望调用该方法是安全的。

it('should have been called', function () {
  var spy = spyOn(DTOPtionsBuilder, 'fromSource');
  aliasOfYourController();
  expect(spy).toHaveBeenCalled();
});

如果你想操纵所述函数的返回值，我会抓取 sinonjs并使它成为一个 stub 。

it('became "foo"', function () {
  DTOptionsBuilder.fromSource = sinon.stub().returns('foo');
  aliasOfYourController();
  expect($scope.dtOptions).toEqual('foo');
});

现在，由于您使用的是 promise，因此会稍微复杂一些，但删除基于 promise 的函数的基础知识是:

• 将 $q 注入(inject)到您的规范文件中。
• 告诉 stub 在 resolved promise 的情况下返回 $q.when(/** value **/)。
• 告诉 stub 在被拒绝的 promise 的情况下返回$q.reject(/** err **/)。
• 运行 $timeout.flush() 以刷新所有延迟的任务。如果您正在模拟 http 响应，您可以在单元测试中使用 $httpBackend 并使用 $httpBackend.flush() 刷新所有延迟的任务。
• 触发 done 回调以通知 Jasmine 您已完成等待异步任务(可能不需要)。这取决于测试框架/运行器。

它可能看起来像这样:

it('resolves with "foo"', function (done) {
  DTOptionsBuilder.fromSource = sinon.stub().returns($q.when('foo'));
  expect($scope.options).to.eventually.become('foo').and.notify(done); // this is taken from the chai-as-promised library, I'm not sure what the Jasmine equivalent would be (if there is one).
  aliasOfYourController();
  $timeout.flush();
});

而且，如果你想测试 $state.go('toSomeState') 那么单元测试用例可以是:

   it('should redirected successfully', function() {
       var stateParams = {
          id: 22,
          name: sample
       }
       functionNameInsideWhichItsBeenCalled(stateParams);
       expect($state.go).toHaveBeenCalledWith('toSomeState', {
           id: stateParams.id,
           name: stateParams.name
       });
   });

目前，其中很多只是猜测。如果没有源代码在我旁边运行以供交叉引用，很难建立一个完全工作的测试套件，但我希望这至少能给你一些关于如何使用 $httpBackend、spy 和 stub 的想法。