angular.js - angularjs requirejs karma directive templateUrl 測試失敗（哎呦餵）

Question

目錄結構

--public
----scripts
--------*/.js // angular檔案
--test
----*/.js // 測試檔案
- -views
----templates
--------*/.html //directive templateUrl檔案

requirejs test main檔

var allTestFiles = [];
var TEST_REGEXP = /(\-test)\.js$/i;

Object.keys(window.__karma__.files).forEach(function(file) {
  if (window.__karma__.files.hasOwnProperty(file)) {
    if (TEST_REGEXP.test(file)) {
      allTestFiles.push(file);
    }
  }
});

require.config({
  baseUrl: '/base/public/scripts',
  paths: {
    'jquery': '../libs/jquery/dist/jquery',
    'angular': '../libs/angular/angular',
    'angularMocks': '../libs/angular-mocks/angular-mocks',
    'templates': '../../views/templates'
  },
  shim: {
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'angularMocks': {
      deps: ['angular'],
      exports: 'angular.mock'
    },
    'templates/default/author-signature.html': ['angular']
  },
  deps: allTestFiles,
  callback: window.__karma__.start
});

karma 設定檔

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'requirejs'],
    files: [
      {pattern: 'public/libs/jquery/dist/jquery.js', included: false},
      {pattern: 'public/libs/angular/angular.js', included: false},
      {pattern: 'public/libs/angular-mocks/angular-mocks.js', included: false},
      {pattern: 'public/scripts/**/*.js', included: false},
      {pattern: 'views/templates/**/*.html', included: false},
      {pattern: 'test/**/*-test.js', included: false},
      'test/test-main.js'
    ],
    exclude: [
      'public/scripts/build-main.js',
      'public/scripts/require-config.js',
      'public/scripts/bootstrap.js'
    ],
    browsers: ['Chrome'],
    reporters: ['progress', 'html', 'coverage'],
    htmlReporter: {
      outputFile: 'report/units.html',
      pageTitle: 'Unit Tests',
      subPageTitle: 'Unit tests with karma jasmine'
    },
    preprocessors: {
      'public/scripts/**/*.js': ['coverage'],
      'views/templates/**/*.html' : ['ng-html2js']
    },
    coverageReporter: {
      type : 'html',
      dir : 'report/coverage/'
    },
    ngHtml2JsPreprocessor: {
      stripPrefix: 'views/',
      stripSuffix: '.html',
      moduleName: 'templates'
    }
  });
}

directive 測試文件

define(['angularMocks', 'directives/default/author-signature', 'templates/default/author-signature.html'], function () {
  describe('Unit: Hello Directive', function () {
    var $compile, $rootScope;
    beforeEach(function () {
      module('angularApp');
      module('templates');
      inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
      });
    });

    it('should display the hello text properly', function () {
      var elt = $compile('<author-signature author="Plus"></author-signature>')($rootScope);
      expect(elt.text()).toEqual('Plus');
    });
  });
});

directive author-signature.js檔案

define('directives/default/author-signature', [
  'angular-app'
], function (angularApp) {
  angularApp.directive('authorSignature', function () {
    return {
      restrict: 'EA',
      scope: {
        author: '@'
      },
      replace: true,
      templateUrl: 'templates/default/author-signature'
    };
  });
});

author-signature.html

<h1>{{author}}</h1>

angular-app.js檔案

define('angular-app', [
  'angular'
], function(angular) {
  var angularApp = angular.module('angularApp', []);
  return angularApp;
});

問題

1. 將author-signature.js directive的templateUrl 換位template形式，測試成功；

2. 透過查看原始檔案載入和調試，可查看到author-signature.html已轉為.js 且內容已載入到$templateCache中，如下截圖：
   

但是測試無法通過，$compile編譯失敗。

求救

angular 在獲取$templateUrl內容時會默認的從$templateCache中獲取，而不直接獲取服務端的文件，以上描述中都以滿足了，但是還是無法$compile成功，感覺他沒有從$templateCache中獲取。不知道哪位大神能幫忙看下到底是哪裡有點小問題？

Answer 1

天哪，我忘記在測試指令中添加$rootScope.$digest();。
這導致該指令作用域的屬性不會改變。