JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<script src="http://code.origin.jquery.com/qunit/qunit-1.9.0.js"></script>
<link rel="stylesheet" href="http://code.origin.jquery.com/qunit/qunit-1.9.0.css">
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<h1 id="qunit-header">My Tests</h1>

<h2 id="qunit-banner"></h2>

<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol><div id="qunit-fixture">

</div>

JavaScript

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

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.addTwo = function(n) {
        return n + 2;
    };}]);

myApp.service('MyService', function() {
    this.addThree = function(n) {
        return n + 3;
    };
});

myApp.directive('myDirective', function() {
    return {
        link: function(scope, elm, attrs) {
            scope.$watch(attrs.myDirective, function(value) {
                elm.text(value + 4);
            });
        }
    }
});

myApp.filter('myfilter', function() {
    return function(s) {
        return s + 5;
    };
});

// tests
var injector = angular.injector(['ng', 'myApp']);

var init = {
    setup: function() {
        this.$scope = injector.get('$rootScope').$new();
    }
};

module('tests', init);

test('MyCtrl', function() {
    var $controller = injector.get('$controller');
    $controller('MyCtrl', {
        $scope: this.$scope
    });
    equal(3, this.$scope.addTwo(1));
});

test('MyService', function() {
    var MyService = injector.get('MyService');
    equal(4, MyService.addThree(1));
});

test('MyDirective', function() {
    var $compile = injector.get('$compile');
    var element = $compile('<div my-directive="foo"></div>')(this.$scope);
    this.$scope.foo = 1;
    this.$scope.$apply();
    equal(5, element.text());
    delete this.$scope.foo;
});

test('MyFilter', function() {
    var $filter = injector.get('$filter');
    equal(6, $filter('myfilter')(1));
});