Sencha Test 使用示例 – Part 1

翻译 2016年08月23日 16:12:26

原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52291816



英文原文:《Sencha Test Examples – Part 1


介绍

Sencha Test 使得开发者可以编写并在他们的机器上执行测试,然后轻松地在自动化构建系统中进行自动化测试。学习如何编写单元测试最好的方式是看例子。本文我们会过一遍 SenchaTestDemo 项目中的 新建单元测试示例,看下入门是多么简单.

单元测试

不管你使用的是测试驱动开发 (Test Driven Development, TDD),还是行为驱动开发 (Behavioral Driven Development, BDD), 或者是你只想保证你的代码能够正确执行, 单元测试是适用于所有开发者的最佳选择. 单元测试对系统中的最小片段 (即单元) 进行隔离测试,保证他们能正确地运行. 单元测试是一个可以在前期捕获很多bug的方法,极大提升产品质量.

为了说明在真实的应用程序中如何实现, 我们考虑测试应用程序的最小的部分之一: 数据模型(model)。为简单起见, 我们使用 Admin Dashboard 示例中的 待办(TODO)列表 中的 这个model


Admin.model.Todo 模型 中的重要代码部分是下面的 set 函数:

    set: function (name, value) {
        var data = name;         if (typeof name === 'string') {
            if (name !== 'done') {
                data = [name, value];
            } else {
                data = [{
                    completedDate: value ? new Date() : null
                }];
                data[0].done = value;
            }
        } else {
            if (data.done !== undefined) {
                data = [Ext.apply({
                    completedDate: data.done ? new Date() : null
                }, data)];
            } else {
                data = [name];
            }
        }         return this.callParent(data);
    }

上面的 set 函数执行一个基本的业务规则:

   已完成(done)的待办事项必须有完成时间(completeDate), 未完成的待办的完成时间则为空.

这种方法可以确保在任何用户界面编辑某条记录(record)的 done 字段,都使得 completeDate 字段也会被正确更新。我们如何知道这个方法有效果呢? 写一些单元测试并执行它! 

检查下代码, 有四个方面需要考虑: 方法是如何调用的, 哪个字段被设置了, 字段被赋了什么值,以及record的初始状态。


不同的调用方式

set 函数有2中方式被调用: 分开传入一个字段名和新的字段值,或者只传入一个键值对。

受影响的字段

set 函数应该只对 done 字段的变化做出反应. 改变其它字段都不会影响 completedDate 字段的值. 修改 done 字段,然后验证 completedDate 字段受到的影响,这个被称为正面测试(positive tests), 而修改其他字段,然后验证 completedDate 字段没有受到影响,称为负面测试(negative tests)。很容易会忘记添加负面测试。要知道, 一个类没有做它不该做的事(负面),和做了它应该做的事 (正面),是同等重要的.

被赋的新值

将 done 字段设置为 true 应该会给 completedData 字段赋值当前日期, 而设置 done 为 false 应该将 completedDate 设为 null.

字段初始值

改变 done 字段的初始值应该会将 done 和 completedDate 标记为被修改过(dirty/modified)。

策略

