Knockout 单元测试 #24

lyc152 · 2015-11-29T15:11:17Z

Jasmine作knockout库的单元测试

web应用程序测试是一个复杂的主题。因为它需要通过一些不同的方法，参与一个完整的测试策略，以期完成从单元测试到集成测试一系列的测试。问题是我们从哪里开始？我认为这个问题最好的答案是来自房屋基金会，只要他够够坚实有力，我们就应该开始。这本书的主要目的是阐述如何对一个javascript库一个知名的设计模式（MVVM）Knockout 进行测试。在这个场景中，一个测试策略的核心是良好的单元测试。
在这一章，我们将介绍 Jasmine，一个单元测试库 通过行为驱动开发（BDD）方式来检查各单元和模块的代码。值得一提的是，我们用得时2.0版本的Jasmine。

你将学习：

BDD 是什么和我们如何思考这种测试方法
Jasmine 是如何工作的，它提供了什么杨的工具。

单元测试的风格

事实上有很多书籍讨论了软件测试的设计原则和开发过程（例如，测试驱动开发）。这本书。另一方面，是一种实践手册，试图解释它的基本模式，技术，参与web引用程序测试的工具。这意味着，这里的主要目的不是讨论软件测试的大局，不管怎样，每一个单元测试框架的灵感来源于一种特殊的设计式样，所以我们有必要简短地讨论它。
TDD测试驱动开发是最著名的技术之一，但是认为TDD只是简单地与单元测试相关那是错误的。TDD是一种软件开发过程，追求通过使用单元测试来完成良好的代码设计风格这一目标。
根据Kent Beck 的书<<Test-Driven Development>>中的例子，TDD是通过重复下面的步骤：
* 添加一个测试
* 运行所有的测试用例
* 分析失败的用例，编写新的代码。
* 编写的代码必须通过测试，运行测试用例，然后重构代码。
这一过程首先依靠好的测试用例来出产更好地代码。开发者不得不在开发之初就要考虑可测试性。这也会促成更好地理解功能性和非功能性的需求。
TDD 不是唯一一种基于某些代码进行测试的技术。BDD也是一种与单元测试和测试驱动相关的技术。BDD最近被 Dan North 开发出来，他的目的是以考虑用户验收标准为前提，改变单元测试的方法。TDD 没有提到从哪里开始，需要测试多少行代码，更重要的在一个复杂的代码库中该怎么处理。BDD试图解决这些问题。它提供了使开发人员感到舒适的指导方针。例如：BDD提供了一个具体的方式去定义测试和套件名称，这也是TDD的最让人意外的问题之一。另外，BDD施行了一种新的理念体系，而不是简单的测试。通过这种方式，我们可以提高对系统整体的理解，因为我们需要关注它的最终行为，而不是一个单纯地技术测试。
BDD从表达系统需求的测试用例开始。格式如下：
* 给予（初始上下文）
* 当（事件发生）
* 然后（确保产生一些结果）
这是一个很好地例子，可以弥补软件开发的技术细节与系统分析以及用户验收标准之间的差异。
Jsmine 已经通过这种方式设计。它的API遵循这种模式，他可以帮助开发者专注于代码行为的执行上下文，事件（通常由用户触发）和预期的结果。

Hello Jasmine

使用Jsmine是相当容易的，我们必须执行以下步骤:

下载Jsmine，它的网站托管在Github(https://github.com/pivotal/jasmine/tree/master/dist)；
测试项目中创建一个文件夹；
Jsmine zip 文件包解压缩到步骤2创建的文件夹中；
清空注释并且在 src 子文件夹删除示例代码;
添加一些源代码在 src 文件夹中的 .js 文件中;
通过Jsmine 在 spec 子文件中添加测试代码;
在步骤 5，6 中出现的SpecRunner.html 中添加脚本引用;

在 web 浏览器中运行 SpecRunner.html，并验证结果。

这显然不是一个典型的TDD编码周期，我们首先编写一些代码，然后测试它，TDD恰好相反。我是TDD的坚定支持者，在这里我是想让问题尽可能简单，甚至于解释Jasmine 给那些不知道 TDD的人。
例如在步骤5中，我们可以添加以下js代码，命名为03_01.js,添加一段简单的代码进行测试:

javascript

 var MyClass = function () {
    this.message = "Hello Jasmine!";
 };

这个类很简单，但这里的目的是学习如何建立一个Jasmine 项目。
在步骤6中，我们可以添加一个js 文件，命名为 03_01_spec.js,添加以下代码:

javascript

    describe("Given MyClass implementation", function () {
        var myObj = new MyClass();
        it("when accessing message, then it                 should be equal to \"Hello " +
                "Jasmine!\"", function () {
            expect(myObj.message).toEqual("Hello Jasmine!");
        }); 
    });

``

我将详细解释 Jasmine 是如何工作的。在接下来得部分，第一个简单的例子非常好的表达了我们的测试模式，通过 表单中给定的给予/当/然后 的形式。
在 Jasmine的全局函数（我们称为套件），我们通过一个给定的代码定义了上下文（实现Myclass对象),和一个函数，它将被执行依靠spec runner。在这个函数中，我们初始化Myclas 类的 myObj实例，然后调用 Jamine 方法。
在它的全局函数中（我们称为规范），我们通过 when/then 指定了一种情况(访问消息属性)和验证（消息属性等于“你好 jasmine”）。然后，将执行一个函数，我们表达了我们的预期通过Jasmine 全局函数。
在第7个步骤中，我们需要添加如下的代码在SpecRunner_03_01.html中。

html

<!DOCTYPE html>
    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/              html;charset=UTF-8">
        <title>Jasmine Spec Runner v2.0.0</title>
        <link rel="shortcut icon" type="image/png" href="libs/jasmine-2.0.0/jasmine_favicon.png">
        <link rel="stylesheet" type="text/css" href="libs/jasmine-2.0.0/jasmine.css">
        <script type="text/javascript" src="libs/jasmine-2.0.0/jasmine.js"></script>
        <script type="text/javascript" src="libs/jasmine-2.0.0/jasmine-html.js"></script>
        <script type="text/javascript" src="libs/jasmine-2.0.0/boot.js"></script>
<!-- include source files here... -->
        <script type="text/javascript" src="src/03_01.js"></script>
<!-- include spec files here... -->
        <script type="text/javascript" src="specs/03_01_specs.js"></script>
</head>
<body>

</body>
</html>

``

未完待续
翻译自<<Web App Testing Using Knockout.JS>>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Knockout 单元测试 #24

Knockout 单元测试 #24

lyc152 commented Nov 29, 2015

Knockout 单元测试 #24

Knockout 单元测试 #24

Comments

lyc152 commented Nov 29, 2015

Jasmine作knockout库的单元测试

你将学习：

单元测试的风格

Hello Jasmine

使用Jsmine是相当容易的，我们必须执行以下步骤: