测试 Ext JS 应用程序

端到端测试

如果您有已发布的现有 Ext JS 应用程序，您希望对其执行端到端测试（其中启动整个应用程序，并从最终用户的角度进行测试），请按照以下步骤在 Sencha Studio 中设置您的项目，并开始编写一些测试。

1. 打开 Sencha Studio，并创建一个新项目。定义您的 Ext JS 应用程序正在运行的 URL，例如，http://examples.sencha.com/extjs/latest/examples/admin-dashboard/。

   • 名称： 项目的名称，例如 AdminDashboard
   • 路径： 将在其中创建项目的位置。场景和测试套件文件将添加到此位置。
   • URL： 正在运行的 Web 应用程序的 Web 地址，例如 http://examples.sencha.com/extjs/latest/examples/admin-dashboard/。

2. 创建项目后，您将能够单击“新建场景”按钮来创建一个场景，该场景将保存您的测试套件文件。

   • 名称： 场景的名称，例如，如果您正在创建端到端测试，您可以将场景称为 EndToEnd
   • 测试类型： 选择 WebDriver 将使您的测试与浏览器分开运行。这适用于端到端测试。如果您在 Sencha Studio 中选择了 Test Engineer 角色，则此选项将被隐藏，并且新场景将默认为 WebDriver 类型。

3. 创建场景后，在树中选择场景，然后单击“新建测试套件”按钮 >> 从菜单中选择“Jasmine 测试套件”。输入测试套件的名称，例如 Dashboard。这将创建一个新的 Jasmine 测试套件文件。.js 文件扩展名会自动添加。

4. 将新的测试套件加载到编辑器后，您现在可以开始编写测试。您可以利用事件记录器来捕获一组操作以插入到您的测试套件中，或使用Futures API编写代码。您还可以利用Inspect 工具来帮助您为元素创建定位器。

单元测试

Sencha Studio 允许开发人员快速自动地测试 Ext JS 应用程序或网页的细粒度方面。单元测试确保您的应用程序的所有部分在您的代码库增长和更改时都按预期运行。

在以下步骤中，我们将逐步完成生成新应用程序和设置测试环境、创建可测试的应用程序类以及使用自定义单元测试测试所述类的过程。所有这些都可以在 Sencha Studio 中直接完成。

这些步骤假设您对 Jasmine 测试框架有一定的了解。如果您不熟悉 Jasmine 或测试概念，请查看他们优秀的文档，以获取有关编写和编辑 Jasmine 测试的更多信息。本指南还使用了Sencha Cmd来生成 Ext JS 应用程序，并假设您已下载/安装它们。

让我们开始吧！

生成项目

我们将首先打开 Sencha Studio。

您可以通过从应用程序工具栏中选择以下选项，使用 Sencha Studio 生成所需的工作空间

Sencha Studio -> New Project

选择适当的文件系统路径，选择 Ext JS 框架所在的位置，然后单击“确定”。

添加可测试的类

启动器应用程序的功能很少，所以让我们添加一些我们可以测试的东西。为了我们的目的，让我们使用您选择的 IDE 在 MyApp/app/view/main/WindowEditor.js 创建一个 WindowEditor 类。您可以使用此代码来学习

Ext.define('MyApp.view.main.WindowEditor', {
   extend: 'Ext.Window',

   alias: 'widget.windoweditor',

   width:400,
   height:200,
   padding:20,

   autoShow: true,

   title: 'Update Email',

   items: [{
       xtype: 'form',
       items: [{
           xtype: 'textfield',
           allowBlank: false,
           vtype: 'email'
       },{
           xtype: 'button',
           text: 'Submit Change',
           formBind: true
       }]
   }]
});

此类扩展了一个窗口，该窗口包含一个表单，该表单又包含一个文本字段和一个按钮。我们已指示文本字段不允许空白值，并且任何输入都必须通过电子邮件验证。

