手動調試使用茉莉花隔離角度指令（無後端測試）

編輯：基本上我正在尋找最佳實踐來執行後端少開發&測試。手動調試使用茉莉花隔離角度指令（無後端測試）

我希望能夠手動排除/調試編譯的指令，以隔離我的角度應用程序的其餘部分。我一直試圖與業力運動員一起使用茉莉花來實現這一目標，並取得了有限的成功。

鑑於我的示例指令，我編寫了一個測試，它將編譯指令並將其添加到託管頁面的主體元素。該元素顯示出來，但是當我嘗試與它交互時，比如用ng-click單擊綁定到指令事件處理程序的元素，'clickme'事件處理程序將不會被執行。但是，如果我在測試範圍內以編程方式單擊元素，則事件處理程序將按預期方式執行。

指令：

angular.module('myModule', []) 
    .directive('foo', function() { 
     return { 
      restrict: 'E', 
      template: '<div id="bar" style="width:100px;height:100px;background-color:black;" ng-click="clickme()"></div>', 
      scope: {}, 
      link: function(scope) { 
       scope.clickme = function() { 
        console.log('clickme called'); 
       }; 
      } 
     }; 
    });

測試

describe('myDirective', function() { 
    var $compile = null, $rootScope = null, element = null, scope = null; 

    beforeEach(module('myModule')); 
    beforeEach(inject(['$compile', '$rootScope', function($c, $r) { 
     $compile = $c; 
     $rootScope = $r; 
    }])); 

    it("should", function(){ 
     scope = $rootScope.$new(); 

     element = angular.element('<foo></foo>'); 
     $compile(element)(scope); 
     // Digest the scope to trigger a scope update and attach our directive's link function 
     scope.$digest(); 

     // add the element to the page so I can see it and interact with it 
     $('body').append(element); 

     $('#bar', element).click(); 

     expect(1).toBe(1); 
    }); 
});

如果你有一個想法，爲什麼我的事件處理不下去，一旦測試完成，然後讓我知道！

我意識到我可能正在做某事茉莉花或角可能沒有被設計做。如果有人對我如何實現手動測試指令的目標有任何建議，那麼我很樂意聽取其他方法。

編輯：我從來沒有想出這個問題，但只要後端少開發，我已經有很多使用Grunt與grunt-express模塊的成功。然後，我使用grunt-connect-proxy將連接（通過/ api託管）連接到運行在不同端口上的快速服務器。它有處理CORS頭的選項。這個解決方案讓我啓動了一個簡單的express.js服務器實現，可以輕鬆地模擬出真正的服務器端點。

來源

2014-01-15 Sean Glover

手動調試使用茉莉花隔離角度指令（無後端測試）

回答

相關問題