AnguarJS测试的实施步骤整理

最近开发用到了AngularJS，据说目前大型系统都用这个作为前端。最近参与的一个项目，web部分重度使用了AngularJS，整个前端架构有组织有纪律。所谓的有纪律就是说，有比较完善的测试用例，用上了自动化的测试框架。

对于我这个一直重心在后台的开发人员来说，对前端涉及很少，对前端的认识还停留中手动引用js、css文件的年代，当然也没有接触过测试javascript的框架。现在看来，前端的变化太大了，有自己的完整的生态系统，突然冒出一堆技术名词，npm，grunt，karma等等，作为一名后台开发人员，我感觉被远远的甩开了。

作为开发人员，为了适应项目开发，只能自觉跟上了，折腾了几天，总算搞明白前端的这几个新轮子是干嘛的，也整理了一下搭建一个基本AngularJS前端基本结构的步骤。

几个基本概念整理

NPM

全称是Node Package Manager,是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

从描述来看应该是一个依赖程序包的管理工具，类似nuget（为什么不沿用nuget呢？这么多轮子）

关键词是NodeJS，又是一个轮子，展开又是一个技术分支，没有太多深入的了解，只知道是基于V8引擎的服务端，让javascript运行在服务端。

对于我目前的了解来开，NodeJS和NPM几乎绑定在一起，至少从安装的方式来看是这样的。

最近接触的几个AngularJS的教材，都是通过安装NodeJS的方式来顺带安装NPM，安装过程很简单，下载NodeJS的安装包，完成之后就能在命令行运行NPM了。

Grunt

Javascript世界的构建工具

看定义就知道界限很明显，只用于Javascript，跟服务端无关。对于我这种还停留在手动引用js的开发人员来说，只知道服务端构建，MSBuild什么的，对于Javascript构建工具感到很新鲜和惊讶。

原来Grunt可以完成大部分需要手动处理的事情，比如压缩js，css；执行单元测试；打包js文件；给js文件加入版本参数（这些曾经都是手动改的）。

其实不仅仅是前端构建，Grunt甚至还可以编译sln文件（通过msbuild插件），直接把msbuild的事情也接管。

还有一个叫gulp的，功能与Grunt类似（不知道为什么搞两套东西），项目没有用到，所以没有深入了解。

karma

Javascript领域的运行单元测试的框架，只是管运行，真正负责做单元测试的是别的框架，教科书上讲的较多的是Jasmine。

上述这些Grunt、karma都其实是nodejs的一个模块包，所以要把这几个玩意运行起来，得从npm开始。

好吧，搞清楚了概念之后，现在一步步来创建一个基于AngularJS的前端结构，用上grunt和karma。

项目搭建步骤

第一步：

用VisualStudio 2015创建一个空白的项目

用自己熟悉的nuget引入AngularJS包

Install-Package AngularJS.Core

(到AngularJS官网下载也行，但是要科学上网，因为AngularJS是google提供的)

安装完之后目录如下

第二步：

创建npm的项目配置文件，执行这步之前，请确认已经安装了npm或者有npm.exe这个文件

用cmd定位到项目的根目录，执行如下命令

npm init

然后会有几个设置，最后生成一个package.json文件（有点类似于.net core项目里的project.json文件，不知道谁抄袭谁）。

打开package.json结构类似如下，这是没有依赖任何模块包的配置

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "demo"
  ],
  "author": "shenba",
  "license": "ISC"
}

package.json

第三步：

安装karma

cmd到项目的根目录，执行如下命令

npm install karma --save-dev

安装成功之后，查看package.json，会发现增加了devDependencies配置，显示为karma的模块包版本信息

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "demo"
  ],
  "author": "shenba",
  "license": "ISC",
  "devDependencies": {
    "karma": "^0.13.22"
  }
}

同时在代码结构中也增加了一个node_modules目录，下面包含了一个Karma目录，类似于nuget的处理方式。

(继续展开karma目录会发现类似的node_modules目录，也就是karma的内部依赖，比较晕）

第四步

配置karma的配置

还是cmd到项目的根目录，执行如下命令

karma init karma.config.js

然后会有问答式的配置过程，依次每个问题的设置如下

使用的单元测试框架：jasmine

是否使用requirejs：no

使用测试的浏览器：chrome

运行测试包含的脚本路径（多个）

Scripts/angular.js

Scripts/angular-mocks.js

Scripts/app/*.js

Scripts/tests/*.js

完成之后会在根目录生成karma.config.js

这时候可以运行karma体验一下

karma start karma.config.js

运行之后会启动chrome浏览器，同时命令行显示如下结果，因为没有任何单元测试用例，所以显示执行为0

第五步

在Scripts分别创建app和tests目录

在app目录创建index.js，内容如下

比较简单，就是一个controller，然后提供了一个属性和方法

var app = angular.module("myapp", []);

app.controller('myController', function ($scope) {
    $scope.password = "";
    $scope.grade = function () {
        var size = $scope.password.length;
        if (size > 8) {
            $scope.strength = 'strong';
        } else if (size > 3) {
            $scope.strength = 'medium';
        } else {
            $scope.strength = 'weak';
        }
    };
});

在tests目录创建indexTests.js，内容如下：

如下文件内容是创建了一个测试用例

describe("myController", function () {
    beforeEach(module('myapp'));

var $controller;

beforeEach(inject(function (_$controller_) {
        $controller = _$controller_;
    }));

describe('$scope.grade', function () {
        it('sets the strength to "strong" if the password length is >8 chars', function () {
            var $scope = {};
            var controller = $controller('myController', { $scope: $scope });
            $scope.password = 'longerthaneightchars';
            $scope.grade();
            expect($scope.strength).toEqual('strong');
        });
    });
});

到此测试用例创建好了，再次cmd到项目跟目录，执行

karma start karma.config.js

同样会启动chrome浏览器，但是cmd命令行结果会显示一个测试用例执行通过

这就是执行测试用例的基本过程

第六步

到了第五步，已经具备了测试AngularJS代码的环境，但是还没用到Grunt这个构建工具，接下来将karma和Grunt结合起来

安装Grunt,参考http://www.gruntjs.net/getting-started

安装全局的命令行工具

npm install -g grunt-cli

安装Grunt到项目目录

npm install grunt --save-dev

安装Grunt-karma插件

npm install grunt-karma --save-dev

安装karma-jasime模块

npm install karma-jasmine --save-dev

安装karma-chrome模块

npm install karma-chrome-launcher --save-dev

在根目录下创建一个Gruntfile.js文件，内容如下

module.exports = function (grunt) {

grunt.initConfig({
        karma: {
            unit: {
                configFile: 'karma.config.js'
            }
        }
    });

grunt.loadNpmTasks('grunt-karma');

grunt.registerTask('default', ['karma']);
};

搞了这么多步骤终于可以运行了，cmd到项目根目录运行如下命令

grunt

最终运行效果跟直接运行karma start karma.config.js是一个效果。

当然grunt的功能不仅仅是执行karma，加入其他第三方插件可以实现更多构建功能。

先整理到这里，继续学习中。。。