AngularJS

Question

'da bir denetleyiciyi tanımlayan bir yönergenin kullanıldığı birim, birkaç şeyi yapan Karma ve Jasmine'i kullanarak bir yönergeyi denemeye çalışıyorum. Birincisi, bir templateUrl kullandığı ve ikincisinin bir denetleyici tanımladığı. Bu doğru terminoloji olmayabilir, ancak beyanında bir denetleyici oluşturur. Açısal uygulama, her birim kendi modülünde yer alacak şekilde kurulur. Örneğin, tüm yönergeler app.directive modülüne dahil edilir, tüm denetleyiciler app.controller içinde bulunur ve tüm hizmetler app.service vb. Içinde bulunur.

Daha da karmaşık hale getirmek için, denetleyicinin bu yönergede tanımlanmış olması gerekir. Tek bir bağımlılık ve $ kapsamı üzerinde bir değer ayarlamak için bir $ http isteği yapan bir işlev içerir. $ HttpBackend alayını kullanarak bu bağımlılığı alayabileceğimi biliyorum, $ http çağrısını simüle etmek ve bu nesnenin çağrısına uygun nesneyi döndürmek. Bunu, yarattığım diğer birim testlerinde defalarca yaptım ve bu konsept üzerinde oldukça iyi bir kavrayışım var.

Aşağıdaki kod, CoffeeScript'te yazılmıştır.

<div> 
     {{model.value_one}} {{model.value_two}} 
    </div> 

0123:

İşte

angular.module("app.service") 
     .factory 'Service', ['$http', ($http) -> 

     getValue:() -> 
     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 

görünümüdür:

İşte

angular.module('app.directive') 
     .directive 'exampleDirective', [() -> 
     restrict: 'A' 
     templateUrl: 'partials/view.html' 
     scope: true 
     controller: ['$scope', 'Service', ($scope, Service) -> 
      $scope.model = {} 
      $scope.model.value_one = 1 

      # Call the dependency 
      Service.getValue() 
      .success (data) -> 
       $scope.model.value_two = data 
      .error -> 
       $scope.model.value_two = 0 
     ] 
     ] 

bağımlılık hizmettir: Burada

benim direktifi olduğunu

Bunu biraz daha basitleştirdim, amacım sadece bunun nasıl bağlanacağını anlamak olduğu için, oradan alabiliyorum. Bu şekilde yapılandırmamın nedeni, başlangıçta bunu oluşturmadığım için. Mevcut bir proje için test yazma üzerinde çalışıyorum ve başka herhangi bir şekilde yapılandırma yeteneğine sahip değilim. Testi yazmaya teşebbüs ettim ama istediğimi yapamayacağım.

Değerlerin görüntüye bağlı olup olmadığını ve mümkünse denetleyicinin değerleri doğru şekilde oluşturup oluşturmadığını görmek için sınamak için sınamak istiyorum.

'use strict' 

    describe "the exampleDirective Directive", -> 

     beforeEach module("app.directive") 
     beforeEach module("app/partials/view.html") 

     ServiceMock = { 
     getValue :() -> 

     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 
     } 

    #use the mock instead of the service 
    beforeEach module ($provide) -> 
     $provide.value "Service", ServiceMock 
     return 

    $httpBackend = null 
    scope = null 
    elem = null 

    beforeEach inject ($compile, $rootScope, $injector) -> 

    # get httpBackend object 
    $httpBackend = $injector.get("$httpBackend") 
    $httpBackend.whenGET("example/fetch").respond(200, "it works") 

    #set up the scope 
    scope = $rootScope 

    #create and compile directive 
    elem = angular.element('<example-directive></example-directive>') 
    $compile(elem)(scope) 
    scope.$digest() 

Ne kadar yakın olduğunu bilmiyorum, ya bu bile doğru olup olmadığını: Burada

bende ne olduğunu. Değerlerin doğru görüntüye bağlı olduğunu iddia edebilmek istiyorum. Vojtajina’nın karma.js dosyasında html2js’yi kurmak için görüşlerini yakalamamı sağlayacak bir örnek kullandım. Cevabı bulmak için çok fazla araştırma yaptım, ama biraz yardıma ihtiyacım var. Umarım bir programcı bana doğru yönde işaret edebileceğinden daha akıllıdır. Teşekkür ederim.

Answer 1

Bileşeni karma olarak oluşturun, ardından denetleyiciyi almak için yönergenizin adıyla .controller() işlevini kullanın. senin Örneğin, bunlarla hatların son birkaç değiştirin:

elem = angular.element('<div example-directive></div>'); 
$compile(elem)($rootScope); 
var controller = elem.controller('exampleDirective'); 

Not, o size direktifini tanımlı nasıl verilir, bu özelliğe göre olmalı ve birbirinin bir unsur olarak gerekmektedir. Ayrıca% 100 emin değilim, ama genellikle ihtiyacınız olduğunu düşünmüyorum, sadece bir scope.$apply(function() {}) bloğuna uygulanması gereken herhangi bir şey koymak.