JSFiddle - React, Tailwind, and code Playground

by provegard

HTML

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

#HTMLReporter { font-size: 11px; font-family: Monaco, "Lucida Console", monospace; line-height: 14px; color: #333333; }
#HTMLReporter a { text-decoration: none; }
#HTMLReporter a:hover { text-decoration: underline; }
#HTMLReporter p, #HTMLReporter h1, #HTMLReporter h2, #HTMLReporter h3, #HTMLReporter h4, #HTMLReporter h5, #HTMLReporter h6 { margin: 0; line-height: 14px; }
#HTMLReporter .banner, #HTMLReporter .symbolSummary, #HTMLReporter .summary, #HTMLReporter .resultMessage, #HTMLReporter .specDetail .description, #HTMLReporter .alert .bar, #HTMLReporter .stackTrace { padding-left: 9px; padding-right: 9px; }
#HTMLReporter #jasmine_content { position: fixed; right: 100%; }
#HTMLReporter .version { color: #aaaaaa; }
#HTMLReporter .banner { margin-top: 14px; }
#HTMLReporter .duration { color: #aaaaaa; float: right; }
#HTMLReporter .symbolSummary { overflow: hidden; *zoom: 1; margin: 14px 0; }
#HTMLReporter .symbolSummary li { display: block; float: left; height: 7px; width: 14px; margin-bottom: 7px; font-size: 16px; }
#HTMLReporter .symbolSummary li.passed { font-size: 14px; }
#HTMLReporter .symbolSummary li.passed:before { color: #5e7d00; content: "\02022"; }
#HTMLReporter .symbolSummary li.failed { line-height: 9px; }
#HTMLReporter .symbolSummary li.failed:before { color: #b03911; content: "x"; font-weight: bold; margin-left: -1px; }
#HTMLReporter .symbolSummary li.skipped { font-size: 14px; }
#HTMLReporter .symbolSummary li.skipped:before { color: #bababa; content: "\02022"; }
#HTMLReporter .symbolSummary li.pending { line-height: 11px; }
#HTMLReporter .symbolSummary li.pending:before { color: #aaaaaa; content: "-"; }
#HTMLReporter .exceptions { color: #fff; float: right; margin-top: 5px; margin-right: 5px; }
#HTMLReporter .bar { line-height: 28px; font-size: 14px; display: block; color: #eee; }
#HTMLReporter .runningAlert { background-color: #666666; }
#HTMLReporter .skippedAlert...

JavaScript

var myModule = angular.module('myModule', []);

angular.module("myModule").controller('myController', ['$scope', function(scope) {
    scope.count1 = 0;
    scope.$watch("data1", function(newValue, oldValue) {
        scope.count1++;
    }, true);
    
    scope.count2 = 0;
    scope.$watch("data2", function(newValue, oldValue) {
        scope.count2++;
    }, true);

    scope.data1 = [1];
    scope.data2 = [1];
}]);

describe('testing the controller', function() {

    var ctrl, scope;
    
    beforeEach(module("myModule"));

    beforeEach(inject(function($controller, $rootScope) {
        scope = $rootScope.$new();
        ctrl = $controller("myController", { $scope: scope });
        scope.$apply(function() {
            scope.data1.push(2);
        });
    }));

    it('should have detected a change to data1', function() {
        expect(scope.count1).toBe(1);
    });

    it('should have detected no changes to data2', function() {
        expect(scope.count2).toBe(0);
    });

});

// KICK OFF JASMINE
var jasmineEnv = jasmine.getEnv();
var r = new jasmine.HtmlReporter();

jasmineEnv.addReporter(r);

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

jasmineEnv.execute();