Skip to content

Instantly share code, notes, and snippets.

@stevenqzhang

stevenqzhang/jasmine_chrome_tests.md

Forked from ecmendenhall/jasmine_chrome_tests.md
Last active June 26, 2017 18:37
Show Gist options
  • Save stevenqzhang/333fd0b2bca201aabaa40c7b63a74296 to your computer and use it in GitHub Desktop.
Save stevenqzhang/333fd0b2bca201aabaa40c7b63a74296 to your computer and use it in GitHub Desktop.
Download ZIP
Integrating the Jasmine test runner for Chrome extension development
Raw
jasmine_chrome_tests.md

Jasmine is an excellent framework for JavaScript testing, but I had a tough time coaxing it into cooperation with the Chrome extension I was developing. Jasmine's default testrunner uses an inline script block that listens for window.onload to setup the test environment, but Chrome prohibits extensions from running inline code. Alas, it's not as easy as importing the inline code as a separate file. After a little tinkering, this is what I came up with:

Extension
    ├── html
    ├── js 
    ├── manifest.json
    └── tests
        ├── jasmine
        │   └── lib
        │       └── jasmine-2.5.2
        │           ├── MIT.LICENSE
        │           ├── jasmine-html.js
        │           ├── jasmine.css
        │           └── jasmine.js
        |           └── boot.js
        ├── loadjasmine.js
        ├── spec
        │   └── YourSpec.js
        └── tests.html

The /jasmine/lib directory includes the contents of the lib directory in Jasmine's standalone release. tests.html is a modified test runner and loadjasmine.js handles the setup. Put your specs in a /tests/spec directory, or wherever you want to find and import them. You can import the JavaScript code to test against directly from your /js directory or wherever you've put your background and content scripts.

The modified test runner includes a pair of buttons that set up the Jasmine environment and run the included specs. You might need to stub out some chrome.* methods, but this makes testing inside the extension as you develop much easier—which made me write more tests and run them more often. I added a link to my tests from my extension's options page so they were always at hand during development.

Raw
loadjasmine.js
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("loadjasmine").addEventListener('click', loadJasmine);
});
function loadJasmine() {
console.log("Loading Jasmine...");
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
function execJasmine() {
jasmineEnv.execute();
}
function runTests() {
execJasmine();
}
document.getElementById("runtests").addEventListener('click', runTests);
}
Raw
tests.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your_Extension Tests</title>
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.5.2/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.5.2/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-2.5.2/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.5.2/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.5.2/boot.js"></script>
<!-- include spec files here -->
<script type="text/javascript" src="spec/YourNewSpec.js"></script>
<!-- include source files here. These can be directly imported from wherever you're storing your
background and content scripts. -->
<script type="text/javascript" src="/js/background.js"></script>
<script type="text/javascript" src="/js/contentscript.js"></script>
<script type="text/javascript" src="loadjasmine.js"></script>
</head>
<body>
<button id="loadjasmine">Load Jasmine</button>
<button id="runtests">Run Tests</button>
</body>
</html>
@kaidatavis
Copy link

kaidatavis commented Apr 26, 2017 •
edited
Loading

This is very useful! Thanks!

By chance I found it is possible to run the Jasmine specs even without the 'loadjasmine.js' (only 'tests.html'). I am using Jasmine 2.6.0 on a Mac. I created an option page with the link to the tests.html and it worked even when it can't find loadjasmine.js (I accidentally deleted it).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment