前端测试框架：Jasmine框架，与eclipse创建springBoot项目

　　在学习ajax跨域问题时，了解到前端测试框架。本文重点是js测试的框架：jasmine。

　　首先创建一个SpringBoot工程项目，关于eclipse中如何创建SpringBoot项目，这里做简单的介绍。

　　springBoot项目创建方式：

　　方式一（通过官网start.spring.io），界面如下所示，具体的操作可以参考官网：

方式二（通过elipse软件）：

（1）通过eclipse创建，但是eclipse要安装springBoot相关的插件，安装成功之后类似于：

具体的创建过程：

（1）创建一个spring start project项目，如上图所示；

（2）一般修改下面几个输入参数：

 

（3）其中加入2个依赖，web：提供web服务的；DevTools:编写代码后自动重启，不要手动重启。即可创建完成。

 

 项目工程目录如下所示：

解释：1是springBoot项目启动的起点；2是为前端测试框架Jasmine引入；3是前端代码；4是jquery.js的测试代码；5是springboot服务的配置

创建html前端页面（index.html）,代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX跨越完全讲解</title>
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jasmine-2.8.0/jasmine.css">
<script src="jasmine-2.8.0/jasmine.js"></script>
<script src="jasmine-2.8.0/jasmine-html.js"></script>
<script src="jasmine-2.8.0/boot.js"></script>
</head>
<body>
<a href="#" onclick="get1()">发生get1请求</a>
<script>
function get1() {
    $.getJSON("http://localhost:8080/test/get1").then(function(result) {
        console.log(result);
    });
}
//每一个测试用例的超时时间
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
// 请求的接口的前缀 // http://localhost:8080/test  "/ajaxserverapache";
var base = "http://localhost:8080/test";
//测试模块
describe("ajax跨越完全讲解", function() {
    // 测试方法
    it("get1请求", function(done) {
        // 服务器返回的结果
        var result; //初始化是undifined
        $.getJSON(base + "/get1").then(function(jsonObj) {
            result = jsonObj; //当执行失败之后，此处代码不会执行
        });
        // 由于是异步请求，需要使用setTimeout来校验
        setTimeout(function() {
            expect(result).toEqual({
                "data" : "get1 ok"
            });

            // 校验完成，通知jasmine框架
            done();
        }, 100);
    });
});
</script>
</body>
</html>

在引入测试框架Jasmine之前的存在报错的效果，

引入以后出现报错的效果：

不仅会有提示报错的具体功能点，还会有报错的提示信息。

 

posted @ 2018-07-22 10:57  小码农成长记  阅读(325)  评论(0)    收藏  举报