文档帮助

术语、图标和标签

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

访问级别

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

成员类型

成员语法

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

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

  • 展开/折叠 - 在成员行的左侧是一个控件,用于展开和折叠每个成员行以显示/隐藏成员详细信息。
  • 成员名称 - 类成员的名称(本例中为 lookupComponent
  • 方法参数 - 方法使用的任何必需或可选参数(或传递给事件处理程序方法的参数)将列在方法名称旁边的括号内(本例中为 ( item )
  • 返回类型 - 方法或属性返回的类实例或 javascript 对象(本例中为 Ext.Component)。对于不返回除 undefined 之外任何内容的方法,可以省略此项,或者可以显示为以斜杠 / 分隔的多个可能值,表示返回的内容可能取决于方法调用的结果(即,如果 get 方法调用成功,方法可能返回 Component,如果不成功,则返回 false,这将显示为 Ext.Component/Boolean)。
  • 标志 - 适用于成员的任何标志都将显示在旁边(本例中为 PROTECTED - 请参阅下面的标志部分)
  • 成员来源 - 在成员行的右侧是最初描述成员的类(本例中为 Ext.container.Container)。如果成员源自当前类,则源类将显示为蓝色链接;如果成员从祖先类或混入类继承,则显示为灰色。
  • 成员源代码 - 在成员来源类右侧下方是查看成员源代码的链接(示例中的 view source
  • 参数列表 - 类方法的每个参数都将使用与上面括号中找到的名称相同的名称、预期的类或对象类型以及参数的描述列出(示例中为 item : Object)。
  • 返回值 - 如果类返回除 undefined 之外的值,“返回值”部分将注明返回的类或对象类型以及描述(示例中为 Ext.Component
  • 自从示例中未显示)- 一些成员将显示该成员首次引入的产品版本(即 Available since 3.4.0 - 示例中未显示),紧随成员描述之后
  • 默认值示例中未显示)- Configs 通常显示要应用于类实例的默认配置值(如果未被覆盖)(即 Defaults to: false

成员标志

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

  • Required - 实例化类时需要的配置
  • Bindable - 配置具有 setter,允许通过 ViewModel 绑定设置此配置
  • Read Only - 该属性可以读取,但不能用于在运行时配置/重新配置类实例
  • Singleton - Singleton 类在定义后立即实例化,不能手动实例化
  • Static - 静态方法或属性是属于类本身的方法或属性,而不是类的实例
  • Chainable - 指的是在调用时返回类实例的方法。
    这使得可以进行链式方法调用,例如:classInstance.method1().method2().etc();
  • Deprecated - 计划在未来框架版本中删除的类或成员,在当前版本中提供是为了向后兼容。
    已弃用的类和成员将包含一条消息,指导您将来使用的首选类/方法。
  • Removed - 已删除的类或成员,仅在文档中作为在框架版本之间升级的用户的参考而存在
  • Template - 在基类中定义的方法,旨在被子类覆盖
  • Abstract - 类或成员可以定义为抽象的。抽象类和成员建立类结构并提供有限的(如果有的话)代码。特定于类的代码将通过子类中的覆盖来提供。
  • Preventable - 如果从事件处理程序返回 false,则标记为可阻止的事件将不会触发

类图标

- 表示框架类

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

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

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

成员图标

- 表示 config 类型的类成员

- 表示 property 类型的类成员

- 表示 method 类型的类成员

- 表示 event 类型的类成员

- 表示 theme variable 类型的类成员

- 表示 theme mixin 类型的类成员

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

类成员快速导航菜单

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

Getter 和 Setter 方法

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

历史记录栏

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

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

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

搜索和过滤器

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

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

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

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

API 文档类元数据

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

  • Alternate Name - 一个或多个附加的类名同义词(在 Ext JS 6.0.0 中,Ext.button.Button 类具有 Ext.Button 的备用类名)。通常维护备用类名以实现向后兼容性。
  • Hierarchy - 层次结构视图列出了当前类的继承链,从其祖先类一直到根基类。
  • Mixins - 混入当前类的一系列类
  • Inherited Mixins - 混入当前类的祖先的一系列类
  • Requires - 实例化类所需定义的所有类
  • Uses - 类在其生命周期中的某个时刻可能使用的一系列类,但不是最初实例化该类所必需的
  • Subclasses - 扩展当前类的类

展开和折叠示例及类成员

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

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

桌面 -vs- 移动视图

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

  • 全局导航将位于左侧菜单中,可通过汉堡菜单图标访问。菜单包含以下内容(在大多数页面上)
    • 当前产品的名称(作为产品登录页面的链接)
    • 用于导航回文档主页的 Sencha 图标
    • 产品菜单下拉按钮
    • API 文档和指南的导航树选项卡
  • 当前上下文导航和工具位于右侧,可通过齿轮图标访问。上下文菜单包含以下内容
    • 全局搜索输入字段
    • API 文档)带有成员过滤器、“展开/折叠所有示例”按钮、“展开/折叠所有成员行”按钮、访问级别过滤器复选框以及每个成员计数的“过滤器”选项卡
    • API 文档)包含与当前类相关的元数据菜单的“相关类”选项卡
    • 指南)指南的目录

