Description

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-html can be used for.

The list of contents:

1. Description
2. Q&A
3. Config
   • source
   • auto
   • timeout
   • abort
   • width
   • height
4. karmaHTML and Tag objects
5. iframe Document Object access
6. Methods
   • open()
   • close()
   • reload()
7. Properties
   1. karmaHTML properties
      • width
      • height
      • elementList
      • tagList
      • config
      • length
      • onstatechange
   2. Tag properties
      • _root
      • width
      • height
      • tag
      • itemNum
      • document
      • iframe
      • src
      • ready
      • onstatechange
8. Common problems
9. Examples
10. Step-by-step configuration

Q&A

1. How should I configure the karma config file, to run karmaHTML in my browser? [see below]
2. How can I indicate .html files, that I want to test? [see below]
3. How can I open my .html files in my karma browser runner? [see below]
4. How can I get the access to the Document Object of each .html file loaded in my tests? [see below]
5. Ok, I've already tested my .html files, I don't need it anymore, I want to close them. [see below]
6. I've got million .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]
7. How do I know, if the .html file has been loaded successfully and whether it is ready to be tested? [see below]
8. The .html files are loading for ages! Perhaps something's not right... I want to set timeout! [see below]
9. I want to test the responsiveness of the layout. [see below]

Config

1. use npm install karma-html --save-dev
2. Add "karmaHTML" as a reporter in the karma config file
3. Add karmaHTML object in the client object in the karma config file

module.exports = function(config) {
  config.set({ 
    //other karma settings
    reporters: ["karmaHTML"],
    client: {
      karmaHTML: {
        //all karma-html settings
      }
    }
  });
};

client.karmaHTML properties

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.

client.karmaHTML.source

Type: 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 .html files in the karma config file files array, if you've already loaded them in the client.karmaHTML.source array.
Remember, to load all resources files of you .html files in the karma config file files array.

Syntax example

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'}
        ]
      }
    }
  });
};  

client.karmaHTML.auto

Type: 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].

client.karmaHTML.timeout

Type: 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.

client.karmaHTML.abort

Type: 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 jasmine DEFAULT_TIMEOUT_INTERVAL [link]

client.karmaHTML.width

Type: 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.

client.karmaHTML.height

Type: 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.

Syntax of client.karmaHTML configuration example

module.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 objects

window.karmaHTML | karmaHTML

• When you configured your karma config 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.

object structure

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.
• The number of accessible Tag objects is equal to the number of .html files defined in the karma config file.
• The Tag objects are accessible via karmaHTML object.
• Assuming, that you want to test 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]

object structure

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()
  }
}

iframe Document object access

How 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]:

You can get the access via the karmaHTML object

To get the access to any iframe Document object of loaded .html file, use karmaHTML['tag_name'].document

• To get the access to the Document object of index.html file, use karmaHTML.index.document
• To get the access to the Document object of template.html file, use karmaHTML.tmpl.document

It gives you the access to the Document object if its iframe is appended to the DOM. Use the open() method or configure the karma config file setting appropriately: client.karmaHTML.auto:true [[as above]]

You can get the access via the window Object

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)

• To get the access to the Document object of index.html file, use window.document_0 (or just document_0)
• To get the access to the Document object of template.html file, use window.document_1 (or just document_1)
• etc.

It gives you the access to the Document object if its iframe is appended to the DOM. Use the open() method or configure the karma config file setting appropriately: client.karmaHTML.auto:true

Methods

The methods can be used:

1. As global methods; eg. karmaHTML.open()
   Then it affects all iframes of all .html files (all files are opened at once)
2. As tag methods; eg. karmaHTML.index.open()
   Then it affects only the iframe of the .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.

• The 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.
• The 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.

example

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.

• The karmaHTML.close() closes (if opened) all iframes of all .html files defined in the karma config file.
• The 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.

• The karmaHTML.reload() refreshes all opened iframe Documents.
• The 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.

Properties

karmaHTML properties:

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.width

• Returns the object of tag:value pairs of all iframes (regardless they are appended to the DOM), eg. {index:'80%',tmpl:'600px'}

karmaHTML.width = String

• Sets the CSS width of all iframes, eg. karmaHTML.width = '50%'
• You can set the width regardless all iframes are appended to the DOM
• When used before karmaHTML.open(), the iframes will be opened with the new width value
• The value (eg. '600px') is appended to the iframe elements as the attribute style="width:600px"
• All valid CSS values and units are allowed
• Incorrect values will be ignored and the width will not be changed
• Use karmaHTML.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.width property
Also check out karmaHTML.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.height property

elementList

