yesod-static-angular-0.1.0: example/tests/unit-js/tabs.js

/* I took this test code from https://github.com/vojtajina/ng-directive-testing
 * but made a few changes:
 *
 *  - Changed window.module to use angular.mock.module
 *  - Update the module name
 *  - Update the HTML to match the directives (my-tabs and my-pane)
 *  - Add a query function.  The test from github assumed jquery was available so the
 *    find function could query by class.  With only jqLite the find function can only
 *    query by tag name.  So I added a query class which just uses querySelectorAll.
 *  - copied some code from helpers.js into this module.
 */

describe('tabs', function() {
  var elm, scope;

  // load the tabs code
  beforeEach(angular.mock.module('yesod-example'));

  beforeEach(angular.mock.inject(function($rootScope, $compile) {
    // we might move this tpl into an html file as well...
    elm = angular.element(
      '<div>' +
        '<my-tabs>' +
          '<my-pane title="First Tab">' +
            'first content is {{first}}' +
          '</my-pane>' +
          '<my-pane title="Second Tab">' +
            'second content is {{second}}' +
          '</my-pane>' +
        '</my-tabs>' +
      '</div>');

    scope = $rootScope;
    $compile(elm)(scope);
    scope.$digest();
  }));

  //Copied from https://github.com/vojtajina/ng-directive-testing/blob/master/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);
          }
      });
  });

  var query = function(elm, q) {
      return angular.element(elm[0].querySelectorAll(q));
  };

  it('should create clickable titles', inject(function($compile, $rootScope) {
    var titles = query(elm, "ul.nav li a");

    expect(titles.length).toBe(2);
    expect(titles.eq(0).text()).toBe('First Tab');
    expect(titles.eq(1).text()).toBe('Second Tab');
  }));

  it('should bind the content', function() {
    var contents = query(elm, 'div.tab-content div.tab-pane');

    expect(contents.length).toBe(2);
    expect(contents.eq(0).text()).toBe('first content is ');
    expect(contents.eq(1).text()).toBe('second content is ');

    scope.$apply(function() {
      scope.first = 123;
      scope.second = 456;
    });

    expect(contents.eq(0).text()).toBe('first content is 123');
    expect(contents.eq(1).text()).toBe('second content is 456');
  });


  it('should set active class on title', function() {
    var titles = query(elm, 'ul.nav-tabs li');

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


  it('should set active class on content', function() {
    var contents = query(elm, 'div.tab-content div.tab-pane');

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

});