查看类源代码

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

Sencha Test 2.4.0


顶部

Test Runner

一旦您为您的应用程序编写了一些测试,您可能希望在您旨在支持的浏览器中运行这些测试。

Sencha Test 中的 Test Runner 允许您指定要运行的测试以及在哪个环境中运行。这些测试可以在您机器的浏览器以及虚拟机浏览器、移动设备浏览器和浏览器集群中运行。

导航到 Test Runner

首先,您需要打开您的工作区并展开包含您要运行的测试的测试项目。默认情况下,这将是工作区导航树中的“Tests”节点。工作区中的应用程序和软件包也将具有可以初始化的测试项目。

展开目标测试项目后,从测试项目中的场景中选择场景。通过从导航树中选择场景,您将在右侧看到场景的 Test Runner 选项卡出现。

Sencha Studio Test Runner

Test Runner 的结构

可用浏览器

对于 In-Browser 场景,Sencha Test 会检查其周围环境,并在 Test Runner 选项卡的“浏览器”视图中“本地浏览器”标题下显示您本地机器上的浏览器。这包括同一浏览器的多个版本。例如,您可能拥有 Chrome 的 Beta 版本和多个过去版本。这些都将被检测到,并将显示为“本地浏览器”。

Sencha Test 检测到的版本将显示在浏览器名称旁边的右侧列中。在左侧,您将看到一个复选框(以及本地浏览器标题中的复选框)。

除了本地浏览器外,您还可以在网络上其他设备上的浏览器或远程浏览器集群中的浏览器上运行相同的测试(更多信息如下)。

对于 WebDriver 场景,Sencha Test 默认情况下将在“嵌入式”部分下显示 Google Chrome。这使用 Sencha Test 内的嵌入式 Selenium Server 实例来针对 Chrome 启动您的 WebDriver 测试。要针对其他浏览器运行测试,您需要配置浏览器集群

场景测试

场景视图以树形布局显示测试套件、规范和期望,每个节点旁边都有复选框。复选框允许您指示要针对目标浏览器运行的测试。此外,标题还有一个复选框,允许您运行特定场景中盘点的所有测试。从“浏览器”视图中选择浏览器将在可用测试旁边添加列。这些浏览器列将显示已完成测试的结果。

运行测试

选择目标浏览器

要开始测试,请选中一个或多个浏览器作为测试的目标。在 Sencha Cmd 应用程序中工作时,当您最初选择浏览器时,将启动“app watch”实例。“app watch”是一个后台 Web 服务器实例,用于协助协调父应用程序和目标浏览器之间的测试运行。

当“app watch”启动时,您将在工作区树中的应用程序名称旁边看到一个橙色的“眼睛”图标。一旦“app watch”初始化并准备好为应用程序提供服务,您将看到“眼睛”图标变为灰色。然后,您可以运行您选择的测试。

运行测试

选择目标浏览器后,选中您要从测试树视图中运行的测试旁边的框,然后单击“运行选择”按钮。

您会注意到,选择浏览器会导致它们的图标显示在测试列表旁边的列中。随着测试的进行,您将看到通过的测试在浏览器列中该测试旁边添加一个复选标记。同样,失败的测试将设置一个红色的“x”。如果所有子测试都通过,父测试套件节点将有一个绿色的复选标记,否则将有一个数字指示该套件的失败计数。您可以通过单击顶部工具栏中的“停止运行”按钮来终止正在进行的测试运行。

