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

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

名称为的按钮

＆＃13;

<!-- 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>

＆＃13;

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');
  });

});

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

{{1}}

＆＃13;

<强> JSFiddle

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

使用ui-router $ state.current的测试指令

1 个答案: