Angular karma testing directive Error: Unexpected request: GET

Question

I am setting up a unit test for angular directive with karma and I'm stuck with configuring the ngHtml2JsPreprocessor preprocessor. I have tried a bunch of different ways as described in various thread at Stack Owerflow of setting up the tests but am struggeling in finding a way that works for me.

karma.conf.js

    files: [
        'bower_components/angular/angular.js',
        ..
        ..
        ..
        'test/mock/*.js',
        'test/mock/**/*.js',
        'test/spec/unit/**/*.js',
        'app/views/*.html',
        'app/views/**/*.html'
        //'app/views/**/**/*.html'
    ],

    preprocessors: {
        //'app/views/**/**/*.html': ['ng-html2js']
        'app/views/**/*.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
        // strip this from the file path
        stripPrefix: 'app/',
        moduleName: 'PreprocessedTemplates'
    },

Test file

beforeEach(inject(function ($compile, $rootScope, $templateCache, $httpBackend) {
        scope = $rootScope;
        //$templateCache.put('/app/views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html', $templateCache.get('/app/views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html'));
        //$templateCache.put('../../../views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html', $templateCache.get('../../../views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html'));

        ele = angular.element(
            '<konstrukt-std-filterbox title="Testing generic filter Component" items="list" source="data" filter-entity="Dim1"></konstrukt-std-filterbox>'
        );

        mockupDataFactory = konstruktMockupData.getInstance();

        //these variables are needed.
        scope.data = mockupDataFactory.pivotedData;
        scope.list = ["first","second"];

        scope.$apply();

    }));

It fails in before each with the message.

Error: Unexpected request: GET ../../../views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html

The path to the template is

app\views\components\KonstruktStdFilterbox\KonstruktStdFilterbox.html

I understand that the test cannot find the template in the templatecache, but how can I configure karma to have the PreprocessedTemplates load my template? I have tried different configs in my karma.conf.js, see commented out lines above.

JohanLarsson · Accepted Answer · 2015-01-19 07:29:06Z

2

It turned out that I had a path defined in my directive which was very hard to find, hence the error

Error: Unexpected request: GET ../../../views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html

angular.module('app').directive('directive', function(utilities) {
    return {
        restrict: 'E', //element
        templateUrl: '../../../views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html',
        scope:  true,
        replace: true,

..

And when I changed the templateUrl to this the test ran fine!

templateUrl: 'views/components/KonstruktStdFilterbox/KonstruktStdFilterbox.html

answered Jan 19, 2015 at 7:29

JohanLarsson

4851 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MikeDev Over a year ago

Awesome, glad I found this, and thanks for posting this solution. I was having the same problem, but it turns out I forgot to put the stripPrefix option on the ngHtml2JsPreprocessor option to get rid of 'app/' so it matched my directive's templateUrl path. I think it would be helpful if the documentation specified that the path used in the templateUrl needs to match the path that karma loads up.

JohanLarsson Over a year ago

glad I could help. It seems that many people are struggeling with this, so yes there is definately room for improvement in the karma config documenation.

Collectives™ on Stack Overflow

Angular karma testing directive Error: Unexpected request: GET

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related