AngularJs学习笔记--unit-testing

news2025/7/9 2:18:37

  javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编译器几乎不能给开发者提供任何帮助。因为这个原因,我们感受到编写任何javascript代码都必须有一套强大完整的测试。angular拥有许多功能,让我们更加容易地测试我们的应用。我们应该没有借口不去写测试(这个嘛……)。

一、 It is all about NOT mixing concerns(全部都关于避免代码关系变得复杂……)

  单元测试,正如名称那样,是关于测试单个“单元”的代码。单元测试努力解答这些问题:我对逻辑的考虑是否已经正确?排序方法得出的结果是否正确?为了解答这些问题,将这些问题独立出来显得尤其重要。这是因为当我们在测试排序方法的时候,我们不想关心其他相关的片段,例如DOM元素或者发起XHR请求获取数据等。明显地,通常比较难做到在典型的项目中单独调用一个函数。导致这个问题的原因是,开发者通常把关系弄得很复杂,最终让一个代码片段看起来可以做所有事情。它通过XHR获取数据,对数据进行排序,然后操纵DOM。与angular一起,我们可以更加容易地写出较好的代码,所以angular为我们提供XHR(我们可以模拟它)的依赖注入,angular还创建允许我们对model进行排序而不需要操作DOM的抽象。所以,到最后,我们可以简单地写一个排序方法,然后通过测试用例创建数据集合,供排序方法测试时使用,然后判断结果model是否符合预期。测试无须等待XHR、者创建对应的DOM和判断函数是否正确操作DOM。angular的核心思想包含代码的可测试性,但同时也要求我们去做正确的事情。angular致力于简化做正确事情的方法,但angular不是魔法,这意味着我们如果不遵循以下的几点,我们最终可能会得出一个不可测试的应用。

1. Dependency Inject

  有许多办法可以获得依赖的资源:1)我们可以使用new操作符;2)我们使用一个众所周知的方式,被称为” 全局单例”;3)我们可以向registry service请求(但我们如何取得一个registry?可以查看后面的章节);4)我们可以期待它会被传递过来。

  上面列出的方法中,只有最后一个是可测试的,让我们看看为什么:

1) Using the new operator

  使用new操作符时基本上没有错误,但问题是通过new调用构造函数将会永久地将调用方与type绑定起来。举个例子,我们尝试实例化一个XHR对象,以让我们可以从服务器获得一些数据。

function MyClass() {
     this.doWork = function() {
         var xhr = new XRH();
         xhr.open(method,url,true);
         xhr.onreadystatechange = function() {…};
         xhr.send();
  }
}

  问题来了,在测试时,我们通常需要实例化一个可以返回测试数据或者网络错误的虚拟的XHR。通过调用new XHR(),我们永久地绑定了真实的XHR,并且没有一个很好的方法去替代它。当然,有一个糟糕的补救办法,有很多理由可以证明那是一个糟糕的想法:

var oldXHR = XHR;
XHR = new MockXHR() {};
myClass.doWork();
//判断MockXHR是否通过正常的参数进行调用
XHR = oldXHR;//如果忘了这一步,很容易会发生悲催的事情。

2) Global look-up

  解决问题的另外一个方法是在一个众所周知的地方获取依赖的资源。

function MyClass() {
     this.doWork = function() {
           global.xhr({…});
    };
}

  没有创建新依赖对象的实例的情况下,问题基本上与new一致,除了那个悲催的补丁以外,没有一个很好的方法可以再测试时拦截global.xhr的调用。测试的最基本的问题是global变量需要改为调用虚拟的方法而被修改。想进一步了解它的坏处,可以参观这里:http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/

  上面的代码比较难去测试,所以我们必须修改global state:

var oldXHR = global.xhr;
global.xhr = function mockXHR(){…};
var myClass = new MyClass();
//判断MockXHR是否通过正常的参数进行调用
global.xhr = oldXHR;//如果忘了这一步,很容易会发生悲催的事情。

3) Service Registry

  拥有一个包含所有service的registry的话,似乎可以解决问题,然后,在测试代码中替换所需要的service。

