单元测试 vs 功能测试

在 Sencha Test 中编写的测试将分为以下类别

• 单元测试

• 功能测试

了解如何利用每种类型的测试将确保应用程序内最高的完整性。

测试风格概述

单元测试可以描述为针对应用程序底层代码的测试。这种测试风格可能对应用程序开发人员特别感兴趣。

功能测试分析正在运行的应用程序，而不是简单地测试其各个部分。
这种测试风格可能对质量保证和最终用户特别感兴趣。

让我们澄清这种概括性的描述，即单元测试可以在不启动应用程序的情况下执行，而功能测试需要启动应用程序才能执行测试。

这种区别很重要，因为 Sencha Test 以及 Ext JS 5+ 可以测试代码而无需任何 UI 存在。例如，您可以测试数据模型中的验证，而无需运行应用程序。应用程序中使用的视图也可以独立于应用程序进行测试。

当通过运行的应用程序进行测试时，应用程序的许多方面可能难以测试或耗时。测试可能需要您首先遵循一组特定的导航步骤，或者以特定用户类型身份登录。

例如，考虑这样一种情况，您想测试“用户”是否可以编辑给定字段，而不是“用户详细信息”面板上的“管理员”角色。功能测试要求您启动应用程序并以用户身份而不是管理员身份登录。然后，可能导航到“用户列表”视图，从列表中选择一个用户，然后单击编辑按钮以启动“用户详细信息”弹出窗口。然后，您需要评估“用户”有资格编辑的字段。

最终，我们只想知道“用户”是否可以在“用户详细信息”类型的视图中编辑某些字段。通过单元测试，只需创建一个仅启动注入“用户”权限的视图的测试即可。然后，您可以根据权限评估字段的可编辑性。

在探索功能测试之前，让我们看看一些常见的单元测试用例，以及我们如何使用 Sencha Studio 执行这些测试。

单元测试

假设：

• 您已按照 安装指南 进行操作
• 您已使用经典示例应用程序创建了一个项目
• 您已为您的应用程序初始化了测试项目 (Tests) 并创建了一个场景来保存测试。

注意： 单元测试不需要应用程序或 Sencha 框架。也就是说，我们正在遵循此模型来创建从头到尾的指南路径。

单元测试模型验证

对于此单元测试，让我们测试 User 模型的验证。我们希望确保表示输入用户数据的数据存根在我们的参数范围内有效。

首先，让我们通过添加以下文件将我们的 User 模型类添加到我们的应用程序：“{appName}/app/model/User.js”

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: ['first', 'last', 'fullname', 'username'],

    validators: {
        first: 'presence',
        last: { type: 'length', min: 2 },
        username: [
            { type: 'exclusion', list: ['Admin', 'Operator'] },
            { type: 'format', matcher: /([a-z]+)[0-9]{2,3}/i }
        ]
    }
});

现在可以实例化“User”模型以用于测试目的。接下来，让我们向场景添加一些数据，以便测试在验证我们的 User 模型时能够访问它。我们将在工作区根目录中创建一个文件夹/文件：“{workspaceRoot}/shared/userdata.js”。“userdata”文件将包含以下内容

var __my_user_data = {
        first: 'Rick',
        last: 'Grimes',
        username: 'rgrimes'
    }

接下来，我们将“userdata”文件添加到测试项目中，以便任何场景的测试都可以访问它。我们将通过单击测试项目的“附加库”标题下的“+ 添加”按钮来完成此操作，双击默认字段值，单击文件夹图标以调出文件选择器，然后从“[workspaceRoot]/shared”目录中选择“userdata.js”文件。最后，单击顶部工具栏中的“保存”按钮。

在下一步中，我们将创建用于验证“userdata”值是否由我们的“User”模型类验证的单元测试。

首先，通过单击“测试项目”视图中“场景”标题下的“+ 添加”按钮来创建场景。为了本指南的目的，我们将为其命名为“User Data”。

接下来，右键单击工作区导航树中的“User Data”节点，然后选择“新建 > Jasmine 测试套件”，并将用户验证测试命名为“UserValidation”。这会将“UserValidation”测试添加为“User Data”场景的子项。

单击工作区验证树中的“UserValidation.js”节点以打开测试编辑器视图。

最后，将占位符测试脚本替换为以下内容

describe("UserValidation", function() {
    it("should pass", function(done) {
        Ext.require('MyApplication.model.User', function () {
            var user = new MyApplication.model.User(__my_user_data),
                failedValidation = user.getValidation().dirty;

            expect(failedValidation).toBe(!true);
            done();
        });
    });
});

在此测试中，我们期望模型验证示例用户数据。如果您在场景的测试运行器中播放测试，您应该会看到它确实通过了！

单元测试自定义按钮

除了测试非视图逻辑外，我们还可以单元测试我们较大应用程序的各个部分，以确保它们正常工作。在此测试中，让我们创建一个带有徽章的按钮，该徽章显示在按钮的 badgeText 配置中设置的文本。

首先，将以下文件夹/文件添加到您的应用程序中，路径为：“{workspaceRoot}/app/view/button/BadgeButton.js”

