scribble

Leon's scribble.

About Email GitHub

04 Dec 2015
使用 jasmine 编写单元测试(浏览器端)

准备工作

首先在项目根目录中创建一个 tests 目录,用于放置测试使用的文件,当然你也可以使用别的名称。

├── tests
│   ├── runner.html
│   ├── browser.test.js

runner.html 用于访问集成测试的结果页面,在 index.js 中编写单元测试。

安装

进入 tests 目录,使用 bower 安装 jasmine:

bower install jasmine

编辑 runner.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jasmine test runner</title>
    <link rel="stylesheet" type="text/css" href="bower_components/jasmine/lib/jasmine-core/jasmine.css">
    <script type="text/javascript" src="bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
    <script type="text/javascript" src="bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
    <script type="text/javascript" src="bower_components/jasmine/lib/jasmine-core/boot.js"></script>
</head>
<body>
<script src="../../dist/myComponent.js"></script>
<script type="text/javascript" src="browser.test.js"></script>
</body>
</html>

编写单元测试

describe('tests', function() {
    it('normal works', function() {
        expect(true).toBe(true);
    });
    it('async works', function(done) {
        jQuery.post('data.json', function(data) {
            expect(data.status).toBe('ok');
            done();
        });
    });
});

运行

这里需要先起一个本地 Web 服务,可以使用 http-server,然后在 package.json 中的 scripts 添加一行脚本:

scripts: {
    "start": "./node_modules/http-server/bin/http-server ./ -p 9100"
}

然后启动服务 npm start,访问 http://localhost:9100/tests/runner.html


参考资料


Til next time,
Leon at 13:35

scribble

About Email GitHub