directive_test.js

'use strict';

define(['jquery',
  'angular',
  'angularMocks',
  'common/services/i18n',
  'common/filters/i18n',
  'text!util/templates/scroll_selector_template.html',
  'util/directives/scroll_selector_directive',
  'angulartics'], 
  function($, angular, mocks, i18n, i18nFilter, template, scrollSelector) {

    describe('scrollSelector', function() {

      var elem, scope, compile, defaultData;
      var validTemplate = [
        '<scroll-selector',
          'data-show-search="true"',
          'data-class="customClass"',
          'data-label="label | lowercase"',
          'data-apply-callback="callback()"',
          'ng-model="data">',
        '</scroll-selector>'
      ].join(' ');

      // TODO: Abstract out the base providers
      beforeEach(function() {
        /* jshint maxlen:100 */
        angular.mock.module(function($compileProvider, $provide, $filterProvider) {
          $compileProvider.directive('scrollSelector', scrollSelector);
          $provide.service('i18n', i18n);
          $filterProvider.register(i18nFilter.name, i18nFilter.component);
        });
        angular.mock.module('angulartics');

        defaultData = {
          types: {
            'cash': false,
            'card': false
          },
          status: {
            'failed': false,
            'successful': false
          }
        };
      });

      function setupDirective(data, tmpl) {
        return inject(function($rootScope, $compile) {
          scope = $rootScope.$new();
          compile = $compile;

          scope.data = data || defaultData;
          elem = $compile(tmpl || validTemplate)(scope);

          scope.$digest();
        });
      }

      it('should start hidden', inject(function() {
        setupDirective();
        expect(elem.isolateScope().open).toBe(false);
      }));

      // TODO: Make the element checking more robust with jquery selectors
      it('should open when clicked', inject(function() {
        setupDirective();
        var link = elem.find('a')[0];
        angular.element(link).triggerHandler('click');
        expect(elem.isolateScope().open).toBe(true);
      }));

      it('should have as many checkboxes as keys', inject(function() {
        setupDirective();
        var checkboxes = $(elem).find('input[type="checkbox"]');
        expect(checkboxes.length).toBe(4);
      }));

      it('should filter results', inject(function($rootScope) {
        var data = {
          a: false,
          b: false,
          c: false,
          ac: false
        };

        setupDirective(data);

        elem.isolateScope().searchText = 'c';
        scope.$digest();
        $rootScope.$digest();

        var inputs = elem.find('li');
        var hidden = 0;
        var visible = 0;

        for (var i = 0, node; node = inputs[i]; i++) {
          if (angular.element(node).hasClass('ng-hide')) {
            hidden++;
          }
          else {
            visible++;
          }
        }

        // Matches + search input itself
        expect(visible).toBe(3);
        expect(hidden).toBe(2);

      }));

      it('should close on cancel', inject(function() {
        setupDirective();

        var anchors = elem.find('a');
        var cancelBtn = anchors[2];

        angular.element(cancelBtn).triggerHandler('click');
        expect(elem.isolateScope().open).toBe(false);

      }));
    });
  }
);