此外，我们在按钮上设置了 formBind 为 true。这指示按钮保持禁用状态，直到表单认为自身有效。一旦有效，按钮将更改为可单击状态。

然后，您可以将 MyApp/app/view/main/MainController.js 的 onItemSelected 方法替换为以下内容

onItemSelected: function (sender, record) {
    Ext.create('MyApp.view.main.WindowEditor');
}

这将为我们的网格打开一个模拟电子邮件编辑器。您实际上不需要修改此控制器代码即可在 Sencha Studio 中创建即将到来的测试。也就是说，您会发现您的应用程序的创建逻辑通常与您最终将在测试 Spec 中编写的代码并行运行。

我们最终将使用此类来测试当文本输入满足我们规定的验证时，按钮是否成功启用/禁用。

注意： 此“编辑器”此时实际上并没有做任何事情，但它应该可以满足我们用于测试演示的目的。

初始化测试项目

让我们通过单击应用程序的“Tests”（测试）节点来添加我们的项目设置。然后单击右侧详细信息面板中的“Initialize Test Project”（初始化测试项目）。单击后，您应该会看到一些项目设置。此时我们不需要更改任何内容。但是，如果您确实修改了任何设置，请务必在继续之前单击“Save”（保存）。

接下来，让我们添加一个应用程序场景。

添加场景

测试项目必须包含一个“Scenario”（场景）才能添加测试 Spec 套件。

场景 - 场景容纳您即将创建的测试套件。

要创建场景，请单击“Add Scenario”（添加场景）按钮。然后，您可以更改场景的名称和文件系统位置。通常，您会希望根据您将要测试的内容来命名您的场景。在本例中，我们将其称为“WindowEditor”。您还需要选择场景类型（WebDriver 或 In-Browser）。为单元测试选择“In-Browser”（在浏览器中）。添加后，请确保单击“Save”（保存）。我们现在可以开始向我们的场景添加测试 Spec 套件。

添加套件

您现在应该看到“WindowEditor”作为“Tests”（测试）节点的子节点。继续单击该节点，您应该会看到您的本地浏览器以及一个显示“No tests found”（未找到测试）的面板。让我们改变它！

让我们添加一个 Jasmine 测试套件。

套件 - 套件是一个文件，其中包含代表您的应用程序某些方面的测试集合。这可以是类、组件或函数组。这实际上取决于您选择如何组织您的测试套件。

选择场景后，单击“New Test Suite”（新建测试套件）按钮，然后从菜单中选择“Jasmine Test Suite”（Jasmine 测试套件）。然后将弹出一个模态窗口，允许您为您的套件命名。我们将其称为“WindowValidation”。

添加后，您应该会在“WindowEditor”下看到一个“WindowValidation.js”文件。单击新文件，您将看到一些存根的套件代码以帮助您入门。

describe("my test suite", function() {
    it("should pass", function() {
        expect(1).toBe(1);
    });
});

我们存根的套件代码在其当前形式下并没有太大帮助，所以让我们继续向我们的套件添加一个 Spec。

添加 Spec

Spec - Spec 是以 JavaScript 函数形式存在的单个测试，它解释了您的程序的某个部分应该完成什么。我们应该用简单的语言解释测试的预期内容。然后它应该提供 JavaScript 来执行所述期望的测试。

重要的是要注意，在许多情况下，您的测试可能在创建类和获取对组件的引用方面与您的应用程序代码的许多方面并行。

目前，继续将以下套件粘贴到您的 WindowEditor.js 文件中，然后按“Save”（保存）

describe("formBind true", function() {
    it("should disable button if email is not valid", function(done) {

        // Create and reference the WindowEditor and then 
        // get reference to the button and textfield
        var win = Ext.create('MyApp.view.main.WindowEditor'),
            button = win.down('button'),      
            field  = win.down('textfield');

        // Set the field's value to a valid email address
        // in order to have the button fire an enable event
        field.setValue('[email protected]');

        button.on('enable', function() {

            // Set the field's value to an invalid email address (nothing)
            // in order to have the button fire a disable event
            field.setValue('');

            button.on('disable', function() {

                //  Once the disable event has been called after setting a 
                //  bad value, we can safely say that the button is properly 
                //  hooked into the form's validity.  Thusly, we can 
                //  alert the spec to return by calling the done function.
                done();    
            });
        });
    });
});

