Làm thế nào để kiểm tra đơn vị một chỉ thị góc

Question

Kiểm tra đơn vị một chỉ thị góc không phải là rất khó, nhưng tôi phát hiện ra rằng có nhiều cách khác nhau để làm điều đó.

Với mục đích của bài viết này, cho phép giả định các chỉ thị sau

angular.module('myApp') 
    .directive('barFoo', function() { 
     return { 
      restrict: 'E', 
      scope: true, 
      template: '<p ng-click="toggle()"><span ng-hide="active">Bar Foo</span></p>', 
      controller: function ($element, $scope) { 
       this.toggle() { 
        this.active = !this.active; 
       } 
      } 
     }; 
    }); 

Bây giờ tôi có thể nghĩ đến hai cách để kiểm tra đơn vị

Phương pháp này 1:

describe('Directive: barFoo', function() { 
    ... 
    beforeEach(inject(function($rootScope, barFooDirective) { 
     element = angular.element('<bar-foo></bar-foo>'); 
     scope = $rootScope.$new(); 
     controller = new barFooDirective[0].controller(element, scope); 
    })); 

    it('should be visible when toggled', function() { 
     controller.toggle(); 
     expect(controller.active).toBeTruthy(); 
    }); 
}); 

Phương pháp 2 :

beforeEach(inject(function ($compile, $rootScope) { 
    element = angular.element('<bar-foo></bar-foo>'); 
    scope = $rootScope.$new(); 
    $compile(element)(scope); 
    scope.$digest(); 
})); 

it ('should be visible when toggled', function() { 
    element.click(); 
    expect(element.find('span')).not.toHaveClass('ng-hide'); 
}); 

Vì vậy, tôi tò mò những gì của pro và khuyết điểm là của cả hai phương pháp và đó là một trong những mạnh mẽ nhất?

Answer 1

Điều tôi thích làm là tạo các câu chuyện về thử nghiệm của tôi như ví dụ giả này.

'use strict'; 

describe('app controller', function() { 

    var scope; 

    ... 

    beforeEach(angular.mock.module('MyModule')); 

    it('should have properties defined', function() { 

    expect(scope.user).toEqual(user); 
    ...  

    }); 

    it('should have getFaqUrl method', function() { 

    expect(scope.getFaqUrl).toEqual(refdataService.getFaqUrl); 

    }); 

    it('should signout and delete user data from local storage', function() { 

    ... 

    }); 

}); 

Vì vậy, tôi đoán bạn không nêu rõ trong ví dụ thứ hai, nhưng trong trường hợp bạn đã làm, hãy sử dụng mô tả bao vây luôn khi thử nghiệm, chỉ cần thực hành tốt.

Đối với bản thân bài kiểm tra, tôi khuyên bạn nên tránh phương pháp mà bạn gọi cho phạm vi một cách rõ ràng. $ Digest(), đặc biệt là vì nó không có vẻ cần thiết cho mục đích kiểm tra của bạn.

thời gian ngắn, tôi sẽ đi cho phương pháp 1.

Answer 2

Tôi thấy phương pháp đầu tiên hơn "đúng" bởi vì nó không phụ thuộc vào một sự kiện click. Tôi tin rằng nếu bạn muốn kiểm tra việc nhấp vào một phần tử và các hiệu ứng của nó, bạn nên sử dụng thước đo góc và chỉ sử dụng hoa nhài cho các bài kiểm tra đơn vị. Bằng cách đó, bạn sẽ có một sự tách biệt tốt đẹp giữa các bài kiểm tra đơn vị và các bài kiểm tra UI.

Ngoài ra, tính năng này giúp kiểm tra dễ bảo trì hơn. ví dụ. nếu bạn quyết định bắn toggle trên di chuột thay vì nhấp chuột trong phương pháp thứ hai, bạn cũng sẽ phải cập nhật các thử nghiệm.

Answer 3

Đây là cách bạn kiểm tra chỉ thị AngularJS của bạn:

describe('Directive: barFoo', function() { 
 
    var createElement, element, parentScope, directiveScope; 
 
    
 
    beforeEach(module('myApp')); 
 

 
    beforeEach(inject(function($injector) { 
 
    var $compile = $injector.get('$compile'); 
 
    var $rootScope = $injector.get('$rootScope'), 
 

 
    parentScope = $rootScope.$new(); 
 
    parentScope.paramXyz = ... <-- prepare whatever is expected from parent scope 
 

 
    createElement = function() { 
 
     element = $compile('<bar-foo></bar-foo>')(parentScope); 
 
     directiveScope = element.isolateScope(); 
 
     parentScope.$digest(); 
 
     $httpBackend.flush(); <-- if needed 
 
    }; 
 
    })); 
 

 

 
    it('should do XYZ', function() { 
 
    parentScope.xyz = ... <-- optionnal : adjust scope according to your test 
 
    createElement(); 
 

 
    expect(...) <-- whatever, examples : 
 

 
    var submitButton = element.find('button[type="submit"]'); 
 
    expect(submitButton).to.have.value('Validate'); 
 
    expect(submitButton).to.be.disabled; 
 
    submitButton.click(); 
 
    });