带有 ui-router $state.current 的测试指令

Question

试图测试一个指令，但我不知所措。基本上我不知道如何设置测试，也找不到任何示例来一步一步地进行。有人可以解释一下应该如何设置吗？现在我得到的错误是

TypeError: 'undefined' 不是一个对象（评估 'current.name'）

directives.directive('convenienceNav', function(){
  return {
    restrict: 'A',
    template: '<button class="btn btn-success" ui-sref="  {{$state.current.name}}.add"><i class="fa fa-user-plus"></i>Add   {{$state.current.params.singular_title}}</button>'
    };

}); 



describe('directive: convenienceNav', function() { 
  var element, scope, stateParams, state;

  beforeEach(module('app.directives'));
  beforeEach(module('ui.router'));


  beforeEach(inject(function($rootScope, $compile, $state) {
    scope = $rootScope.$new();
    stateParams = {'api_resource_name': 'people'};
    state = $state;

   state.current.name = 'admin.people';

   // state.current.params.singular_title = 'Person';
    element ='<div convenience-nav></div>';

    element = $compile(element)(scope);
    scope.$digest();
  }));

  it('should have state.current.name = admin.people', function(){
      expect(element.html()).toBe('<button class="btn btn-success" ui-sref="admin.people.add"><i class="fa fa-user-plus"></i>Add Person</button>');

      });
});

Answer 1

以下是如何在 jasmine 中测试角度指令和路由导航（ui 路由器）的示例。

带有名称的按钮

var namedButtonModule = angular.module('namedButtonModule', []);

namedButtonModule.directive('namedButton', function() {
  return {
    restrict: 'AE',
    scope: {
      name: "=?"
    },
    template: '<button class="btn btn-success">I am {{name}} Button</button>',
    controller: function($scope) {
      $scope.name = $scope.name || 'simple';
    }
  };

});

describe('directive: namedButton', function() {

  beforeEach(module('namedButtonModule'));

  beforeEach(inject(function($rootScope, $compile) {
    this.$rootScope = $rootScope;
    this.$compile = $compile;
    this.testContainer = document.getElementById('test-container');
    this.compileDirective = function(template, scope) {
      var element = this.$compile(template)(scope);
      this.testContainer.appendChild(element[0]);
      scope.$digest();
      return element;
    }
  }));

  afterEach(function() {
    this.testContainer.innerHTML = '';
  });

  it('button should show default name', function() {
    var template = '<div named-button></div>';

    var scope = this.$rootScope.$new();

    var element = this.compileDirective(template, scope);
    expect(element.text()).toBe('I am simple Button');
  });

  it('button should show passed name to the scope', function() {
    var template = '<div named-button name="inputName"></div>';

    var scope = this.$rootScope.$new();
    scope.inputName = "Angular Test";

    var element = this.compileDirective(template, scope);
    expect(element.text()).toBe('I am Angular Test Button');
  });
});

<!-- jasmine -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css" rel="stylesheet" />
<!-- angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>

<div id="test-container"></div>

导航按钮 单击按钮时，应用程序将重定向到该状态。

var navigationButtonsModule = angular.module('navigationButtonsModule', ['ui.router']);

navigationButtonsModule.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider.state('home', {
      url: '/home',
      templateUrl: 'home.html'
    });
  }
]);

navigationButtonsModule.directive('navigationButton', function() {
  return {
    restrict: 'AE',
    scope: {
      state: "=?",
      name: "=?"
    },
    template: '<button class="btn btn-success" ui-sref="{{state}}">Go to {{name}}</button>',
  };
});


describe('directive: navigationButton', function() {

  beforeEach(module('navigationButtonsModule'));

  beforeEach(inject(function($rootScope, $compile, $state, $templateCache, $timeout) {
    this.$rootScope = $rootScope;
    this.$compile = $compile;
    this.$state = $state;
    this.$templateCache = $templateCache;
    this.$timeout = $timeout;
    this.testContainer = document.getElementById('test-container');
    this.compileDirective = function(template, scope) {
      var element = this.$compile(template)(scope);
      this.testContainer.appendChild(element[0]);
      scope.$digest();
      return element;
    }
  }));

  afterEach(function() {
    this.testContainer.innerHTML = '';
  });

  it('navigation button should show passed name and ui-sref state', function() {
    var template = '<navigation-button state="state" name="name"></navigation-button>';

    var scope = this.$rootScope.$new();
    scope.state = 'home';
    scope.name = 'Home';
    var element = this.compileDirective(template, scope);
    expect(element.text()).toBe('Go to Home');
    expect(element.find('button').attr('ui-sref')).toBe('home');
  });

  it('will show home href', function() {
    expect(this.$state.href('home')).toEqual('#/home');
  });

  it('on button click browser should go to home state', function() {
    var template = '<navigation-button state="state" name="name"></navigation-button>';

    var scope = this.$rootScope.$new();
    scope.state = 'home';
    scope.name = 'Home';
    var element = this.compileDirective(template, scope);
    
    // mimicking home.html template
    this.$templateCache.put('home.html', '');

    this.$timeout(function() {
      element.find('button')[0].click();
    });
    this.$timeout.flush();
    this.$rootScope.$digest();
    expect(this.$state.current.name).toBe('home');
  });

});

<!-- jasmine -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css" rel="stylesheet" />
<!-- angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>

<div id="test-container"></div>

JSFiddle

我保留了复制代码的原样，因此易于阅读和理解