Skip to content

Instantly share code, notes, and snippets.

@ecmendenhall

ecmendenhall/jasmine_chrome_tests.md

Created September 18, 2012 02:17
Show Gist options
  • Save ecmendenhall/3740896 to your computer and use it in GitHub Desktop.
Save ecmendenhall/3740896 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-1.2.0
        │           ├── MIT.LICENSE
        │           ├── jasmine-html.js
        │           ├── jasmine.css
        │           └── jasmine.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-1.2.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-1.2.0/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-1.2.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-1.2.0/jasmine-html.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>
@AmyAmeesha
Copy link

I have to "expect" something from my extension each time a link is clicked on the brower. Can you help me regarding how can I do this? I tried writing something like this:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.type === 'linkClicked') {
it('should call time', function(){
expect(sm.provence.browser.lastClickedUrl).toBe(sender.tab.url);
});

But how to I exactly run my test?

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