如何使用 $httpBackend 对 angularjs 承诺链进行单元测试

2024-04-03

使用 AngularJS,我尝试对一个多次调用 $http 的函数进行单元测试。

我的测试看起来像这样:

it('traverses over a hierarchical structure over multiple chained calls', function() {

    myService.traverseTheStuff()
    .then(function(theAggregateResult) {
        // ...is never fulfilled
    });

    $httpBackend.flush();
});

其他单次调用测试将注册传递给 .then() 的回调,并在我调用 .flush() 时立即执行它。

被测试的代码看起来像这样。

function traverseTheStuff(){

    // This will make a call to $http to fetch some data
    return getRootData()

    // It is fulfilled at the end of the test when I $httpBackend.flush()
    .then(function(rootData){

        // Another call to $http happens AFTER $httpBackend.flush()
        return getNextLevel(rootData.someReference);
    })

    // The second promise is never fulfilled and the test fails
    .then(function(nextLevel){
        return aggregateTheStuff(...);
    });
}

就其价值而言,每个单独的调用都经过单独的单元测试。在这里,我想遍历一棵树,聚合一些数据并进行单元测试 a) 承诺链是否正确连接以及 b) 聚合是否准确。将其扁平化为单独的离散调用已经完成。


我是测试 Angular 的初学者,但我已经设置了一个 plunker,它通过成功的“第二次”then/promise 调用来测试与您非常相似的设置

http://plnkr.co/edit/kcgWTsawJ36gFzD3CbcW?p=preview http://plnkr.co/edit/kcgWTsawJ36gFzD3CbcW?p=preview

下面的代码片段是上面 plnkr 的稍微简化的版本。