如您所见，我们正在测试按钮的状态是否正确遵循表单的有效性。如果文本字段包含有效值，则表单有效，并且应启用按钮。相反，如果文本字段包含无效值，则表单无效，并且应禁用按钮。所有这些行为都发生是因为按钮的 formBind 配置项设置为 true。

我们能够通过监听按钮的 enable/disable 事件来测试是否正确满足这些条件。如果按钮触发“enable”（启用），我们知道表单已变为有效。如果按钮触发“disable”（禁用）事件，我们知道表单已变为无效。那时，我们可以确信测试成功，然后调用 Jasmine 的 done() 函数。

在许多情况下，您将使用断言来确保结果满足您的假设。断言是使用 expect 函数构建的，该函数接受一个值，称为实际值。然后将其链接到 Matcher 函数，该函数接受期望值。这确定 true/false，或者换句话说，通过/失败。

也就是说，在这种情况下，我们不一定需要使用断言。done() 函数作为参数传递给 it() 方法。当我们确定处理完成时，我们可以通过简单地调用 done() 来使用它。通常，在处理异步测试时，done() 将作为“success”（成功）回调调用。但是，我们可以在此处使用它而不是设置断言。凭借达到最终事件，我们知道我们已经满足了我们的测试，因此无需断言。如果永远不会触发最终事件，则不会调用 done()，并且测试将在 5 秒后超时，表明失败。

现在我们有了一个测试用例，让我们运行它并确保我们的应用程序的编辑器正在成功衡量我们表单的有效性。

运行测试

现在我们已经连接了我们的测试，让我们逐步完成通过本地浏览器运行它的过程。

首先，从“Workspace navigation view”（工作空间导航视图）中选择“WindowEditor”场景节点，以显示场景的测试运行器选项卡。接下来，从测试运行器选项卡左侧的“Browsers”（浏览器）窗格中选择您选择的浏览器。为了我们的目的，我们将选择 Chrome。
选择后，您将看到您选择的浏览器打开您连接的应用程序。

注意： 如果“sencha app watch”正在初始化，您将在应用程序节点旁边看到一个黄色眼睛图标。您的浏览器将不会打开，直到眼睛变成黑色，表示“app watch”已初始化。

从 WindowEditor 测试运行器中选择“WindowValidation.js”，然后从顶部工具栏中单击“Run Selection”（运行所选）。如果一切顺利，您应该会收到一个绿色复选框，表明测试已成功通过。

看看测试失败时会发生什么也可能很有用，所以让我们强制使其通过更改我们的测试用例来发生。

替换以下行

// Set the field's value to a valid email address
// in order to have the button fire an enable event
field.setValue('[email protected]');

使用此代码

field.setValue('');

您可以想象，此更改将导致文本字段值保持无效，这意味着按钮的 enable 事件将永远不会触发，并且我们将永远不会调用 done()。5 秒后，测试将确定自身失败并超时。

保存您的 Spec 并重新运行所选。这次您应该看到一个红色“1”。这表示一个 Spec 失败。如果您展开 WindowValidation.js，然后展开 formBind true，您将看到我们的 Spec 旁边有一个红色“x”。如果您单击红色“x”，则可以在下面的摘要面板中查看错误摘要。

结论

您可以想象，本指南仅触及了通过 Sencha Studio 使用 Sencha Test 可以完成的工作的表面。希望本介绍为您提供浏览和发现 Sencha Studio 中包含的许多强大工具所需的知识。

如果您有更多问题、疑虑或错误报告，请访问 Sencha Test 论坛。