在 AngularJS 项目中使用 Chai.js 进行组件测试
在现代的 Web 开发中，前端工程化已经成为必不可少的一部分。而在前端编写软件的过程中，组件化是非常常见的一种设计模式。为了确保在组件复杂度高的情况下的质量，我们需要使用多种工具来测试组件是否工作正常。其中一种工具就是 Chai.js，在本文中，我们将介绍如何在 AngularJS 项目中使用 Chai.js 进行组件测试。
什么是 Chai.js？
Chai.js 是一个用于增强 JavaScript 测试框架的断言库，它可以在任何测试框架上使用，包括 Mocha、Jasmine、Karma 等等。Chai.js 提供了许多方法和断言用于比较不同的 JavaScript 类型，使得进行断言变得更加简单和高效。
为什么需要测试？
在项目复杂度较高的情况下，因为组件大量依赖外部数据、事件触发等，如果我们缺少测试来确保组件的正确性，就很容易出现一些诡异的 bug，从而严重影响用户体验。而组件测试就是为了减少上述情况的发生。
使用 Chai.js 进行组件测试
首先，我们需要引入 Chai.js 这个库，可以通过 npm 安装或者 CDN方式引入。本文以 npm 方式实现。
在项目中引入 Chai 库
npm install chai --save-dev
引入库之后，我们就可以愉快的开始使用了。
通过一个示例来了解如何使用 Chai.js 框架进行组件测试
现在我们来写一个简单的组件 Filter 用于过滤数组中的奇数，然后使用 Chai 来对其进行测试。
定义组件 app.component.js：
angular.module('app', [])
.component('filter', {
template: <div> <ul> <li ng-repeat="item in items | evenFilter">{{item}}</li> </ul> </div>,
controller: function ($scope) {
$scope.items = [1, 2, 3, 4, 5, 6, 7];
}
})
.filter('evenFilter', function () {
return function (x) {
return x.filter(function (item) {
return item % 2 == 0;
});
}
});
组件描述：我们定义了一个指令和一个筛选器，ul 标签中的 li 将遍历一个数组并将挑选出的元素放在每个列表项中。筛选器 evenFilter 从传递给它的参数中过滤出那些是偶数的数值并将其返回。
接下来，我们将使用 Karma 测试工具和 Jasmine 的语法对组件进行测试。首先，我们可以通过命令安装 Karma 进行测试。
npm install -g karma-cli npm install karma jasmine angular-mocks karma-jasmine --save-dev
在项目的 root 目录下新建 karma.conf.js 配置文件，并添加相应的测试框架。该文件的作用是告诉 Karma 如何运行测试，以及需要测试哪些文件。
module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], files: [ 'app//*.js', 'test//*.js' ], exclude: [ ], reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false, concurrency: Infinity }) }
接着，我们新建 app.component.spec.js，用来存放组件测试的脚本，并定义一些简单的测试，并引用 Chai.js 断言库来进行测试。
describe('component should', function () {
var $scope, element, evenFilter;
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function ($rootScope, $compile, $filter) { $scope = $rootScope.$new(); var elementHTML = '<filter></filter>', compiledElement; compiledElement = $compile(elementHTML)($scope); $scope.$digest(); element = compiledElement; evenFilter = $filter('evenFilter'); }));
it('exists', function () { expect(element).toBeDefined(); });
it('array should contain 4 values', function () { var list = element[0].querySelectorAll('li'); expect(list.length).to.equal(4); });
it('filtered array should contain only even values', function () { var items = [1, 2, 3, 4, 5, 6, 7]; var filteredItems = evenFilter(items); expect(filteredItems).to.deep.equal([2, 4, 6]); }); });
测试描述：我们使用 beforeEach 函数来加载模块 app，可以使用 $rootScope 创建需要的控制器和指令，并且使用 $compile 函数进行编译。在测试之后，我们使用 Chai.js 断言库来执行一些测试。第一次测试确保指令创建正确并且存在。第二个测试检查使用 ng-repeat 内部的 li 元素是否具有期望结果的数量，如果不是我们就通过断言库 expect 产生一个错误。为了测试过滤器函数 evenFilter，我们对一个附加数组执行过滤器，然后使用 expect 语句来检查它是否返回预期的值。
执行测试命令，并进行测试。
karma start
测试结果如下，测试都已经经过了。
component should exists √ array should contain 4 values √ filtered array should contain only even values √
共 3 个测试 通过
总结
在这篇文章中，我们学习了如何使用 Chai.js 在 AngularJS 项目中进行组件测试。测试非常重要，它保证了我们的组件在不同场景下的正确性和稳定性。虽然本文讲解的是单元测试，但是在前端工程化中，还有很多其他测试类型，包括 e2e 测试、集成测试等等。将这些使用到你的项目中可以让你更加快速地了解你的代码，以及收集更多数据，在之后的维护过程中也能减少很多不必要的麻烦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e1b7c968c7c53b0083ceb