Blame view

bower_components/Materialize/tests/spec/tooltip/tooltipSpec.js 3.59 KB
a1a3bc73   Luigi Serra   graphs updates
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
  describe( 'Tooltip:', function() {
    var tooltippedBtn, tooltip;
  
    beforeEach(function() {
      loadFixtures('tooltip/tooltipFixture.html');
      $('.tooltipped').tooltip();
    });
  
    describe('Tooltip opens and closes properly', function() {
  
  
      it('Opens a tooltip on mouse enter', function(done) {
        tooltippedBtn = $('#test');
        tooltip = $('#' + tooltippedBtn.attr('data-tooltip-id'))
        expect(tooltip).toBeHidden('because tooltip is not activated yet');
  
        // Mouse enter
        tooltippedBtn.trigger('mouseenter');
        setTimeout(function() {
          expect(tooltip).toBeVisible('because mouse entered tooltipped btn');
          expect(tooltip.children('span').text()).toBe('I am tooltip',
              'because that is the defined text in the html attribute');
  
          // Mouse leave
          tooltippedBtn.trigger('mouseleave');
          setTimeout(function() {
            expect(tooltip).toBeVisible('because mouse left tooltipped btn');
            done();
          }, 300);
        }, 200);
      });
  
  
      it('Positions tooltips smartly on the bottom within the screen bounds', function(done) {
        tooltippedBtn = $('#test1');
        tooltip = $('#' + tooltippedBtn.attr('data-tooltip-id'));
        // Mouse enter
        tooltippedBtn.trigger('mouseenter');
        setTimeout(function() {
          var offset = tooltip.offset();
          // Check window bounds
          expect(offset.top >= 0).toBeTruthy();
          expect(offset.top < 0).toBeFalsy();
          expect(offset.top + tooltip.height() <=
              window.innerHeight).toBeTruthy();
          expect(offset.left >= 0).toBeTruthy();
          expect(offset.left < 0).toBeFalsy();
          expect(offset.left + tooltip.width() <= window.innerWidth).toBeTruthy();
  
          // check if tooltip is under btn
          expect(offset.top > tooltippedBtn.offset().top + tooltippedBtn.height())
              .toBeTruthy();
          expect(offset.top < tooltippedBtn.offset().top + tooltippedBtn.height())
              .toBeFalsy();
          done();
        }, 300);
      });
  
  
      it('Removes tooltip event handlers and tooltip dom object', function() {
        tooltippedBtn = $('#test1');
        tooltippedBtn.tooltip('remove');
  
        // Check that event handlers are removed
        var enterHandler = $._data(tooltippedBtn[0], 'events');
        expect(!!enterHandler).toBeFalsy('because all events should be removed');
  
        // Check DOM element is removed
        tooltip = $('#' + tooltippedBtn.attr('data-tooltip-id'));
        expect(tooltip.length).toBe(0);
      });
  
  
      it('Changes position attribute dynamically and positions tooltips on the right correctly',
          function(done) {
        tooltippedBtn = $('#test');
        tooltippedBtn.attr('data-position', 'right');
        tooltip = $('#' + tooltippedBtn.attr('data-tooltip-id'));
        // Mouse enter
        tooltippedBtn.trigger('mouseenter');
        setTimeout(function() {
          var offset = tooltip.offset();
          expect(offset.left > tooltippedBtn.offset().left + tooltippedBtn.width())
              .toBeTruthy();
          done();
        }, 300);
      });
  
  
      it('Accepts delay option from javascript initialization', function(done) {
        tooltippedBtn = $('#test');
        tooltippedBtn.removeAttr('data-delay');
        tooltippedBtn.tooltip({delay: 200});
        tooltip = $('#' + tooltippedBtn.attr('data-tooltip-id'));
        tooltippedBtn.trigger('mouseenter');
        setTimeout(function() {
          expect(tooltip.css('display')).toBe('none', 'because the delay is 200 seconds');
        }, 150);
  
        setTimeout(function() {
          expect(tooltip).toBeVisible('because 200 seconds has passed');
          done();
        }, 250);
  
      });
    });
  
  });