文档帮助

术语、图标和标签

许多类在使用配置对象创建(实例化)类时都有快捷名称。快捷名称被称为 alias(或 xtype,如果类扩展自 Ext.Component)。alias/xtype 列在适用类的类名旁边,以便快速参考。

访问级别

框架类或其成员可以指定为 privateprotected。否则,类/成员为 publicPublicprotectedprivate 是访问描述符,用于传达应如何以及何时使用类或类成员。

成员类型

成员语法

下面是一个示例类成员,我们可以对其进行剖析,以显示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。

lookupComponent ( item ) : Ext.Component
protected

当原始配置对象添加到此容器时调用,无论是在 items 配置的初始化期间,还是在添加新项目 added), or {@link #insert inserted 时。

此方法将传递的对象转换为实例化的子组件。

当需要对子组件创建应用特殊处理时,可以在子类中重写此方法。

参数

item :  Object

要添加的配置对象。

返回
Ext.Component

要添加的组件。

让我们看一下成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- Singleton 框架类。*有关更多信息,请参阅 singleton 标志

- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)

- 表示类、成员或指南是当前查看版本中的新增内容

成员图标

- 表示 config 类型的类成员

- 表示 property 类型的类成员

- 表示 method 类型的类成员

- 表示 event 类型的类成员

- 表示 theme variable 类型的类成员

- 表示 theme mixin 类型的类成员

- 表示类、成员或指南是当前查看版本中的新增内容

类成员快速导航菜单

在 API 文档页面上的类名正下方是一行按钮,对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数(此计数会随着过滤器的应用而更新)。单击该按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的 configs 部分中,就在它们所作用的配置下方。Getter 和 setter 方法文档将在 config 行中找到,以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中,并显示在顶部标题栏正下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本的所有最近页面。

在历史记录配置菜单中,您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择“全部”,则“在历史记录栏中显示产品详细信息”的复选框选项将启用。选中后,每个历史页面的产品/版本将在历史记录栏中与页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上,还有一个过滤器输入字段,该字段使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这可以使用页面顶部的复选框完成。

API 类导航树底部的复选框过滤类列表以包含或排除私有类。

单击空的搜索字段将显示您最近 10 次搜索,以便快速导航。

API 文档类元数据

