angularjs - 对 Angular-UI 模式的 View 进行单元测试

Question

我最近学到了很多关于测试带模态的 Controller 、模态 Controller 和指令的知识。我的应用程序中几乎所有可以测试的东西都在测试中，而且都是彩虹和小猫。

我最新的(看似不可能的)问题是我正在测试的模式有一种“向导”用户界面，用户可以在其中逐步完成每个步骤以创建要在模式关闭时提交的内容。我想测试 UI 是否做出相应的 react 。

例如，在模态 Controller 中，当 $scope.cloneType 为 false 时，我想确保我的 div#cloneMenu 确实显示(或在设置 cloneType 时隐藏)。

在指令中，我可以做这样的事情:

$el.isolateScope().cloneType = null;
$scope.$digest();
expect($el.find('#cloneMenu').hasClass('ng-hide')).toBe(false);

$el.isolateScope().cloneType = 'basic';
$scope.$digest();
expect($el.find('#cloneMenu').hasClass('ng-hide')).toBe(true);

但我在模态 Controller (据我所知)中没有可用的 $el(或类似的东西)。我尝试使用 $document.find() 但没有用。我怀疑 $compile 会在某个时候发挥作用，但不知道在哪里。

那么，除了让我的模态主体成为一个指令和单元测试之外，还有什么方法可以在 AngularUI 模态对话框的 View 中测试 DOM 吗？任何可以提供帮助的代码示例或信息链接都将不胜感激。

我使用的是 Angular 1.2.9 和 Jasmine 2.0，并且包含了 jQuery，这样我就有了更好的 find() 方法。 (在尝试测试/遍历真实 DOM 时，仅限于 tagName 是很糟糕的)。

谢谢!

Answer 1

我会提供一个答案，这样这个问题就有了我想要的结论。

我认为 Sunil D. 通过 E2E 测试来测试 View 是正确的。

我强制自己将模态视为指令之类的“组件”，因此想以这种方式编写测试。我知道这不是指令，但以这种方式测试它感觉更自然，因为它的工作方式/外观/类似于指令( Controller fn + 模板)。

另一个问题是这个东西的 Controller 太小了(因为 Angular 太棒了)所以只有几个测试。我觉得应该有更多的东西，并且没有从编写指令测试中获得完整感/成就感。

最后，我将完成模态 Controller 的测试，并考虑在混合中加入一些 E2E。不管怎样，那是我名单上的下一个。