Trying to fix "Unexpected Request GET" with ng-html2js-preprocessor does not work

383 views Asked by At

I want to test an angular directive with karma and jasmine. The directive uses an external template named complete.html.

I try to get the html template with the following code:

describe('directive', function () {

beforeEach(module('sampleapp'));

it('test',
    function(){


        inject(function ($rootScope, $compile) {

            var $scope = $rootScope.$new();
            var element = $compile(angular.element('<auto-complete></auto-complete>'))($scope);
              $scope.$digest();
            var textarea = element.find('textarea');
            expect(textarea.length).toBe(1);



        });
    }

); });

I then receive this error:

Error: Unexpected request: GET test/complete.html

I searched for a solution for my problem and found this post: Unit Testing AngularJS directive with templateUrl

I followed the instructions for the karma-solution. My karma.conf.js looks like the following:

  plugins : [
      'karma-ng-html2js-preprocessor',
      'karma-chrome-launcher',
      'karma-jasmine'
],

  // preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
      '../complete.html': ['ng-html2js']
  },


  ngHtml2JsPreprocessor: {
      moduleName: "complete.html"
  },

  // frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],


// list of files / patterns to load in the browser
files: [
    '../src/main/web/bower_components/jquery/dist/jquery.min.js' ,
    '../src/main/web/bower_components/angular/angular.min.js' ,
    '../src/main/web/bower_components/angular-route/angular-route.js',
    '../src/main/web/bower_components/angular-mocks/angular-mocks.js',
    '../complete.html',
    '../src/main/web/scripts/application.js',
    '../src/main/web/scripts/main.js',
    '../src/main/web/scripts/service.js',
    '../src/main/web/scripts/plz.json',
  'tests.js'

],

(I cropped out the unnecessary parts obviously)

Then as instructed i try to load the generated module complete.html in my test file:

describe('directive', function () {

beforeEach(module('sampleapp'));
beforeEach(module('complete.html'));


it('test',
    function(){


        inject(function ($rootScope, $compile) {

            var $scope = $rootScope.$new();
            var element = $compile(angular.element('<auto-complete></auto-complete>'))($scope);
              $scope.$digest();
            var textarea = element.find('textarea');
            expect(textarea.length).toBe(1);



        });
    }

);});

But i still get the error Error: Unexpected request: GET test/complete.html

I feel like I miss to do an important part but cant find a complete solution for the situation I am in. How do i correctly use the generated module so I dont get the error?

I would be very thankful for some help.

0

There are 0 answers