aboutsummaryrefslogtreecommitdiff
path: root/js/tests
diff options
context:
space:
mode:
Diffstat (limited to 'js/tests')
-rw-r--r--js/tests/unit/carousel.js27
-rw-r--r--js/tests/unit/tooltip.js442
-rw-r--r--js/tests/visual/affix.html68
3 files changed, 328 insertions, 209 deletions
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 51872c57b..3f9e61a34 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -349,7 +349,7 @@ $(function () {
$carousel.remove()
})
- test('should skip over non-items', function () {
+ test('should skip over non-items when using item indices', function () {
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ '<div class="carousel-inner">'
+ '<div class="item active">'
@@ -373,4 +373,29 @@ $(function () {
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
})
+
+ test('should skip over non-items when using next/prev methods', function () {
+ var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
+ + '<div class="carousel-inner">'
+ + '<div class="item active">'
+ + '<img alt="">'
+ + '</div>'
+ + '<script type="text/x-metamorph" id="thingy"/>'
+ + '<div class="item">'
+ + '<img alt="">'
+ + '</div>'
+ + '<div class="item">'
+ + '</div>'
+ + '</div>'
+ + '</div>'
+ var $template = $(templateHTML)
+
+ $template.bootstrapCarousel()
+
+ strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+
+ $template.bootstrapCarousel('next')
+
+ strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+ })
})
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 6871f538e..7896c2c96 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -202,134 +202,6 @@ $(function () {
.bootstrapTooltip('show')
})
- test('should not show tooltip if leave event occurs before delay expires', function () {
- stop()
-
- var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
- .appendTo('#qunit-fixture')
- .bootstrapTooltip({ delay: 200 })
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
- $tooltip.trigger('mouseout')
- }, 100)
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '300ms: tooltip not faded in')
- start()
- }, 300)
-
- $tooltip.trigger('mouseenter')
- })
-
- test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () {
- stop()
-
- var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
- .appendTo('#qunit-fixture')
- .bootstrapTooltip({ delay: { show: 200, hide: 0 }})
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
- $tooltip.trigger('mouseout')
- }, 100)
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '300ms: tooltip not faded in')
- start()
- }, 300)
-
- $tooltip.trigger('mouseenter')
- })
-
- test('should wait 200 ms before hiding the tooltip', function () {
- stop()
-
- var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
- .appendTo('#qunit-fixture')
- .bootstrapTooltip({ delay: { show: 0, hide: 200 }})
-
- setTimeout(function () {
- ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
- $tooltip.trigger('mouseout')
- }, 1)
-
- setTimeout(function () {
- ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
- }, 100)
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.in'), '250ms: tooltip removed')
- start()
- }, 250)
-
- $tooltip.trigger('mouseenter')
- })
-
- test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function () {
- stop()
-
- var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
- .appendTo('#qunit-fixture')
- .bootstrapTooltip({ delay: { show: 0, hide: 200 }})
-
- setTimeout(function () {
- ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
- $tooltip.trigger('mouseout')
- }, 1)
-
- setTimeout(function () {
- ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
- $tooltip.trigger('mouseenter')
- }, 100)
-
- setTimeout(function () {
- ok($('.tooltip').is('.fade.in'), '250ms: tooltip still faded in')
- start()
- }, 250)
-
- $tooltip.trigger('mouseenter')
- })
-
- test('should not show tooltip if leave event occurs before delay expires', function () {
- stop()
-
- var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
- .appendTo('#qunit-fixture')
- .bootstrapTooltip({ delay: 100 })
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '50ms: tooltip not faded in')
- $tooltip.trigger('mouseout')
- }, 50)
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
- start()
- }, 100)
-
- $tooltip.trigger('mouseenter')
- })
-
- test('should show tooltip if leave event hasn\'t occured before delay expires', function () {
- stop()
-
- var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
- .appendTo('#qunit-fixture')
- .bootstrapTooltip({ delay: 150 })
-
- setTimeout(function () {
- ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip is not faded in')
- }, 100)
-
- setTimeout(function () {
- ok($('.tooltip').is('.fade.in'), '200ms: tooltip is faded in')
- start()
- }, 200)
-
- $tooltip.trigger('mouseenter')
- })
-
test('should destroy tooltip', function () {
var $tooltip = $('<div/>')
.bootstrapTooltip()
@@ -395,76 +267,6 @@ $(function () {
equal($('body > .tooltip').length, 0, 'tooltip was removed from dom')
})
- test('should place tooltip inside viewport', function () {
- stop()
-
- var $container = $('<div/>')
- .css({
- position: 'absolute',
- width: 200,
- height: 200,
- bottom: 0,
- left: 0
- })
- .appendTo(document.body)
-
- $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>')
- .css({
- position: 'absolute',
- top: 0,
- left: 0
- })
- .appendTo($container)
- .bootstrapTooltip({
- placement: 'top',
- animate: false
- })
- .bootstrapTooltip('show')
-
- setTimeout(function () {
- ok($('.tooltip').offset().left >= 0)
- $container.remove()
- start()
- }, 100)
- })
-
- test('should place tooltip on top of element', function () {
- stop()
-
- var containerHTML = '<div>'
- + '<p style="margin-top: 200px">'
- + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
- + '</p>'
- + '</div>'
- var $container = $(containerHTML)
- .css({
- position: 'absolute',
- bottom: 0,
- left: 0,
- textAlign: 'right',
- width: 300,
- height: 300
- })
- .appendTo(document.body)
-
- var $trigger = $container
- .find('a')
- .css('margin-top', 200)
- .bootstrapTooltip({
- placement: 'top',
- animate: false
- })
- .bootstrapTooltip('show')
-
- var $tooltip = $container.find('.tooltip')
-
- setTimeout(function () {
- ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
- $container.remove()
- start()
- }, 100)
- })
-
test('should add position class before positioning so that position-specific styles are taken into account', function () {
var styles = '<style>'
+ '.tooltip.right { white-space: nowrap; }'
@@ -472,7 +274,7 @@ $(function () {
+ '</style>'
var $styles = $(styles).appendTo('head')
- var $container = $('<div/>').appendTo(document.body)
+ var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
.appendTo($container)
.bootstrapTooltip({
@@ -587,7 +389,7 @@ $(function () {
+ '</style>'
var $styles = $(styles).appendTo('head')
- var $container = $('<div/>').appendTo(document.body)
+ var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>')
.appendTo($container)
.bootstrapTooltip({
@@ -604,7 +406,6 @@ $(function () {
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
- $container.remove()
$styles.remove()
})
@@ -615,7 +416,7 @@ $(function () {
+ '</style>'
var $styles = $(styles).appendTo('head')
- var $container = $('<div/>').appendTo(document.body)
+ var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;"/>')
.appendTo($container)
.bootstrapTooltip({
@@ -644,7 +445,7 @@ $(function () {
+ '</style>'
var $styles = $(styles).appendTo('head')
- var $container = $('<div/>').appendTo(document.body)
+ var $container = $('<div/>').appendTo('#qunit-fixture')
var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>')
.appendTo($container)
.bootstrapTooltip({
@@ -739,4 +540,239 @@ $(function () {
ok(passed, '.tooltip(\'show\') should not throw an error if element no longer is in dom')
})
+
+ test('should place tooltip on top of element', function () {
+ stop()
+
+ var containerHTML = '<div>'
+ + '<p style="margin-top: 200px">'
+ + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
+ + '</p>'
+ + '</div>'
+
+ var $container = $(containerHTML)
+ .css({
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ textAlign: 'right',
+ width: 300,
+ height: 300
+ })
+ .appendTo('#qunit-fixture')
+
+ var $trigger = $container
+ .find('a')
+ .css('margin-top', 200)
+ .bootstrapTooltip({
+ placement: 'top',
+ animate: false
+ })
+ .bootstrapTooltip('show')
+
+ var $tooltip = $container.find('.tooltip')
+
+ setTimeout(function () {
+ ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
+ start()
+ }, 0)
+ })
+
+ test('should place tooltip inside viewport', function () {
+ stop()
+
+ var $container = $('<div/>')
+ .css({
+ position: 'absolute',
+ width: 200,
+ height: 200,
+ bottom: 0,
+ left: 0
+ })
+ .appendTo('#qunit-fixture')
+
+ $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>')
+ .css({
+ position: 'absolute',
+ top: 0,
+ left: 0
+ })
+ .appendTo($container)
+ .bootstrapTooltip({
+ placement: 'top'
+ })
+ .bootstrapTooltip('show')
+
+ setTimeout(function () {
+ ok($('.tooltip').offset().left >= 0)
+ start()
+ }, 0)
+ })
+
+ test('should show tooltip if leave event hasn\'t occured before delay expires', function () {
+ stop()
+
+ var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ delay: 15 })
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip is not faded in')
+ }, 10)
+
+ setTimeout(function () {
+ ok($('.tooltip').is('.fade.in'), '20ms: tooltip is faded in')
+ start()
+ }, 20)
+
+ $tooltip.trigger('mouseenter')
+ })
+
+ test('should not show tooltip if leave event occurs before delay expires', function () {
+ stop()
+
+ var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ delay: 15 })
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip not faded in')
+ $tooltip.trigger('mouseout')
+ }, 10)
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '20ms: tooltip not faded in')
+ start()
+ }, 20)
+
+ $tooltip.trigger('mouseenter')
+ })
+
+ test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function () {
+ stop()
+
+ var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ delay: { show: 0, hide: 15 }})
+
+ setTimeout(function () {
+ ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
+ $tooltip.trigger('mouseout')
+
+ setTimeout(function () {
+ ok($('.tooltip').is('.fade.in'), '10ms: tooltip still faded in')
+ $tooltip.trigger('mouseenter')
+ }, 10)
+
+ setTimeout(function () {
+ ok($('.tooltip').is('.fade.in'), '20ms: tooltip still faded in')
+ start()
+ }, 20)
+ }, 0)
+
+ $tooltip.trigger('mouseenter')
+ })
+
+ test('should not show tooltip if leave event occurs before delay expires', function () {
+ stop()
+
+ var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ delay: 15 })
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip not faded in')
+ $tooltip.trigger('mouseout')
+ }, 10)
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '20ms: tooltip not faded in')
+ start()
+ }, 20)
+
+ $tooltip.trigger('mouseenter')
+ })
+
+ test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () {
+ stop()
+
+ var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ delay: { show: 15, hide: 0 }})
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '10ms: tooltip not faded in')
+ $tooltip.trigger('mouseout')
+ }, 10)
+
+ setTimeout(function () {
+ ok(!$('.tooltip').is('.fade.in'), '25ms: tooltip not faded in')
+ start()
+ }, 25)
+
+ $tooltip.trigger('mouseenter')
+ })
+
+ test('should wait 20ms before hiding the tooltip', function () {
+ stop()
+
+ var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
+ .appendTo('#qunit-fixture')
+ .bootstrapTooltip({ delay: { show: 0, hide: 15 }})
+
+ setTimeout(function () {
+ ok($tooltip.data('bs.tooltip').$tip.is('.fade.in'), '1ms: tooltip faded in')
+
+ $tooltip.trigger('mouseout')
+
+ setTimeout(function () {
+ ok($tooltip.data('bs.tooltip').$tip.is('.fade.in'), '10ms: tooltip still faded in')
+ }, 10)
+
+ setTimeout(function () {
+ ok(!$tooltip.data('bs.tooltip').$tip.is('.in'), '20ms: tooltip removed')
+ start()
+ }, 20)
+
+ }, 0)
+
+ $tooltip.trigger('mouseenter')
+ })
+
+ test('should correctly position tooltips on SVG elements', function () {
+ if (!window.SVGElement) {
+ // Skip IE8 since it doesn't support SVG
+ expect(0)
+ return
+ }
+
+ stop()
+
+ var styles = '<style>'
+ + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ + '.tooltip { position: absolute; }'
+ + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
+ + '</style>'
+ var $styles = $(styles).appendTo('head')
+
+ $('#qunit-fixture').append(
+ '<div style="position: fixed; top: 0; left: 0;">'
+ + ' <svg width="200" height="200">'
+ + ' <circle cx="100" cy="100" r="10" title="m" id="theCircle" />'
+ + ' </svg>'
+ + '</div>')
+ var $circle = $('#theCircle')
+
+ $circle
+ .on('shown.bs.tooltip', function () {
+ var offset = $('.tooltip').offset()
+ $styles.remove()
+ ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
+ start()
+ })
+ .bootstrapTooltip({ container: 'body', placement: 'top', trigger: 'manual' })
+
+ $circle.bootstrapTooltip('show')
+ })
+
})
diff --git a/js/tests/visual/affix.html b/js/tests/visual/affix.html
index 5e677eb57..40a55ab51 100644
--- a/js/tests/visual/affix.html
+++ b/js/tests/visual/affix.html
@@ -6,12 +6,36 @@
<style>
/* Test Styles */
- .affix {
+ .affixed-element-top.affix {
top: 10px;
}
- .affix-bottom {
+ .affixed-element-top.affix-bottom {
position: absolute;
}
+ .affixed-element-bottom {
+ margin-bottom: 0;
+ }
+ .affixed-element-bottom.affix {
+ bottom: 10px;
+ }
+ .affixed-element-bottom.affix-bottom {
+ position: relative;
+ }
+ .grow-btn, .shrink-btn {
+ color: #FFF;
+ }
+ .grow-btn {
+ background-color: #2ECC40;
+ }
+ .grow-btn:hover {
+ background-color: #3D9970;
+ }
+ .shrink-btn {
+ background-color: #FF4136;
+ }
+ .shrink-btn:hover {
+ background-color: #85144B;
+ }
</style>
</head>
<body>
@@ -23,7 +47,7 @@
</div>
<div class="col-md-3">
- <ul class="list-group js-affixed-element">
+ <ul class="list-group affixed-element-top js-affixed-element-top">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
@@ -43,7 +67,7 @@
</ul>
</div>
- <div class="col-md-9">
+ <div class="col-md-6 js-content">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@@ -199,6 +223,27 @@
</div>
+ <div class="col-md-3">
+ <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
+ <li class="list-group-item">Sit necessitatibus aspernatur.</li>
+ <li class="list-group-item">Adipisicing alias dolor!</li>
+ <li class="list-group-item">Ipsum molestiae impedit.</li>
+ <li class="list-group-item">Amet quis iste?</li>
+ <li class="list-group-item">Ipsum quaerat porro.</li>
+ <li class="list-group-item">Elit lorem libero.</li>
+ <li class="list-group-item">Ipsum dolore facilis.</li>
+ <li class="list-group-item">Elit ad atque.</li>
+ <li class="list-group-item">Dolor amet sequi!</li>
+ <li class="list-group-item">Consectetur voluptatum facilis!</li>
+ <li class="list-group-item">Sit neque eligendi?</li>
+ <li class="list-group-item">Amet fuga consectetur!</li>
+ <li class="list-group-item">Amet molestias repellat!</li>
+ <li class="list-group-item">Consectetur minima repellendus.</li>
+ <li class="list-group-item grow-btn js-grow-btn">Grow content</li>
+ <li class="list-group-item shrink-btn js-shrink-btn">Shrink content</li>
+ </ul>
+ </div>
+
<div class="col-md-12 js-footer">
<hr>
@@ -222,7 +267,7 @@
<!-- JavaScript Test -->
<script>
$(function () {
- $('.js-affixed-element').affix({
+ $('.js-affixed-element-top').affix({
offset: {
top: $('.js-page-header').outerHeight(true) - 10
, bottom: $('.js-footer').outerHeight(true) + 10
@@ -232,6 +277,19 @@ $(function () {
.on('affix.bs.affix', function (e) {
$(e.target).width(e.target.offsetWidth)
})
+
+ $('.js-affixed-element-bottom').affix({
+ offset: {
+ bottom: $('.js-footer').outerHeight(true) + 10
+ }
+ })
+
+ $('.js-grow-btn').on('click', function() {
+ $('.js-content').append('<p>Ipsum corrupti ipsam est temporibus.</p>')
+ })
+ $('.js-shrink-btn').on('click', function() {
+ $('.js-content p').last().remove()
+ })
})
</script>
</body>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-08 16:39:29 +0000