diff options
Diffstat (limited to 'js/tests/unit')
| -rw-r--r-- | js/tests/unit/tooltip.js | 81 |
1 files changed, 79 insertions, 2 deletions
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 9df234236..e670883e3 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -337,12 +337,12 @@ $(function () { }) test('should add position class before positioning so that position-specific styles are taken into account', function () { - $('head').append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>') + $('head').append('<style id="test"> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>') var container = $('<div />').appendTo('body'), target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>') .appendTo(container) - .tooltip({placement: 'right'}) + .tooltip({placement: 'right', viewport: null}) .tooltip('show'), tooltip = container.find('.tooltip') @@ -352,6 +352,7 @@ $(function () { var topDiff = top - top2 ok(topDiff <= 1 && topDiff >= -1) target.tooltip('hide') + $('head #test').remove() }) test('tooltip title test #1', function () { @@ -428,4 +429,80 @@ $(function () { ttContainer.remove() }) + test('should adjust the tip\'s top when up against the top of the viewport', function () { + $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>') + + var container = $('<div />').appendTo('body'), + target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>') + .appendTo(container) + .tooltip({placement: 'right', viewport: {selector: 'body', padding: 12}}) + .tooltip('show'), + tooltip = container.find('.tooltip') + + ok( Math.round(tooltip.offset().top) === 12 ) + target.tooltip('hide') + $('head #test').remove() + }) + + test('should adjust the tip\'s top when up against the bottom of the viewport', function () { + $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>') + + var container = $('<div />').appendTo('body'), + target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; bottom: 0px; left: 0px;"></a>') + .appendTo(container) + .tooltip({placement: 'right', viewport: {selector: 'body', padding: 12}}) + .tooltip('show'), + tooltip = container.find('.tooltip') + + ok( Math.round(tooltip.offset().top) === Math.round($(window).height() - 12 - tooltip[0].offsetHeight) ) + target.tooltip('hide') + $('head #test').remove() + }) + + test('should adjust the tip\'s left when up against the left of the viewport', function () { + $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>') + + var container = $('<div />').appendTo('body'), + target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>') + .appendTo(container) + .tooltip({placement: 'bottom', viewport: {selector: 'body', padding: 12}}) + .tooltip('show'), + tooltip = container.find('.tooltip') + + ok( Math.round(tooltip.offset().left) === 12 ) + target.tooltip('hide') + $('head #test').remove() + }) + + test('should adjust the tip\'s left when up against the right of the viewport', function () { + $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>') + + var container = $('<div />').appendTo('body'), + target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; right: 0px;"></a>') + .appendTo(container) + .tooltip({placement: 'bottom', viewport: {selector: 'body', padding: 12}}) + .tooltip('show'), + tooltip = container.find('.tooltip') + + ok( Math.round(tooltip.offset().left) === Math.round($(window).width() - 12 - tooltip[0].offsetWidth) ) + target.tooltip('hide') + $('head #test').remove() + }) + + test('should adjust the tip when up against the right of an arbitrary viewport', function () { + $('head').append('<style id="test"> .tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>') + $('head').append('<style id="viewport-style"> .container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; } </style>') + + var container = $('<div />', {class: 'container-viewport'}).appendTo('body'), + target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 50px; left: 350px;"></a>') + .appendTo(container) + .tooltip({placement: 'bottom', viewport: '.container-viewport'}) + .tooltip('show'), + tooltip = container.find('.tooltip') + + ok( Math.round(tooltip.offset().left) === Math.round(60 + container.width() - tooltip[0].offsetWidth) ) + target.tooltip('hide') + $('head #test').remove() + $('head #viewport-style').remove() + }) }) |
