Read a HTML file in a Karma+Jasmine test

Question

I have an Angular controller that defines an array of over 50 field names. Each of these should occur in an HTML file as both the id and ng-model of an input are present. I would like to test if I made no typos by reading and parsing the HTML file. Since I need to get the array, a Karma+Jasmine test seems ideal (with protractor I can't get that). What would be a good way to test this?

For both the FileReader and $http.get neither enter the success or error function, and with XMLHttpRequest I just get an empty string.

I already added a line

pattern: 'app/views/*.html', watched: false, included: false, served: true}

to karma.conf.js, that matches the file I want to read.

Any help is greatly appreciated.

Answer 1

1.You can use following preprocessor to render html

• npm install karma-ng-html2js-preprocessor --save-dev

Add following into karma.config.js:

ngHtml2JsPreprocessor : {
      moduleName:'templates'
},

2.Use $compile service of angular and create html which you want to test and add it to dom. Then you can perform any test on that html

var $body=$('$body');
afterEach(
    $body.empty();
);

Answer 2

You could load the HTML-snippets as fixtures with jasmine-jquery. Don't wonder about the name, it's because the library also adds lots of custom jasmine matchers which are useful in combination with jQuery.

To use it, add the following in your karma config file to the files array:

// this is the path to your library if installed via bower
'../bower_components/jasmine-jquery/lib/jasmine-jquery.js', 

// make the views available to the locally by karma started webserver 
{pattern: 'views/*.html', watched: true, served: true, included: false},

For your tests, you have to define the path to your views and load them explicitly:

beforeEach(function () {
    jasmine.getFixtures().fixturesPath = "base/views";  // path to your templates
    jasmine.getFixtures().load('myHtmlSnippet.html');   // load a template
});

This will load an div with the id jasmine-fixtures directly into the body of the browser in which the tests run. The loaded fixture will be inserted into the div#jasmine-fixtures. Then you can simply access them with jQuery or by vanilla javascript.

Answer 3

After I had such the sample problem to call the "server"-data and don't use a mockup service. I stumble over this entry: E2E mock $httpBackend doesn't actually passThrough for me

Works fine, with this you can use $http.get and check your data.

If you're working with promises try also this: https://github.com/ThomasBurleson/jasmine-as-promised