进入Jasmine的世界——超强Javascript测试框架

最新推荐文章于 2024-05-09 09:44:30 发布

jzthekeeper

最新推荐文章于 2024-05-09 09:44:30 发布

阅读量8k

点赞数 2

文章标签：测试驱动开发 js 库

本文链接：https://blog.csdn.net/jzthekeeper/article/details/39251225

版权

Jasmine是一个javascript的测试框架, 可以用来单元测试, 也可

摘要由CSDN通过智能技术生成

Jasmine是一个javascript的测试框架, 可以用来单元测试, 也可以进行其它类型的测试.

通常, 我们在项目比较大时会" 不得不引入测试", 原因很简单,因为这样在添加新的功能或者修复bug时不会引入新的bug，

这样会免去很多调试的时间，少做不少无用功。

谷歌的angularjs框架就是采用的测试驱动开发（TDD）方法，即先写需要的新功能的测试，然后再写代码。把写代码和调试代码的顺序

刚好反了过来。

言归正传，我们开始说Jasmine。

首先，我们在计算机上部署一个Jasmine，先让它跑起来

我们假定你正在使用ubuntu 14.04, 并且已经安装了git, 如果没有的话，请运行

sudo apt-get install git

接下来，运行

cd ~
git clone https://github.com/pivotal/jasmine.git

这样会下载整个jasmine的工程，

然后我们再建立另外一个文件夹jasmine-test-prj来研究jasmine

mkdir ~/jasmine-test-prj
cd ~/jasmine-test-prj

接下来我们把jasmine源代码里dist文件夹下的jasmine-standalone-2.0.0.zip文件复制过来

mkdir jasmine
cp ~/jasmin/dist/jasmine-standalone-2.0.0.zip .
cd jasmine
unzip jasmine-standalone-2.0.0.zip

这样我们就得到了我们需要的文件，先来看看都有什么。

这个目录包含了jasmine的源代码和示例，那我们先运行一下示例。

<pre name="code" class="plain">google-chrome ~/jasmine-test-prj/jasmine/specrunner.html

这样我们发现打开的网页会自动运行一个已有示例。

下面我们就可以真正地开始使用jasmine这个框架了。

到目前为止，我们的目录结构应该是这样的，如果不是的话，请按照下面的图示建立一个相同的

jasmine-test-prj
--jasmine

然后我们建立一个js文件夹来存放我们的待测代码，再建立一个test文件夹来存放我们的测试代码

cd ~/jasmine-test-prj
mkdir js test
touch js/math.js test/test.html

然后在js文件夹下面先写一个简单的待测函数，在math.js文件中,内容如下

function add(a, b) {
  return a + b;
};

这只是一个hello world!式的文件，后面我们会按照实际需求添加其它功能和测试

然后我们的test文件夹下面的test.html如下

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>our huge math lib unit test</title>

  <link rel="shortcut icon" type="image/png" href="../jasmine/lib/jasmine-2.0.0/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="../jasmine/lib/jasmine-2.0.0/jasmine.css">

  <script type="text/javascript" src="../jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
  <script type="text/javascript" src="../jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
  <script type="text/javascript" src="../jasmine/lib/jasmine-2.0.0/boot.js"></script>

  <script type="text/javascript" src="../js/math.js"></script>

  <script type="text/javascript" src="math-spec.js"></script>

</head>

<body>
</body>
</html>

在上面的文件中， head部分大概包括了三个重要的块，一是jasmine本身需要的文件，二是待测文件，三是测试文件。

我们的math.js就在第二部分，而math-spec.js是我们用来测试math.js的文件。

下面我们来编写math-spec.js文件