Syntax: 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 elements
• iframe - reference to the <iframe> element that the .html files are loaded into
• prompt - reference to the iframe header that contains all below elements
• state - reference to the <span> element that displays the current state of request | response status of loading .html file
• tag - reference to the <span> element that displays the tag name of the current .html file loaded to the iframe

tagList

Syntax: 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 karmaHTML and Tag objects

config

Syntax: 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)

length

Syntax: 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.

loop example

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]});
}

onstatechange

Syntax: 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 .html file of chosen tag name, rather than all .html files defined in the karma config file, check out karmaHTML.index.onstatechange property

1. Defining onstatechange:

Define onstatechange as a function(). This function() will be automatically fired in the following situations:

• the html resources are loaded (the response parameter is passed as true)
• the iframe html page is reloaded (the response parameter is passed as true)
• the iframe html page is closed (the response parameter is passed as false)
• the abort is terminated (the response parameter is passed as false)
• the timeout is terminated (the response parameter is passed as false)
• any error occurs during html resources loading (the response parameter is passed as false)

karmaHTML.onstatechange = function(ready,tag,status,statusText){
    //some fireworks and magic here
}

2. Parameters:

• ready (Boolean) parameter passes true if .html file has been loaded correctly, otherwise it passes false
• tag (String) parameter indicates which .html file's state has been changed
• response (Number) parameter passes HTTP numerical response message, eg. 200, 404
• responseText (String) parameter passes HTTP textual response message, eg. OK, Not Found

3. Un-defining onstatechange:

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 = "";

syntax example

karmaHTML.onstatechange = function(ready,tag,status,statusText){
    if(ready) {
       if(tag==='index') run_index_tests();
       if(tag==='tmpl') run_tmpl_tests();
    }
}
karmaHTML.open();

jasmine syntax example

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');
  });	
});

Tag properties:

In all below contents assume, that your karma config file has got the index.html file of index tag specified.
Also check out how to define tag names

_root

Syntax: 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.width

• Returns the String 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 = String

• Sets the CSS width of the iframe of the .html file of index tag, eg. karmaHTML.index.width = '50%'
• You can set the width regardless this iframe is appended to the DOM
• When used before karmaHTML.open(), this iframe will be opened with the new width value
• The value (eg. '600px') is appended to the iframe element as the attribute style="width:600px"
• All valid CSS values and units are allowed
• Incorrect values will be ignored and the width will not be changed
• Use karmaHTML.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.width parameter
Also check out karmaHTML.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.height parameter
Also check out karmaHTML.index.open() dimensions parameter

tag

Syntax: 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'

itemNum

Syntax: 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.

document

Syntax: 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

iframe

Syntax: 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.elementList property

src

Syntax: 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.source property

hasIframe

Syntax: 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 out karmaHTML.close() method

ready

Syntax: 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();

onstatechange

Syntax: 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 .html files defined in the karma config file, rather than the .html file of chosen tag name, see karmaHTML.onstatechange property

1. Defining onstatechange:

Define onstatechange as a function(). This function() will be automatically fired in the following situations:

• the html resources are loaded (the response parameter is passed as true)
• the iframe html page is reloaded (the response parameter is passed as true)
• the iframe html page is closed (the response parameter is passed as false)
• the abort is terminated (the response parameter is passed as false)
• the timeout is terminated (the response parameter is passed as false)
• any error occurs during html resources loading (the response parameter is passed as false)

karmaHTML.index.onstatechange = function(ready,tag,status,statusText){
    //some fireworks and magic here
}

2. Parameters:

• ready (Boolean) parameter passes true if .html file has been loaded correctly, otherwise it passes false
• tag (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, 404
• responseText (String) parameter passes HTTP textual response message, eg. OK, Not Found

3. Un-defining onstatechange:

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 = "";

syntax example

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

Common problems

1. fs glob Errors in your CMD

If 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

Examples

1. Test your .html files of tag 'index' and 'tmpl' separately

karmaHTML.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();

Step-by-step configuration

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.

1. Create new folder 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

2. Open the New project folder and open your terminal there (with the location set to New project folder)
3. Install neccessary packages with npm by executing the following command:
   • npm install karma karma-jasmine jasmine-core karma-chrome-launcher karma-mocha-reporter karma-html karma-jasmine-dom
4. In the karma.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
      }
    }
  });
};

5. It should work just fine right now, run karma start in the terminal and it should:
   • prompt the positive tests results in the terminal
   • open the Chrome browser and display the iframe with our (empty) index.html template
6. Add the following HTML content example to our index.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>

7. Add the following jasmine test suits into our 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);
  });
});

6. Run karma start again in the terminal and it should:
   • prompt the positive two tests results in the terminal
   • open the Chrome browser and display the iframe with our index.html template loaded to run the tests on its DOM
7. Read the documentation above to use all the features of karma-html!