JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-mocks-1.0.1.js"></script>

CSS

body {
    background-color: #eeeeee;
    padding: 0;
    margin: 5px;
    overflow-y: scroll;
}
#TrivialReporter {
    padding: 8px 13px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    background-color: white;
    font-family:"Helvetica Neue Light", "Lucida Grande", "Calibri", "Arial", sans-serif;
    /*.resultMessage {*/
    /*white-space: pre;*/
    /*}*/
}
#TrivialReporter a:visited, #TrivialReporter a {
    color: #303;
}
#TrivialReporter a:hover, #TrivialReporter a:active {
    color: blue;
}
#TrivialReporter .run_spec {
    float: right;
    padding-right: 5px;
    font-size: .8em;
    text-decoration: none;
}
#TrivialReporter .banner {
    color: #303;
    background-color: #fef;
    padding: 5px;
}
#TrivialReporter .logo {
    float: left;
    font-size: 1.1em;
    padding-left: 5px;
}
#TrivialReporter .logo .version {
    font-size: .6em;
    padding-left: 1em;
}
#TrivialReporter .runner.running {
    background-color: yellow;
}
#TrivialReporter .options {
    text-align: right;
    font-size: .8em;
}
#TrivialReporter .suite {
    border: 1px outset gray;
    margin: 5px 0;
    padding-left: 1em;
}
#TrivialReporter .suite .suite {
    margin: 5px;
}
#TrivialReporter .suite.passed {
    background-color: #dfd;
}
#TrivialReporter .suite.failed {
    background-color: #fdd;
}
#TrivialReporter .spec {
    margin: 5px;
    padding-left: 1em;
    clear: both;
}
#TrivialReporter .spec.failed, #TrivialReporter .spec.passed, #TrivialReporter .spec.skipped {
    padding-bottom: 5px;
    border: 1px solid gray;
}
#TrivialReporter .spec.failed {
    background-color: #fbb;
    border-color: red;
}
#TrivialReporter .spec.passed {
    background-color: #bfb;
    border-color: green;
}
#TrivialReporter .spec.skipped {
    background-color: #bbb;
}
#TrivialReporter .messages {
    border-left: 1px dashed gray;
    padding-left: 1em;
    padding-right: 1em;
}
#TrivialReporter .passed {
    background-color:...

JavaScript

angular.module('app', []).controller('SomeCtrl', function ($scope, $log) {
    $scope.foo = 'bar';

    $scope.$watch('foo', function (new_val, old_val) {
        if (new_val !== old_val) {
            $log.log("foo used to be '" + old_val + "', but is now '" + new_val + "'");
        }
    });
});
beforeEach(module('app'));

describe('Random Stuff', function () {
    var scope;

    beforeEach(inject(function ($rootScope) {
        scope = $rootScope.$new(); // make brand new child scope off of root
    }));

    describe('the watch on foo', function () {
        it('should fire when foo changes', function () {
            inject(function ($controller, $log) {
                spyOn($log, 'log');

                $controller('SomeCtrl', {
                    $scope: scope,
                    $log: $log
                });
                expect(scope.foo).toBe('bar');
                scope.$apply('foo = "baz"');
                expect(scope.foo).toBe('baz');
                expect($log.log).toHaveBeenCalled();

            });
        });
    });
});

// KICK OFF JASMINE
var jasmineEnv = jasmine.getEnv();
var trivialReporter = new jasmine.TrivialReporter();

jasmineEnv.addReporter(trivialReporter);

jasmineEnv.specFilter = function (spec) {
    return trivialReporter.specFilter(spec);
};

jasmineEnv.execute();