25、TO-DO 应用集成测试全流程指南-优快云博客

本文链接：https://blog.youkuaiyun.com/work3/article/details/155506912

TO-DO 应用集成测试全流程指南

1. 集成测试前的准备

在为 TO-DO 应用编写集成测试之前，我们需要完成两项重要的准备工作：启动服务器和配置数据库。这两项工作是确保集成测试顺利进行的基础。

1.1 启动服务器和配置数据库的必要性

为了使集成测试成功执行，我们需要服务器处于运行状态。在之前的测试中，执行服务器端自动化测试时无需启动服务器，但在集成测试中，服务器必须运行。同时，应用与 MongoDB 数据库交互，为了保证测试的独立性和稳定性，我们需要使用单独的测试数据库，并在测试前后自动清理和填充数据。

1.2 具体操作步骤

1.2.1 安装 Protractor

首先，我们需要为 TO-DO 应用安装 Protractor。具体操作如下：
1. 切换到 tdjsa/testendtoend/todo 工作区目录。
2. 运行 npm install 命令，下载并安装 Protractor 及其依赖项。
3. 运行 npm run-script update-driver 命令，更新项目中使用的 WebDriver。

1.2.2 启动服务器

在 Protractor 启动前，我们需要启动 Express 服务器。为了避免代码重复，我们使用 Mocha 的全局 before 函数。具体操作如下：
1. 编辑 test/integration 目录下的 global-setup.js 文件，输入以下代码：

var http = require('http');
var app = require('../../app');
before(function() {
    var port = process.env.PORT || 3030;
    http.createServer(app).listen(port);
});

为了避免测试时服务器日志干扰，我们需要在 app.js 文件中修改日志记录代码：

if (app.get('env') !== 'test') {
    app.use(logger('dev'));
}

1.2.3 配置数据库

为了在不同环境中使用不同的数据库，我们需要创建一个 config.json 文件，并在 app.js 文件中修改数据库连接代码。具体操作如下：
1. 编辑 todo 目录下的 config.json 文件，输入以下代码：

{
    "development": {
        "dburl": "mongodb://localhost/todo"
    },
    "test": {
        "dburl": "mongodb://localhost/todouitest"
    },
    "production": {
        "dburl": "..."
    }
}

修改 app.js 文件中的数据库连接代码：

var config = require('./config.json');
var dburl = config[app.get('env')].dburl;
console.log("using database: " + dburl);
var db = require('./db');
db.connect(dburl, function(err) {
    if(err) {
        console.log("unable to connect to the database");
        throw(err);
    }
});

1.2.4 填充测试数据

为了确保每个测试都能在独立的环境中运行，我们需要在每个测试运行前清理测试数据库并填充新的测试数据。具体操作如下：
编辑 global-setup.js 文件，在其中添加 beforeEach 函数：

beforeEach(function(done) {
    var db = require('../../db');
    var config = require('../../config.json');
    var dburl = config[app.get('env')].dburl;
    var callback = function() {
        db.get().collection('tasks').remove(function() {
            var tasks = [
                {name: 'Test Models', month: 12, day: 1, year: 2016},
                {name: 'Test Routes', month: 12, day: 2, year: 2016},
                {name: 'Test AngularJS', month: 12, day: 3, year: 2016},
                {name: 'Test UI', month: 12, day: 4, year: 2016}
            ];
            db.get().collection('tasks').insert(tasks, done);
        });
    };
    db.connect(dburl, callback);
});

1.3 操作流程总结

以下是启动服务器和配置数据库的操作流程总结：

graph LR
    A[安装 Protractor] --> B[启动服务器]
    B --> C[配置数据库]
    C --> D[填充测试数据]

2. 测试 jQuery UI

完成服务器和数据库的配置后，我们可以开始对 TO-DO 应用的 jQuery UI 进行集成测试。

2.1 配置 Protractor

首先，我们需要配置 Protractor 的配置文件 protractor.conf.js 。具体操作如下：
编辑 protractor.conf.js 文件，输入以下代码：

var app = require('./app');
var config = require('./config.json');
exports.config = {
    directConnect: true,
    baseUrl: 'http://localhost:' + (process.env.PORT || 3030),
    framework: 'mocha',
    mochaOpts: {
        reporter: 'dot',
        timeout: 10000,
    },
    specs: ['test/integration/*.js'],
};

2.2 确定测试用例

