测试 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 编写代码。您还可以利用 检查工具 来帮助您创建元素定位器。

单元测试

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

在下面的步骤中，我们将逐步介绍如何生成一个新的应用程序并设置测试环境，创建一个可测试的应用程序类，并使用自定义单元测试测试该类。所有这些操作都可以在 Sencha Studio 中直接完成。

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

让我们开始吧！

生成项目

我们将从打开 Sencha Studio 开始。

您可以通过从应用程序工具栏中选择以下内容来使用 Sencha Studio 生成所需的 workspace

Sencha Studio -> New Project

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

添加可测试类

入门应用程序的功能很少，所以让我们添加一些可以测试的东西。出于我们的目的，让我们在 MyApp/app/view/main/WindowEditor.js 中使用您选择的 IDE 创建一个 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 中创建即将到来的测试。也就是说，您会发现应用程序的创建逻辑通常与您最终将在测试规范中编写的代码并行运行。

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

注意： 此“编辑器”目前没有任何作用，但它应该满足我们进行测试演示的目的。

初始化测试项目

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

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

添加场景

测试项目必须包含一个“场景”才能添加一组测试规范。

场景 - 场景包含您将很快创建的测试套件。

要创建场景，请点击“添加场景”按钮。然后您可以更改场景的名称和文件系统位置。通常，您需要根据要测试的内容来命名场景。在本例中，我们将其命名为“WindowEditor”。您还需要选择场景类型（WebDriver 或 In-Browser）。对于单元测试，请选择“In-Browser”。添加完成后，请确保点击“保存”。现在我们可以开始向场景添加一组测试规范。

添加套件

您现在应该看到“WindowEditor”作为“Tests”节点的子节点。点击该节点，您应该会看到您的本地浏览器和一个显示“未找到测试”的面板。让我们改变一下！

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

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

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

添加完成后，您应该在“WindowEditor”下看到一个“WindowValidation.js”文件。点击新文件，您将看到一些用于开始的套件代码。

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

我们当前形式的套件代码不太有用，所以让我们继续向套件添加一个规范。

添加规范

规范 - 规范是 JavaScript 函数形式的单个测试，它解释了程序的一部分应该完成什么。我们应该用简单的语言解释测试的预期结果。然后它应该提供执行测试的 JavaScript 代码。

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

暂时，继续将以下套件粘贴到您的 WindowEditor.js 文件中，然后按“保存”。

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 造成的。

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

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

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

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

运行测试

现在我们已经连接了测试，让我们逐步了解如何通过本地浏览器运行它。

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

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

从 WindowEditor 测试运行程序中选择“WindowValidation.js”，然后点击顶部工具栏中的“运行选择”。如果一切顺利，您应该会收到一个绿色的复选框，表示测试已成功通过。

了解测试失败时会发生什么也很有用，所以让我们通过更改测试用例来强制这种情况发生。

替换以下行

// 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('');

正如您所料，此更改将导致文本字段值保持无效，这意味着按钮的启用事件将永远不会触发，我们也永远不会调用 `done()`。 5 秒后，测试将自行确定失败并超时。

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

结论

正如您所料，本指南只是触及了 Sencha Studio 中 Sencha Test 功能的皮毛。 希望本介绍能为您提供探索 Sencha Studio 中包含的众多强大工具所需的知识。

如果您有任何进一步的问题、疑虑或错误报告，请访问 Sencha Test 论坛。