有很多方法可以结合这些维度并测试每个组合, 但通常都会有一个简单的方式实现一个比较简单的测试套件(test suite)。在这种情况下, 最简单的是先从 record 初始值 这个维度上入手.

   describe('Todo Tests', function() {
      describe('with a not completed todo item', function() {
           beforeEach(function () {
               this.startTime = new Date().getTime();
               // Create a not completed item
               this.todo = new Admin.model.Todo({
                   id: 99,
                   task: 'Do this now',
                   done: false
               });
           });

在 Jasmine 单元测试框架中,beforeEach 方法接收一个函数参数,该函数会在该测试套件(suite)的每次测试之前被调用. 上面的代码, Jasmine 提供了一个上下文对象 (“this”指针) ,可以用来存储一条 待办记录(record)实例,其 done 初始值为 false. 因为这是最顶层2个测试套件的其中一个套件的部分逻辑, 所以这个 record 状态 是整个测试组合的前半部分的基石.

第二个维度, 则是调用 set 函数的方式。 剩下的维度就是测试本身了.

describe('set fields by name', function() {
    it('should not set done or completedDate when changing another field', ...
    it('should set completedDate when done is set', ...
    it('should unset completedDate when done is unset', ...
});
describe('set fields by object', function() {
    it('should not set done or completedDate when changing another field', ...
    it('should complete the todo', ...
    it('should unset completedDate when done is unset', ...
});

非常类似, 但不相同, 主要维度下的第二个字段值也需要重复执行这套测试:

    describe('with a completed todo item', function() {
        beforeEach( function() {
            this.startTime = new Date().getTime();
            this.todo = new Admin.model.Todo({
                id: 99,
                task: 'Do this now',
                done: true,
                completedDate: new Date()
            });
        });

完整的测试用例, 请看 GitHub.

总结

这个测试套件覆盖了所有正面和负面形式的初始以及值变换的可能性,应该没有其它副作用. 总的来说, set 函数大约20行代码。然而, 因为测试代码的分支性质, 它却花了近250行,才完全覆盖到所有的死角。尽管这250行大多是非常简单的期望语句, 不过测试代码与应用程序代码基本倾向于这个比例。

换句话说,编写单元测试是一种投资, 但却是值得的。下面是一些指导方针, 应该可以帮助实现最小化投资,并使回报最大化。

  • 着眼于棘手的部分。简单的函数可以检查验证。

  • 着眼于重要的部分. 不是所有的代码都和应用程序的整体功能同等重要的。投资在那些你无法承担出错后果的代码上。

  • 着眼于用到的部分. 花费时间测试极少使用的代码,不会有太多回报。不过即使很少使用的代码也有可能非常重要。

  • 测试要简单. 调试一个执行失败的测试的时候,你不会想在复杂的测试代码上挣扎. 再者,你也不想测试代码本身都有bug吧。

  • 正面和负面都要测试. 一定要确保代码不做它不应该做的事情。

  • 着重于输入和输出, 而不是内部细节. 只要输入、公共函数不变,在重写内部逻辑后,测试的输出应该都一致。

  • 确保清理不会被垃圾回收的资源 (比如添加到 DOM 树的元素). 可以使用 afterEach 或者 afterAll 这些 Jasmine 提供的 API,来保证清理工作能正确执行,即使出现了异常。


结论

我希望通过这个单元测试的例子,展示出了创建单元测试的好处,也是相对比较容易的, 可以启发你来编写自己的测试。使用 Sencha Test, 您可以使用Sencha Studio 或 通过命令行 stc 工具在本地运行单元测试。使用 Sencha Test 可以很容易地把测试从开发般到持续集成测试(CI)/构建系统中, 还可以在开发过程中提供安全保障。在本系列的第2部分中, 我将向您展示如何在本地机器上编写和执行测试的一些例子, 然后轻易地复制到持续集成环境(CI)。





欢迎加入Sencha Touch + Phonegap交流群

1群:194182999 (满)

2群:419834979

共同学习交流(博主QQ:479858761

[Sencha Test] 5、测试新建应用程序

Sencha Studio 允许开发人员快速和自动测试一个应用程序或 web 页面的细微粒度方面。随着代码库的增长,单元 测试可以确保应用程序的所有部分按照你的预期运行。 本指南, 我们学习生成一个...
  • lovelyelfpop
  • lovelyelfpop
  • 2016年09月12日 10:29
  • 1182

【翻译】使用新的Sencha Cmd 4命令app watch

如果没有使用过Sencha Cmd进行过辅助开发,可能对Sencha Cmd很陌生,对app watch也会看到一头雾水,不知就里。对我来说,新的app watch可以说是解决了之前使用Sencha ...
  • tianxiaode
  • tianxiaode
  • 2013年12月13日 15:54
  • 7505

sencha architect 2 官方实例 第一个实例

汽车列表实例是一个说明数据绑定的好例子。应用可以 让用户选择列表中的一辆车来查看细节,包括一张汽车的照片,教程结束后,你应该理解如何创建和设置视图,创建model数据层,如何把数据绑定到视图中。 ...
  • railsbug
  • railsbug
  • 2013年06月01日 03:28
  • 4277

用sencha touch+cordova(phoneGap)开发APP(一)——第一个界面

这次开发的项目是用于商业目的,要求比以前高了不少 以前从没接触过跨平台的app开发,尝试了不少的技术,比如之前的xamarin(c#),但是收费的用起来还是各种不方便(强烈吐槽微软) sencha...
  • u010668495
  • u010668495
  • 2015年03月01日 13:01
  • 1154

[EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么

Sencha cmd 是一个跨平台的命令行工具,它从你应用程序的新创建到部署入产品中的整个生命周期都提供了许多自动化的执行任务。 Sencha Cmd 提供了一系列功能强大的节约时间的功能,结合Sen...
  • sushengmiyan
  • sushengmiyan
  • 2014年07月31日 10:30
  • 21666

[Sencha Test] 2、安装和配置

原文链接:http://blog.csdn.net/lovelyelfpop/article/details/52313988 英文原文:《Installation and Setup》 ...
  • lovelyelfpop
  • lovelyelfpop
  • 2016年08月25日 14:09
  • 665

安装sencha cmd 多个版本后,如何调用指定的sencha cmd

1、 找到sencha cmd的安装目录 可以看到我同时安装了cmd5和cmd6,环境变量配置的是cmd5,但是我想使用的是cmd6 2、在6.0.1.76下打开命令行界面,输入sencha命...
  • shiyibodec
  • shiyibodec
  • 2016年06月20日 11:15
  • 942

使用Part上传附件

/* * To change this template, choose Tools | Templates * and open the template in the editor. */ ...
  • kcj991932907
  • kcj991932907
  • 2014年11月27日 21:01
  • 630

零基础学习Sencha Touch(资料和教程集合)

原文地址:http://blog.csdn.net/ydj9931/article/details/7285440 译者注:本篇文章为开发者提供了零基础使用Sencha Touch的一些资料...
  • jianzhanger
  • jianzhanger
  • 2015年09月28日 17:12
  • 1931

[EXTJS5学习笔记]第二十六节 在eclipse/myeclipse中使用sencha extjs的插件

在eclipse/myeclipse中实现智能提示extjs代码。感觉很费劲,效果也不是很理想啊,自己写代码就好了。其实完全没必要这么大费周折的。...
  • sushengmiyan
  • sushengmiyan
  • 2014年10月27日 15:21
  • 7348
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Sencha Test 使用示例 – Part 1
举报原因:
原因补充:

(最多只允许输入30个字)