前言
- 前提是客户端已配置好 node 环境
- 对于自动化的一些深入知识可以移步至 前端自动化测试解决方案探析 | ouvenzhang的博客 进行了解
- 使用
npm
如果慢的话可以使用 淘宝 NPM 镜像 因为一个是请求的国外的服务器,一个是国内淘宝的服务器,详情可至上面的官网了解 ``` //在命令行终端输入下面的命令即可使用 cnpm 来替代 npm 装包了 npm install -g cnpm —registry=https://registry.npm.taobao.org
- 本例是使用 [karma](3c7ded840b8a3dfa0ad6efa833e7edf2) + [jasmine](https://jasmine.github.io/) + [phantomjs](http://phantomjs.org/) 来实现的简单的自动化单元测试实例
> [karma npmjs 网址](https://www.npmjs.com/package/karma)<br />
A simple tool that allows you to execute JavaScript code in multiple real browsers.<br />
The main purpose of Karma is to make your test-driven development easy, fast, and fun.<br />
一个简单的工具,允许你在多个真正的浏览器中执行JavaScript代码。<br />
karma 的主要目的是让你的测试驱动开发简单、快速和有趣。
> Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.<br />
Jasmine 是一个用于测试JavaScript代码的行为驱动开发框架。它不依赖于任何其他JavaScript框架。它不需要DOM。它有一个干净的、明显的语法,这样您就可以轻松地编写测试。
> PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.<br />
PhantomJS是无头的WebKit脚本与JavaScript API。它支持各种Web标准:DOM处理、CSS选择器、JSON、画布和SVG。-- [百度翻译](http://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#en/zh/PhantomJS%20is%20a%20headless%20WebKit%20scriptable%20with%20a%20JavaScript%20API.%20It%20has%20fast%20and%20native%20support%20for%20various%20web%20standards%3A%20DOM%20handling%2C%20CSS%20selector%2C%20JSON%2C%20Canvas%2C%20and%20SVG.)<br />
简单点来说他就是一个无头(无界面)的浏览器,除了没有界面与常用的谷歌浏览器之类的基本功能一样。<br />
#实例 Demo
1. 以管理员身份运行命令行终端软件,我这里是 windows 系统,使用的是下载的 [cmder](http://cmder.net/) (较好用),当然你也可以选择 cmd.exe
1. 接着在命令行终端中输入命令,温馨提示:**终端不同可能会导致命令不同**,这里我列举的只是 cmder 终端上的命令
//进入桌面 cd Desktop //创建项目文件夹 mkdir karmatest //进入文件夹中 cd karmatest
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-e760be5912a7813d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3. 在终端中初始化项目
//项目初始化 之后会有一系列的让你输入项目信息的提示一直回车就可以了 npm init
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-46651182db353607.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4. 初始化之后找到桌面的 karmatest 文件夹并在编辑器中打开,这里我使用的是 sublime text ,刚才在命令行中将项目初始化后,项目中会自动新增一个 package.json 项目配置文件
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-954d4c1c5169ceb5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5. 接着在项目文件夹中新建目录结构如下
> src -> index.js<br />
**这个 spce 后缀是必须要加的,这样 karma 才能正确的识别**<br />
test -> index.spce.js<br />
![image.png](http://upload-images.jianshu.io/upload_images/9064013-849f424535fe5189.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6. 在编辑器 sublime text 中编辑文件<br />
index.js
//给全局增加一个 add 方法 window.add = function (num) { return num + 1; }
index.spce.js
//语法详情参照 https://jasmine.github.io/ describe(“简单的测试加法”, function() { it(“简单的测试加法”, function() { expect(window.add(1)).toBe(2); }); });
7. 在命令行中输入命令
//全局安装 karma ,第一次安装之后就不用再安装了,可以直接写下面的命令 npm install -g karma //在当前项目中安装 karma npm install karma —save //karma 初始化 初始化成功之后会在项目中新建一个 karma.conf.js 文件 karma init //下面是提示语中需要 使用键盘的上下键去选择的选项结果 选中之后直接回车即可 jasmine no PhantomJS 回车 回车 回车 no
8. 在编辑器 sublime 中编辑上面初始化时在项目中生成的 karma.conf.js 文件
//17~18行 files: [ ‘./src/.js’, ‘./test/.spce.js’ ], //64行 //这个设置为 true 会在执行之后自动退出 singleRun: true,
9. 在命令行中输入命令
//安装 karma 使用的 jasmine 断言库 npm install jasmine —save //安装 karma 使用的 phantomjs 无头浏览器 npm install phantomjs —save
- 装完之后可查看项目中的 package.json 文件,可以确定上面装的包确实安装成功了
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-260b93b8f41d92f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
10. 接着在命令行中运行 karma
karma start
- 命令行中输出如下证明执行成功了
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-2cd4bdf1b3233001.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
11. 这个时候可以故意修改 index.spce.js 文件将其中之前写的结果 2 修改为 3
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-d368eed6d436b5ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 再在命令行中运行 karma
karma start
- 命令行会输出如下:报了一个错误,而且把错误的具体位置也输出了
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-8277a6fb147134bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 将修改的 3 再改回来 运行 karma
karma start
```
- 也还是执行成功了,整个 Demo 到此结束
总结
- 这只是一个很基本的单元测试的实例,希望自己可以走前端迈向全栈的路上,越走越远。