为了确保集成测试的有效性，我们需要确定测试用例。集成测试应重点关注未被其他测试覆盖的集成点，最小化测试数量。以下是一些必要的测试用例：
- 验证任务计数显示正确的值
- 验证任务在页面上显示
- 验证添加任务功能正常
- 验证删除任务功能正常

2.3 实现集成测试

2.3.1 验证任务计数

编辑 testendtoend/todo/test/integration/tasksj-test.js 文件，输入以下代码：

var expect = require('chai').expect;
require('chai').use(require('chai-as-promised'));
describe('tasks ui test', function() {
    beforeEach(function() {
        browser.ignoreSynchronization = true;
        browser.get('/tasksj.html');
    });
    afterEach(function() {
        browser.ignoreSynchronization = false;
    });
    it('should show correct task count', function() {
        expect(element(by.id('taskscount')).getText()).to.be.eventually.eql('4');
    });
});

运行测试前，确保 MongoDB 守护进程正在运行。如果未运行，运行 mongod --dbpath db 命令启动。然后运行 npm run-script test-integration 命令启动 Protractor 进行测试。

2.3.2 验证任务显示

在 tasksj-test.js 文件中添加以下代码：

it('should display tasks on the page', function() {
    expect(element(by.id('tasks')).getText())
      .to.eventually.contain('Test Models');
    expect(element(by.id('tasks')).getText())
      .to.eventually.contain('Test UI');
});

2.3.3 验证添加任务

在 tasksj-test.js 文件中添加以下代码：

it('should successfully add a task', function() {
    element(by.id('name')).sendKeys('Create Quality Code');
    element(by.id('date')).sendKeys('12/15/2016');
    element(by.id('submit')).click();
    expect(element(by.id('message')).getText())
      .to.eventually.contain('task added');
    expect(element(by.id('tasks')).getText())
      .to.eventually.contain('Create Quality Code');
});

2.4 测试结果验证

通过上述测试用例，我们可以验证 HTML 页面与代码的正确连接，以及客户端与服务器端的正确交互。例如，验证任务计数的测试可以确认 HTML 页面上至少有一个 ID 正确，页面加载时调用了正确的脚本函数，客户端代码调用了服务器端的正确 URL，以及服务器端与数据库的正确集成。

2.5 测试操作流程总结

以下是测试 jQuery UI 的操作流程总结：

graph LR
    A[配置 Protractor] --> B[确定测试用例]
    B --> C[实现集成测试]
    C --> D[验证测试结果]

通过以上步骤，我们可以完成 TO-DO 应用的集成测试，确保应用的各个部分能够正确交互。

3. 测试 AngularJS UI

在完成 jQuery UI 的测试后，我们可以继续对 TO-DO 应用的 AngularJS UI 进行集成测试，其流程与 jQuery UI 测试有相似之处，但也存在一些差异。

3.1 配置 Protractor

由于 AngularJS 应用有其自身的特点，我们可能需要对 Protractor 的配置进行一些微调。不过，基本的配置框架与之前类似。确保 protractor.conf.js 文件配置正确，特别是 baseUrl 和 framework 等关键参数。

var app = require('./app');
var config = require('./config.json');
exports.config = {
    directConnect: true,
    baseUrl: 'http://localhost:' + (process.env.PORT || 3030),
    framework: 'mocha',
    mochaOpts: {
        reporter: 'dot',
        timeout: 10000,
    },
    specs: ['test/integration/*.js'],
};

3.2 确定测试用例

同样，我们需要确定针对 AngularJS UI 的测试用例，重点关注 AngularJS 相关的集成点和功能。以下是一些必要的测试用例：
- 验证 AngularJS 指令是否正确渲染任务列表
- 验证任务的添加和删除操作在 AngularJS 环境下是否正常
- 验证 AngularJS 数据绑定是否正确更新页面显示

3.3 实现集成测试

3.3.1 验证任务列表渲染

编辑 testendtoend/todo/test/integration/angularjs-test.js 文件，输入以下代码：

var expect = require('chai').expect;
require('chai').use(require('chai-as-promised'));
describe('AngularJS tasks ui test', function() {
    beforeEach(function() {
        browser.get('/angularjs-tasks.html');
    });
    it('should render task list correctly', function() {
        expect(element.all(by.repeater('task in tasks')).count()).to.eventually.equal(4);
    });
});

此测试用例使用 AngularJS 的 ng-repeat 指令来验证任务列表是否正确渲染。

