模拟 AngularJS 指令答案

【问题标题】：mock an AngularJS directive模拟 AngularJS 指令
【发布时间】：2014-08-12 03:57:50
【问题描述】：

我有以下指令：

function InfoListDirective($rootScope, $restApi) {
    return {
        restrict: 'A',
        templateUrl: staticFilesUri + 'templates/InfoList.Template.html',
        scope: {
            items: '=',
            refreshItemList: '&',
            canAddNew: '@',
            name: '@',
            linkTo: '@',
            deleteItem: '&',
            canDelete: '@'
        },
        link: function (scope) {
            scope.kobocatLinkExists = function (item) {
                return window.koboConfigs && window.koboConfigs.kobocatServer;
            };


            scope.getHashLink = function (item) {
                var linkTo = scope.linkTo;
                return linkTo ? '/' + linkTo + '/' + item.id : '';
            };

            scope.getLink = function (item, format) {
                if(!format) {
                    format = "xml";
                }
                return scope.name.toLowerCase() + '/' + item.id + "?format=" + format;
            };

            scope.canDelete = scope.canDelete === 'true';
            $rootScope.canAddNew = scope.canAddNew === 'true';

            $rootScope.activeTab = scope.name;
        }
    };
}

它使用这个模板：

<header class="forms-header">
  <div class="container">
    <h1 class="forms-header__title">Form Drafts</h1>
    <a href="#/builder" class="forms-header__button">+ Add Form</a>
  </div>
</header>
<div class="container">
  <div class="forms-filter">
    <div class="forms-filter__search">
      <i class="fa fa-search"></i> <input class="forms-filter__searchbox" placeholder="Search forms"  ng-model="searchCriteria" />
    </div>
    <select class="forms-filter__sorter">
      <option>Sort</option>
    </select>
  </div>

  <div class="info-list">
      <div class="forms__card" ng-repeat="item in items|orderBy:'-date_modified'">
        <div kobocat-form-publisher class="forms__card__kobocat" item="item" ng-show="kobocatLinkExists()">

        </div>
        <div class="forms__card__info">
          <a class="forms__card__title" href="#{{ getHashLink(item) }}">{{ item.name }}</a>
          <p class="forms__card__description">{{ item.description || '' }}</p>
          <p class="forms__card__date">
            {{item.date_modified.getMonth()+1}}/{{item.date_modified.getDate()}}/{{item.date_modified.getYear() + 1900}}
          </p>
          <p class="forms__card__question-count">
            {{ item.rowCount }}
          </p>
        </div>
        <div class="forms__card__buttons">
          <a class="forms__card__buttons__button blue" href="{{ getLink(item, 'xml') }}"><i class="fa fa-copy"></i></a>
          <a class="forms__card__buttons__button gray" href="{{ getLink(item, 'xls') }}"><i class="fa fa-download"></i></a>
          <a class="forms__card__buttons__button red" href="" ng-click="deleteItem({item: item})"><i class="fa fa-trash-o"></i></a>
        </div>
      </div>
  </div>


</div>

注意第 19 行还有另一个 angular 指令。

在应用程序中一切正常，但是当我将此 kobocat-form-publisher 指令添加到模板时，我对 InfoList 指令的单元测试开始失败。为了让InfoList 指令测试再次通过，我如何模拟这个指令？

【问题讨论】：

标签： angularjs unit-testing angularjs-directive mocking

【解决方案1】：

我以前从未尝试过模拟指令，但我认为这可行

（假设茉莉花）

beforeEach(module('yourModuleName', function($provide) {
    var yourMock = $provide.value('yourMockDirective');
    $provide.value('kobocatFormPublisherDirective', yourMock);
});

鉴于它有效，您仍然需要有一个模拟实现，您可能不希望将它放在需要加载到模块中的生产代码中。那是我不能 100% 确定会起作用的部分，您可能必须将指令声明为内联。

附带说明，如果是单元测试，我假设您正在编译测试内部的指令，在这种情况下，更实用的解决方案是在编译之前从 HTML 中删除外部指令。

【讨论】：

是的，这可能行得通。由于它是指令中的指令，因此我没有声明要在测试中模拟的指令，但我可以在编译指令模板之前对其进行转换。我试一试，告诉你结果如何。谢谢！
是的，这行得通。我最终在我的 beforeEach 方法中做了$templateCache.put('templates/InfoList.Template.html', $templateCache.get('templates/InfoList.Template.html').replace('kobocat-form-publisher', ''))。感谢您为我指明正确的方向！
我仍然认为$provide 方法也可以，但是替换的工作量要少得多:)

【解决方案2】：

正如this answer 到this question（“你如何模拟指令...”）所述，“正确”的方法是使用$compileProvider 服务。简短的解决方案：它允许您声明一个具有相同名称但优先级高于原始指令的指令。设置 terminal: true 可以防止你的原始指令被编译。

【讨论】：