lundi 2 mai 2016

Jasmine - Test a directive

I am working on an Ionic project. The following directive removes classes from the element it is used on.

angular.module('employer')
.directive('displayTab', function($timeout) {

  var css = angular.element('<style>').html(
    '.has-tabs{ bottom: 0; }\n' +
    '.no-tabs{ top: 44px; }');

  document.body.appendChild(css[0]);
  return {
    restrict: 'A',
    compile: function(element, attr) {

      var bar = document.querySelector('.tab-nav');
      return function($scope, $element, $attr) {
        var navigate = $element[0].querySelector('.scroll-element');

        $scope.$on('$ionicView.beforeEnter', function() {
          bar.classList.remove('sliding');
          navigate.classList.remove('no-tabs');       
        })
      }
    }
  };
});

Following is what I have tried so far. I want to test if this directive actually removes the specified classes (sliding, no-tabs) from the element it is used on.

describe('directive', function() {
         var $rootScope, $compile, $scope;
         var el, markup, scrolling, bar;
         var markup = '<div display-tab></div>';

         beforeEach(function() {
                    module('employer');

                    inject(function($injector) {
                           $rootScope = $injector.get('$rootScope');
                           $compile = $injector.get('$compile');

                           $scope    = $rootScope.$new();

                           el   = $compile(angular.element(markup))($scope);

                           });
                    });

         $body.append(el);
         $rootScope.$digest;

         describe('bar directive', function() {
                  it('should assign a class to the element', function() {
                     scope.$emit('$ionicView.beforeEnter');
                     scope.$digest();

                   });
         });

How do I correctly test this directive?

Aucun commentaire:

Enregistrer un commentaire