Use karma-html to test your html files in the browser with karma
karma-html loads the chosen .html files into the iframe elements in the context.html karma browser runner.karma-html allows you to open, refresh, close and set the dimensions of the iframes through your test suits whenever you want.karma-html gives you the access to the Document object of each loaded .html file through your test suits. Testing .html files via its Document objects seems much more genuine and reliable than when HTML content is appended into the div containers.See also
karma-jasmine-dom[npm] (Set of 19 jasmine custom matchers configured for karma to test html DOM)
Got confused? See the step-by-step example below to get acquainted with what the
karma-htmlcan be used for.
config file, to run karmaHTML in my browser? [see below].html files, that I want to test? [see below].html files in my karma browser runner? [see below].html file loaded in my tests? [see below].html files, I don't need it anymore, I want to close them. [see below].html files to test! I'd prefer to open, test and close each .html file separately, rather than open them all at once! [see below].html file has been loaded successfully and whether it is ready to be tested? [see below].html files are loading for ages! Perhaps something's not right... I want to set timeout! [see below]npm install karma-html --save-dev"karmaHTML" as a reporter in the karma config filekarmaHTML object in the client object in the karma config filemodule.exports = function(config) {
config.set({
//other karma settings
reporters: ["karmaHTML"],
client: {
karmaHTML: {
//all karma-html settings
}
}
});
};
All config properties (excluding client.karmaHTML.source) are optional. For the omitted properties, the properties of the incorrect type or value, the default values will be used instead.
sourceType: Array
Default: If the source property is of the incorrect syntax or does not indicate any (or existing) .html file, the suitable hint errors will occure with the clear explanation what to fix. The karma will run without karma-html module if the client.karmaHTML.source property is incorrect anyway.
Description: Indicates the .html file(s) that should be loaded into the iframes. The array should include object-type items with src property, that indicates the .html file path and the tag property, that can further be used in the unit tests to get the control of the particular .html file. The tag names should respect JavaScript identifiers constructing rules: [A-Za-z0-9_$], began with letter, _ or $
You do not have to load
.htmlfiles in the karmaconfig filefilesarray, if you've already loaded them in theclient.karmaHTML.sourcearray.
Remember, to load all resources files of you.htmlfiles in the karmaconfig filefilesarray.
module.exports = function(config) {
config.set({
files: [
//no need to load your index.html and template.html here
//all resources of your .html files should be loaded here
{pattern: './public/*.js', watched:true, served:true, included:true},
{pattern: './public/*.png', watched:false, served:true, included:false},
{pattern: './public/fonts/*', watched:false, served:true, included:false}
],
client: {
karmaHTML:{
source: [
{src:'./public/index.html', tag:'index'},
{src:'./public/template.html', tag:'tmpl'}
]
}
}
});
};
autoType: Boolean
Default: false
Description: If true, the .html files are loaded into the iframes automatically (immediately after the context.html karma browser runner is loaded). If false, the .html files can be loaded manually by invoke open() method [see below].
timeoutType: Number
Default: 0 (no timeout)
Description: The number of milliseconds the iframe server request can take before automatically being terminated. When a timeout happens, the onstatechange method [see below] fires and returns false.
abortType: Number
Default: 0 (no abort)
Description: The number of milliseconds the loading resources can take before automatically being terminated. When an abort happens, the onstatechange method [see below] fires and returns false.
You may also check out:
Also check out karma
browserNoActivityTimeout[link]
Also check out jasmineDEFAULT_TIMEOUT_INTERVAL[link]
widthType: String
Default: "90%"
Description: The CSS width of the iframe, that the .html file is about to be loaded into. The value (eg. 600px) is appended to the iframe element as the attribute style="width:600px". Each valid CSS values and units are allowed. Incorrect values will be ignored and the default value will be used instead.
heightType: String
Default: "80vh"
Description: The CSS height of the iframe, that the .html file is about to be loaded into. The value (eg. 600px) is appended to the iframe element as the attribute style="height:600px". Each valid CSS values and units are allowed. Incorrect values will be ignored and the default value will be used instead.
client.karmaHTML configuration examplemodule.exports = function(config) {
config.set({
//all the karma config here
client: {
//all the client config here
karmaHTML:{
source: [
{src:'./public/index.html', tag:'index'},
{src:'./public/template.html', tag:'tmpl'}
],
auto: true,
timeout: 10000,
abort: 60000,
width: "730px",
height: "30vw"
}
}
});
};
karmaHTML and Tag objectswindow.karmaHTML | karmaHTMLconfig file, you have got the access to the karmaHTML object with all features (methods and properties) to control your .html files. The karmaHTML object is created and appended to the window object when the context.html karma browser runner is opened via cmd karma start command.KarmaHTML {
0: Tag
1: Tag
index: Tag
tmpl: Tag
length: 2
onstatechange: function() | undefined
__proto__: {
open: function()
close: function()
reload: function()
height: (get|set) function()
width: (get|set) function()
elementList: {}
tagList: []
config: {}
}
}
karmaHTML.tagName | karmaHTML[Number]karmaHTML object lets you controll all .html files, while Tag objects let you control each .html file separately.Tag objects are generated automatically.Tag objects is equal to the number of .html files defined in the karma config file.Tag objects are accessible via karmaHTML object.index.html file of the index tag and the template.html file of the tmpl tag [as above], you would get the two Tag objects with: karmaHTML.index or karmaHTML[0] and karmaHTML.tmpl or karmaHTML[1]Tag {
tag: String
itemNum: Number
document: HTMLDocument | null
iframe: HTMLIFrameElement | null
src: String
hasIframe: Boolean
ready: Boolean
onstatechange: function() | undefined
__proto__: {
_root: karmaHTML
open: function()
close: function()
reload: function()
height: (get|set) function()
width: (get|set) function()
}
}
Document object accessHow to get the browser access to the Document Object of each .html file loaded into the iframes?
Assuming, that you want to test index.html file of the index tag and the template.html file of the tmpl tag [as above]:
karmaHTML objectTo get the access to any iframe Document object of loaded .html file, use karmaHTML['tag_name'].document
index.html file, use karmaHTML.index.documenttemplate.html file, use karmaHTML.tmpl.documentIt gives you the access to the Document object if its iframe is appended to the DOM. Use the
open()method or configure the karmaconfig filesetting appropriately:client.karmaHTML.auto:true[[as above]]
Each iframe Document object's reference is added to the window object as document_0, document_1, document_2, etc. property.
The document_Xs are numbered according to the order of client.karmaHTML.source items (started from 0)
index.html file, use window.document_0 (or just document_0)template.html file, use window.document_1 (or just document_1)It gives you the access to the Document object if its iframe is appended to the DOM. Use the
open()method or configure the karmaconfig filesetting appropriately:client.karmaHTML.auto:true
The methods can be used:
karmaHTML.open().html files (all files are opened at once)karmaHTML.index.open().html file of index tag (the index.html is opened only)open()Syntax: karmaHTML.open() | karmaHTML.tagName.open()
Description: Appends the iframe element into the DOM and loads the .html file.
karmaHTML.open() opens all .html files defined in the karma config file. If some of the .html files are already opened, the open() method opens only those of the .html files, that are not yet appended to the DOM.karmaHTML.index.open() does the same only with the .html file of the index tag. If the particular .html file is already opened, the open() method is ignored.Parameters: karmaHTML.open(dimensions)
| parameter | Syntax | Description |
|---|---|---|
dimensions | {width:String,height:String} | It sets the CSS width and height properties of the iframe(s). The width and height property are the equivalents of the karmaHTML.width and karmaHTML.height properties. If the iframe is already opened, only its dimensions will be changed. |
karmaHTML.open({width:'700px',height:'10%'}); //appends the iframes for all html files with specified dimensions
karmaHTML.index.open({height:'auto'}); //appends only html file of the tag index with specified height dimension
karmaHTML.tmpl.open({width:null,height:null}); //appends html file of tmpl tag with default width and height
close()Syntax: karmaHTML.close() | karmaHTML.tagName.close()
Description: Removes iframe from the document.
karmaHTML.close() closes (if opened) all iframes of all .html files defined in the karma config file.karmaHTML.tmpl.close() does the same only with the .html file of the tmpl tag. If the particular .html file is already closed, the close() method is ignored.reload()Syntax: karmaHTML.reload() | karmaHTML.tagName.reload()
Description: Refreshes the Document of .html file(s) in the iframes.
karmaHTML.reload() refreshes all opened iframe Documents.karmaHTML.index.reload() refreshes the Document of the .html file of the index tag. If the iframe is not opened, it opens it and loads the .html file instead.width(getter) Syntax: karmaHTML.width
Return value type: Object
(setter) Syntax: karmaHTML.width = String
Description: Sets or returns the width dimension of the iframes of all .html files defined in the karma config file.
karmaHTML.widthtag:value pairs of all iframes (regardless they are appended to the DOM), eg. {index:'80%',tmpl:'600px'}karmaHTML.width = Stringwidth of all iframes, eg. karmaHTML.width = '50%'width regardless all iframes are appended to the DOMkarmaHTML.open(), the iframes will be opened with the new width value'600px') is appended to the iframe elements as the attribute style="width:600px"width will not be changedkarmaHTML.width = null to reset all iframes width CSS style to its default values (to the value defined in the karma config file as client.karmaHTML.width [see above], or - if not defined - to the module default value 90%)Also check out
karmaHTML.index.widthproperty
Also check outkarmaHTML.open()dimensions parameter
height(getter) Syntax: karmaHTML.height
Return value type: Object
(setter) Syntax: karmaHTML.height = String
Description: Sets or returns the height dimension of the iframes of all .html files defined in the karma config file.
It works accordingly to the karmaHTML.width property [see above].
Also check out
karmaHTML.index.heightproperty
elementListSyntax: karmaHTML.elementList (readonly)
Return value type: Array
Description: Returns the list of HTML elements that are used to display iframes in the browser. Getting the access to any of HTML elements gives you the access to all of its DOM properties and methods. It returns the array of object-type items. The number of items returned (and the item index) is equal to the number (and item index) of .html files specified in the karma config file. Each item of returned array contains the properties:
container - reference to the <div> element that contains all below elementsiframe - reference to the <iframe> element that the .html files are loaded intoprompt - reference to the iframe header that contains all below elementsstate - reference to the <span> element that displays the current state of request | response status of loading .html filetag - reference to the <span> element that displays the tag name of the current .html file loaded to the iframetagListSyntax: karmaHTML.tagList (readonly)
Return value type: Array
Description: Returns the list of Tag objects, generated for all .html files specified in the karma config file. The number of items returned (and the item index) is equal to the number (and item index) of .html files in karma config file. Getting the access to any of the Tag objects gives you the access to all of its methods and properties.
Also check out
karmaHTMLandTagobjects
configSyntax: karmaHTML.config (readonly)
Return value type: Object
Description: Returns the list of config properties specified in the karma config file. If some of config properties where not specified in the karma config file it returns the module default value instead. It returns:
source - returns the client.karmaHTML.source array [see above]auto - returns the client.karmaHTML.auto [see above] (if not specified - returns default false)width - returns the client.karmaHTML.width [see above] (if not specified - returns default 90%)height - returns the client.karmaHTML.height [see above] (if not specified - returns default 80vh)abort - returns the client.karmaHTML.abort [see above] (if not specified - returns default 0)timeout - returns the client.karmaHTML.timeout [see above] (if not specified - returns default 0)lengthSyntax: karmaHTML.length (readonly)
Return value type: Number
Description: Returns the number of Tag Objects. The length value is equal to the number of .html files defined in the karma config file.
var w = ['50%','700px'];
var h = ['400px','50vh'];
//loop through all Tag objects
for(var i=0; i<karmaHTML.length; i++){
karmaHTML[i].open({width:w[i],height:h[i]});
}
onstatechangeSyntax: karmaHTML.onstatechange = function(ready,tag,status,statusText){...}
Return value type: Function | undefined
Description: Take the action when the state of any .html file defined in the karma config file changes.
If you want to observe the particular
.htmlfile of chosen tag name, rather than all.htmlfiles defined in the karmaconfig file, check outkarmaHTML.index.onstatechangeproperty
onstatechange:Define onstatechange as a function(). This function() will be automatically fired in the following situations:
response parameter is passed as true)response parameter is passed as true)response parameter is passed as false)abort is terminated (the response parameter is passed as false)timeout is terminated (the response parameter is passed as false)response parameter is passed as false)karmaHTML.onstatechange = function(ready,tag,status,statusText){
//some fireworks and magic here
}
ready (Boolean) parameter passes true if .html file has been loaded correctly, otherwise it passes falsetag (String) parameter indicates which .html file's state has been changedresponse (Number) parameter passes HTTP numerical response message, eg. 200, 404responseText (String) parameter passes HTTP textual response message, eg. OK, Not Foundonstatechange:To stop firing onstatechange defined function(), re-define onstatechange property with any other - than function - value type.
karmaHTML.onstatechange = null;
karmaHTML.onstatechange = false;
karmaHTML.onstatechange = "";
karmaHTML.onstatechange = function(ready,tag,status,statusText){
if(ready) {
if(tag==='index') run_index_tests();
if(tag==='tmpl') run_tmpl_tests();
}
}
karmaHTML.open();
describe("The index.html iframe document",function(){
beforeAll(function(done){
karmaHTML.index.onstatechange = function(ready){
if(ready) done(); //if the #Document is ready, fire tests!
};
karmaHTML.index.open();
});
it("should be a real Document object",function(){
var iframeDocument = karmaHTML.index.document;
expect(iframeDocument.constructor.name).toEqual('HTMLDocument');
});
});
In all below contents assume, that your karma
config filehas got theindex.htmlfile ofindextag specified.
Also check out how to define tag names
_rootSyntax: karmaHTML.index._root (readonly)
Return value type: Object
Description: Returns the karmaHTML Object. It lets you get the access to the methods and properties of karmaHTML Object through Tag Object.
width(getter) Syntax: karmaHTML.index.width
Return value type: String
(setter) Syntax: karmaHTML.index.width = String
Description: Sets or returns the width dimension of the iframe of the .html file of index tag defined in the karma config file.
karmaHTML.index.widthString value of CSS width property of the iframe of the .html file of index tag (regardless it is appended to the DOM), eg. '600px'karmaHTML.index.width = Stringwidth of the iframe of the .html file of index tag, eg. karmaHTML.index.width = '50%'width regardless this iframe is appended to the DOMkarmaHTML.open(), this iframe will be opened with the new width value'600px') is appended to the iframe element as the attribute style="width:600px"width will not be changedkarmaHTML.index.width = null to reset this iframe width CSS style to its default value (to the value defined in the karma config file as client.karmaHTML.width [see above], or - if not defined - to the module default value 90%)Also check out
karmaHTML.widthparameter
Also check outkarmaHTML.index.open()dimensions parameter
height(getter) Syntax: karmaHTML.index.height
Return value type: String
(setter) Syntax: karmaHTML.index.height = String
Description: Sets or returns the height dimension of the iframe of the .html file of index tag defined in the karma config file. It works accordingly to the karmaHTML.index.width property [see above].
Also check out
karmaHTML.heightparameter
Also check outkarmaHTML.index.open()dimensions parameter
tagSyntax: karmaHTML.index.tag (readonly)
Return value type: String
Description: Returns the String value of the tag name of the current Tag object (regardless its iframe is appended to the DOM); eg. karmaHTML.index.tag returns 'index'
itemNumSyntax: karmaHTML.index.itemNum (readonly)
Return value type: Number
Description: Returns the Number value of the array index position of the .html file of index tag defined in the karma config file client.karmaHTML.sources array (regardless this iframe is appended to the DOM).
Assuming, that the karma config.file client.karmaHTML.source array contains index.html file of index tag as the first item, and template.html file of tmpl tag as the second item, the karmaHTML.index.itemNum will return 0 and karmaHTML.tmpl.itemNum will return 1.
documentSyntax: karmaHTML.index.document (readonly)
Return value type: HTMLDocument | null
Description: Returns the HTML Document object of the .html file of index tag defined in the karma config file. If the iframe of this .html file is not appended to the DOM, there's an error occurance, or when the timeout or abort has terminated, it returns null.
Also check out iframe Document object access
iframeSyntax: karmaHTML.index.iframe (readonly)
Return value type: HTMLIFrameElement
Description: Returns the HTMLIFrameElement object of the .html file of index tag defined in the karma config file (regardless this iframe is appended to the DOM).
Also check out
karmaHTML.elementListproperty
srcSyntax: karmaHTML.index.src (readonly)
Return value type: String
Description: Returns the String url path of the .html file of index tag defined in the karma config file (regardless this iframe is appended to the DOM).
Also check out
client.karmaHTML.sourceproperty
hasIframeSyntax: karmaHTML.index.hasIframe (readonly)
Return value type: Boolean
Description: Returns true, if the iframe of the .html file of index tag defined in the karma config file is appended to the DOM, otherwise it returns false.
Also check out
karmaHTML.open()method
Also check outkarmaHTML.close()method
readySyntax: karmaHTML.index.ready (readonly)
Return value type: Boolean
Description: Returns true, if the iframe of the .html file of index tag defined in the karma config file is both appended to the DOM and loaded correctly (with no errors, timeout or abort terminated), otherwise it returns false.
If you set your karma config file client.karmaHTML.auto property to true, your .html files may be loaded before you define onstatechange property to catch the moment of loading finish. Then you can use the following code, to check out, whether your .html file is already loaded:
if(karmaHTML.index.ready) run_index_tests();
onstatechangeSyntax: karmaHTML.index.onstatechange = function(ready,tag,status,statusText){...}
Return value type: Function | undefined
Description: Take the action when the state of the .html file of index tag defined in the karma config file changes.
If you want to observe all
.htmlfiles defined in the karmaconfig file, rather than the.htmlfile of chosen tag name, seekarmaHTML.onstatechangeproperty
onstatechange:Define onstatechange as a function(). This function() will be automatically fired in the following situations:
response parameter is passed as true)response parameter is passed as true)response parameter is passed as false)abort is terminated (the response parameter is passed as false)timeout is terminated (the response parameter is passed as false)response parameter is passed as false)karmaHTML.index.onstatechange = function(ready,tag,status,statusText){
//some fireworks and magic here
}
ready (Boolean) parameter passes true if .html file has been loaded correctly, otherwise it passes falsetag (String) parameter indicates which .html file's state has been changed; (with karmaHTML.index.onstatechange it always will be index)response (Number) parameter passes HTTP numerical response message, eg. 200, 404responseText (String) parameter passes HTTP textual response message, eg. OK, Not Foundonstatechange:To stop firing onstatechange defined function(), re-define onstatechange property with any other - than function - value type.
karmaHTML.index.onstatechange = null;
karmaHTML.index.onstatechange = false;
karmaHTML.index.onstatechange = "";
karmaHTML.index.onstatechange = function(ready){
if(ready) run_index_tests();
}
karmaHTML.tmpl.onstatechange = function(ready){
if(ready) run_tmpl_tests();
}
karmaHTML.index.open();
karmaHTML.tmpl.open();
Also check out jasmine example
fs glob Errors in your CMDIf you use Webpack, it is recommended to add node: {fs: "empty"} to your webpack config file, in order to avoid fs module problems when loading karma-html
.html files of tag 'index' and 'tmpl' separatelykarmaHTML.index.onstatechange = function(state){
if(state){
run_index_tests();
this.close(); //or karmaHTML.index.close();
this._root.tmpl.open(); //or karmaHTML.tmpl.open();
}
};
karmaHTML.tmpl.onstatechange = function(state){
if(state){
run_tmpl_tests();
this.close(); //or karmaHTML.tmpl.close();
}
};
karmaHTML.index.open();
We will use Jasmine framework for testing, Mocha reporter to report our tests results in the terminal, karmaHTML package to test our html files, karma-jasmine-dom package to test DOM objects with DOM custom matchers and Chrome browser to run our html templates for testing.
New project anywhere and create the following folders and files (empty) structure inside of it:New project
├ tests
│ └ tests.js
├ karma.conf.js
└ index.html
New project folder and open your terminal there (with the location set to New project folder)npm install karma karma-jasmine jasmine-core karma-chrome-launcher karma-mocha-reporter karma-html karma-jasmine-domkarma.conf.js file add the following content:module.exports = function(config) {
config.set({
files: [
{pattern: 'tests/*.js',watched:true,served:true,included:true}
],
//load karma-mocha-reporter and karma-html
reporters: ['mocha','karmaHTML'],
//load karma-jasmine-dom and karma-jasmine
frameworks: ['jasmine-dom','jasmine'],
//load karma-chrome-launcher
browsers: ['Chrome'],
client: {
//If false, Karma will not remove iframes upon the completion of running the tests
clearContext:false,
//karma-html configuration
karmaHTML: {
source: [
//indicate 'index.html' file that will be loaded in the browser
//the 'index' tag will be used to get the access to the Document object of 'index.html'
{src:'./index.html', tag:'index'}
],
auto: true
}
}
});
};
karma start in the terminal and it should:
index.html templateindex.html file:<!DOCTYPE html>
<html>
<head>
<title>New project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3 id="header">Hello world!</h3>
<p id="paragraph">This is our html template.</p>
</body>
</html>
tests/tests.js file://describe, beforeAll, it, expext - are the Jasmine default methods
//karmaHTML is the karma-html package object with the access to all its features
describe("The index.html iframe document",function(){
beforeAll(function(done){
//load DOM custom matchers from karma-jasmine-dom package
jasmine.addMatchers(DOMCustomMatchers);
//lets open our 'index.html' file in the browser by 'index' tag as you specified in 'karma.conf.js'
karmaHTML.index.open();
//karmaHTML.index.onstatechange fires when the Document is loaded
//now the tests can be executed on the DOM
karmaHTML.index.onstatechange = function(ready){
//if the #Document is ready, fire tests
//the done() callback is the jasmine native async-support function
if(ready) done();
};
});
it("should be a real Document object",function(){
var _document = karmaHTML.index.document;
expect(_document.constructor.name).toEqual('HTMLDocument');
});
it("should contain paragraph and header that are the siblings",function(){
//karmaHTML.index.document gives the access to the Document object of 'index.html' file
var _document = karmaHTML.index.document;
//use all document javascript native methods on it
var header = _document.getElementById('header');
var paragraph = _document.getElementById('paragraph');
//these are the karma-jasmine-dom custom matchers
expect(paragraph).toBeNextSiblingOf(header);
expect(header).toBePreviousSiblingOf(paragraph);
});
});
karma start again in the terminal and it should:
index.html template loaded to run the tests on its DOMkarma-html!FAQs
Load html files and test the DOM in the browser
We found that karma-html demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.