Blog

Mocha Browser Tests with LiveReload and Sublime Text 2

Want to use Guard (or something like it) with mochaJS browser testing?

Ever use Sublime Text 2 and LiveReload?

Try using them Together!

Recently I have been working on a backbone application and our test suite has slowly been evolving as the project grows. Below is simple guide to get started testing your javascript applications.

This article assumes you can use Sublime Text 2 with the package control plugin. If you do not, pause here and get those working.

  1. Install LiveReload plugin for Sublime Text 2.
    1. In Sublime hit cmd + shift + p
    2. Type package control install and hit enter.
    3. Search “LiveReload” and install.
  2. Install the LiveReload Chrome Extension.
  3. Restart both programs (Chrome and Sublime) and your server
  4. View your app and click the LiveReload extension icon.

Now your files are being watched!

KEEP GOING…

  1. Install mocha and use browser-support
  2. Get the tests running! If you need to get running with a dummy test, use this.
  3. Now make sure live-reload is active, pull up your test suite up and sublime, then change a file and save it.
  4. Profit????

example mocha index.html file. make sure to include mocha.css and mocha.js

<html>
<head>
  <meta charset="utf-8">
  <title>Mocha Tests</title>
  <link rel="stylesheet" href="mocha.css" />
</head>
<body>
  <div id="mocha"></div>
  <!-- vendor -->
  <script src="../vendor/jquery.js"></script>
  <script src="../vendor/underscore.js"></script>
  <script src="../vendor/backbone.js"></script>

  <!-- app -->
  <script src="../main.js"></script>
  <script src="../router.js"></script>

  <!-- models -->
  <script src="../models/item.js"></script>

  <!-- collections -->
  <script src="../collections/items.js"></script>

  <!-- spec helpers -->
  <script src="spec/support/spec_support.js"></script>
  <script src="expect.js"></script>
  <script src="mocha.js"></script>
  <script src="sinon.js"></script>
  <script>mocha.setup('bdd')</script>

  <!-- specs, your test files go here -->
  <script src="spec/collections/items.spec.js"></script>

  <script>
    app.init();
    mocha.checkLeaks();
    mocha.globals(['jQuery']);
    mocha.run();
  </script>
</body>
</html>