自动化单元测试 -- karma

 
 
前言
 
 
 
  
前提是客户端已配置好 node 环境
 
  
对于自动化的一些深入知识可以移步至 前端自动化测试解决方案探析 | ouvenzhang的博客 进行了解
 
 
 
 
 
 
 
  
本例是使用 karma + jasmine + phantomjs 来实现的简单的自动化单元测试实例
 
 
 
 
 
  
karma npmjs 网址
 
  
A simple tool that allows you to execute JavaScript code in multiple real browsers.
 
  
The main purpose of Karma is to make your test-driven development easy, fast, and fun.
 
  
一个简单的工具，允许你在多个真正的浏览器中执行JavaScript代码。
 
  
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.
 
  
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.
 
  
PhantomJS是无头的WebKit脚本与JavaScript API。它支持各种Web标准：DOM处理、CSS选择器、JSON、画布和SVG。-- 百度翻译
 
  
简单点来说他就是一个无头（无界面）的浏览器，除了没有界面与常用的谷歌浏览器之类的基本功能一样。
 
 
 
 
实例 Demo
 
 
 
  
以管理员身份运行命令行终端软件，我这里是 windows 系统，使用的是下载的 cmder （较好用），当然你也可以选择 cmd.exe
 
  
接着在命令行终端中输入命令，温馨提示：终端不同可能会导致命令不同，这里我列举的只是 cmder 终端上的命令
 
 
 
 
//进入桌面
cd Desktop
//创建项目文件夹
mkdir  karmatest
//进入文件夹中
cd karmatest

``

3.  在终端中初始化项目

 
 
//项目初始化 之后会有一系列的让你输入项目信息的提示一直回车就可以了
 npm init
 
 
 
  
初始化之后找到桌面的 karmatest 文件夹并在编辑器中打开，这里我使用的是 sublime text ，刚才在命令行中将项目初始化后，项目中会自动新增一个 package.json 项目配置文件
 
 
 
 
 
  
接着在项目文件夹中新建目录结构如下
 
 
 
 
 
  
src -> index.js
 
  
这个 spce 后缀是必须要加的，这样 karma 才能正确的识别
 
  
test -> index.spce.js
 
  
 
  
 
   
 
    
 
      
    
 
   
 
   

     image.png 
   
 
  
 
 
 
 
 
  
 
在编辑器 sublime text 中编辑文件
 
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);
  });
});

 
 
 
  
在命令行中输入命令
 
 
 
 
//全局安装 karma ，第一次安装之后就不用再安装了，可以直接写下面的命令
npm install -g karma
//在当前项目中安装 karma  jasmine-core
npm install karma  jasmine-core --save
//karma 初始化  初始化成功之后会在项目中新建一个 karma.conf.js 文件
karma init
//下面是提示语中需要 使用键盘的上下键去选择的选项结果  选中之后直接回车即可
jasmine
no
PhantomJS
回车
回车
回车
no

 
 
 
  
在编辑器 sublime 中编辑上面初始化时在项目中生成的 karma.conf.js 文件
 
 
 
 
//17~18行
    files: [
        './src/*.js',
        './test/*.spce.js'
    ],
//64行
//这个设置为 true 会在执行之后自动退出
singleRun: true,

 
 
 
  
在命令行中输入命令
 
 
 
 
//安装 karma 使用的 jasmine 断言库
npm install jasmine --save
//安装 karma 使用的 phantomjs 无头浏览器
npm install phantomjs --save

 
 
 
  
装完之后可查看项目中的 package.json 文件，可以确定上面装的包确实安装成功了
 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    image.png 
  
 
 
 
 
 
  
接着在命令行中运行 karma
 
 
 
 
karma start

 
 
 
  
命令行中输出如下证明执行成功了
 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    image.png 
  
 
 
 
 
 
  
 
这个时候可以故意修改 index.spce.js 文件将其中之前写的结果 2 修改为 3
 
 
   
 
    
 
     
 
       
     
 
    
 
    

      image.png 
    
 
   
 
 
 
 
 
 
  
再在命令行中运行 karma
 
 
 
 
karma start

 
 
 
  
命令行会输出如下：报了一个错误，而且把错误的具体位置也输出了
 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    image.png 
  
 
 
 
 
 
  
将修改的 3 再改回来 运行 karma
 
 
 
 
karma start

 
 
 
  
 
也还是执行成功了，整个 Demo 到此结束
 
 
   
 
    
 
     
 
       
     
 
    
 
    

      image.png