Ext.define('MyApplication.view.button.BadgeButton', {
    extend: 'Ext.button.Button',
    xtype: 'badgebutton',

    config: {
        badgeText: null
    },

    childEls: ['badgeEl'],

    cls: 'da-badge-button',

    hideBadgeOnDisabled: true,

    initRenderData: function() {
        return Ext.apply(this.callParent(), {
            badgeText: this.badgeText
        });
    },

    updateBadgeText: function(text) {
        var me = this;

        if (me.rendered) {
            me.badgeEl.setHtml(text).setVisible(text);
        } else {
            me.on('render', function() {
                me.badgeEl.setVisibilityMode(Ext.dom.Element.DISPLAY);
                me.badgeEl.setHtml(text).setVisible(text);
            });
        }
    },

    onDisable: function() {
        this.callParent();
        if (this.hideBadgeOnDisabled) {
            this.badgeEl.hide();
        }
    },
    onEnable: function() {
        this.callParent();
        this.badgeEl.show();
    }
}, function(BadgeButton) {
    BadgeButton.prototype.renderTpl += '<span id="{id}-badgeEl" class="da-badgeElCls" data-ref="badgeEl">{badgeText}</span>';
});

接下来，在我们的应用程序的测试项目中创建一个名为“Badge Button”的新场景，然后右键单击该场景以创建一个名为“ButtonText”的新 Jasmine 测试套件。

我们可以在徽章按钮测试套件中添加一个带有多个 it() 规范的 describe()。每个 it() 的描述将显示为“ButtonText”下场景测试树下的节点。

在“ButtonText”选项卡中输入以下测试。这将允许 Studio 评估徽章文本，并确保在禁用按钮时隐藏徽章元素。

describe("ButtonText", function() {
    var btn;

    beforeEach(function(){
        btn = Ext.create('MyApplication.view.button.BadgeButton', {
            renderTo: Ext.getBody()
        });
    });

    afterEach(function () {
        btn.destroy();
    });

    it("should have a badge of 2", function() {
        btn.setBadgeText('update');
        expect(btn.badgeEl.getHtml()).toBe('update');
    });

    it("badge should be hidden", function() {
        btn.setBadgeText('update');
        btn.disable();
        expect(btn.badgeEl.isVisible()).toBe(false);
    });
});

运行测试应显示“ButtonText”中两个规范的绿色复选标记。

功能测试

单元测试是敏捷的，允许对内部代码和隔离组件进行离散测试。当防止随着应用程序发展和变得更加复杂而引入的错误时，单元测试提供了很好的第一道防线。但是，功能测试在错误防御策略中也占有一席之地，不应仅仅为了单元测试而被忽视。

套件的单元测试完全有可能全部通过，让您相信您的应用程序已经过防错处理。所有这一切，只是为了发现在您运行应用程序时，应用程序环境的某些动态元素未在单元测试中捕获。

对于某些操作，完善测试设置的唯一实用方法是启动应用程序并使其经历考验。

复杂路由

一个这样的例子是在应用程序内的视图之间导航。
假设您的应用程序有一个带有卡片视图的父容器和两个子视图：主页和用户列表。

然后，假设您想测试当 URL 包含 #!/user/rgrimes 时路由是否有效以显示特定用户的详细信息视图。

在内部，您在父视图的 viewController 中有一个路由，该路由基于 #!/user/ 路由到用户面板，并且用户面板的 viewController 使用哈希的 /rgrimes 部分打开用户详细信息面板。测试这种类型的导航逻辑正是功能测试发挥作用的地方。应用程序的启动负责呈现主容器及其子项，而主容器及其子项又启动各自的 viewController 来管理视图之间的路由逻辑。

测试应用程序环境

复杂路由是您希望从 Studio 启动应用程序并运行测试逻辑以验证应用程序功能的一种情况。您可能希望采用功能测试的另一个原因是为了测试在真实世界环境中运行的应用程序。

假设您设置了一个单元测试，以确保“用户”可以查看“用户详细信息”视图，但“主管”和“管理员”可以编辑。您有一个单元测试，以确保“每周概览”在用户查看时显示单个用户的详细信息，但在主管查看时显示整个团队汇总。

只有管理员可以访问配置用户角色的“管理员仪表板”，而主管和用户则不能。有了所有这些单元测试，您可能会觉得已经涵盖了所有基础，并且应用程序的每个独特方面都经过了测试，因此您可以部署。现在想象一下，用户启动应用程序但无法登录，因为与服务器/数据库的连接已断开。从远程服务器下载用户角色信息的功能测试本可以在应用程序部署之前解决此问题。

摘要

在保护您的应用程序免受错误侵害时，单元测试和功能测试至关重要。

幸运的是，Sencha Test 为您提供了管理和执行这两者所需的工具。本指南提供了一些简单的单元测试示例，但是随着您构建测试库，您将希望合并更多内容，而不仅仅是直接的逻辑测试。您将希望模拟 UI 中的用户交互。

要了解如何轻松地将模拟用户交互添加到您的单元/功能测试中，请查看 事件记录器指南。