如何在指令内编写范围和超时函数的单元测试用例

Question

我在custom指令中使用了isolate scope。我已经更新了plunker链接。 http://plnkr.co/edit/NBQqjxW8xvqMgfW9AVek?p=preview 有人可以帮我编写script.js文件的单元测试用例。

的script.js

var app = angular.module('app', [])

app.directive('myDirective', function($timeout) {
  return {
    restrict: 'A',
    scope: {
      content: '='
    },
    templateUrl: 'my-directive.html',
    link: function(scope, element, attr) {

      $timeout(function() {
        element = element[0].querySelectorAll('div.outerDiv div.innerDiv3 p.myClass');
        var height = element[0].offsetHeight;
        if (height > 40) {
          angular.element(element).addClass('expandable');
          scope.isShowMore = true;
        }
      })


      scope.showMore = function() {
        angular.element(element).removeClass('expandable');
        scope.isShowMore = false;
      };

      scope.showLess = function() {
        angular.element(element).addClass('expandable');
        scope.isShowMore = true;
      };
    }
  }
})

(function() {
  'use strict';

  describe('Unit testing directive', function() {
    var $compile, scope, element, compiledDirective, $rootScope, $timeout;

    beforeEach(module("app"));
    beforeEach(inject(function(_$compile_, _$rootScope_, _$timeout_) {
      $compile = _$compile_;
      scope = _$rootScope_.$new();         
      $timeout = _$timeout_;
      element = angular.element(' <div my-directive content="content"></div>');
      compiledDirective = $compile(element)(scope);
      scope.$digest();
    }));

    it('should apply template', function() {
      expect(compiledDirective.html()).toBe('');
    });

    it('check for timeout', function() {
      $timeout.flush();
    });

  });
})();

Answer 1

使用$ timeout.flush（）函数为$ timeout

编写测试用例

it('check for timeout', function() {

    scope.digest();

    // flush timeout(s) for all code under test.
    $timeout.flush();

    // this will throw an exception if there are any pending timeouts.
    $timeout.verifyNoPendingTasks();

    expect(scope.isShowMore).toBeTruthy();
});

Check this article for better understanding.