ecmendenhall/jasmine_chrome_tests.md

## jasmine_chrome_tests.md

      
    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.

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

## 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>
	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);
	}
	<!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>