aboutsummaryrefslogtreecommitdiff
path: root/js/tests/unit
diff options
context:
space:
mode:
Diffstat (limited to 'js/tests/unit')
-rw-r--r--js/tests/unit/alert.js8
-rw-r--r--js/tests/unit/collapse.js97
-rw-r--r--js/tests/unit/modal.js4
-rw-r--r--js/tests/unit/scrollspy.js4
-rw-r--r--js/tests/unit/tooltip.js94
5 files changed, 198 insertions, 9 deletions
diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js
index 52505c828..bc4eed676 100644
--- a/js/tests/unit/alert.js
+++ b/js/tests/unit/alert.js
@@ -30,7 +30,7 @@ $(function () {
})
test('should fade element out on clicking .close', function () {
- var alertHTML = '<div class="alert-message warning fade in">'
+ var alertHTML = '<div class="alert alert-danger fade in">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
@@ -42,17 +42,17 @@ $(function () {
})
test('should remove element when clicking .close', function () {
- var alertHTML = '<div class="alert-message warning fade in">'
+ var alertHTML = '<div class="alert alert-danger fade in">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
- notEqual($('#qunit-fixture').find('.alert-message').length, 0, 'element added to dom')
+ notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom')
$alert.find('.close').click()
- equal($('#qunit-fixture').find('.alert-message').length, 0, 'element removed from dom')
+ equal($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom')
})
test('should not fire closed when close is prevented', function () {
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index 8e6bb8273..825f79360 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -75,7 +75,7 @@ $(function () {
test('should remove "collapsed" class from target when collapse is shown', function () {
stop()
- var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
+ var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
$('<div id="test1"/>')
.appendTo('#qunit-fixture')
@@ -102,6 +102,38 @@ $(function () {
$target.click()
})
+ test('should not close a collapse when initialized with "show" if already shown', function () {
+ stop()
+
+ expect(0)
+
+ var $test = $('<div id="test1" class="in"/>')
+ .appendTo('#qunit-fixture')
+ .on('hide.bs.collapse', function () {
+ ok(false)
+ })
+
+ $test.bootstrapCollapse('show')
+
+ setTimeout(start, 0)
+ })
+
+ test('should open a collapse when initialized with "show" if not already shown', function () {
+ stop()
+
+ expect(1)
+
+ var $test = $('<div id="test1" />')
+ .appendTo('#qunit-fixture')
+ .on('show.bs.collapse', function () {
+ ok(true)
+ })
+
+ $test.bootstrapCollapse('show')
+
+ setTimeout(start, 0)
+ })
+
test('should remove "collapsed" class from active accordion target', function () {
stop()
@@ -168,4 +200,67 @@ $(function () {
$target3.click()
})
+ test('should set aria-expanded="true" on target when collapse is shown', function () {
+ stop()
+
+ var $target = $('<a data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
+
+ $('<div id="test1"/>')
+ .appendTo('#qunit-fixture')
+ .on('show.bs.collapse', function () {
+ equal($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
+ start()
+ })
+
+ $target.click()
+ })
+
+ test('should set aria-expanded="false" on target when collapse is hidden', function () {
+ stop()
+
+ var $target = $('<a data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
+
+ $('<div id="test1" class="in"/>')
+ .appendTo('#qunit-fixture')
+ .on('hide.bs.collapse', function () {
+ equal($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
+ start()
+ })
+
+ $target.click()
+ })
+
+ test('should change aria-expanded from active accordion target to "false" and set the newly active one to "true"', function () {
+ stop()
+
+ var accordionHTML = '<div id="accordion">'
+ + '<div class="accordion-group"/>'
+ + '<div class="accordion-group"/>'
+ + '<div class="accordion-group"/>'
+ + '</div>'
+ var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
+
+ var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
+
+ $('<div id="body1" aria-expanded="true" class="in"/>').appendTo($groups.eq(0))
+
+ var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
+
+ $('<div id="body2" aria-expanded="false"/>').appendTo($groups.eq(1))
+
+ var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
+
+ $('<div id="body3" aria-expanded="false"/>')
+ .appendTo($groups.eq(2))
+ .on('show.bs.collapse', function () {
+ equal($target1.attr('aria-expanded'), 'false', 'inactive target 1 has aria-expanded="false"')
+ equal($target2.attr('aria-expanded'), 'false', 'inactive target 2 has aria-expanded="false"')
+ equal($target3.attr('aria-expanded'), 'true', 'active target 3 has aria-expanded="false"')
+
+ start()
+ })
+
+ $target3.click()
+ })
+
})
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 6c48ed44b..2262465a4 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -141,7 +141,7 @@ $(function () {
notEqual($('#modal-test').length, 0, 'modal insterted into dom')
$('.contents').click()
ok($('#modal-test').is(':visible'), 'modal visible')
- $('#modal-test').mousedown()
+ $('#modal-test').click()
})
.on('hidden.bs.modal', function () {
ok(!$('#modal-test').is(':visible'), 'modal hidden')
@@ -196,7 +196,7 @@ $(function () {
$('<div id="modal-test"><div class="contents"/></div>')
.on('shown.bs.modal', function () {
triggered = 0
- $('#modal-test').mousedown()
+ $('#modal-test').click()
})
.on('hide.bs.modal', function () {
triggered += 1
diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index b18d91189..c071d0f65 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -124,12 +124,12 @@ $(function () {
test('should add the active class to the correct element', function () {
var navbarHtml =
- '<div class="navbar">'
+ '<nav class="navbar">'
+ '<ul class="nav">'
+ '<li id="li-1"><a href="#div-1">div 1</a></li>'
+ '<li id="li-2"><a href="#div-2">div 2</a></li>'
+ '</ul>'
- + '</div>'
+ + '</nav>'
var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">'
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 7896c2c96..c75924e9f 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -768,6 +768,8 @@ $(function () {
var offset = $('.tooltip').offset()
$styles.remove()
ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
+ $circle.bootstrapTooltip('hide')
+ equal($('.tooltip').length, 0, 'tooltip removed from dom')
start()
})
.bootstrapTooltip({ container: 'body', placement: 'top', trigger: 'manual' })
@@ -775,4 +777,96 @@ $(function () {
$circle.bootstrapTooltip('show')
})
+ test('should not reload the tooltip on subsequent mouseenter events', function () {
+ var titleHtml = function () {
+ var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip')
+ return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
+ }
+
+ var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
+ .appendTo('#qunit-fixture')
+
+ $tooltip.bootstrapTooltip({
+ html: true,
+ animation: false,
+ trigger: 'hover',
+ delay: { show: 0, hide: 500 },
+ container: $tooltip,
+ title: titleHtml
+ })
+
+ $('#tt-outer').trigger('mouseenter')
+
+ var currentUid = $('#tt-content').text()
+
+ $('#tt-content').trigger('mouseenter')
+ equal(currentUid, $('#tt-content').text())
+ })
+
+ test('should not reload the tooltip if the mouse leaves and re-enters before hiding', function () {
+ var titleHtml = function () {
+ var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip')
+ return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
+ }
+
+ var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
+ .appendTo('#qunit-fixture')
+
+ $tooltip.bootstrapTooltip({
+ html: true,
+ animation: false,
+ trigger: 'hover',
+ delay: { show: 0, hide: 500 },
+ container: $tooltip,
+ title: titleHtml
+ })
+
+ var obj = $tooltip.data('bs.tooltip')
+
+ $('#tt-outer').trigger('mouseenter')
+
+ var currentUid = $('#tt-content').text()
+
+ $('#tt-outer').trigger('mouseleave')
+ equal(currentUid, $('#tt-content').text())
+
+ ok(obj.hoverState == 'out', 'the tooltip hoverState should be set to "out"')
+
+ $('#tt-content').trigger('mouseenter')
+ ok(obj.hoverState == 'in', 'the tooltip hoverState should be set to "in"')
+
+ equal(currentUid, $('#tt-content').text())
+ })
+
+ test('should position arrow correctly when tooltip is moved to not appear offscreen', function () {
+ stop()
+
+ var styles = '<style>'
+ + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ + '.tooltip { position: absolute; }'
+ + '.tooltip-arrow { position: absolute; width: 0; height: 0; }'
+ + '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; }'
+ + '</style>'
+ var $styles = $(styles).appendTo('head')
+
+ $('<a href="#" title="tooltip title" style="position: absolute; bottom: 0; right: 0;">Foobar</a>')
+ .appendTo('body')
+ .on('shown.bs.tooltip', function () {
+ var arrowStyles = $(this).data('bs.tooltip').$tip.find('.tooltip-arrow').attr('style')
+ ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly')
+ $(this).bootstrapTooltip('hide')
+ })
+ .on('hidden.bs.tooltip', function () {
+ $styles.remove()
+ $(this).remove()
+ start()
+ })
+ .bootstrapTooltip({
+ container: 'body',
+ placement: 'top',
+ trigger: 'manual'
+ })
+ .bootstrapTooltip('show')
+ })
+
})