HTML-based tests

The tests we have been running up until this stage have all been rather simple, and do not need to have an HTML page, or an active DOM. As soon as we start to run tests that require a DOM, we will need to inject our tests into a running browser in order for them to run correctly. Jasmine can easily be run in a browser by setting up an HTML page for running tests. Typically, this file will be named SpecRunner.html, as follows:

<html> 
<head> 
    <link rel="stylesheet" type="text/css"  
        href="node_modules/jasmine-core/lib/jasmine-core/jasmine.css"> 
    <script type="text/javascript"  
        src="node_modules/jquery/dist/jquery.js"></script> 
    <script type="text/javascript"  
        src="node_modules/jasmine-core/lib/jasmine-core/jasmine.js">
    </script> 
    <script type="text/javascript"  
        src="node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js">
    </script> 
    <script type="text/javascript"  
        src="node_modules/jasmine-core/lib/jasmine-core/boot.js">
    </script> 
    <script type="text/javascript"  
        src="node_modules/jasmine-jquery/lib/jasmine-jquery.js">
    </script> 
    <script type="text/javascript"  
        src="html_spec/HtmlTests.spec.js"></script> 
</head> 
<body> 
</body> 
</html>

This is a simple HTML page that includes a number of JavaScript source files. Jasmine exposes three of these files upon installation, which are jasmine.js, jasmine-html.js, and boot.js. Note that these files must be included in this exact order, otherwise the page will fail to load correctly. The other files that are included are jquery.js and jasmine-jquery.js. These files are not part of the standard Jasmine install, and will therefore need to be installed through npm as follows:

npm install jquery jasmine-jquery --save-dev

The final file that we are including is html_spec/HtmlTests.spec.js, which is the result of the compilation of our .ts file, and contains our tests themselves. We can create this file and insert a simple test just to see that things are working correctly, as follows:

describe("simple HTML test", () => { 
    it("should pass", () => { 
        expect(true).toBeTruthy(); 
    }); 
});

With this test in place, we can open up our SpecRunner.html file, and see that Jasmine is running our tests in the browser as follows:

Table of Contents for HTML-based tests

Create new playlist

Sign In

Sign Up

Table of Contents for
HTML-based tests