JSFiddle - React, Tailwind, and code Playground

by danielzen

CSS

</style>
<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://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-0.10.7-64912069.js"></script>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-mocks-0.10.7-64912069.js"></script>
  <link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>

JavaScript

function StateCtrl($scope) {
    $scope.myState = {over: false, selected: true};
}

angular.module("myModule", []).directive('myState', function($compile) {
    return {
        replace: true,
        scope: {
            state: 'accessor'
        },
        template: '<span>{{selected()}}{{over()}} {{state}}</span>',
        link: function(scope, element, attrs) {
            scope.selected = function() {
                return scope.state().selected ? 'S' : 's';
            };

            scope.over = function() {
                return scope.state().over ? 'O' : 'o';
            };
        }
    };
});

describe('widgets', function() {
    var element;

    it('myState', inject(function($rootScope, $compile) {
        element = $compile('<my:state state="myState"></my:state>')($rootScope);
        $rootScope.myState = {
            over: false,
            selected: true
        };
        $rootScope.$apply();
        console.log(element);
        expect(element.text()).toBe("So");
    }));
});

(function() {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var trivialReporter = new jasmine.TrivialReporter();
    jasmineEnv.addReporter(trivialReporter);

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

    jasmineEnv.execute();
})();