angular.js - angularjs requirejs karma directive templateUrl test failed (ouch)

Question

Directory structure

--public
----scripts
--------*/.js // angular file
--test
-- --*/.js // Test file
--views
----templates
--------*/.html //directive templateUrl file

requirejs test main file

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 configuration file

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 test file

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 file

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 file

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

Question

1. Change the templateUrl of the author-signature.js directive to template form, and the test is successful;

2. By viewing the source file loading and debugging, you can see that author-signature.html has been converted to .js and the content has been loaded into $templateCache, as shown in the screenshot below:
   

But the test failed and $compile failed.

Help

When angular obtains the content of $templateUrl, it will obtain it from $templateCache by default instead of directly obtaining the server-side file. The above description is satisfied, but it still cannot $compile successfully. It feels that it does not obtain it from $templateCache. . I don’t know if anyone can help me figure out where the problem is?

Answer 1

OMG, I forget add $rootScope.$digest(); in test directive.
That cause this directive scope's attributes doesn't change.