JSFiddle - React, Tailwind, and code Playground

by Cody Lindley

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/mocha/1.12.1/mocha.js"></script>
<script src="https://dl.dropboxusercontent.com/u/2026291/chai.js"></script>

<!-- foo.js is the module we are testing NOTE: the addition of data-cover so blanket.js knows to instrument it -->
<script src="https://dl.dropboxusercontent.com/u/2026291/foo.js" data-cover></script>

<!-- code coverage, with blanket.js -->
<script src="https://dl.dropboxusercontent.com/u/2026291/blanket.js"></script>
<script src="https://dl.dropboxusercontent.com/u/2026291/mocha-blanket.js"></script>

<div id="mocha"></div>

CSS

@charset "utf-8";

body {
  margin:0;
}

#mocha {
  font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 30px 50px;
}

#mocha ul, #mocha li {
  margin: 0;
  padding: 0;
}

#mocha ul {
  list-style: none;
}

#mocha h1, #mocha h2 {
  margin: 0;
}

#mocha h1 {
  margin-top: 15px;
  font-size: 1em;
  font-weight: 200;
}

#mocha h1 a {
  text-decoration: none;
  color: inherit;
}

#mocha h1 a:hover {
  text-decoration: underline;
}

#mocha .suite .suite h1 {
  margin-top: 0;
  font-size: .8em;
}

#mocha .hidden {
  display: none;
}

#mocha h2 {
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
}

#mocha .suite {
  margin-left: 15px;
}

#mocha .test {
  margin-left: 15px;
  overflow: hidden;
}

#mocha .test.pending:hover h2::after {
  content: '(pending)';
  font-family: arial, sans-serif;
}

#mocha .test.pass.medium .duration {
  background: #C09853;
}

#mocha .test.pass.slow .duration {
  background: #B94A48;
}

#mocha .test.pass::before {
  content: '✓';
  font-size: 12px;
  display: block;
  float: left;
  margin-right: 5px;
  color: #00d6b2;
}

#mocha .test.pass .duration {
  font-size: 9px;
  margin-left: 5px;
  padding: 2px 5px;
  color: white;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

#mocha .test.pass.fast .duration {
  display: none;
}

#mocha .test.pending {
  color: #0b97c4;
}

#mocha .test.pending::before {
  content: 'â—¦';
  color: #0b97c4;
}

#mocha .test.fail {
  color: #c00;
}

#mocha .test.fail pre {
  color: black;
}

#mocha .test.fail::before {
  content: '✖';
  font-size: 12px;
  display: block;
  float: left;
  margin-right: 5px;
  color: #c00;
}

#mocha .test pre.error {
  color: #c00;
  max-height: 300px;
  overflow: auto;
}

#mocha .test pre {
  display: block;
  float:...

JavaScript

mocha.setup('bdd'); //tell mocha which interface you are using

describe('foo.js', function () { //describe unit of code to test
    
    //setup fixture 
    var fixtureFoo;
    before(function(){
        fixtureFoo = new Foo('Foo Foo');
    });

    describe('instantiate Foo', function () { //describe what you are testing 
        it('should return an Foo() instance', function () { //it should...
            chai.expect(fixtureFoo).instanceof(Foo); //assert test
        });
    });
    
    //tear down fixture
    after(function(){
        delete fixtureFoo;
    });

});

mocha.run();