diff options
author | Johann-S <johann.servoire@gmail.com> | 2018-03-20 13:07:58 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2018-03-20 17:56:51 +0300 |
commit | bedc96e48bebb7a1124a97833794a8047a1e3b95 (patch) | |
tree | 0db43f0a301cf836fb9198a4957231a097a90f06 /js | |
parent | 2306f62bf19bb0696a9455aaf2eea6b083d9fdae (diff) |
Use transitionEnd in QUnit since we moved away from PhantomJS
Diffstat (limited to 'js')
-rw-r--r-- | js/src/alert.js | 3 | ||||
-rw-r--r-- | js/src/carousel.js | 6 | ||||
-rw-r--r-- | js/src/collapse.js | 11 | ||||
-rw-r--r-- | js/src/modal.js | 17 | ||||
-rw-r--r-- | js/src/tab.js | 1 | ||||
-rw-r--r-- | js/src/tooltip.js | 5 | ||||
-rw-r--r-- | js/src/util.js | 29 | ||||
-rw-r--r-- | js/tests/unit/alert.js | 11 | ||||
-rw-r--r-- | js/tests/unit/collapse.js | 10 | ||||
-rw-r--r-- | js/tests/unit/popover.js | 124 | ||||
-rw-r--r-- | js/tests/unit/tooltip.js | 163 | ||||
-rw-r--r-- | js/tests/unit/util.js | 5 |
12 files changed, 224 insertions, 161 deletions
diff --git a/js/src/alert.js b/js/src/alert.js index a072b2e4eb..7719c57bfb 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -102,8 +102,7 @@ const Alert = (($) => { _removeElement(element) { $(element).removeClass(ClassName.SHOW) - if (!Util.supportsTransitionEnd() || - !$(element).hasClass(ClassName.FADE)) { + if (!$(element).hasClass(ClassName.FADE)) { this._destroyElement(element) return } diff --git a/js/src/carousel.js b/js/src/carousel.js index 54bb0791c9..0c192cd7d1 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -142,8 +142,7 @@ const Carousel = (($) => { this._isPaused = true } - if ($(this._element).find(Selector.NEXT_PREV)[0] && - Util.supportsTransitionEnd()) { + if ($(this._element).find(Selector.NEXT_PREV)[0]) { Util.triggerTransitionEnd(this._element) this.cycle(true) } @@ -376,8 +375,7 @@ const Carousel = (($) => { to: nextElementIndex }) - if (Util.supportsTransitionEnd() && - $(this._element).hasClass(ClassName.SLIDE)) { + if ($(this._element).hasClass(ClassName.SLIDE)) { $(nextElement).addClass(orderClassName) Util.reflow(nextElement) diff --git a/js/src/collapse.js b/js/src/collapse.js index ee357e37a6..58033566b3 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -182,11 +182,6 @@ const Collapse = (($) => { $(this._element).trigger(Event.SHOWN) } - if (!Util.supportsTransitionEnd()) { - complete() - return - } - const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1) const scrollSize = `scroll${capitalizedDimension}` const transitionDuration = Util.getTransitionDurationFromElement(this._element) @@ -246,12 +241,6 @@ const Collapse = (($) => { } this._element.style[dimension] = '' - - if (!Util.supportsTransitionEnd()) { - complete() - return - } - const transitionDuration = Util.getTransitionDurationFromElement(this._element) $(this._element) diff --git a/js/src/modal.js b/js/src/modal.js index 414359e97a..efe2f0d4a4 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -107,7 +107,7 @@ const Modal = (($) => { return } - if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) { + if ($(this._element).hasClass(ClassName.FADE)) { this._isTransitioning = true } @@ -168,8 +168,7 @@ const Modal = (($) => { } this._isShown = false - - const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE) + const transition = $(this._element).hasClass(ClassName.FADE) if (transition) { this._isTransitioning = true @@ -228,8 +227,7 @@ const Modal = (($) => { } _showElement(relatedTarget) { - const transition = Util.supportsTransitionEnd() && - $(this._element).hasClass(ClassName.FADE) + const transition = $(this._element).hasClass(ClassName.FADE) if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { @@ -331,8 +329,6 @@ const Modal = (($) => { ? ClassName.FADE : '' if (this._isShown && this._config.backdrop) { - const doAnimate = Util.supportsTransitionEnd() && animate - this._backdrop = document.createElement('div') this._backdrop.className = ClassName.BACKDROP @@ -357,7 +353,7 @@ const Modal = (($) => { } }) - if (doAnimate) { + if (animate) { Util.reflow(this._backdrop) } @@ -367,7 +363,7 @@ const Modal = (($) => { return } - if (!doAnimate) { + if (!animate) { callback() return } @@ -387,8 +383,7 @@ const Modal = (($) => { } } - if (Util.supportsTransitionEnd() && - $(this._element).hasClass(ClassName.FADE)) { + if ($(this._element).hasClass(ClassName.FADE)) { const backdropTransitionDuration = Util.getTransitionDurationFromElement(this._backdrop) $(this._backdrop) diff --git a/js/src/tab.js b/js/src/tab.js index ebf28d76c7..fb40a7402b 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -151,7 +151,6 @@ const Tab = (($) => { const active = activeElements[0] const isTransitioning = callback && - Util.supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE)) const complete = () => this._transitionComplete( diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 19a020d43d..64508fcab1 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -333,7 +333,7 @@ const Tooltip = (($) => { } } - if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) { + if ($(this.tip).hasClass(ClassName.FADE)) { const transitionDuration = Util.getTransitionDurationFromElement(this.tip) $(this.tip) @@ -383,8 +383,7 @@ const Tooltip = (($) => { this._activeTrigger[Trigger.FOCUS] = false this._activeTrigger[Trigger.HOVER] = false - if (Util.supportsTransitionEnd() && - $(this.tip).hasClass(ClassName.FADE)) { + if ($(this.tip).hasClass(ClassName.FADE)) { const transitionDuration = Util.getTransitionDurationFromElement(tip) $(tip) diff --git a/js/src/util.js b/js/src/util.js index 1b1f13beae..f7a968de3d 100644 --- a/js/src/util.js +++ b/js/src/util.js @@ -14,8 +14,7 @@ const Util = (($) => { * ------------------------------------------------------------------------ */ - let transition = false - + const TRANSITION_END = 'transitionend' const MAX_UID = 1000000 const MILLISECONDS_MULTIPLIER = 1000 @@ -26,8 +25,8 @@ const Util = (($) => { function getSpecialTransitionEndEvent() { return { - bindType: transition.end, - delegateType: transition.end, + bindType: TRANSITION_END, + delegateType: TRANSITION_END, handle(event) { if ($(event.target).is(this)) { return event.handleObj.handler.apply(this, arguments) // eslint-disable-line prefer-rest-params @@ -37,16 +36,6 @@ const Util = (($) => { } } - function transitionEndTest() { - if (typeof window !== 'undefined' && window.QUnit) { - return false - } - - return { - end: 'transitionend' - } - } - function transitionEndEmulator(duration) { let called = false @@ -64,13 +53,8 @@ const Util = (($) => { } function setTransitionEndSupport() { - transition = transitionEndTest() - $.fn.emulateTransitionEnd = transitionEndEmulator - - if (Util.supportsTransitionEnd()) { - $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent() - } + $.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent() } /** @@ -130,11 +114,12 @@ const Util = (($) => { }, triggerTransitionEnd(element) { - $(element).trigger(transition.end) + $(element).trigger(TRANSITION_END) }, + // TODO: Remove in v5 supportsTransitionEnd() { - return Boolean(transition) + return Boolean(TRANSITION_END) }, isElement(obj) { diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js index 2dcaeb6d00..165c91f1e1 100644 --- a/js/tests/unit/alert.js +++ b/js/tests/unit/alert.js @@ -48,6 +48,7 @@ $(function () { QUnit.test('should remove element when clicking .close', function (assert) { assert.expect(2) + var done = assert.async() var alertHTML = '<div class="alert alert-danger fade show">' + '<a class="close" href="#" data-dismiss="alert">×</a>' + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + @@ -56,9 +57,13 @@ $(function () { assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom') - $alert.find('.close').trigger('click') - - assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom') + $alert + .one('closed.bs.alert', function () { + assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom') + done() + }) + .find('.close') + .trigger('click') }) QUnit.test('should not fire closed when close is prevented', function (assert) { diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index b9e3c4757c..4a99f16325 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -45,10 +45,14 @@ $(function () { QUnit.test('should show a collapsed element', function (assert) { assert.expect(2) - var $el = $('<div class="collapse"/>').bootstrapCollapse('show') + var done = assert.async() + var $el = $('<div class="collapse"/>') - assert.ok($el.hasClass('show'), 'has class "show"') - assert.ok(!/height/i.test($el.attr('style')), 'has height reset') + $el.one('shown.bs.collapse', function () { + assert.ok($el.hasClass('show'), 'has class "show"') + assert.ok(!/height/i.test($el.attr('style')), 'has height reset') + done() + }).bootstrapCollapse('show') }) QUnit.test('should show multiple collapsed elements', function (assert) { diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js index b75837811f..3eef811d60 100644 --- a/js/tests/unit/popover.js +++ b/js/tests/unit/popover.js @@ -80,6 +80,7 @@ $(function () { QUnit.test('should get title and content from options', function (assert) { assert.expect(4) + var done = assert.async() var $popover = $('<a href="#">@fat</a>') .appendTo('#qunit-fixture') .bootstrapPopover({ @@ -91,15 +92,18 @@ $(function () { } }) - $popover.bootstrapPopover('show') - - assert.notEqual($('.popover').length, 0, 'popover was inserted') - assert.strictEqual($('.popover .popover-header').text(), '@fat', 'title correctly inserted') - assert.strictEqual($('.popover .popover-body').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted') - - $popover.bootstrapPopover('hide') - - assert.strictEqual($('.popover').length, 0, 'popover was removed') + $popover + .one('shown.bs.popover', function () { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + assert.strictEqual($('.popover .popover-header').text(), '@fat', 'title correctly inserted') + assert.strictEqual($('.popover .popover-body').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted') + $popover.bootstrapPopover('hide') + }) + .one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') + done() + }) + .bootstrapPopover('show') }) QUnit.test('should allow DOMElement title and content (html: true)', function (assert) { @@ -146,6 +150,7 @@ $(function () { QUnit.test('should not duplicate HTML object', function (assert) { assert.expect(6) + var done = assert.async() var $div = $('<div/>').html('loves writing tests (╯°□°)╯︵ ┻━┻') var $popover = $('<a href="#">@fat</a>') @@ -157,56 +162,75 @@ $(function () { } }) - $popover.bootstrapPopover('show') - assert.notEqual($('.popover').length, 0, 'popover was inserted') - assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted') + function popoverInserted() { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted') + } - $popover.bootstrapPopover('hide') - assert.strictEqual($('.popover').length, 0, 'popover was removed') + $popover + .one('shown.bs.popover', function () { + popoverInserted() - $popover.bootstrapPopover('show') - assert.notEqual($('.popover').length, 0, 'popover was inserted') - assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted') + $popover.one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') - $popover.bootstrapPopover('hide') - assert.strictEqual($('.popover').length, 0, 'popover was removed') + $popover.one('shown.bs.popover', function () { + popoverInserted() + + $popover.one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') + done() + }).bootstrapPopover('hide') + }).bootstrapPopover('show') + }).bootstrapPopover('hide') + }) + .bootstrapPopover('show') }) QUnit.test('should get title and content from attributes', function (assert) { assert.expect(4) + var done = assert.async() var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>') .appendTo('#qunit-fixture') .bootstrapPopover() + .one('shown.bs.popover', function () { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted') + assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted') + $popover.bootstrapPopover('hide') + }) + .one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') + done() + }) .bootstrapPopover('show') - - assert.notEqual($('.popover').length, 0, 'popover was inserted') - assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted') - assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted') - - $popover.bootstrapPopover('hide') - assert.strictEqual($('.popover').length, 0, 'popover was removed') }) QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) { assert.expect(4) + var done = assert.async() var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>') .appendTo('#qunit-fixture') .bootstrapPopover({ title: 'ignored title option', content: 'ignored content option' }) + .one('shown.bs.popover', function () { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted') + assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted') + $popover.bootstrapPopover('hide') + }) + .one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') + done() + }) .bootstrapPopover('show') - - assert.notEqual($('.popover').length, 0, 'popover was inserted') - assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted') - assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted') - - $popover.bootstrapPopover('hide') - assert.strictEqual($('.popover').length, 0, 'popover was removed') }) QUnit.test('should respect custom template', function (assert) { assert.expect(3) + var done = assert.async() var $popover = $('<a href="#">@fat</a>') .appendTo('#qunit-fixture') .bootstrapPopover({ @@ -214,14 +238,16 @@ $(function () { content: 'Test', template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>' }) - - $popover.bootstrapPopover('show') - - assert.notEqual($('.popover').length, 0, 'popover was inserted') - assert.ok($('.popover').hasClass('foobar'), 'custom class is present') - - $popover.bootstrapPopover('hide') - assert.strictEqual($('.popover').length, 0, 'popover was removed') + .one('shown.bs.popover', function () { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + assert.ok($('.popover').hasClass('foobar'), 'custom class is present') + $popover.bootstrapPopover('hide') + }) + .one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') + done() + }) + .bootstrapPopover('show') }) QUnit.test('should destroy popover', function (assert) { @@ -247,18 +273,23 @@ $(function () { QUnit.test('should render popover element using delegated selector', function (assert) { assert.expect(2) + var done = assert.async() var $div = $('<div><a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a></div>') .appendTo('#qunit-fixture') .bootstrapPopover({ selector: 'a', trigger: 'click' }) + .one('shown.bs.popover', function () { + assert.notEqual($('.popover').length, 0, 'popover was inserted') + $div.find('a').trigger('click') + }) + .one('hidden.bs.popover', function () { + assert.strictEqual($('.popover').length, 0, 'popover was removed') + done() + }) $div.find('a').trigger('click') - assert.notEqual($('.popover').length, 0, 'popover was inserted') - - $div.find('a').trigger('click') - assert.strictEqual($('.popover').length, 0, 'popover was removed') }) QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) { @@ -276,6 +307,7 @@ $(function () { html: true, trigger: 'manual', container: 'body', + animation: false, content: function () { return $content } @@ -289,8 +321,8 @@ $(function () { $div .one('shown.bs.popover', function () { $('.content-with-handler .btn').trigger('click') - $div.bootstrapPopover('dispose') assert.ok(handlerCalled, 'content\'s event handler still present') + $div.bootstrapPopover('dispose') done() }) .bootstrapPopover('show') diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index bdccd3a38d..20d022c5dc 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -77,15 +77,21 @@ $(function () { QUnit.test('should remove aria-describedby from trigger on hide', function (assert) { assert.expect(2) + var done = assert.async() var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .bootstrapTooltip() .appendTo('#qunit-fixture') - $trigger.bootstrapTooltip('show') - assert.ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby') - - $trigger.bootstrapTooltip('hide') - assert.ok(!$trigger[0].hasAttribute('aria-describedby'), 'trigger does not have aria-describedby') + $trigger + .one('shown.bs.tooltip', function () { + assert.ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby') + $trigger.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.ok(!$trigger[0].hasAttribute('aria-describedby'), 'trigger does not have aria-describedby') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should assign a unique id tooltip element', function (assert) { @@ -102,40 +108,51 @@ $(function () { QUnit.test('should place tooltips relative to placement option', function (assert) { assert.expect(2) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') .bootstrapTooltip({ placement: 'bottom' }) - $tooltip.bootstrapTooltip('show') - - assert - .ok($('.tooltip') - .is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied') - - $tooltip.bootstrapTooltip('hide') + $tooltip + .one('shown.bs.tooltip', function () { + assert.ok($('.tooltip') + .is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied') - assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should allow html entities', function (assert) { assert.expect(2) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"/>') .appendTo('#qunit-fixture') .bootstrapTooltip({ html: true }) - $tooltip.bootstrapTooltip('show') - assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted') - - $tooltip.bootstrapTooltip('hide') - assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed') + $tooltip + .one('shown.bs.tooltip', function () { + assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should allow DOMElement title (html: false)', function (assert) { assert.expect(3) + var done = assert.async() var title = document.createTextNode('<3 writing tests') var $tooltip = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') @@ -143,15 +160,19 @@ $(function () { title: title }) - $tooltip.bootstrapTooltip('show') - - assert.notEqual($('.tooltip').length, 0, 'tooltip inserted') - assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted') - assert.ok(!$.contains($('.tooltip').get(0), title), 'title node copied, not moved') + $tooltip + .one('shown.bs.tooltip', function () { + assert.notEqual($('.tooltip').length, 0, 'tooltip inserted') + assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted') + assert.ok(!$.contains($('.tooltip').get(0), title), 'title node copied, not moved') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should allow DOMElement title (html: true)', function (assert) { assert.expect(3) + var done = assert.async() var title = document.createTextNode('<3 writing tests') var $tooltip = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') @@ -160,26 +181,35 @@ $(function () { title: title }) - $tooltip.bootstrapTooltip('show') - - assert.notEqual($('.tooltip').length, 0, 'tooltip inserted') - assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted') - assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied') + $tooltip + .one('shown.bs.tooltip', function () { + assert.notEqual($('.tooltip').length, 0, 'tooltip inserted') + assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted') + assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should respect custom classes', function (assert) { assert.expect(2) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') .bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' }) - $tooltip.bootstrapTooltip('show') - assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present') - - $tooltip.bootstrapTooltip('hide') - assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed') + $tooltip + .one('shown.bs.tooltip', function () { + assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should fire show event', function (assert) { @@ -363,18 +393,24 @@ $(function () { QUnit.test('should place tooltips inside body when container is body', function (assert) { assert.expect(3) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') .bootstrapTooltip({ container: 'body' }) - .bootstrapTooltip('show') - - assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body') - assert.strictEqual($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent') - $tooltip.bootstrapTooltip('hide') - assert.strictEqual($('body > .tooltip').length, 0, 'tooltip was removed from dom') + $tooltip + .one('shown.bs.tooltip', function () { + assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body') + assert.strictEqual($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($('body > .tooltip').length, 0, 'tooltip was removed from dom') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) { @@ -405,45 +441,63 @@ $(function () { QUnit.test('should use title attribute for tooltip text', function (assert) { assert.expect(2) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>') .appendTo('#qunit-fixture') .bootstrapTooltip() - $tooltip.bootstrapTooltip('show') - assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set') - - $tooltip.bootstrapTooltip('hide') - assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + $tooltip + .one('shown.bs.tooltip', function () { + assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should prefer title attribute over title option', function (assert) { assert.expect(2) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>') .appendTo('#qunit-fixture') .bootstrapTooltip({ title: 'This is a tooltip with some content' }) - $tooltip.bootstrapTooltip('show') - assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while preferred over title option') - - $tooltip.bootstrapTooltip('hide') - assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + $tooltip + .one('shown.bs.tooltip', function () { + assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while preferred over title option') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should use title option', function (assert) { assert.expect(2) + var done = assert.async() var $tooltip = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') .bootstrapTooltip({ title: 'This is a tooltip with some content' }) - $tooltip.bootstrapTooltip('show') - assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set') - - $tooltip.bootstrapTooltip('hide') - assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + $tooltip + .one('shown.bs.tooltip', function () { + assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + done() + }) + .bootstrapTooltip('show') }) QUnit.test('should not error when trying to show an top-placed tooltip that has been removed from the dom', function (assert) { @@ -869,7 +923,6 @@ $(function () { var done = assert.async() var $el = $('<a href="#" rel="tooltip" title="7"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip('show') .on('shown.bs.tooltip', function () { var tooltip = $el.data('bs.tooltip') var $tooltip = $(tooltip.getTipElement()) diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js index c4f9459f99..9a25a52861 100644 --- a/js/tests/unit/util.js +++ b/js/tests/unit/util.js @@ -90,4 +90,9 @@ $(function () { id2 = Util.getUID('test') assert.ok(id !== id2, id + ' !== ' + id2) }) + + QUnit.test('Util.supportsTransitionEnd should return true', function (assert) { + assert.expect(1) + assert.ok(Util.supportsTransitionEnd()) + }) }) |