技术开发 频道

HTML5实战:用Jquery Mobile制作记事本

  开始编写逻辑代码

  接下来,我们开始使用jasmine框架以BDD驱动方式编写主要的代码。BDD的方式需要我们不断编写和修改单元测试用例AppSec.js,让我们就从AppSec.js这个文件开始吧。

  首先,我们必须断言命名空间是存在的,所以可以在AppSec.js文件中,编写如下代码:

   describe("Public interface exists", function () {
    it(
"Defines the app", function () {
        expect(Notes.app).toBeDefined();
    });
});

  注意我们在一个名为Public interface exists的测试套件中,编写了测试说明用例。在这个测试套件中,将保存所有对业务逻辑的公共函数测试的用例,这里只是简单去断言应用的命名空间是否已经定义。

  接下来我们开始进行测试,使用浏览器中打开specrunner.html这个文件,可以看到如下图的结果:

开始编写逻辑代码

  可以看到,出现了错误的提示:Notes is not defined。这是正确的,因为我们的代码中还没定义命名空间,接下来我们编写代码修正之,如下:

  var Notes = Notes || {}

  Notes.app = (function () {

  return {}

  })();

  这里我们定义了应用的命名空间,再次运行jasmine测试框架,结果如下图:

开始编写逻辑代码

  现在我们可以总结出其步骤:先定义出行为,然后为行为编写测试用例,然后运行测试,看测试是否通过,不通过的话就修改代码,再运行测试直到其再次通过,这就是典型的BDD开发方法。

  接下来,我们需要将一些记事的内容列表由业务逻辑端返回给前端的表现层,因此我们使用如下的jasmine的行为规格说明去定义,继续往测试套件中增加如下代码:

  describe("Public interface exists", function () {

  it(
"Should have public interface to return notes list", function () {

  expect(Notes.app.getNotesList).toBeDefined();

  });

  });

  这个测试用例断言测试是否已经定义了显示记事列表的方法getNotesList。再编写另外一个测试用例,稍微复杂点的,如下:

  describe("Public interface implementation", function () {

  it(
"Should return notes list", function () {

  var notesList
= Notes.app.getNotesList();

  expect(notesList instanceof
Array).toBeTruthy();

  });

  });

  这个测试用例,主要用来断言测试返回的记事列表是否是一个数组。 注意我们现

  在新建立了一个测试套件,名为 Public interface implementation,在这个测试套件中,专门存

  放的是针对接口实现的测试用例。再次在浏览器中运行,可以看到如下图:

开始编写逻辑代码

  可以看到,两个测试用例都出错了,没关系,我们马上编写代码修正:

  Notes.app = (function () {

  var notesList
= [];

  
function getNotesList() {

  return notesList;

  }

  return {

  getNotesList: getNotesList

  }

  })();

  再次运行测试,结果如下图,这次我们通过了测试。

开始编写逻辑代码

  接下来的步骤

  接下来,我们将使用jQuery Mobile开始正式开始编写我们的业务逻辑层代码了。请留意本教程系列的第2讲。

0
相关文章