Jasmine-All Test Runner

This is a simple wrapper around Jasmine to allow easy inclution into html pages which can not include their own runner and CSS. The best example is dynamic sites that allow you to write simple HTML and JS docs for experimentation like JSBin and JS Fiddle.

Here is an example of a JSBin using this wrapper.

Version: 1.3.1-build-3

Source code available: http://github.com/searls/jasmine-all/

This package also allows you to embed the test output into any DOM element and trigger the execution of test based on your own event.

This page is an example which runs the tests delayed after five seconds instead of immediately like the usual Jasmine HTML Runner does.

And if your page happens to use jQuery this package will include and enable jasmine-jquery built in. See this JSBin as an example.

How to use it

Simply add the following to your HTML and be on your merry way:

<script type="text/javascript" src="http://searls.github.io/jasmine-all/jasmine-all-min.js"></script>

Example 1

<!DOCTYPE html>
<html>
  <head>
    <title>Jasmine</title>
  </head>
  <body>
    <script type="text/javascript" src="../build/jasmine-all.js"></script>

    <script type="text/javascript">
      window.hugPanda = function(){ return "yay!"; };
    </script>

    <script type="text/javascript">
      describe('hugging pandas', function(){
        it('makes me yell "yay!"', function(){
          expect(hugPanda()).toBe("yay!");
        });
      });
    </script>
  </body>
</html>

Example 2

<!DOCTYPE html>
<html>
  <head>
    <title>Jasmine</title>
  </head>
  <body>
    <script type="text/javascript" src="../build/jasmine-all.js"></script>

    <script type="text/javascript">
      window.hugPanda = function(){ return "yay!"; };
    </script>

    <script type="text/javascript">
      describe('hugging pandas', function(){
        it('makes me yell "yay!"', function(){
          expect(hugPanda()).toBe("yay!");
        });
      });
    </script>

    <button id="go">Run tests</button>

    <script type="text/javascript">
      (function() {
        var goBtn = document.getElementById("go");
        goBtn.onclick = function() {
          jasmineRunner.run();
        };

        jasmineRunner.noAutoRun();
      })();
    </script>
  </body>
</html>

Example 3

<!DOCTYPE html>
<html>
  <head>
    <title>Jasmine</title>
  </head>
  <body>
    <style type="text/css">
      #left {
        float: left;
        width: 50%;
      }
      #right {
        float: right;
        width: 50%;
      }
    </style>

    <script type="text/javascript" src="../build/jasmine-all.js"></script>

    <script type="text/javascript">
      window.hugPanda = function(){ return "yay!"; };
    </script>

    <script type="text/javascript">
      describe('hugging pandas', function(){
        it('makes me yell "yay!"', function(){
          expect(hugPanda()).toBe("yay!");
        });
      });
    </script>

    <div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div id="right"></div>

    <script type="text/javascript">
      (function() {
        var element = document.getElementById("right");
        jasmineRunner.attachTo(element);
      })();
    </script>
  </body>
</html>