我发现的关键点是

  • 我注意到函数 traverseTheStuff 根本不调用 $http/$httpBackend 。它只使用 $q 承诺中定义的函数,因此测试假设使用 $q ,并注入

    var deferred1 = null;
    var deferred2 = null;
    var $q = null;
    
    beforeEach(function() {
      inject(function(_$q_) {
        $q = _$q_;
      });
    });
    
    beforeEach(function() {
      deferred1 = $q.defer();
      deferred2 = $q.defer();
    }
    
  • 要异步调用的函数通过其 Promise 返回值进行监视/存根,其中 Promise 是在测试本身中创建的,因此在测试 traverseTheStuff 时不会调用它们的实际实现

    spyOn(MyService,'traverseTheStuff').andCallThrough();
    spyOn(MyService,'getRootData').andReturn(deferred1.promise);
    spyOn(MyService,'getNextLevel').andReturn(deferred2.promise);
    spyOn(MyService,'aggregateTheStuff');
    
  • 测试中没有任何对“then”的调用,只是“解决”测试中创建的承诺,然后是 $rootScope.$apply(),然后实际调用 traverseTheStuff 中的“then”回调,其中我们还可以测试称为

    beforeEach(function() {
      spyOn(deferred1.promise, 'then').andCallThrough();
    });
    
    beforeEach(function() {
      deferred1.resolve(testData);
      $rootScope.$apply(); // Forces $q.promise then callbacks to be called
    });
    
    it('should call the then function of the promise1', function () { 
      expect(deferred1.promise.then).toHaveBeenCalled();
    });
    
  • 每个 Promise 必须被解析/$apply-ed 才能调用链中的下一个“then”函数。所以。为了让测试调用aggregateTheStuff(或者更确切地说,它的存根),从 getNextLevel 存根返回的第二个 Promise 也必须得到解析:

    beforeEach(function() {
      deferred2.resolve(testLevel);
      $rootScope.$apply(); // Forces $q.promise then callbacks to be called
    });
    
    it('should call aggregateTheStuff with ' + testLevel, function () {
      expect(MyService.aggregateTheStuff).toHaveBeenCalledWith(testLevel);
    });
    

上述所有内容的一个问题是它假定 $q 和 $rootScope 的某些行为。我理解这样的单元测试不应该做出这样的假设,以便真正只测试一点代码。我还没有弄清楚如何解决这个问题,或者我是否误解了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 $httpBackend 对 angularjs 承诺链进行单元测试 的相关文章

  • 使用 IQueryable 进行单元测试代码

    我被要求为某些功能编写一些单元测试 但坦率地说 我不太确定这样做的必要性或有用性对于这个特殊的一段代码 我绝不试图质疑单元测试的必要性或有用性 所讨论的代码非常简单并且被大量使用 基本上它是 Skip 和 Take 扩展方法的包装 在我看来
  • C# 模拟接口与模拟类

    我是 net 中的最小起订量框架的新手 根据我的在线研究 似乎有两种方法可以使用这个框架 要么模拟接口 要么模拟具体类 似乎在嘲笑具体类时 只有virtual方法可以被嘲笑 就我而言 我只想模拟实现接口的类的几个方法 例如 如果我们有以下内
  • 角度引导手风琴数据绑定问题

    我有 2 个相同型号的下拉菜单 一个位于手风琴内部 另一个位于外部 外部下拉菜单在 2 路数据绑定方面工作良好 但手风琴内部的下拉菜单似乎只有 1 路绑定 换句话说 在 UI 中选择并不会设置模型值 我找到了一个建议here https s
  • 具有 Angular 前端的简单 Django Rest Framework 应用程序会发生什么?

    我学习 Django 一段时间了 我发现这张图片很有帮助 我现在正在深入研究 Angular JS 我试图弄清楚每个组件 指令 控制器和服务 如何交互以及是否存在类似的 循环 这blog http kirkbushell me when t
  • 路线过渡之间滑动 AngularJS

    我只使用 Angular 大约一周时间 所以如果我的代码很糟糕 我深表歉意 我正在尝试在路线转换之间创建滑动操作 我可以在幻灯片中创建效果 但不能在路线转换之间创建效果 无论如何 代码如下 导航 li a class intro curre
  • 用嘲笑测试 Laravel 外观总是会通过,即使它应该失败

    我试图在单元测试期间模拟 Laravel 中的一些外观 但似乎无论如何测试总是会通过 例如 此示例取自 Laravel 文档 Event shouldReceive fire gt once gt with foo array name g
  • 使用内联查询进行单元测试

    我知道有几个问题与我的类似 Dapper 单元测试 SQL 查询 https stackoverflow com questions 20461553 dapper unit testing sql queries 测试简洁的查询 http
  • 当标题中包含“&”时,电子邮件标题无法正确显示,如何在 JavaScript 中修复?

    我有一些代码以以下格式显示文章标题列表 简短描述和作者姓名 标题 作者姓名 描述 作者的姓名和描述与此处无关 因为它们始终显示正确 大多数标题也可以正确显示 以下是一些虚构的示例 关于银行业务您需要了解的最重要的一件事 作者姓名 正确显示
  • AngularJS:选择非 2 路绑定到模型

    我正在使用选择来显示客户名称 用户应该能够选择现有客户端 然后更新范围属性 控制器 初始化 首选 if scope clients length gt 0 scope existingClient scope clients 0 View
  • 使用 Ionic/angularjs 打开图片库

    如何使用 Ionic angularjs 访问图片库 我只想在每次单击按钮时打开图片库 这怎么可能 您可以使用cordova相机插件 cordova 插件添加 org apache cordova camera 插件参考 https git
  • 在 AngularJS 中设置应用程序范围的 HTTP 标头

    有没有办法设置 httpProvider标题之外angular module myApp config 登录用户后 我从服务器获取身份验证令牌 我需要将其作为 HTTP 标头添加到所有后续请求中 您可以使用角度的默认标题1 0 x http
  • Material Design Lite 与 AngularJS 的集成 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我知道角材料 https github com angular material这有助于实现在 Angular 单页应用程序中使用的 Mater
  • angular.js ui + bootstrap typeahead + 异步调用

    我将 typeahead 与 angular js 指令一起使用 但填充自动完成的函数进行了异步调用 我无法返回它来填充自动完成 有没有办法让它与这个异步调用一起工作 我可以假设您正在使用 Bootstrap 2 x 的 typeahead
  • 使用 Angular ui-router 基于状态参数加载控制器

    我正在尝试加载基于状态参数的控制器以使其可重用 state dashboard item detail url detailId detailId detailName detailName views main templateUrl f
  • 如何在指令模板中使用动态 ng-show 值?

    我正在学习 Angular 并且尝试通过使用 Angular 指令来减少执行一些常见操作 例如显示错误消息 所需的代码 我想创建的一个指令是这样的
  • 在 Angular 单元测试中应该如何处理运行块?

    我的理解是 当您在 Angular 单元测试中加载模块时 run块被调用 我认为如果你正在测试一个组件 你不会想同时测试run块 因为unit测试应该只是测试一个unit 真的吗 如果是的话有什么办法可以防止run阻止运行 我的研究让我认为
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • 如何在下拉列表中选择一个选项

    我正在使用 AngularJS 指令 我需要在模板中设置下拉列表的选定选项
  • 将占位符绑定到模型会导致 ng-change 在 IE 中加载时执行

    使用 angularjs 如果我将输入的占位符绑定到其模型 则当文档在 IE 中加载时会触发更改事件 这似乎不正确 我在其他浏览器中没有看到这种行为 JSFiddle http jsfiddle net VxBNW 6 Html div d
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲

随机推荐