popover.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. $(function () {
  2. 'use strict';
  3. QUnit.module('popover plugin')
  4. QUnit.test('should be defined on jquery object', function (assert) {
  5. assert.expect(1)
  6. assert.ok($(document.body).popover, 'popover method is defined')
  7. })
  8. QUnit.module('popover', {
  9. beforeEach: function () {
  10. // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
  11. $.fn.bootstrapPopover = $.fn.popover.noConflict()
  12. },
  13. afterEach: function () {
  14. $.fn.popover = $.fn.bootstrapPopover
  15. delete $.fn.bootstrapPopover
  16. }
  17. })
  18. QUnit.test('should provide no conflict', function (assert) {
  19. assert.expect(1)
  20. assert.strictEqual($.fn.popover, undefined, 'popover was set back to undefined (org value)')
  21. })
  22. QUnit.test('should return jquery collection containing the element', function (assert) {
  23. assert.expect(2)
  24. var $el = $('<div/>')
  25. var $popover = $el.bootstrapPopover()
  26. assert.ok($popover instanceof $, 'returns jquery collection')
  27. assert.strictEqual($popover[0], $el[0], 'collection contains element')
  28. })
  29. QUnit.test('should render popover element', function (assert) {
  30. assert.expect(2)
  31. var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>')
  32. .appendTo('#qunit-fixture')
  33. .bootstrapPopover('show')
  34. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  35. $popover.bootstrapPopover('hide')
  36. assert.strictEqual($('.popover').length, 0, 'popover removed')
  37. })
  38. QUnit.test('should store popover instance in popover data object', function (assert) {
  39. assert.expect(1)
  40. var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover()
  41. assert.ok($popover.data('bs.popover'), 'popover instance exists')
  42. })
  43. QUnit.test('should store popover trigger in popover instance data object', function (assert) {
  44. assert.expect(1)
  45. var $popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
  46. .appendTo('#qunit-fixture')
  47. .bootstrapPopover()
  48. $popover.bootstrapPopover('show')
  49. assert.ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data')
  50. })
  51. QUnit.test('should get title and content from options', function (assert) {
  52. assert.expect(4)
  53. var $popover = $('<a href="#">@fat</a>')
  54. .appendTo('#qunit-fixture')
  55. .bootstrapPopover({
  56. title: function () {
  57. return '@fat'
  58. },
  59. content: function () {
  60. return 'loves writing tests (╯°□°)╯︵ ┻━┻'
  61. }
  62. })
  63. $popover.bootstrapPopover('show')
  64. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  65. assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
  66. assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
  67. $popover.bootstrapPopover('hide')
  68. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  69. })
  70. QUnit.test('should not duplicate HTML object', function (assert) {
  71. assert.expect(6)
  72. var $div = $('<div/>').html('loves writing tests (╯°□°)╯︵ ┻━┻')
  73. var $popover = $('<a href="#">@fat</a>')
  74. .appendTo('#qunit-fixture')
  75. .bootstrapPopover({
  76. content: function () {
  77. return $div
  78. }
  79. })
  80. $popover.bootstrapPopover('show')
  81. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  82. assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
  83. $popover.bootstrapPopover('hide')
  84. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  85. $popover.bootstrapPopover('show')
  86. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  87. assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
  88. $popover.bootstrapPopover('hide')
  89. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  90. })
  91. QUnit.test('should get title and content from attributes', function (assert) {
  92. assert.expect(4)
  93. var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
  94. .appendTo('#qunit-fixture')
  95. .bootstrapPopover()
  96. .bootstrapPopover('show')
  97. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  98. assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
  99. assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
  100. $popover.bootstrapPopover('hide')
  101. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  102. })
  103. QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) {
  104. assert.expect(4)
  105. var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
  106. .appendTo('#qunit-fixture')
  107. .bootstrapPopover({
  108. title: 'ignored title option',
  109. content: 'ignored content option'
  110. })
  111. .bootstrapPopover('show')
  112. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  113. assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
  114. assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
  115. $popover.bootstrapPopover('hide')
  116. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  117. })
  118. QUnit.test('should respect custom template', function (assert) {
  119. assert.expect(3)
  120. var $popover = $('<a href="#">@fat</a>')
  121. .appendTo('#qunit-fixture')
  122. .bootstrapPopover({
  123. title: 'Test',
  124. content: 'Test',
  125. template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
  126. })
  127. $popover.bootstrapPopover('show')
  128. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  129. assert.ok($('.popover').hasClass('foobar'), 'custom class is present')
  130. $popover.bootstrapPopover('hide')
  131. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  132. })
  133. QUnit.test('should destroy popover', function (assert) {
  134. assert.expect(7)
  135. var $popover = $('<div/>')
  136. .bootstrapPopover({
  137. trigger: 'hover'
  138. })
  139. .on('click.foo', $.noop)
  140. assert.ok($popover.data('bs.popover'), 'popover has data')
  141. assert.ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event')
  142. assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event')
  143. $popover.bootstrapPopover('show')
  144. $popover.bootstrapPopover('destroy')
  145. assert.ok(!$popover.hasClass('in'), 'popover is hidden')
  146. assert.ok(!$popover.data('popover'), 'popover does not have data')
  147. assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
  148. assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
  149. })
  150. QUnit.test('should render popover element using delegated selector', function (assert) {
  151. assert.expect(2)
  152. var $div = $('<div><a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a></div>')
  153. .appendTo('#qunit-fixture')
  154. .bootstrapPopover({
  155. selector: 'a',
  156. trigger: 'click'
  157. })
  158. $div.find('a').trigger('click')
  159. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  160. $div.find('a').trigger('click')
  161. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  162. })
  163. QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) {
  164. assert.expect(1)
  165. var $content = $('<div class="content-with-handler"><a class="btn btn-warning">Button with event handler</a></div>').appendTo('#qunit-fixture')
  166. var handlerCalled = false
  167. $('.content-with-handler .btn').on('click', function () {
  168. handlerCalled = true
  169. })
  170. var $div = $('<div><a href="#">Show popover</a></div>')
  171. .appendTo('#qunit-fixture')
  172. .bootstrapPopover({
  173. html: true,
  174. trigger: 'manual',
  175. container: 'body',
  176. content: function () {
  177. return $content
  178. }
  179. })
  180. var done = assert.async()
  181. $div
  182. .one('shown.bs.popover', function () {
  183. $div
  184. .one('hidden.bs.popover', function () {
  185. $div
  186. .one('shown.bs.popover', function () {
  187. $('.content-with-handler .btn').trigger('click')
  188. $div.bootstrapPopover('destroy')
  189. assert.ok(handlerCalled, 'content\'s event handler still present')
  190. done()
  191. })
  192. .bootstrapPopover('show')
  193. })
  194. .bootstrapPopover('hide')
  195. })
  196. .bootstrapPopover('show')
  197. })
  198. QUnit.test('should throw an error when initializing popover on the document object without specifying a delegation selector', function (assert) {
  199. assert.expect(1)
  200. assert.throws(function () {
  201. $(document).bootstrapPopover({ title: 'What am I on?', content: 'My selector is missing' })
  202. }, new Error('`selector` option must be specified when initializing popover on the window.document object!'))
  203. })
  204. QUnit.test('should do nothing when an attempt is made to hide an uninitialized popover', function (assert) {
  205. assert.expect(1)
  206. var $popover = $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
  207. .appendTo('#qunit-fixture')
  208. .on('hidden.bs.popover shown.bs.popover', function () {
  209. assert.ok(false, 'should not fire any popover events')
  210. })
  211. .bootstrapPopover('hide')
  212. assert.strictEqual($popover.data('bs.popover'), undefined, 'should not initialize the popover')
  213. })
  214. })