template - create component angularjs

isolateScope() devuelve undefined al usar templateUrl

Question

Tengo una directiva a la que quiero hacer una prueba de unidad, pero me estoy topando con el problema de que no puedo acceder a mi alcance aislado. Aquí está la directiva:

<my-directive></my-directive>

Y el código detrás de él:

angular.module(''demoApp.directives'').directive(''myDirective'', function($log) {
    return {
        restrict: ''E'',
        templateUrl: ''views/directives/my-directive.html'',
        scope: {},
        link: function($scope, iElement, iAttrs) {
            $scope.save = function() {
                $log.log(''Save data'');
            };

        }

    };
});

Y aquí está mi prueba de unidad:

describe(''Directive: myDirective'', function() {
    var $compile, $scope, $log;

    beforeEach(function() {
        // Load template using a Karma preprocessor (http://tylerhenkel.com/how-to-test-directives-that-use-templateurl/)
        module(''views/directives/my-directive.html'');
        module(''demoApp.directives'');
        inject(function(_$compile_, _$rootScope_, _$log_) {
            $compile = _$compile_;
            $scope = _$rootScope_.$new();
            $log = _$log_;
            spyOn($log, ''log'');
        });
    });

    it(''should work'', function() {
        var el = $compile(''<my-directive></my-directive>'')($scope);
        console.log(''Isolated scope:'', el.isolateScope());
        el.isolateScope().save();
        expect($log.log).toHaveBeenCalled();
    });
});

Pero cuando imprimo el alcance aislado, resulta en undefined . Sin embargo, lo que realmente me confunde es que si en lugar de templateUrl simplemente uso una template en mi directiva, entonces todo funciona: isolateScope() tiene un objeto de scope completo como valor de retorno y todo es genial. Sin embargo, de alguna manera, al usar templateUrl se rompe. ¿Es esto un error en ng-mocks o en el preprocesador Karma?

Gracias por adelantado.

Answer 1

Con Angularjs 1.3, si deshabilita debugInfoEnabled en la configuración de la aplicación:

$compileProvider.debugInfoEnabled(false);

isolateScope() devuelve undefined también!

Answer 2

En mi caso, seguí encontrándome con esto en los casos en que intentaba aislar un ámbito en una directiva sin propiedad de aislar el ámbito.

function testDirective() {
  return {
    restrict:''EA'',
    template:''<span>{{ message }}</span>''
    scope:{} // <-- Removing this made an obvious difference
  };
}
function testWithoutIsolateScopeDirective() {
  return {
    restrict:''EA'',
    template:''<span>{{ message }}</span>''
  };
}
describe(''tests pass'', function(){
  var compiledElement, isolatedScope, $scope;
  beforeEach(module(''test''));
  beforeEach(inject(function ($compile, $rootScope){
    $scope = $rootScope.$new();
    compiledElement = $compile(angular.element(''<div test-directive></div>''))($scope);
    isolatedScope = compiledElement.isolateScope();
  }));
  it(''element should compile'', function () {
    expect(compiledElement).toBeDefined();
  });
  it(''scope should isolate'', function () {
    expect(isolatedScope).toBeDefined();
  });
});
describe(''last test fails'', function(){
  var compiledElement, isolatedScope, $scope;
  beforeEach(module(''test''));
  beforeEach(inject(function ($compile, $rootScope){
    $scope = $rootScope.$new();
    compiledElement = $compile(angular.element(''<div test-without-isolate-scope-directive></div>''))($scope);
    isolatedScope = compiledElement.isolateScope();
  }));
  it(''element should compile'', function () {
    expect(compiledElement).toBeDefined();
  });
  it(''scope should isolate'', function () {
    expect(isolatedScope).toBeDefined();
  });
});

Answer 3

Puede configurar el complemento karma-ng-html2js-preprocessor . Convierte las plantillas HTML en una cadena javascript y las coloca en el servicio $templateCache Angular.

Después de establecer un nombre de moduleName en la configuración, puede declarar el módulo en sus pruebas y luego todas sus plantillas de producción estarán disponibles sin necesidad de burlarse de ellas con $httpBackend todas partes.

beforeEach(module(''partials''));

Puede encontrar cómo configurar el complemento aquí: http://untangled.io/how-to-unit-test-a-directive-with-templateurl/

Answer 4

Tuve que burlarme y vaciar el $httpBackend antes de que isolateScope() fuera definido. Tenga en cuenta que $scope.$digest() no hizo ninguna diferencia.

Directiva:

app.directive(''deliverableList'', function () {
    return {
        templateUrl: ''app/directives/deliverable-list-directive.tpl.html'',
        controller: ''deliverableListDirectiveController'',
        restrict = ''E'',
        scope = {
            deliverables: ''='',
            label: ''@''
        }
    }
})

prueba:

it(''should be defined'', inject(function ($rootScope, $compile, $httpBackend) {
    var scope = $rootScope.$new();

    $httpBackend.expectGET(''app/directives/deliverable-list-directive.tpl.html'').respond();

    var $element = $compile(''<deliverable-list label="test" deliverables="[{id: 123}]"></deliverable-list>'')(scope);

    $httpBackend.flush();
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();

    expect($element).toBeDefined();
    expect($element.controller).toBeDefined();

    scope = $element.isolateScope();
    expect(scope).toBeDefined();
    expect(scope.label).toEqual(''test'');
    expect(scope.deliverables instanceof Array).toEqual(true);
    expect(scope.deliverables.length).toEqual(1);
    expect(scope.deliverables[0]).toEqual({id: 123});
}));

Estoy usando Angular 1.3.

Answer 5

Yo tuve el mismo problema. Parece que cuando se llama a $compile(element)($scope) junto con el uso de templateUrl , el ciclo de resumen no se inicia automáticamente. Por lo tanto, necesita configurarlo manualmente:

it(''should work'', function() {
    var el = $compile(''<my-directive></my-directive>'')($scope);
    $scope.$digest();    // Ensure changes are propagated
    console.log(''Isolated scope:'', el.isolateScope());
    el.isolateScope().save();
    expect($log.log).toHaveBeenCalled();
});

No estoy seguro de por qué la función $compile no hace esto por usted, pero debe ser algo de idiosincrasia con la forma en que funciona templateUrl , ya que no necesita hacer la llamada a $scope.$digest() si utiliza una plantilla en línea.