带有 AJAX 数据的 Angular Jasmine 单元测试答案

【问题标题】：Angular Jasmine unit test with AJAX data带有 AJAX 数据的 Angular Jasmine 单元测试
【发布时间】：2014-06-12 20:56:22
【问题描述】：

我有一个服务，DataContext，它返回一组我想在我的控制器中使用的数据。该数据由 ng-grid 指令使用。网格的选项由 GridOptionsService 提供。

所有这些都可以正常工作，但我正在尝试编写一个单元测试来检查是否一切正常。

describe('Grid display test', function() {
    var $scope, elm, oCtrl;

    beforeEach(module('ngGrid'));

    beforeEach(inject(function ($rootScope, $compile, $controller,DataContext,GridOptionsService) {
        $scope = $rootScope.$new();
        $scope.gridOptions = GridOptionsService.getGridOptions('documents');
        $scope = $rootScope;
        elm = angular.element('<div ng-grid="gridOptions"></div>');

        oCtrl = $controller('Repository',{$scope: $scope});
        $compile(elm)($scope)
        DataContext.getDocuments().then(function(data){
            $scope.myData = data;
            console.log('here are the grid options: ')
            console.log($scope.gridOptions);
        })
    }));

    it('should display rows',function(done){
        inject(function($rootScope, $compile, $controller, DataContext,GridOptionsService){
            $rootScope.$apply(function(){
                DataContext.getDocuments().then(function(data){
                    expect(data.length).toBe(1000);
                    done();
                })
            })
        })
    })
});

DataContext.getDocuments 返回一个promise，我用它来设置控制器的myData 变量。该数据是网格的数据。 $scope.gridOptions = GridOptionsService.getGridOptions('documents');

gridOptions 只是一个从服务返回的 JS 对象。当我运行测试时出现错误：Error: [$injector:unpr] Unknown provider: DataContextProvider <- DataContext

规范运行器中应该包含的所有脚本都是，并且代码肯定可以工作，但我只是不知道如何测试它。

如何使用 Jasmine 测试改变 DOM 外观的 AJAX 代码？

【问题讨论】：

标签： javascript angularjs unit-testing jasmine ng-grid

【解决方案1】：

尝试为您的 Jasmine 测试模拟您的自定义依赖项。 [$injector:unpr] 导致 $injector 无法解析所需的依赖项。您可以使用 $provide 向注入器注册组件。尝试添加类似...

  beforeEach(function () {

      mockDependency = {
          getDataSet: function () {
              return 'mockDataSet';
          }
      };

      module(function ($provide) {
          $provide.value('DataContext', mockDependency);
      });

  });

这是 $provide 的文档...https://docs.angularjs.org/api/auto/object/$provide

希望有帮助

【讨论】：