每个 API 文档页面(Javascript 原始页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

展开和折叠示例及类成员

可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或右上角的展开/折叠所有切换按钮全局展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Sencha Test 2.4.0


顶部

可视化测试代码

为 JavaScript 和 Jasmine 编写测试可能是一项艰巨的任务,特别是如果您是这两种技术(或两者兼有!)的新手。如果您正在从手动测试过渡到自动化测试,那么函数式编程方法可能会让您偏离方向。

Sencha Studio 测试编辑器中的新“树视图”提供了一种简单的方法,可以一次可视化一个测试,同时隐藏 Jasmine 测试创建的函数式方面。通过将树视图与 Inspect 工具和页面对象结合使用,您可以专注于手头的测试并更快地创建测试。

功能/概述

  • 在树视图和代码视图之间切换

  • 使用图形界面创建新的更高级别的测试套件、单个测试、前提条件、后置条件

  • 使用复选框指示测试是否具有异步性质,该复选框调用 Jasmine 的“done”功能

  • 一次专注于一个测试

  • 利用下拉菜单或搜索在测试之间快速移动

  • 创建新测试,启动 Inspect 功能,识别定位器,构建页面对象并将它们直接插入到测试代码中

  • 如果您熟悉 JavaScript 编程,那么您可以使用代码视图来编写测试。

Code Tree View

访问代码树视图

  1. 创建一个新的 Jasmine 测试文件并在编辑器中打开它,或者打开一个现有的测试文件。您的测试文件将包含一个 Jasmine 测试套件(“describe” 函数)。

  2. 单击右上角的按钮,将编辑器切换到树视图(提示:您可以通过在“首选项”>“编辑器”中取消选中“测试默认使用源代码视图”来默认以树视图打开文件)

使用代码树视图

代码树视图可帮助您通过菜单添加新的套件、测试和代码块,如下所示。

Code Tree Menu

让我们看看这些不同的选项有什么作用

  1. 在上方添加套件: 在当前套件上方添加新的测试套件 (describe() 函数)。最好每个测试文件只有一个更高级别的套件,但在极少数情况下,这可能是一种可能性。因此,如果您需要在当前套件上方添加新的 describe 函数,请使用此选项。

  2. 添加子套件: Jasmine 允许嵌套 describe 块。虽然这在某些情况下可能是有利的,但高度嵌套的套件可能会增加维护测试集合所需的工作量,因此在构建测试结构时应谨慎。

  3. 在下方添加套件: 这与第一点类似,只是新的 describe 将添加到当前测试套件下方。

  4. 向此套件添加测试: 这是主要选项。为了向当前套件添加测试,请使用此选项。这将创建一个新的 (it() 函数),该函数在 Jasmine 框架中被视为测试。

  5. 在每个测试之前运行代码: Jasmine 允许在每个测试 (it 函数) 执行之前运行前提条件 (beforeEach() 函数)。示例: 如果您想确保在执行套件中的每个测试之前都位于主页上,则可以将单击主页测试步骤添加到此函数中。

  6. 在每个测试之后运行代码: Jasmine 允许在每个测试 (it 函数) 执行之后运行后置条件 (afterEach() 函数)。示例: 如果您想使用多个用例运行登录测试,那么您可能需要在每次测试后单击重置按钮。您可以将单击重置按钮条件包含在此函数中,Sencha Test 将在每次登录用例测试后执行它。

  7. 在所有测试之前运行代码:beforeEach 不同,此前提条件 (beforeAll() 函数) 将在第一个测试执行之前运行一次。示例: 这可以是一个测试,用于验证页面是否在启动测试执行之前加载。

  8. 在所有测试之后运行代码:afterEach 不同,此后置条件 (afterAll() 函数) 将在最后一个测试执行之后运行一次。示例: 这可以是一个测试,用于在测试执行完成后运行例程以重置所有数据。

测试用例(“it” 函数)

Editing a Test Case

Jasmine 将每个“it 函数”视为一个测试。在树视图中,可以选择单个测试,并可以为该单个用例编写测试代码。在此屏幕中,您可以执行以下操作

  1. 启动 Inspect 功能,创建定位器并插入 Sencha Test API 代码。插入 API 代码后,添加操作和断言以完成您的测试用例。

  2. 启动 Inspect 功能,创建定位器并保存页面对象。插入页面对象代码后,添加操作和断言以完成您的测试用例。

  3. 如果您知道组件和定位器,请直接编写 Sencha Test API 代码。

屏幕上的选项

  1. 上一个 Spec: 单击此项可导航到上一个测试用例。

  2. 下一个 Spec: 单击此项可导航到下一个测试用例。

  3. 导航: 选择下拉菜单以查看测试列表并跳转到您想要的测试。选择测试后,清除选择并键入部分测试名称 - 所有与键入文本匹配的测试都将列出。

  4. Pending: 选择此选项将测试标记为“pending”,这意味着它将在测试运行期间被跳过。如果您想跳过测试(无论是由于测试未完成,还是您需要检查应用程序在未执行步骤时的行为),这将非常有用。在幕后,您的“it”函数在代码中更改为“xit”,这告诉 Jasmine 这是一个 pending 测试。

  5. 异步测试: Web 应用程序能够启动一个进程并继续进行不同的进程,而无需等待第一个进程完成。这归功于 JavaScript 的异步特性。启用“异步测试”复选框将告诉 Sencha Test 等待进程完成,然后再继续进行下一个测试。此选项将调用 Jasmine 框架中专门用于处理 JavaScript 异步特性的“done”函数。您需要在测试套件中调用 done() 才能使其通过。

Sencha Test 2.4.0