Karma 0.12.9, unit tests, karma-ng-html2js-preprocessor

Question

No idea what the problem is...

karma.conf.js

  files: [
  // TEMPLATES
  'app/scripts/directives/views/profile_picture.html',

  preprocessors : {
      // generate js files from html templates
      'app/scripts/directives/views/profile_picture.html': 'ng-html2js'
  },

  ngHtml2JsPreprocessor: {
      stripPrefix: 'app/',
      // setting this option will create only a single module that contains templates
      // from all the files, so you can load them all with module('templates')
      moduleName: 'templates'
  },

Then in the test I use:

beforeEach(module('templates'));

My templateUrl in directive looks like:

templateUrl: 'scripts/directives/views/profile_picture.html',

Getting

Error: Unexpected request: GET scripts/directives/views/profile_picture.html

Any idea please what could be wrong with this or suggestion what to check?

Shouldn't the files section contain only .js files? – Robharrisaz Jun 09 '14 at 22:43 — Robharrisaz, Jun 09 '14 at 22:43

score 3 · Answer 1 · answered Jul 31 '14 at 15:00

3

I had kind of the same problem. Be sure you have the exact file match. Open the Google chrome console and check the file path is exactly the same.

enter image description here

In the upper exemple, I had to add a "/" string in ngHtml2JsPreprocessor.stripPrefix and it worked.

answered Jul 31 '14 at 15:00

Nicolas Zozol

6,910
3
50
74

score 0 · Answer 2 · answered Jun 20 '14 at 14:12

@robharrisaz is correct. The template can't be treated as raw JS, which is what the files array expects. It needs Angular's <script> wrapper that it puts around templates.

So your expectation here is that, by listing the template in the files array, it will already be included in your page when your test runs. I assume you aren't handling the request to get this file using the ngMock module's $httpBackend service. You can fix this one of two ways:

You can embed the template into your page in another way. You just need to wrap it in a script tag with the URL as its ID:

<script type="text/ng-template" id="scripts/directives/views/profile_picture.html">
... YOUR TEMPLATE HTML HERE
</script>

You can include ngMock and implement $httpBackend. Trap the GET request for this template, and return the template (or return a replacement that you want to test against - that the point of $httpBackend). You can do that with code in your test suite that looks something like the below.

'use strict';

describe('Templates', function() {
    var $httpBackend;

    beforeEach(function () {
        module('myApp');
        module('myApp.whatever');

        // Set up HTTP overrides for things like the emoji.json assets
        inject(['$httpBackend', function(_httpBackend) {
            $httpBackend = _httpBackend;

            // We don't actually need real contents, this is just a unit test
            $httpBackend.whenGET(/(.*)/).respond(function(method, url, data, headers) {
                // Return a sample template so we can see what the caller does with it
                return [200, '<div>' + url + '</div>'];
            });
        }]);
    });

    describe('myTemplate', function() {
        it('should load myTemplate when we navigate to /profile-picture', inject(['$rootScope', '$location', function($rootScope, $location) {
            $httpBackend.flush();

            // Trigger your action here. We have a view manager that we ask to load our template here

            expect(something).toEqual('something');
        }]));
    });
});

Karma 0.12.9, unit tests, karma-ng-html2js-preprocessor

2 Answers2