Как написать тестовый пример для директивы с помощью директивы in, используя jasmine

#angularjs #unit-testing #jasmine #karma-jasmine

#angularjs #модульное тестирование #jasmine #karma-jasmine

Вопрос:

Я написал тест для своей директивы, используя jasmine testcase framework с karma testcase runner. В моем проекте у меня уже есть одна директива , вызываемая

 <parent-directive></parent-directive>
  

и я попытался включить эту родительскую директиву в другую, которая называется

<child-directive></child-directive>.

Элементы родительской директивы преобразуются как компоненты, называемые SampleComponents, и включаются в дочернюю директиву

Sample.js

 'use strict'

angular.module('Sample')
  .directive('SampleHeader', SampleHeader)

function SampleHeader () {
  return {
    restrict: 'A',
    templateUrl: 'header/header.html',
    scope: {},
    controller: function ($scope) {
      $scope.logoutHeader = function () {
        console.log('Logout call back')
        require('electron').remote.app.quit()
      }
    }
  }
}
  

SampleSpec.js

 describe('SampleHeader', function () {
    var $compile, $rootScope, elements, scope, controller


    beforeEach(module('Sample'))
    beforeEach(module('SampleComponenets'))
    beforeEach(module('ngAnimate'))
    beforeEach(module('ngRoute'))
    beforeEach(module('ngMaterial'))
    beforeEach(module('ngCookies'))
    beforeEach(module('datatables'))


    beforeEach(inject(function (_$compile_, _$rootScope_, _$q_,_$controller_) {

        deferred = _$q_.defer()
        $compile = _$compile_
        $rootScope = _$rootScope_
        controller = _$controller_
        scope = $rootScope.$new()

        elements = angular.element('<sample-header></sample-header>')
        $compile(elements)($rootScope.$new())
        $rootScope.$digest()
        controller = elements.controller('SampleHeader')
        scope = elements.isolateScope() || elements.scope()
        scope.$digest()

    }))

    it('should check logoutHeader is called', function () {scope.logoutHeader()
    })
})
  

Ответ №1:

restrict: ‘A’ -> кажется, вы создали директиву атрибута, поэтому вам следует скомпилировать директиву как атрибут (например, elements = angular.element('<div sample-header></div>') ).

 describe('SampleHeader', function () {
    var $compile, $rootScope, elements, scope, controller


    beforeEach(module('Sample'))
    beforeEach(module('SampleComponenets'))
    beforeEach(module('ngAnimate'))
    beforeEach(module('ngRoute'))
    beforeEach(module('ngMaterial'))
    beforeEach(module('ngCookies'))
    beforeEach(module('datatables'))


    beforeEach(inject(function (_$compile_, _$rootScope_, _$q_,_$controller_) {

        deferred = _$q_.defer()
        $compile = _$compile_
        $rootScope = _$rootScope_
        controller = _$controller_
        scope = $rootScope.$new()

        elements = angular.element('<div sample-header></div>')
        $compile(elements)($rootScope.$new())
        $rootScope.$digest()
        controller = elements.controller('SampleHeader')
        scope = elements.isolateScope() || elements.scope()
        scope.$digest()

    }))

    it('should check logoutHeader is called', function () {scope.logoutHeader()
    })
})
  

Комментарии:

1. предположим, что в моей директиве выделена область действия, и я использую ‘=’, ‘@’ в моей области действия директивы для целей связи, поэтому в строке ниже будут те же elements = angular.element(‘<div sample-header></div>’) или мне нужно внести какие-либо изменения?