Jasmine, 自动化测试, 单元测试 --- 使用

最新推荐文章于 2024-03-24 20:33:24 发布

Gemu

最新推荐文章于 2024-03-24 20:33:24 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签： jasmine

本文链接：https://blog.csdn.net/gemuandyou/article/details/50751558

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jasmine测试可以用在多个框架或平台中。

首先，需要安装。

>bower i jasmine --save

若果你没安装bower，那就先npm i bower吧。（也可以使用npm i -g jasmine，使用node.js方式来进行测试，如果是这样的话，那就不用看下文了，去看一下 http://jasmine.github.io/2.4/node.html）

安装好后，结构如下：

之后新建一个页面和两个，当做测试结果显示页面。页面内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jasmine Test</title>
</head>
<body>
    <h1>Jasmine TEst</h1>
    <link rel="shortcut icon" type="image/png" href="../bower_components/jasmine-core/images/jasmine_favicon.png"> <!-- jasmine固定导进来的 -->
    <link rel="stylesheet" type="text/css" href="../bower_components/jasmine-core/lib/jasmine-core/jasmine.css"> <!-- jasmine固定导进来的 -->

    <script type="text/javascript" src="../bower_components/jasmine-core/lib/jasmine-core/jasmine.js"></script> <!-- jasmine固定导进来的 -->
    <script type="text/javascript" src="../bower_components/jasmine-core/lib/jasmine-core/jasmine-html.js"></script> <!-- jasmine固定导进来的 -->
    <script type="text/javascript" src="../bower_components/jasmine-core/lib/jasmine-core/boot.js"></script> <!-- jasmine固定导进来的 -->

    <script type="text/javascript" src="../src/js/demo.js"></script> <!-- 需要被测试的js -->
    <script type="text/javascript" src="../src/spec/demoSpec.js"></script> <!-- 存放的是测试的脚本代码 -->

</body>
</html>

接下来新建需要被测试的js文件，demo.js。内容如下：

/**
 * Created by Gemu on 2/24/2016 0024.
 */
function demo() {
    console.log("invoke demo function");
    return "_demo_";
}

然后接着新建测试文件，demoSpec.js。内容如下：

<pre name="code" class="javascript">/**
 * Created by Gemu on 2/24/2016 0024.
 */
describe("demo test", function() { // 第一个参数是测试的文字描述， 第二个是测试的方法

    it("test demo function return value", function() { // 每一个it函数代表着一个测试。第一个参数是对该it函数的测试内容描述， 第二个参数中是测试代码
        expect("demo").toEqual(demo());  // demo()的执行结果应该返回的是 “_demo_”， 而你这个测试代码中期望的结果却是“demo”，显然 “demo”和“_demo_”是不一样的，那么在测试页面中会显示什么呢？
    });

});

打开测试页面，显示如下（这里的demo2应该是demo，我改了个名字）：

它告诉了你测试的结果。

接下来我换个结果和预期结果相同的代码，修改demoSpec.js如下：

/**
 * Created by Gemu on 2/24/2016 0024.
 */
describe("demo test", function() { // 第一个参数是测试的文字描述， 第二个是测试的方法

    it("test demo function return value", function() { // 每一个it函数代表着一个测试。第一个参数是对该it函数的测试内容描述， 第二个参数中是测试代码
        expect("_demo_").toEqual(demo());  // demo()的执行结果应该返回的是 “_demo_”， 而你这个测试代码中期望的结果也是“_demo_”，显然 “_demo_”和“_demo_”是一样的，那么在测试页面中会显示什么呢？
    });

});

测试页面，显示如下：

这样就是通过了测试。

angualrjs 中 karma + jasmine 的使用

Gemu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Jasmine, 自动化测试, 单元测试 --- 使用

jasmine测试可以用在多个框架或平台中。首先，需要安装。>bower i jasmine --save若果你没安装bower，那就先npm i bower吧。（也可以使用npm i -g jasmine，使用node.js方式来进行测试，如果是这样的话，那就不用看下文了，去看一下 http://jasmine.github.io/2.4/node.html）安装好后
复制链接

扫一扫

专栏目录