Jasmine Introduction —— Jasmine 测试框架初探

Jasmine 的介绍在网上随处可见，在此我们先摘录官网对其的描述：

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Jasmine 是一款 BDD(Behaviour-drive development) 的JavaScript 测试框架。它独立于其他的 JS 框架自成一体，且并不需要 DOM 作为支撑。语法简单，书写容易也是其优势之一。

 

Jasmine 的实用性、易用性已经在大量的实际使用的中得到了验证，所以本文不再赘述。这里我们将重点放在：怎样从零开始使用 Jasmine 测试我们现存的 JavaScript 代码。

 

在浏览器中运行 Jasmine 测试框架：

首先，我们可以在  https://github.com/jasmine/jasmine/releases 下载到最新发布的 Jasmine standalone distribution。

以我下载的 Jasmine-standalone-2.4.1 为例，解压后文件目录结构如下，可以看到里面已经有一些示例代码：

其中 /lib 文件夹下包含了测试框架的源码等文件。

/src 下包含了待测试的 JS 代码。里面包含两个文件 Song.js 和 Player.js

/spec 下则包含了对应的测试代码， PlayerSpec.js 和 SpecHelper.js 

 

直接在浏览器中打开 SpecRunner.html，就可以看到如下页面，

表示 SpecRunner.html 中包含的 5 个测试用例都顺利通过了。

 

 

本文中，我们不再对这部分代码进行研究，而是直接创建我们自己的测试用例。在 /src 下添加 Hello.js

var Hello = function() {};

Hello.prototype.foo = "foo";
Hello.prototype.bar = null    ;

Hello.prototype.helloWorld = function() {
    return "Hello World!";
}

Hello.prototype.helloSomeone = function(toGreet) {
    return this.sayHello() + " " + toGreet;
}

Hello.prototype.sayHello = function() {
    return "Hello";
}

 

在 /spec 下添加 Hello.matcher.js

beforeEach(function () {
    jasmine.addMatchers({
        toContainWord: function () {
            return {
                compare: function (actual, expected) {
                    var result = {};
                    result.pass = (actual.indexOf(expected) !== -1);
                    if( result.pass ) {
                        result.message = "Expected " + actual + " to contain " + expected + ".";
                    } else {
                        result.message = "Expected " + actual + " to contain " + expected + ", but it does not.";
                    }
                    return result;
                }
            }
        }
    });
});

 

然后写下我们自己的测试 Hello.spec.js：

describe("Hello", function () {
    var hello;

    beforeEach(function () {
        hello = new Hello();
    });

    it("a newly created Hello instance should not be the same instance with the origin one", function () {
        expect(hello).not.toBe(new Hello());
        expect(hello).toEqual(new Hello());
    });

    describe("helloWorld function", function () {
        it("should return hello statement", function () {
            expect(hello.helloWorld()).toBe("Hello World!");
        });

        it("should contain word 'World'", function () {
            expect(hello.helloWorld()).toContainWord("World!");
        });

        it("an undefined variable should pass 'toBeUndefined' matcher", function () {
            expect(hello.a).toBeUndefined();
        });

        it("a null variable should pass 'toBeNull' matcher", function () {
            expect(hello.bar).toBeNull();
        });

        it("variable after boolean casting should pass 'toBeTruthy' 'toBeFalsy' matcher", function () {
            expect(hello.foo).toBeTruthy();
            expect(hello.bar).toBeFalsy();
        });
        it("should pass the 'toMatch' matcher for regular expressions", function (){
            expect(hello.helloWorld()).toMatch(/^\w*\s\w*!$/);
        });
    });

    describe("helloSomeone function", function () {
        it("should calls the sayHello() function", function () {
            spyOn(hello, "sayHello");
            hello.helloSomeone("Chou");
            expect(hello.sayHello).toHaveBeenCalled();
            expect(hello.sayHello).toHaveBeenCalledTimes(1);
        });
        it("should greet the 'World'", function () {
            spyOn(hello, "helloSomeone");
            hello.helloSomeone("World");
            expect(hello.helloSomeone).toHaveBeenCalledWith("World");
            expect(hello.helloSomeone).not.toHaveBeenCalledWith("world");
        });
        it("should calls the fake sayHello()", function () {
            hello.sayHello = jasmine.createSpy("'sayHello' spy");
            hello.helloSomeone("world");
            expect(hello.sayHello).toHaveBeenCalled();
        });
    });
});

 