注意: 除了单独选择每个测试外,您还可以选中标题复选框以运行所有测试。这样做不会切换您可能使用测试树选择的测试。

当测试失败时,它将为遇到问题的每个浏览器提供有关失败的详细信息。单击每个受影响浏览器下的红色“x”以展开测试树下方的测试摘要视图。这些详细信息将使您了解可能需要解决哪些问题才能找到问题的根本原因。

此外,测试在浏览器本身内运行,这使您可以访问浏览器的开发者工具进行实际故障排除。可以通过再次单击“运行选择”按钮来重新运行测试。可以使用“清除结果”按钮完全清除测试结果。

注意: 由于操作系统处理优先级,在后台浏览器上运行的测试可能比在前台浏览器上运行的测试速度慢。

非本地浏览器

对于 In-Browser 场景,Sencha Test 内置的更有用的功能之一是能够轻松测试连接到与运行 Sencha Test 的机器同一网络的设备上的浏览器。

如果在使用本地浏览器运行测试后单击“清除结果”按钮,您会注意到浏览器中的 URL 是一个类似于 10.0.0.118:8800 的地址。在本例中,“10.0.0.118”是 Sencha Test 内部 Web 服务器使用的本地 IP 地址。此页面是一个“停放页面”,它有效地链接到 Sencha Test,并且处于等待其他测试的状态。

Sencha Studio Parked Browser Page

注意: 如果 Sencha Test 发现多个本地适配器,您可能会看到“localhost:8xxx”而不是字面 IP 地址。在这种情况下,您可以在

Sencha Test > Preferences > Network tab > External Address.

为了在同一网络上的另一台设备上运行相同的测试,请在另一台设备的浏览器中输入“停放地址”。在本指南中,我们将使用 10.0.0.118:8800。

单独的设备可以是另一台计算机、笔记本电脑、平板电脑或手机。在远程设备的浏览器中输入 10.0.0.118:8800 后,您会注意到 Test Runner 选项卡中的浏览器视图中有一个新条目。本地浏览器将显示标题为“本地浏览器”。外部同步的浏览器将显示标题,显示它们正在其中运行的平台。例如,在 iPad 上链接 Safari 移动浏览器显示为“iOS 11.3”下的“Safari 11”。

Sencha Studio Remote Browsers

一旦远程浏览器和 Sencha Studio 连接,您将按照与仅测试本地浏览器时相同的步骤操作

  1. 选中远程浏览器以及您的本地浏览器
  2. 选择要运行的测试
  3. 单击“运行选择”按钮

然后测试将开始并报告回 Sencha Test,而无需远程设备的任何进一步操作!

注意: 在 Test Runner 选项卡的顶部工具栏中,您会看到一个“链接”图标。单击此按钮会将测试目标页面的 URL 复制到剪贴板。当将虚拟机中的浏览器指向 Sencha Test Runner 时,这可能是一个有用的快捷方式。

浏览器集群/池

由浏览器集群(例如 Sauce Labs)虚拟托管的浏览器也将作为目标浏览器显示在 Test Runner 的浏览器视图中。

有关更多信息,请参阅浏览器集群指南

运行代码覆盖率测试

顶部工具栏中的“覆盖率”按钮使您能够运行启用代码覆盖率的测试。此选项仅适用于 In-Browser 场景。

Sencha Test 包含 Istanbul 的集成版本,Istanbul 是一款领先的 JavaScript 代码覆盖率工具,您可以使用它来识别已覆盖的代码量和未被测试覆盖的代码量之间的差距。利用此集成,Sencha Test 以可读格式提供语句、分支、函数和行的详细细分,并进行百分比分析。

使用代码覆盖率报告是降低由于关键代码未得到正确测试而导致的项目风险的好方法。

在启用代码覆盖率的情况下运行测试后,代码覆盖率报告将在测试运行完成后显示。

Sencha Test Code Coverage

要从代码覆盖率报告的范围中排除文件/文件夹,请使用 Sencha Studio 中的“项目设置”屏幕。例如,应排除 Ext JS SDK 目录,因为您希望将代码覆盖率分析集中在您自己的应用程序代码上。要排除 ext 目录中的所有代码文件,请使用此代码覆盖率过滤器

^/ext/.*?$

Sencha Test 2.4.0