Jasmine的使用步骤
下面我们开始正式使用Jasmine 框架,首先我们来看下其目录结构。首先我们为项目创建一个名为NoteApp的文件夹。在这个主文件夹下,再创建一个名为app的目录,这个目录中将存放的是程序的应用逻辑和表示层的页面文件。创建一个名为spec的目录,这个目录中存放的是Jasmine的测试套件。除此之外,我们还创建一个lib的目录,这个目录保存的是项目中要用到的一些目录,整个目录架构如下图:
在上图中,读者可能奇怪jqm和jstorage两个文件夹存放的是什么,jqm存放的是jquery mobile的框架文件,而jstorage存放的是jstorage框架的文件,在接下来的学习中将会详细介绍。
接着,我们可以将下载到的jasmine框架的文件解压后,放到jasmine目录下,如下图:
接下来,我们开始编写应用的第一个代码文件,一个是名为app.js,放在app目录下,另外一个是jasmine的测试程序,文件为Appsec.js,文件的保存位置如下图:
最后,我们将编写一个名为specrunner.html的文件,这个文件中将会运行调用jasmine的测试用例。这个文件实际在jasmine的下载包中存在,但我们要对其进行一些必要的修改,以使其引用到恰当的类库文件,代码如下:
<!-- HEAD -->
<!-- Jasmine includes -->
css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="../lib/jasmine/jasmine-html.js" type="text/javascript">
</script>
<!-- Source files -->
<script src="app/App.js" type="text/javascript"></script>
<!-- Spec files -->
<script src="spec/AppSpec.js" type="text/javascript"></script>
<!-- BODY -->
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
<!-- Jasmine includes -->
css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="../lib/jasmine/jasmine-html.js" type="text/javascript">
</script>
<!-- Source files -->
<script src="app/App.js" type="text/javascript"></script>
<!-- Spec files -->
<script src="spec/AppSpec.js" type="text/javascript"></script>
<!-- BODY -->
<script type="text/javascript">
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
</script>
最后,我们把这个文件放到恰当的位置,如下图: