unit-testing - 使用 PageObjects 测试具有嵌套在内部的复杂角度组件的组件

标签 unit-testing dart angular-dart pageobjects

我们的应用程序具有消耗组件的组件,这些组件消耗具有不同复杂性的组件。所以我只想要页面上的输入,以验证何时设置对象文本是否正确。问题是它是这些子组件之一。

我的同事告诉我,有两种方法可以做到这一点,第一种是使用 Page Objects 和 Chaining annotation 在我的页面上找到它,然后找到下一个 id 等,直到找到我的输入。它需要我查看另一个团队的组件标记,以将其缩小到我想要利用的输入。我不相信我应该进入另一个组件定义,或者定义一个定义来获得适当的链来获得这个任意输入。它开始产生问题,如果横向团队创建了我不知道的更改,我的 PO 将被破坏。

我 friend 问的另一个选项是使用 fixture.query找到组件。这很简单:

fixture.query((el)=> el.attribute["id"] == "description", 
              (comp){ 
                expect(comp.value, value); 
              });`

使用 Query 查看标记,然后会自动将其组件化为适当的子组件。在这种情况下,comp.value 是存储在 HTML 中的值。所以,如果我做了类似的事情:
fixture.update((MainComponent comp) { 
  comp.myinput.value = new Foo(); 
});

然后我以编程方式设置和获取它,所以我有点不确定它是否能正确反射(reflect)屏幕上的内容。

什么是最好的行动方案?似乎 PO 会更好,但我不确定是否有办法在我正在测试的组件之外对输入框进行深度查询。

谢谢

最佳答案

我认为我无法为您提供明确的答案,但我可以告诉您我们在 Google 是如何做到的。对于几乎任何组件,我们都会在组件旁边提供页面对象。这是双重的,它用于测试那个小部件,也因此我们可以将它作为其他测试的可共享资源。

对于叶子小部件,页面对象没有那么充实,实际上只是用于本地测试。对于大量共享的组件,页面对象会被更多地刷新以实现可重用性。如果没有这么多的小部件 API(html、css 等),我们将需要考虑公开并且对它们进行更改将非常困难(负责进行公开重大更改的人员需要修复所有相关代码。)有了它,我们可以有一个仅支持页面对象 API 的契约(Contract),并且 html 结构更改不被视为重大更改。有时我们甚至已经为一个小部件设置了两个页面对象。一个用于本地测试,一个用于共享。有时,您希望为本地测试公开的 API 远比您希望人们自己使用的要多得多。

然后我们可以将这些页面对象组合成代表小部件的更高级别的页面对象。好的页面对象支持该小部件的更高级别的抽象。例如,日历小部件可以让您转到下/上个月,获取当前选定的日期等,而不是直接公开完成这些操作的按钮/输入。

我们计划最终为 angular_components 公开这些页面对象,但我们目前正在研究如何公开这些对象。我们的内部包结构与我们外部的不同。每个单独的小部件(page_objects、示例、小部件本身)都有许多包,我们需要在公开它们之前在外部进行协调。

这是一个例子:

import 'package:pageloader/objects.dart';
import 'material_button_po.dart';

/// Webdriver page object for `material-yes-no-buttons` component.
@EnsureTag('material-yes-no-buttons')
class MaterialYesNoButtonsPO {
  @ByClass('btn-yes')
  @optional
  MaterialButtonPO yesButton;

  @ByClass('btn-no')
  @optional
  MaterialButtonPO noButton;
}

关于unit-testing - 使用 PageObjects 测试具有嵌套在内部的复杂角度组件的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47596972/

相关文章:

java - Spring/JUnit - 运行并非真正的单元测试 "tests"

flutter - 带有Flutter/Dart插件的IntelliJ中的代码完成起初给出了错误的建议

dart - AngularDart的角度组件的应用布局

dart - AngularDart 动态改变页面标题

dart - Paper-Dialog 可以与 AngularDart 一起使用吗

dart - 如何在 Angular Dart 中检索innerhtml

java - 在 Android 代码中模拟创建 AsyncTasks 和 Intents 的优雅方法

unit-testing - 应该是 "Arrange-Assert-Act-Assert"吗?

带有子模块的 Python 模拟补丁

dart - 如何使用Polymer.dart将onclick事件监听器添加到所有输入字段