function MyClass() {
     var serviceRegistry = ???;
     this.doWork = function() {
         var xhr = serviceRegistry.get(“xhr”);
     …
    };
}

  但是,serviceRegistry来自哪里?if it is: * new-ed up, the the test has no chance to reset the services for testing * global look-up, then the service returned is global as well (but resetting is easier, since there is only one global variable to be reset)(这里后面的文字跟乱码一样……没看懂)

  根据这个方法,将上面的Class修改为如下的方式:

var oldServiceLocator = global.serviceLocator;
global.serviceLocator.set('xhr', function mockXHR() {});
var myClass = new MyClass();
myClass.doWork();
//判断MockXHR是否通过正常的参数进行调用
global.serviceLocator = oldServiceLocator; //如果忘了这一步,很容易会发生悲催的事情。

4) Passing in Dependencies

  最后,依赖资源可以被传入。

function MyClass(xhr) {
     this.doWork = function() {
         xhr({…});
    };
}

  这个是首选的方式,因为代码无须理会xhr是从哪来的,也不关心谁创建了传进来的xhr。因此,类的创建者与类的使用者可以分开编码,这将创建的责任从逻辑中分离出来,这就是依赖注入的概述。

  这个class很容易测试,在测试中我们可以这样写:

function xhrMock(args) {…}
var myClass = new MyClass(xhrMock);
myClass.doWrok();
//做一些判断……
通过这个测试代码,我们可以意识到没有任何全局变量被破坏。

  angular附带的dependency-injection(http://www.cnblogs.com/lcllao/archive/2012/09/23/2699401.html),通过这种方式编写的代码,更加容易编写测试代码,如果我们想编写可测试性强的代码,我们最好使用它。

2. Controllers

  逻辑使每一个应用都是唯一的,这就是我们想去测试的。如果我们的逻辑里面混杂着DOM的操作,这将会跟下面的例子一样难测试:

function PasswordController() {
    // 获取DOM对象的引用
    var msg = $('.ex1 span');
    var input = $('.ex1 input');
    var strength;

    this.grade = function() {
         msg.removeClass(strength);
         var pwd = input.val();
         password.text(pwd);
         if (pwd.length > 8) {
               strength = 'strong';
         } else if (pwd.length > 3) {
               strength = 'medium';
         } else {
               strength = 'weak';
         }
        msg.addClass(strength).text(strength);
    }
}

  上面的代码在测试时会遇到问题,因为它需要我们的执行测试时候,需要有正确的DOM。测试代码会如下:

var input = $('<input type="text"/>');
var span = $('<span>');
$('body').html('<div class="ex1">').find('div').append(input).append(span);
var pc = new PasswordController();
input.val('abc');
pc.grade();
expect(span.text()).toEqual('weak');
$('body').html('');

  在angular中,controller严格地将DOM操作逻辑分离出来,将大大降低编写测试用例的难度,看看下面的例子:

function PasswordCntrl($scope) {
    $scope.password = '';
    $scope.grade = function() {
         var size = $scope.password.length;
         if (size > 8) {
                   $scope.strength = 'strong';
         } else if (size > 3) {
                   $scope.strength = 'medium';
         } else {
                   $scope.strength = 'weak';
         }
    };
}

  测试代码直截了当:

var pc = new PasswordController($scope);
pc.password('abc');
pc.grade();
expect($scope.strength).toEqual('weak');

  值得注意的是,测试代码不仅仅更加间断,而且更加容易追踪。我们一直说测试用例是在讲故事,而不是判断其他不相关的东西。

3. Filters

  filter(http://docs.angularjs.org/api/ng.$filter)是用于将数据转换为对用户友好的格式。它们很重要,因为它们将转换格式的责任从应用逻辑中分离出来,进一步简化了应用逻辑。

myModule.filter('length', function() {
    return function(text){
         return (''+(text||'')).length;
    }
});

var length = $filter('length');
expect(length(null)).toEqual(0);
expect(length('abc')).toEqual(3);

4. Directives

5. Mocks

6. Global State Isolation

7. Preferred way of Testing

8. JavascriptTestDriver

9. Jasmine

10.   Sample project

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/619214.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何编写接口测试用例?测试工程师必备技能!

自动化始终只是辅助测试工作的一个手段&#xff0c;对于测试人员而言&#xff0c;测试基础和测试用例的设计才是核心。如果测试用例的覆盖率或者质量不高&#xff0c;那将这部分用例实现为自动化用例的意义也就不大了。 那么&#xff0c;接口测试用例应该怎么编写呢&#xff1f…

基于SpringBoot实现的分页查询(分分钟钟上手)

这里是使用的hibernate(不需要写sql)和springboot 也可使用 MyBatis&#xff08;推荐使用&#xff09; 下面是使用Spring Boot实现分页查询的示例&#xff1a; 在pom.xml文件中添加依赖项&#xff1a; <dependency><groupId>org.projectlombok</groupId>&l…

阿里面经最新分享:Java 面试指南 / 成长笔记(程序员面试必备)

写在前面 又到了收割 Offer 的季节&#xff0c;你准备好了吗&#xff1f;曾经的我&#xff0c;横扫各个大厂的 Offer。还是那句话&#xff1a;进大厂临时抱佛脚是肯定不行的&#xff0c;一定要注重平时的总结和积累&#xff0c;多思考&#xff0c;多积累&#xff0c;多总结&am…

2023年牛客网互联网高级架构师Java面试八股汇总(附答案整理)

此文包含 Java 面试的各个方面&#xff0c;史上最全&#xff0c;苦心整理最全 Java 面试题目整理包括基础JVM算法数据库优化算法数据结构分布式并发编程缓存等&#xff0c;使用层面广&#xff0c;知识量大&#xff0c;涉及你的知识盲点。要想在面试者中出类拔萃就要比人付出更多…

【动态规划】-最小路径和(java)

最小路劲和--动态规划和内存压缩 最小路径和题目描述 动态规划解题思路&#xff1a;代码演示动态规划的内存压缩动态规划专题 最小路径和 题目描述 给定一个二维数组matrix&#xff0c;一个人必须从左上角出发&#xff0c;最后到达右下角 沿途只可以向下或者向右走&#xff0c…

用了7年的 source insight 3.5 背景色及字体配置(提升code效率)

文章目录 背景目的背景护眼色配置字体与编辑选项配置全局配置的保存与加载 背景 今天突然source insight3.5抽风&#xff0c;配置重置了&#xff0c;默认配置很难看。 找了一会儿才找到之前的备份配置&#xff0c;load后舒服了。 目的 在此记录并share用了7年的 source insi…

300页幻灯片图解数据安全风险评估(附下载)

为指导网络数据安全风险评估工作&#xff0c;发现数据安全隐患&#xff0c;防范数据安全风险,依据《中华人民共和国网络安全法》《中华人民共和国数据安全法》《中华人民共和国个人信息保护法》等法律法规&#xff0c;参照数据安全相关国家标准&#xff0c;全国信息安全标准化技…

ChatGPT与VBA:Excel操作一键搞定的全能助手

摘要 Excel是一款广泛应用于数据处理和分析的工具&#xff0c;而VBA&#xff08;Visual Basic for Applications&#xff09;是一种用于编程自动化Excel操作的语言。然而&#xff0c;对于非专业的Excel用户来说&#xff0c;VBA编程可能具有一定的难度。本文将探讨如何利用Chat…

不同规格的磁场线圈适用领域

磁场线圈基于毕奥-萨法尔定律&#xff0c;以绕组中通电流的形式复现磁场的线圈&#xff0c;用于复现标准磁场&#xff0c;是弱磁场计量测试领域最主要的标准器具之一。按所复现的磁场类型可分为恒定磁场线圈、交变磁场线圈、梯度磁场线圈、脉冲磁场线圈等&#xff0c;按结构可分…

AIX5.3安装Python3遇到的坑

最近在折腾AIX5.3&#xff0c;这是一款非常古老的power架构的服务器&#xff0c;目前IBM官方已经不维护&#xff0c;但是仍然在很多银行里跑着比较核心的业务&#xff0c;由于我们的客户大部分是面向银行&#xff0c;少不了要做AIX5.3上的应用软件适配。本文记录在AIX5.3上编译…

51单片机——DS18B20 温度传感器实验,小白讲解,相互学习

DS18B20 介绍 DS18B20 是由 DALLAS 半导体公司推出的一种的“一线总线&#xff08;单总线&#xff09;”接 口的温度传感器。与传统的热敏电阻等测温元件相比&#xff0c;它是一种新型的体积小、 适用电压宽、与微处理器接口简单的数字化温度传感器。 DS18B20 温度传感器具有如…

linuxOPS基础_linux常用自有服务(ntp,firewalld,crond)

linux常用自有服务 服务名含义ntpd用于同步计算机的系统时间的服务firewalld防火墙服务crond计划任务服务 ntp时间同步服务 NTP是网络时间协议(Network Time Protocol)&#xff0c;它是用来同步网络中各个计算机的时间的协议。 工作场景&#xff1a; ​ 公司开发了一个电商…

Jmeter教程 —— 简单的压力测试

Jmeter是一个非常好用的压力测试工具&#xff0c;可以用来做轻量级的压力测试&#xff0c;非常合适&#xff0c;只需要十几分钟&#xff0c;就能把压力测试需要的脚本写好。 什么是压力测试 顾名思义&#xff1a;压力测试&#xff0c;就是 被测试的系统&#xff0c;在一定的…

Android Studio查看第三方库依赖树

在Android开发过程中&#xff0c;我们或多或少都会引入第三方库&#xff0c;引入的库越多&#xff0c;越容易产生库之间的依赖冲突&#xff0c;所以我们今天一起来了解Android Studio查看第三方库依赖树。 下面就拿我遇到的问题还原一下&#xff1a; 之前接人容联客服系统的时候…

工作小技巧,封装if和Exception

在我们的工作中&#xff0c;经常会有这样的逻辑&#xff0c;就是判断一个参数是否合法&#xff0c;不合法就抛出异常&#xff0c;再由全局异常捕获后返回。 本文使用我编写的springboot日记本系统作为蓝本&#xff0c;&#xff0c;在已有项目的基础上改&#xff0c;源码下载地…

思科小型网络配置实例

一、配置思路 1.交换机上配置端口连接描述&#xff0c;在实际工作中很有用 2.外网配置&#xff0c;模拟外网&#xff1a;PC的IP地址200.200.200.2&#xff0c;Server的IP地址是200.200.200.3&#xff0c;网关都是200.200.200.1。SW-ISP的连接PC和Server-ISP的口属于vlan 3,&…

【vue】二:核心处理---vue的生命周期

文章目录 1.Vue生命周期的四个阶段&#xff0c;八个钩子2.vue的生命周期图例3. 初始阶段&#xff1a;虚拟DOM生成4. 挂载阶段&#xff1a;真实DOM生成5. 更新阶段&#xff1a;data变化重新渲染6. 销毁阶段&#xff1a;卸载所有&#xff0c;销毁vm 1.Vue生命周期的四个阶段&…

Appium利用xpath查找同级节点兄弟节点方法

当页面存在两个文件夹&#xff0c;结构相同&#xff0c;只有文件夹名称不同时&#xff0c;想要点击某一个文件夹上的某个控件。这个时候需要使用xpath定位。 1.由父节点定位子节点 driver.findElementByXPath(//XCUIElementTypeCell/XCUIElementTypeStaticText[name"标签…

Java网络开发(Tomcat)—— 用Jsp语法 到 实现数据的分页展示 到 只看自己的数据 + 模糊查询 迭代升级

目录 引出0.jsp的使用和语法 & 报错和解决&#xff08;1&#xff09;后端共享&#xff0c;前端获取 ${pageInfo}&#xff08;2&#xff09;如果想获取pageInfo这个对象的某个属性值&#xff0c;用 点 属性 ${pageInfo.pages}&#xff08;3&#xff09;如果想回传&#xff…

前端性能测试必备测试工具

我们在使用网站过程中&#xff0c;经常会遇到慢的问题&#xff0c;为了找到原因&#xff0c;一般需要借助工具进行检测&#xff0c;通过工具&#xff0c;可以检测出前端站点加载资源的相关详细情况。 今天&#xff0c;就给大家介绍几款前端性能测试分析工具&#xff0c;结合性能…