3.3.2 验证任务添加操作

在 angularjs-test.js 文件中添加以下代码：

it('should successfully add a task in AngularJS', function() {
    element(by.model('newTask.name')).sendKeys('Angular Task');
    element(by.model('newTask.date')).sendKeys('12/20/2016');
    element(by.css('.add-task-button')).click();
    expect(element.all(by.repeater('task in tasks')).count()).to.eventually.equal(5);
});

该测试用例模拟用户在 AngularJS 界面中添加任务的操作，并验证任务列表的数量是否正确更新。

3.3.3 验证任务删除操作

在 angularjs-test.js 文件中添加以下代码：

it('should successfully delete a task in AngularJS', function() {
    element.all(by.repeater('task in tasks')).first().element(by.css('.delete-task-button')).click();
    expect(element.all(by.repeater('task in tasks')).count()).to.eventually.equal(3);
});

此测试用例模拟用户删除任务的操作，并验证任务列表的数量是否正确减少。

3.4 测试结果验证

通过上述测试用例，我们可以验证 AngularJS UI 与服务器端的正确交互，以及 AngularJS 相关功能的正确性。例如，验证任务列表渲染的测试可以确认 AngularJS 指令是否正确解析和渲染，任务添加和删除测试可以确认客户端与服务器端的数据交互是否正常。

3.5 测试操作流程总结

以下是测试 AngularJS UI 的操作流程总结：

graph LR
    A[配置 Protractor] --> B[确定测试用例]
    B --> C[实现集成测试]
    C --> D[验证测试结果]

4. 集成测试的最佳实践和注意事项

在进行 TO-DO 应用的集成测试过程中，有一些最佳实践和注意事项需要我们遵循，以确保测试的有效性和可靠性。

4.1 最佳实践

最小化集成测试 ：只编写必要的测试来验证未被其他测试覆盖的集成点，避免冗余测试。例如，在确定测试用例时，仔细分析各个部分的测试覆盖情况，确保测试的针对性。
保持测试独立性 ：每个测试应该独立运行，不受其他测试的影响。通过在每个测试运行前清理和填充测试数据，确保每个测试都有一个干净的环境。
使用全局设置 ：利用 Mocha 的全局 before 和 beforeEach 函数来进行服务器启动和数据准备等操作，避免代码重复。

4.2 注意事项

数据库管理 ：使用独立的测试数据库，避免与开发和生产数据库混淆。同时，确保在测试结束后清理测试数据，以免影响后续测试。
服务器日志 ：在测试过程中，关闭服务器的详细日志记录，以免干扰测试结果的查看。可以通过修改 app.js 文件中的日志记录代码来实现。
环境变量 ：使用环境变量来配置服务器端口和数据库连接等参数，确保测试环境的灵活性和可配置性。

4.3 最佳实践和注意事项总结

类别	具体内容
最佳实践	最小化集成测试、保持测试独立性、使用全局设置
注意事项	数据库管理、服务器日志、环境变量

5. 总结

通过本文，我们详细介绍了 TO-DO 应用集成测试的全流程，包括集成测试前的准备（启动服务器、配置数据库、填充测试数据），以及对 jQuery UI 和 AngularJS UI 的集成测试。具体步骤总结如下：
1. 安装 Protractor 并进行相关配置。
2. 启动服务器，确保服务器在测试前自动启动，并关闭详细日志记录。
3. 配置数据库，使用独立的测试数据库，并根据不同环境选择合适的数据库连接。
4. 填充测试数据，确保每个测试都有独立的测试环境。
5. 对 jQuery UI 和 AngularJS UI 进行集成测试，包括确定测试用例、实现测试代码和验证测试结果。

在进行集成测试时，我们要遵循最佳实践，注意数据库管理、服务器日志和环境变量等问题，以确保测试的有效性和可靠性。通过这些步骤，我们可以确保 TO-DO 应用的各个部分能够正确交互，为应用的稳定运行提供保障。

graph LR
    A[安装 Protractor] --> B[启动服务器]
    B --> C[配置数据库]
    C --> D[填充测试数据]
    D --> E[jQuery UI 测试]
    D --> F[AngularJS UI 测试]
    E --> G[总结与优化]
    F --> G

通过以上完整的集成测试流程，我们可以全面、系统地对 TO-DO 应用进行测试，发现并解决潜在的问题，提高应用的质量和稳定性。