如何在Jasmine测试中加载AngularJS控制器的templateUrl？

嘿，刚上手Angular和Jasmine的时候碰到这种问题真的太正常了，别慌！控制器测试默认不会自动加载并关联HTML模板，所以咱们得手动处理模板的加载与编译，才能访问到模板里的元素。下面给你两种实用的解决办法：

方法一：手动用$templateCache预加载模板 #

Angular会从$templateCache中读取模板内容，我们可以在测试前把目标模板的内容提前存入缓存，再用$compile把模板和控制器的scope绑定起来。

结合你已有的测试代码，修改后的示例如下：

describe('SampleCtrl测试', function() {
  var scope, routeParams, httpBackend, window, $templateCache, $compile, element;

  beforeEach(angular.mock.module('yeomanApp'));
  beforeEach(angular.mock.module('yeomanApp.services'));

  beforeEach(inject(function ($controller, $rootScope, $routeParams, _$httpBackend_, $window, _$templateCache_, _$compile_) {
    scope = $rootScope.$new();
    routeParams = $routeParams;
    httpBackend = _$httpBackend_;
    window = $window;
    $templateCache = _$templateCache_;
    $compile = _$compile_;

    // 1. 将你的模板内容存入$templateCache（替换成实际的模板路径和内容）
    $templateCache.put('sample-template.html', `
      <div class="sample-container">
        <h1>{{pageTitle}}</h1>
        <button id="submit-btn">提交</button>
      </div>
    `);

    // 2. 创建控制器并绑定到当前scope
    $controller('SampleCtrl', {
      $scope: scope,
      $routeParams: routeParams,
      $window: window
    });

    // 3. 获取模板内容并编译，绑定到scope
    var template = $templateCache.get('sample-template.html');
    element = $compile(template)(scope);

    // 4. 触发digest让数据绑定生效
    scope.$digest();
  }));

  it('应该能访问到模板里的标题元素', function() {
    // 设置scope变量
    scope.pageTitle = '测试标题';
    scope.$digest();

    // 查找元素并验证文本内容
    var titleElement = element.find('h1');
    expect(titleElement.text()).toBe('测试标题');
  });

  it('应该能找到提交按钮', function() {
    var submitBtn = element.find('#submit-btn');
    expect(submitBtn.length).toBe(1);
  });
});

方法二：用Karma插件自动处理模板（适合实际项目） #

如果你的测试用Karma运行，可以安装karma-ng-html2js-preprocessor插件，它会自动把HTML模板转换成JS模块注入到$templateCache，不用手动写模板字符串，更高效。

操作步骤： #

1. 安装插件：

npm install karma-ng-html2js-preprocessor --save-dev

2. 在Karma配置文件（karma.conf.js）中添加配置：

module.exports = function(config) {
  config.set({
    preprocessors: {
      'app/templates/**/*.html': ['ng-html2js']
    },
    ngHtml2JsPreprocessor: {
      // 自定义模板模块名，测试时需要加载这个模块
      moduleName: 'yeomanApp.templates'
    },
    // 将模板文件加入测试依赖
    files: [
      'app/templates/**/*.html'
    ]
  });
};

3. 在测试中加载自动生成的模板模块：

beforeEach(angular.mock.module('yeomanApp'));
beforeEach(angular.mock.module('yeomanApp.services'));
// 加载自动生成的模板模块
beforeEach(angular.mock.module('yeomanApp.templates'));

之后就可以像方法一那样用$templateCache.get('模板路径')获取模板并编译使用了。

关键注意点 #

• 每次修改scope变量后，记得调用scope.$digest()或scope.$apply()，让Angular更新视图绑定。
• 如果你用的是AngularJS 1.x，$compile是核心服务，必须注入才能完成模板与scope的关联。

内容的提问来源于stack exchange，提问作者GC_