unit-testing - 将类添加到元素的单元测试指令

Question

我有以下 jsbin http://jsbin.com/uvipos/1/edit

如果它包含的链接是指向我们所在页面的链接（例如引导程序），则使用自定义指令将 .active 添加到父元素。该指令工作得很好，但我正在努力弄清楚如何测试它。

指令：

  app.directive('whenChildActive', ['$location', function ($location) {
    return {
      link: function postLink(scope, element, attrs) {
        scope.$on( '$routeChangeSuccess', function () {
          var literalLink = element.find('a').attr( 'href' );

          var currentPath = $location.path();
          var hashPath = '#' + currentPath;
          if ( currentPath === literalLink || hashPath === literalLink) {
            element.addClass( 'active' );
          } else {
            element.removeClass( 'active' );
          }
        });
      }
    };
  }]);

我的测试尝试：

describe('Directive: whenChildActive', function () {
  beforeEach(module('myNgApp'));

  var element;
  var envs = [
    'http://server/#/app',
  ], count = 0;

  beforeEach(inject(function($browser){
    $browser.url(envs[count++]);
  }));

  it('should add class when child href matches location', inject(function ($rootScope, $compile) {
    element = angular.element('<li when-child-active><a href="#/app">Some Text</a>/li>');
    element = $compile(element)($rootScope);

    expect(element.hasClass('active')).toBe(true);
  }));
});

我的测试失败了，我不确定为什么

Answer 1

编译元素后，您不会更改路线 - 在 and 之间element = $compile(element)($rootScope);，expect(element.hasClass('active')).toBe(true);插入一行，如$browser.url(envs[count++])您所得到的。