Question

我使用Karma和Jasmine Framework来测试我的AngularJS v1应用程序。我已经设置了ng-html2js插件来将部分转换为模块。我可以使用$templateCache访问部分内容。

当我尝试编写指令时，我却得不到任何东西。 url的模板使用templateUrl指定。

我的项目结构就是这样。

project
|--index.php
|--karma.conf.js
|--assets
   |--app
      |--controllers
      |--directives
         |--my-directive.js
      |--partials
         |--my_directive.html
      |--tests
         |--directive-test.js

karma.conf.js

...
preprocessors: {
        "assets/app/partials/**/*.html": ['ng-html2js']
},
files: [
    ...
    'assets/app/controllers/**/*.js',
    'assets/app/directives/**/*.js',
    'assets/app/partials/**/*.html',
    'assets/app/tests/**/*.js',
],
ngHtml2JsPreprocessor: {
        moduleName: 'my.partials'
},
...

指令-test.js

describe('Test My Directive', function () {

    var $compile, $rootScope;

    beforeEach(function () {
        module('myapp');
        module('my.partials');

        inject(function (_$compile_, _$rootScope_, _$templateCache_) {
            $compile = _$compile_;
            $rootScope = _$rootScope_;
            $templateCache = _$templateCache_;

            // This prints the template to the console
            console.log($templateCache.get('assets/app/partials/my_directive.html'));

        });
    });

    it('check if directive compiles', function () {

        var scope = $rootScope.$new();
        var template = $compile('<my-directive></my-directive>')(scope);
        scope.$digest();

        var templateAsHtml = template.html();

        // This doesn't print the template to the console
        console.log('templateAsHtml', templateAsHtml);

        expect(templateAsHtml).toContain("Lorem ipsum");

    });
});

MY-directive.js

myapp.directive('myDirective', function() {
    return {
        replace:true,
        restrict:'E',
        templateUrl: 'assets/app/partials/my_directive.html',
        link: function (scope, element, attrs) {
            console.log('my directive');
        }
    }
});

资产/应用/分音/指令/ my_directive.html

<div><h2>Test Directive</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et enim non sem bibendum maximus. Nunc at urna sit amet.</p></div>

Answer 1

如果我没记错的话，即使指定的url已经在$ templateCache中，templateUrl 总是一个异步请求。请在指令定义中尝试此操作：

<div id="container">
  // scrollable content
  <br><br><br><br><br><br>
  <p>blabla</p>
   <br><br><br><br><br><br>
  <p>blabla</p>
   <br><br><br><br><br><br>
  <p>blabla</p>
   <br><br><br><br><br><br>
  <p>blabla</p>
   <br><br><br><br><br><br>
  <p>blabla</p>
   <br><br><br><br><br><br>
  <p>blabla</p>
  <div id="fixed">
  </div>
</div>

Answer 2

我用这种方式解决了 - 感谢来自@Aaron Pool的暗示。在指令中使用templateUrl进行异步请求/ AJAX调用以获取模板。 $ http AJAX调用可以使用$ httpBackend拦截。捕获AJAX调用并使用$templateCache中的模板进行响应。这是修改后的代码，假设在$httpBackend块中注入beforeEach()。

it('check if directive compiles', function () {

    var scope = $rootScope.$new();

    // Intercept the AJAX to fetch template
    $httpBackend.whenGET('assets/app/partials/directives/my_directive.html')
    .respond($templateCache.get('assets/app/partials/directives/my_directive.html'));

    var template = $compile('<my-directive></my-directive>')(scope);

    $httpBackend.flush();

    scope.$digest();

    var templateAsHtml = template.html();

    // Now it prints the template to the console
    console.log('templateAsHtml', templateAsHtml);

    expect(templateAsHtml).toContain("Lorem ipsum");

});

编译指令在AngularJS测试中失败 - karma jasmine

2 个答案: