Untitled

<!DOCTYPE html>
<html>

<head>

  <link data-require="jasmine@1.3.1" data-semver="1.3.1" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css" />
  <script data-require="jasmine@1.3.1" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
  <script data-require="jasmine@1.3.1" data-semver="1.3.1" src="//cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
  <script data-require="jquery@2.0.0" data-semver="2.0.0" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
  <script data-require="json2@*" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
  <script data-require="angular-mocks@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script src="test.js"></script>
</head>

<body>
  <h1>Testing AngularJS Directives</h1>
  <div ng-app="example">
    <div ng-controller="exampleController">
      <collection data-items="items">
        <b>Welcome. This is some custom message text...</b>
      </collection>
    </div>
  </div>
  <div id="HTMLReporter" class="jasmine_reporter"></div>
  <script>
    (function() {
      var jasmineEnv = jasmine.getEnv();
      jasmineEnv.updateInterval = 250;

      var htmlReporter = new jasmine.HtmlReporter();
      jasmineEnv.addReporter(htmlReporter);

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

      var currentWindowOnload = window.onload;
      window.onload = function() {
        if (currentWindowOnload) {
          currentWindowOnload();
        }

        execJasmine();
      };

      function execJasmine() {
        jasmineEnv.execute();
      }
    })();
  </script>
</body>

</html>

angular.module('example', []);

var Module = angular.module('example');

Module.controller('exampleController', ['$scope',
  function(scope) {
    scope.items = [{
      id: 0,
      title: 'title a'
    }, {
      id: 1,
      title: 'title b'
    }, {
      id: 2,
      title: 'title c'
    }, {
      id: 3,
      title: 'title d'
    }];
  }
]);

Module.directive('collection', function() {
  return {
    restrict: 'EA',
    transclude: true,
    replace: true,
    scope: {
      items: '=items'
    },
    controller: 'collectionController',
    template: '<div class="table table">' +
      '<div ng-transclude></div>' +
      '<div ng-repeat="item in items">' +
      '<div class="item-class" ng-class="{active: item.selected}">{{ item.title }} - id: {{ item.id }}' +
      ' <button class="btn" ng-disabled="item.selected" ng-click="selectItem(item)">Set Active</button>' +
      '</div>' +
      '</div>' +
      '<div><button ng-click="addNewItem()">Add new Item</button></div>' +
      '</div>'
  };
});

Module.controller('collectionController', ['$scope',
function($scope) {
  var items = $scope.items || [];

  init();

  function init() {
    if ($scope.items.length > 0) $scope.items[0].selected = true;
  }

  $scope.selectItem = function(item) {
    angular.forEach(items, function(item) {
      item.selected = false;
    });
    item.selected = true;
  };

  $scope.addNewItem = function() {
    var i = {
      id: items.length,
      title: 'Added new item with id : ' + items.length
    };
    $scope.selectItem(i);
    items.push(i);
  };
  
}]);

.active {
      background: green;
      color: #fff;
    }

describe('Directive', function() {
  var elm, scope, fooBar;

  beforeEach(module('example'));

  // https://github.com/vojtajina/ng-directive-testing/blob/start/test/helpers.js
  beforeEach(function() {
    this.addMatchers({
      toHaveClass: function(cls) {
        this.message = function() {
          return "Expected '" + angular.mock.dump(this.actual) + "' to have class '" + cls + "'.";
        };

        return this.actual.hasClass(cls);
      }
    });
  });

  beforeEach(inject(function($rootScope, $compile) {
    elm = angular.element(
      '<div>' +
      '{{ customMessage }}' +
      '<collection data-items="items">' +
      '</collection>' +
      '</div>');

    scope = $rootScope.$new();

    scope.customMessage = '<div class="custom-message">foo</div>';
    scope.items = [{
      id: 1,
      title: 'title a'
    }, {
      id: 2,
      title: 'title b'
    }];
    $compile(elm)(scope);
    scope.$digest();
  }));

  it('should create clickable items', function() {
    var items = elm.find('.item-class');
    expect(items.length).toBe(2);
    expect(items.eq(0).text()).toContain('title a');
    expect(items.eq(1).text()).toContain('title b');
  });

  it('should set active class on first item', function() {
    scope.$digest();
    var items = elm.find('div.item-class');

    expect(items.eq(0)).toHaveClass('active');
    expect(items.eq(1)).not.toHaveClass('active');
  });

  it('should change active item when edit button is clicked', function() {
    var items = elm.find('.item-class');

    items.eq(1).find('button').click();

    expect(items.eq(0)).not.toHaveClass('active');
    expect(items.eq(1)).toHaveClass('active');
  });

  it('Set active button should should be disabled when item is active', function() {
    var items = elm.find('.item-class');
    // verify that prior to activating an item, the button is not disabled
    expect(items.eq(1).find('button').attr('disabled')).toBeUndefined();
    // click.
    items.eq(1).find('button').click();

    expect(items.eq(1).find('button').attr('disabled')).toBeTruthy();
  });
});