JavaScript测试工具之Karma-Jasmine的安装和使用详解(js代码测试工具)

推荐整理分享JavaScript测试工具之Karma-Jasmine的安装和使用详解(js代码测试工具)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript test,js中测试代码编写正确的方法,js中测试代码编写正确的方法,js测试工具,如何进行js 的测试,js api测试,js api测试,javascript test,内容如对您有帮助，希望把文章链接给更多的朋友！

1.Karma介绍

Karma是Testacular的新名字，在年google开源了Testacular，年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！

Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。

2.Jasmine介绍

Jasmine （茉莉）是一款 JavaScript BDD（行为驱动开发）测试框架，它不依赖于其他任何 JavaScript 组件。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。

比较流行的有Qunit和Jasmine,如果你想更详细了解二者的区别，请狠狠的点击Javascript单元测试框架Qunit和Jasmine的比较。

积木网友情提醒大家需要注意点：本文中出现的资料链接、karma的插件安装等，均可能需要翻$墙后才能正确执行。

步骤一：安装Node.JS（版本：v0..4, windows-）

Karma是运行在Node.js之上的，因此我们首先要安装Node.js。到 下载你系统所需的NodeJS版本，我下载的是windows-位的msi版。

下载之后，双击 node-v0..4-x.msi 运行并安装，这个就不赘述了， 不断下一步即可， 当然最好将目录改一下。

图1（选择安装内容，默认即可）：

步骤二：安装Karma

运行Node.js的命令行程序：Node.js command prompt：

图2（处于“开始->所有程序->Node.js”中）：

图3（我们将安装到E:Karma路径下）：

输入命令安装Karma：

图4（Karma安装完毕后）：

步骤三：安装karma-jasmine/karma-chrome-launcher插件

继续输入npm命令安装karma-jasmine、karma-chrome-launcher插件：

图5（karma-jasmine、karma-chrome-launcher安装完毕之后）：

步骤四：安装karma-cli

karma-cli用来简化karma的调用，安装命令如下，其中-g表示全局参数，这样今后可以非常方便的使用karma了：

图6（karma-cli安装完毕之后）：

Karma-Jasmine安装完毕：

图7（安装完毕后，在E:Karma文件夹下会有一个node_modules目录，里面包含刚才安装的karma、karma-jasmine、karma-chrome-launcher目录，当然还包含了jasmine-core目录）：

开启Karma：

输入命令：

图8（运行后如图所示出现了一行INFO信息，并没有其他提示和动作，因为此时我们没有配置karma的启动参数。后面会加入karma.conf.js，这样karma就会自动启动浏览器并执行测试用例了）：

图9（手动打开Chrome，输入localhost:，如果看到这个页面，证明已经安装成功）：

Karma+Jasmine配置：

执行命令init命令进行配置：

karma init

图（所有默认配置问题）：

说明：

1. 测试框架：我们当然选jasmine

2. 是否添加Require.js插件

3. 选择浏览器： 我们选Chrome

4. 测试文件路径设置，文件可以使用通配符匹配，比如*.js匹配指定目录下所有的js文件（实际操作中发现该路径是karma.conf.js文件的相对路径，详见下面我给出的实际测试配置及说明）

5. 在测试文件路径下，需要排除的文件

6. 是否允许Karma监测文件，yes表示当测试路径下的文件变化时，Karma会自动测试

我在虚拟机上测试的例子：

图（TestFiles和NodeJS处于E盘根目录下，karma.conf.js处于文件夹NodeJS的根目录下）：

以下是karma.conf.js的完整内容：

说明：

若所有测试文件均处于同一个目录下，我们可以设置basePath（也是相对于karma.conf.js文件的相对路径），然后指定files，此时files则为basePath目录下的文件相对路径；

当然你也可以不设置basePath，直接使用相对于karma.conf.js文件的文件相对路径，如本例中，我们若保持basePath默认为空，则files配置应为：

启动Karma：

karma start karma.conf.js

由于这次加上了配置文件karma.conf.js，因此Karma会按照配置文件中指定的参数执行操作了，由于我们配置的是在Chrome中测试，因此Karma会自动启动Chrome实例，并运行测试用例：

图（左侧的Chrome是Karma自动启动的，右侧的Node.js command prompt窗口中，最后一行显示了执行结果）：

图（如果我们点击图中的debug按钮，进入debug.html并按F打开开发者工具，选择Console窗口，我们将能看到jasmine的执行日志）：

若此时，我们将jasmineTest.js中对于调用TT方法的期望值改为"abcd"（实际为"abc"）：

由于我们在karma.conf.js中设置了autoWatch为true：

autoWatch: true

Karma将自动执行测试用例，由于本例测试用例未通过，因此在屏幕上打印出了错误信息，Chrome的Console窗口中的日志信息需要刷新debug.html后显示。

图（Karma自动检测到文件变化并自动重新执行了测试用例）：

代码覆盖率：

如果你还想查看测试的代码覆盖率，我们可以安装karma-coverage插件，安装命令为：

图（安装karma-coverage的过程）：

修改karma.conf.js，增加覆盖率的配置：

图（主要是变动了以下三个配置节点，其他的配置内容不变）：

变动如下：

在reporters中增加coverage preprocessors中指定js文件

添加coverageReporter节点，将覆盖率报告类型type设置为html，输入目录dir指定到你希望的目录中

此时完整的karma.conf.js如下：

执行命令：

图（执行命令后，在配置文件coverageReporter节点中指定的dir中，我们将找到生成的覆盖率报告，karma-coverage还生成了一层子文件夹，对应于执行测试的浏览器+版本号+操作系统版本）：

JS使用post提交的两种方式 本文实例讲述了JS使用post提交的两种方式。分享给大家供大家参考，具体如下：第一种提交post的方式是传统方式，判断浏览器进行post请求。SCRIPTstype=tex

解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法 最近在做博客的目录功能，发现一个在现代浏览器间的一个bug，或是称之为差异，即页面滚动值(scrollTop)的获取与设定。在此之前先说一下关于页面元素

继续学习javascript闭包 一、什么是闭包？官方的解释是：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部