tooltipSpec.js
3.59 KB
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);
});
});
});