搜索
首页web前端js教程AngularJS测试:引导程序块,路线,事件和动画

AngularJS Testing: Bootstrap Blocks, Routes, Events, and Animations

关键要点

  • 单元测试对于软件开发至关重要,尤其对于包含数十万行 JavaScript 代码的应用程序。AngularJS 支持依赖注入 (DI) 等特性,使代码测试更容易。
  • 配置和运行块在模块生命周期的开始执行,包含重要的逻辑。它们不能像其他组件一样直接调用,这使得测试它们比较棘手,但由于它们的关键作用,不能忽略它们。
  • AngularJS 通过 $scope 上的 $emit/$broadcast 事件提供事件聚合,允许对象即使彼此不知道也能相互交互。单元测试是隔离编写的,因此测试规范需要模拟一端来测试功能。
  • 路由定义用户在应用程序中的导航方式,任何更改都可能导致糟糕的用户体验。因此,也应该测试路由。AngularJS 应用程序中两个最常用的路由器是 ngRoute 和 ui-router。
  • 测试 AngularJS 中的动画比测试指令更简单,angular-mocks 库包含 ngAnimateMock 模块来简化此过程。AngularJS 会阻止动画运行,直到第一个 digest 循环完成,以加快初始绑定速度。

在构建和交付功能齐全的软件的过程中,我们应用多种技术来检查软件的正确性和质量。单元测试就是其中一种技术。许多组织非常重视单元测试,因为它降低了查找和修复应用程序潜在问题的成本。当我们开始开发包含数十万行 JavaScript 代码的应用程序时,我们就无法避免测试代码。一些 JavaScript 开发人员表示,测试 JavaScript 更加重要,因为在运行时之前,语言的行为是未知的。值得庆幸的是,AngularJS 通过支持依赖注入 (DI) 等特性,使使用该框架编写的代码测试更容易。在我之前的几篇文章中,我讨论了关于模拟的一些技巧,如何测试控制器、服务和提供程序以及如何测试指令。本文将介绍测试 AngularJS 应用程序的引导块(包括配置块、运行块和路由解析块)、作用域事件和动画。您可以从我们的 GitHub 存储库下载本文中使用的代码,您还可以在其中找到运行测试的说明。

测试配置和运行块

配置和运行块在模块生命周期的开始执行。它们包含控制模块、小部件或应用程序工作方式的重要逻辑。测试它们有点棘手,因为它们不能像其他组件一样直接调用。同时,它们也不能被忽略,因为它们的作用至关重要。考虑以下配置和运行块:

angular.module('configAndRunBlocks', ['ngRoute'])
    .config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController',
        resolve: {
            bootstrap: ['$q', function ($q) {
                return $q.when({
                    prop: 'value'
                });
            }]
        }
    })
        .when('/details/:id', {
        templateUrl: 'details.html',
        controller: 'DetailsController'
    })
        .otherwise({
        redirectTo: '/home'
    });
})
    .run(function ($rootScope, messenger) {

    messenger.send('Bootstrapping application');
    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        messenger.send('Changing route to ' + next + ' from ' + current);
    });
});

与测试提供程序的情况类似,我们需要确保在测试配置和运行块中的功能之前加载模块。因此,我们将使用一个空的注入块来加载模块。以下代码片段模拟了上述块中使用的依赖项并加载了模块:

describe('config and run blocks', function () {
    var routeProvider, messenger;

    beforeEach(function () {
        module('ngRoute');

        module(function ($provide, $routeProvider) {
            routeProvider = $routeProvider;
            spyOn(routeProvider, 'when').andCallThrough();
            spyOn(routeProvider, 'otherwise').andCallThrough();

            messenger = {
                send: jasmine.createSpy('send')
            };
            $provide.value('messenger', messenger);
        });

        module('configAndRunBlocks');
    });

    beforeEach(inject());
});

我故意没有模拟 $routeProvider 对象,因为我们稍后将在本文中测试已注册的路由。现在模块已加载,配置和运行块已执行。因此,我们可以开始测试它们的行为。由于配置块注册路由,我们可以检查它是否注册了正确的路由。我们将测试是否注册了预期的路由数量。以下测试验证配置块的功能:

describe('config block tests', function () {
    it('should have called registered 2 routes', function () {
        //Otherwise internally calls when. So, call count of when has to be 3
        expect(routeProvider.when.callCount).toBe(3);
    });

    it('should have registered a default route', function () {
        expect(routeProvider.otherwise).toHaveBeenCalled();
    });
});

示例代码中的运行块调用一个服务并注册一个事件。我们将在本文后面测试该事件。目前,让我们测试对服务方法的调用:

describe('run block tests', function () {
    var rootScope;
    beforeEach(inject(function ($rootScope) {
        rootScope = $rootScope;
    }));
    it('should send application bootstrap message', function () {
        expect(messenger.send).toHaveBeenCalled();
        expect(messenger.send).toHaveBeenCalledWith("Bootstrapping application");
    });
});

(后续部分关于测试作用域事件、路由、解析块和动画的描述,由于篇幅限制,此处省略。 完整的测试代码示例可以参考原文GitHub仓库)

结论

通过这篇文章,我介绍了过去两年在测试 AngularJS 代码时学习到的大部分测试技巧。这并非结束,当您为实际应用程序的业务场景编写测试时,您将学到更多。我希望您现在已经对测试 AngularJS 代码有了足够的了解。为什么还要等待?立即为到目前为止编写的每一行代码编写测试!

(原文中FAQs部分也由于篇幅限制省略)

以上是AngularJS测试:引导程序块,路线,事件和动画的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
在JavaScript中替换字符串字符在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

8令人惊叹的jQuery页面布局插件8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

构建您自己的Ajax Web应用程序构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

10张移动秘籍用于移动开发10张移动秘籍用于移动开发Mar 05, 2025 am 12:43 AM

该帖子编写了有用的作弊表,参考指南,快速食谱以及用于Android,BlackBerry和iPhone应用程序开发的代码片段。 没有开发人员应该没有他们! 触摸手势参考指南(PDF) Desig的宝贵资源

通过来源查看器提高您的jQuery知识通过来源查看器提高您的jQuery知识Mar 05, 2025 am 12:54 AM

jQuery是一个很棒的JavaScript框架。但是,与任何图书馆一样,有时有必要在引擎盖下发现发生了什么。也许是因为您正在追踪一个错误,或者只是对jQuery如何实现特定UI感到好奇

10个JQuery Fun and Games插件10个JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味横生的jQuery游戏插件,让您的网站更具吸引力,提升用户粘性!虽然Flash仍然是开发休闲网页游戏的最佳软件,但jQuery也能创造出令人惊喜的效果,虽然无法与纯动作Flash游戏媲美,但在某些情况下,您也能在浏览器中获得意想不到的乐趣。 jQuery井字棋游戏 游戏编程的“Hello world”,现在有了jQuery版本。 源码 jQuery疯狂填词游戏 这是一个填空游戏,由于不知道单词的上下文,可能会产生一些古怪的结果。 源码 jQuery扫雷游戏

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

jQuery视差教程 - 动画标题背景jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅,从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!