JSFiddle - React, Tailwind, and code Playground

by FlavorScape

HTML

<script src="http://daniellmb.github.io/jasmine-run/jasmine-1.3.1-run.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-mocks.js"></script>

JavaScript

angular.module('myApp', [])
.directive('myTestDirective', function () {
    return {
        restrict: 'E',
        scope: {
            myBinding: '='
        },
        replace: false,
        templateUrl: 'templates/someTemplate.html',
        controller: 'myTestController',
        controllerAs: 'myTestCtrl'
    };
})
.controller('myTestController', function($scope) {
    $scope.isRendered = true;  
    //setup this way because we have base controllers
    var controller = {
        init: function(){
            this.controllerVariableUnreachable = "hypochondriac";
            this.someList = [ { name:"monkey"}, {name:"dishwasher"}];
        },
        spyOnMe: function(){
            //blah
        }
    };
    //angular.extend( controller, new BaseController($scope));
    controller.init();
    return controller;
        
});

describe('myTest directive:', function () {
        
    var scope, compile, validHTML;
    
    validHTML = '<div><my-test-directive></my-test-directive></div>'; 
    
    beforeEach(module('myApp'));
    
    beforeEach(inject(function($compile, $rootScope, $templateCache){
            var html = '<div ng-repeat="item in myTestCtrl.someList">{{item.name}}{{myTestCtrl.controllerVariableUnreachable}}</div>';
            
            $templateCache.put('templates/someTemplate.html', '<div>' + html + '</div>');
        
        scope = $rootScope.$new();
        compile = $compile;
        
    }));
    
    function create() {
        var elem, compiledElem;
        elem = angular.element(validHTML);
        compiledElem = compile(elem)(scope);
        scope.$digest();
        return compiledElem;    
    }
    
    it('should have a scope on root element', function () {  
        var el = create();
        console.log( el.html() );
        expect(el.text()).toContain('hypochondriac');
        
        expect(el.children.length).toEqual(2);      
        
        // how to spy on controller method init here? 
        // or even more...