Question

这是指令：

app.directive('templates',function() {
return {
    restrict:'E',
    templateUrl: function(s,e) {
        switch (e.template) {
            case 'temp1':                   
                return 'temp1.html';
            case 'temp2':
                return 'temp1.htm2';
            default:
                // do nothing... ;
        }
    }
};
});

我可以在我的测试中编译它，但我不确定如何测试是否正在调用正确的模板

Answer 1

这里没有太多要测试的。但是作为一个感觉良好的测试，您可以将模板加载到缓存中，并在特定元素已经渲染时进行测试，或者不进行测试。

实施例： -

   describe('templates', function () {
    beforeEach(inject(function ($rootScope, $templateCache, $compile) {
        // Set an arbitrary template to test
        $templateCache.put('temp1.html', '<div class="test">Hello</div>');
        element = angular.element("<templates  template='temp1'></templates>");
        $compile(element)(scope);
        $rootScope.$digest();
    }));


    it('Should load template', function () {
       expect(element.find('.test').length).toEqual(1); //Test if element has loaded template properly
       expect(element.find('.test').text()).toEqual("Hello");
    });

<强> Demo

另一方面，如果没有提供template，您的指令可能会中断，需要从templateurl函数返回一个模板。此外，您还可以使这个简单的指令更通用。

.directive('templates',function() {
return {
    restrict:'E',
    templateUrl: function(e,attr) {
      return attr.template + ".html"
   };
});

但是，这里没有什么可以测试的，因为你最终会测试angular的templateUrl函数评估。

用动态模板编写角度指令测试

1 个答案: