如何在angularjs的html文件中测试点击事件？答案

【问题标题】：How to test click event in a html file in angularjs?如何在angularjs的html文件中测试点击事件？
【发布时间】：2016-06-17 09:41:19
【问题描述】：

我在我的应用中定义了这条路线。

$stateProvider.state('Details', {
    url: '/c/:cId/cDetails/:cDId',
    templateUrl: 'cData/Details.html',
    controller: 'DetailsCtrl',
    controllerAs: 'ctrl',        
    resolve: {
      Fields: function ($stateParams,DataFactory) {
        return DataFactory.getFields(keys);
      }
    }
  });

这里是 Details.html 的 html

<div id="Details" ng-cloak >
<button open-dialog click="ctrl.onClose()"></button>
</div>
<directive-form></directive-form>

我想编写单元测试来检查对话框是否在按钮单击时打开，如果表单脏了。表单由指令directive-form 创建。

我想为此我需要编译 details.html。我对吗？

我不确定如何编译 details.html 文件并调用 onclick 方法。这可能吗？

【问题讨论】：

我好像不明白，当你去正确的url时，模板会自动加载，你可以检查ng-click
我想为此编写单元测试。

标签： angularjs unit-testing jasmine

【解决方案1】：

这是不可测试的代码。

要使其可测试，请将您的 OpenDialogIfFormIsDirty() 方法移动到 DetailsCtrl 中的方法。然后删除onclick 属性并将其替换为ng-click="ctrl.openDialogIfFormIsDirty()"。

这只是第一步。现在在您的原始问题中发布 DetailsCtrl 和 openDialogIfFormIsDirty() 方法的一些代码，我们可以看到如何使其可测试。

【讨论】：

点击事件由另一个指令open-dialog处理。