第一步是 describe 我们的测试。一个测试是由 Jasmin 中的 describe function 开始的。describe 需要两个参数， 一个 String 和一个 function。在这个 String 中我们可以描述测试的名字和意图，通常是对被测试对象的描述。funciton 中则包含我们具体的测试代码。

It function, 也就是 ‘Spec’，也和describe 一样，含有两个参数，一个String和一个function。String具体描述这个测试单元的目的，在本例中，我们使用 Should do sth. when sth. happened 的格式，以使测试单元看起来更整洁也更便于理解。

一个 spec 中会包含一或多个 expectation。 Jasmine 中的 expectation 就像 JUnit 中的 assertion 一样，会对判断条件进行判断并返回 true/fase，只有当一个 spec 中所有的 expectation 全部通过时，我们才可以称之为一个 passing spec。

然后是 Matchers。 每一个matcher都会比较实际输入的值，与期望的值，并返回一个 boolean。根据matchers 返回的Boolean值，jasmine决定是否让一个spec顺利通过。每一个matcher都可以通过在前面插入一个 not 声明，来实现一个相反的assertion。

在本例中，我们使用了几种常见的 Matcher:  toBe toEqual toMatch toBeDefined toBeTruthy toBeNull toContain。也使用了一个自定义的 Matcher ‘toContainWord’。这个 Matcher 检查我们待判断 String 是否包含传入的参数。如

     expect(“Hello World!”).toContainWord(“World!”)

就能够顺利通过 Matcher 的判断。

 

同其他测试框架一样，为了减少代码重复，jasmine也提供了一些全局方法来进行 setup/teardown

分别为 beforeEach, afterEach, beforeAll, afterAll。

其中 beforeAll 会在所有 spec 运行前执行一次，afterAll 则会在所有 spec 运行完成后执行一次。在 beforeAll 和afterAll中我们可以做一些成本比较高的操作，以提高我们的测试效率。不过这样做同时也会提高风险，不同 spec 之间可能会互相影响而导致测试失败。所以使用时需要多加小心。

不同于 beforeAll 和 afterAll, beforeEach 和 afterEach 则会在每个 spec 前后分别执行。

所以这些方法执行流程大体如下：

beforeAll

     beforeEach

          spec

     afterEach

     beforeEach

          spec

     afterEach

afterAll

做完以上工作，我们就成功的建立了自己的第一个 Jasmine 测试了

 

接下来就是修改 SpecRunner.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.4.1</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
  <link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">

  <script src="lib/jasmine-2.4.1/jasmine.js"></script>
  <script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
  <script src="lib/jasmine-2.4.1/boot.js"></script>

  <!-- include source files here... -->
  <script src="src/Hello.js"></script>

  <!-- include spec files here... -->
  <script src="spec/Hello.matcher.js"></script>
  <script src="spec/Hello.spec.js"></script>

</head>

<body>
</body>
</html>

 

在 SpecRunner.html 中，务必要先引入所有 jasmine 的依赖文件：

     jasmine.css

     jasmine.js

     jasmine-html.js

     boot.js

再引入我们待测试的 Hello.js，最后则是我们的测试文件 Hello.matcher.js 和 Hello.spec.js。

 

做好以上的步骤，我们再打开 SpecRunner.html：

就能看到我们新增的 10 个测试全部通过啦。

 

 

希望本文能对广大第一次接触 Jasmine 的朋友们有所帮助，有何问题也请多多指教。

 

如果你希望获取更多更详细的介绍，请参考官方文档：http://jasmine.github.io/2.4/introduction.html

 

转载于:https://www.cnblogs.com/zhaoxiaoji/p/jasmine_intro.html