feat: Support loading Angular with RequireJS

Previous behaviour assumes `angular` is available in global scope.
karma-runner · Oct 12, 2015 · 08748a2 · 08748a2
1 parent f1a124c
commit 08748a2
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 4 deletions.
diff --git a/lib/html2js.js b/lib/html2js.js
@@ -15,6 +15,8 @@ var SINGLE_MODULE_TPL = '(function(module) {\n' +
   '}]);\n' +
   '})();\n'
 
+var REQUIRE_MODULE_TPL = 'require([\'%s\'], function(angular) {%s});\n'
+
 var escapeContent = function (content) {
   return content.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/\r?\n/g, "\\n' +\n    '")
 }
@@ -32,6 +34,8 @@ var createHtml2JsPreprocessor = function (logger, basePath, config) {
   var cacheIdFromPath = config && config.cacheIdFromPath || function (filepath) {
     return prependPrefix + filepath.replace(stripPrefix, '').replace(stripSufix, '')
   }
+  var enableRequireJs = config.enableRequireJs
+  var requireJsAngularId = config.requireJsAngularId || 'angular'
 
   return function (content, file, done) {
     log.debug('Processing "%s".', file.originalPath)
@@ -44,11 +48,18 @@ var createHtml2JsPreprocessor = function (logger, basePath, config) {
       file.path = file.path + '.js'
     }
 
+    var tpl
     if (moduleName) {
-      done(util.format(SINGLE_MODULE_TPL, moduleName, moduleName, htmlPath, escapeContent(content)))
+      tpl = util.format(SINGLE_MODULE_TPL, moduleName, moduleName, htmlPath, escapeContent(content))
     } else {
-      done(util.format(TEMPLATE, htmlPath, htmlPath, escapeContent(content)))
+      tpl = util.format(TEMPLATE, htmlPath, htmlPath, escapeContent(content))
+    }
+
+    if (enableRequireJs) {
+      tpl = util.format(REQUIRE_MODULE_TPL, requireJsAngularId, tpl)
     }
+
+    done(tpl)
   }
 }
 

diff --git a/package.json b/package.json
@@ -33,7 +33,8 @@
     "grunt-npm": "^0.0.2",
     "grunt-simple-mocha": "^0.4",
     "load-grunt-tasks": "^3.3.0",
-    "mocha": "^2.3.3"
+    "mocha": "^2.3.3",
+    "sinon": "^1.17.1"
   },
   "peerDependencies": {
     "karma": ">=0.9"

diff --git a/test/helpers/template_cache.coffee b/test/helpers/template_cache.coffee
@@ -1,4 +1,5 @@
 vm = require('vm')
+sinon = require('sinon');
 
 module.exports = (chai, utils) ->
 
@@ -19,7 +20,7 @@ module.exports = (chai, utils) ->
   #   moduleName - generated module name `angular.module('myApp')...`
   #   templateId - generated template id `$templateCache.put('id', ...)`
   #   templateContent - template content `$templateCache.put(..., <div>cache me!</div>')`
-  evaluateTemplate = (processedContent) ->
+  evaluateTemplate = (processedContent, require=null) ->
     modules = {}
 
     context =
@@ -30,9 +31,21 @@ module.exports = (chai, utils) ->
           if modules[name] then return modules[name]
           throw new Error "Module #{name} does not exists!"
 
+    context.require = (require || sinon.stub()).callsArgWith(1, context.angular)
+
     vm.runInNewContext processedContent, context
     modules
 
+  # Assert that require is used
+  chai.Assertion.addMethod 'requireModule', (expectedModuleName) ->
+    require = sinon.stub()
+
+    code = utils.flag @, 'object'
+    evaluateTemplate code, require
+
+    sinon.assert.calledWith(require, [expectedModuleName])
+    @
+
   # Assert that a module with the given name is defined
   chai.Assertion.addMethod 'defineModule', (expectedModuleName) ->
     code = utils.flag @, 'object'

diff --git a/test/html2js.spec.coffee b/test/html2js.spec.coffee
@@ -226,3 +226,35 @@ describe 'preprocessors html2js', ->
           .to.defineModule('tpl/three.html').and
           .to.defineTemplateId('tpl/three.html').and
           .to.haveContent(HTML3)
+
+    describe 'RequireJS', ->
+      it 'should wrap module with require', (done) ->
+        process = createPreprocessor
+          enableRequireJs: true
+
+        file = new File '/base/path/file.html'
+        HTML = '<html>test me!</html>'
+
+        process HTML, file, (processedContent) ->
+          expect(processedContent)
+            .to.requireModule('angular')
+            .to.defineModule('path/file.html')
+            .to.defineTemplateId('path/file.html').and
+            .to.haveContent HTML
+          done()
+
+      it 'should use custom angular module ID', (done) ->
+        process = createPreprocessor
+          enableRequireJs: true
+          requireJsAngularId: 'foo'
+
+        file = new File '/base/path/file.html'
+        HTML = '<html>test me!</html>'
+
+        process HTML, file, (processedContent) ->
+          expect(processedContent)
+            .to.requireModule('foo')
+            .to.defineModule('path/file.html')
+            .to.defineTemplateId('path/file.html').and
+            .to.haveContent HTML
+          done()