diff options
Diffstat (limited to 'js/tests/unit')
| -rw-r--r-- | js/tests/unit/alert.js | 8 | ||||
| -rw-r--r-- | js/tests/unit/collapse.js | 97 | ||||
| -rw-r--r-- | js/tests/unit/modal.js | 4 | ||||
| -rw-r--r-- | js/tests/unit/scrollspy.js | 4 | ||||
| -rw-r--r-- | js/tests/unit/tooltip.js | 94 |
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') + }) + }) |
