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 的使用