javascript - Read a HTML file in a Karma+Jasmine test - Stack Overflow

admin管理员组

文章数量:1403352

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.

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.

• javascript
• angularjs
• karma-jasmine

Share Improve this question Follow edited Jun 19, 2017 at 14:55 L1ghtk3ira 3,19999 gold badges3838 silver badges7070 bronze badges asked Feb 9, 2015 at 13:11 Mark VPMark VP 11511 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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 $pile 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();
);

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 bination 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_ponents/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.

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./ThomasBurleson/jasmine-as-promised

本文标签： javascriptRead a HTML file in a KarmaJasmine testStack Overflow