在 Angular 项目中使用 Karma、Chai 和 Sinon 进行端到端测试-JavaScript中文网-JavaScript教程资源分享门户

简介

随着前端开发的发展，越来越多的企业和个人选择使用 Angular 进行开发。而在开发过程中，端到端的测试是非常必要的。 Karma、Chai 和 Sinon 是三种常用的测试工具，它们可以组合起来使用，为 Angular 项目提供全面的测试覆盖。

在本篇文章中，我们将详细探讨如何使用 Karma、Chai 和 Sinon 进行端到端测试，并给出示例代码和指导意义。

Karma

Karma 是一个测试运行器，能够让你在真实的浏览器环境中运行测试。Karma 可以和大多数测试框架（如 Mocha、Jasmine 和 QUnit）以及大多数 CI（持续集成）工具（如 Jenkins 和 Travis）集成。

在使用 Karma 时，需要先安装 Karma 和适配器（Adapter）。适配器表示浏览器环境，如果需要在 Chrome 中运行测试，就需要安装 karma-chrome-launcher。其他的适配器还包括：karma-firefox-launcher、karma-safari-launcher 等等。

安装完 Karma 和适配器后，在项目根目录下执行以下命令：

$ karma init

这会引导你配置 Karma。接下来的选择将取决于你的项目，但是一般情况下可以选择默认选项。

配置完成后，就可以开始编写测试用例了。我们需要在 Karma 的配置文件中指定测试文件和浏览器环境。

// karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['mocha', 'chai', 'sinon'],

    files: [
      'src/*.js',
      'test/*.spec.js'
    ],

    browsers: ['Chrome'],

    reporters: ['progress'],

    //...
  });
};

上面的配置中指定了一个 mocha、chai 和 sinon 的测试环境，以及一个 Chrome 浏览器。测试文件应该放在 test 文件夹中，文件名以 .spec.js 结尾。

Chai

Chai 是一个 Expressive 的断言库，它可以与任何 JavaScript 测试框架集成。Chai 支持类 BDD、TDD 和类自然语言的接口风格。

Chai 中有三种断言风格，分别是：

Assert 风格
Should 风格
Expect 风格

其中 Should 和 Expect 风格需要外部插件支持，比如 chai-as-promised 插件支持 Should 风格和 Promise 的断言，chai-jquery 插件则支持 jQuery 的断言。

我们接下来以最常见的 Assert 风格为例，给出一个简单的测试用例。假设我们有一个名为 add 的函数，接受两个数字参数并返回它们的和：

function add(a, b) {
  return a + b;
}

我们可以使用 assert 断言函数一些简单的测试：

var assert = require('chai').assert;

it('应该返回两个数字的总和', function() {
  assert.equal(add(2, 3), 5);
});

在 assert.equal(a, b) 中，a 是实际返回的值，b 是期望的值。当实际值与期望值相同时，测试通过。

此外，Chai 还支持其他的 API，比如 assert.isTrue(value)、assert.isFalse(value)、assert.isNotNull(value) 等等。当前 Chai 的文档中，已经有超过 100 个断言 API 了。

Sinon

Sinon 是一个独立的测试工具库，可以帮助你创建临时函数、监视函数调用并进行模拟和存根等操作。Sinon 提供了四个 API，分别是：

spy - 监视函数的调用情况
stub - 阻止函数的调用并进行嵌入式测试
mock - 创建假的对象并预期它们的行为
fake - 针对某些接口的攻击

在测试 Angular 项目时，我们可能需要模拟后端数据。在这种情况下，我们可以使用 Sinon 的 fake API 干扰 HTTP 请求，并模拟服务器的响应。

var server;

beforeEach(function() {
  server = sinon.fakeServer.create();
});

afterEach(function() {
  server.restore();
});

it('应该加载后端数据', function() {
  // 省略 Angular 代码
  var spy = sinon.spy();

  $httpBackend.expectGET('/api/').respond(200, {
    'name': 'test'
  });

  $rootScope.$on('data.loaded', spy);

  $rootScope.loadData();
  $httpBackend.flush();

  assert.equal($rootScope.backendData.name, 'test');
  assert(spy.called);
});

it('应该处理服务器错误', function() {
  // 省略 Angular 代码
  var stub = sinon.stub(window.console, 'error');

  $httpBackend.expectGET('/api/').respond(500, 'Internal Server Error');

  $rootScope.loadData();
  $httpBackend.flush();

  assert(stub.calledWith(sinon.match(/failed/)));

  stub.restore();
});

上面的代码中，我们首先创建了一个 fakeServer (server)。在测试完成后，我们需要恢复 HTTP 请求，以便确保它不会影响其他测试。接下来，我们创建了一个阻止 window.console.error() 函数的调用的存根，以便确保当 HTTP 请求失败时，我们不会看到大量的错误消息。

最后，我们使用 assert 和 sinon.match 来断言请求和响应是否符合我们的期望，以及 error 函数是否得到调用。

总结

端到端的测试可以帮助你快速发现问题和提高代码质量。在 Angular 项目中，Karma、Chai 和 Sinon 是非常有用的测试框架和工具库。

在使用这些工具时，我们应该：

确保正确配置 Karma 和适配器
选择测试框架和风格，比如 mocha、chai 和 assert 风格
使用 Sinon 来模拟和存根后端数据
编写易于读取和维护的测试用例

希望这篇文章能够帮助你更好地理解如何使用 Karma、Chai 和 Sinon 在 Angular 项目中进行端到端测试。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a78199add4f0e0ff0a36fd

在 Angular 项目中使用 Karma、Chai 和 Sinon 进行端到端测试

简介

Karma

Chai

Sinon

总结

纠错反馈