aboutsummaryrefslogtreecommitdiffstats
path: root/test/ng/directive/ngShowHideSpec.js
blob: be0a3895aad5220b5dfbadf4326726a36b2f9727 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
'use strict';

describe('ngShow / ngHide', function() {
  var element;


  afterEach(function() {
    dealoc(element);
  });

  describe('ngShow', function() {
    it('should show and hide an element', inject(function($rootScope, $compile) {
      element = jqLite('<div ng-show="exp"></div>');
      element = $compile(element)($rootScope);
      $rootScope.$digest();
      expect(element).toBeHidden();
      $rootScope.exp = true;
      $rootScope.$digest();
      expect(element).toBeShown();
    }));


    it('should make hidden element visible', inject(function($rootScope, $compile) {
      element = jqLite('<div class="ng-hide" ng-show="exp"></div>');
      element = $compile(element)($rootScope);
      expect(element).toBeHidden();
      $rootScope.exp = true;
      $rootScope.$digest();
      expect(element).toBeShown();
    }));
  });

  describe('ngHide', function() {
    it('should hide an element', inject(function($rootScope, $compile) {
      element = jqLite('<div ng-hide="exp"></div>');
      element = $compile(element)($rootScope);
      expect(element).toBeShown();
      $rootScope.exp = true;
      $rootScope.$digest();
      expect(element).toBeHidden();
    }));
  });
});

describe('ngShow / ngHide animations', function() {
  var body, element, $rootElement;

  function html(html) {
    body.append($rootElement);
    $rootElement.html(html);
    element = $rootElement.children().eq(0);
    return element;
  }

  beforeEach(function() {
    // we need to run animation on attached elements;
    body = jqLite(document.body);
  });

  afterEach(function(){
    dealoc(body);
    dealoc(element);
    body.removeAttr('ng-animation-running');
  });

  beforeEach(module('mock.animate'));

  beforeEach(module(function($animateProvider, $provide) {
    return function(_$rootElement_) {
      $rootElement = _$rootElement_;
    };
  }));

  describe('ngShow', function() {
    it('should fire off the $animate.show and $animate.hide animation', inject(function($compile, $rootScope, $animate) {
      var item;
      var $scope = $rootScope.$new();
      $scope.on = true;
      element = $compile(html(
        '<div ng-show="on">data</div>'
      ))($scope);
      $scope.$digest();

      item = $animate.process('removeClass').element;
      expect(item.text()).toBe('data');
      expect(item).toBeShown();

      $scope.on = false;
      $scope.$digest();

      item = $animate.process('addClass').element;
      expect(item.text()).toBe('data');
      expect(item).toBeHidden();
    }));
  });

  describe('ngHide', function() {
    it('should fire off the $animate.show and $animate.hide animation', inject(function($compile, $rootScope, $animate) {
      var item;
      var $scope = $rootScope.$new();
      $scope.off = true;
      element = $compile(html(
          '<div ng-hide="off">datum</div>'
      ))($scope);
      $scope.$digest();

      item = $animate.process('addClass').element;
      expect(item.text()).toBe('datum');
      expect(item).toBeHidden();

      $scope.off = false;
      $scope.$digest();

      item = $animate.process('removeClass').element;
      expect(item.text()).toBe('datum');
      expect(item).toBeShown();
    }));
  });
});