popover.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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 done = assert.async()
  32. $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>')
  33. .appendTo('#qunit-fixture')
  34. .on('shown.bs.popover', function () {
  35. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  36. $(this).bootstrapPopover('hide')
  37. })
  38. .on('hidden.bs.popover', function () {
  39. assert.strictEqual($('.popover').length, 0, 'popover removed')
  40. done()
  41. })
  42. .bootstrapPopover('show')
  43. })
  44. QUnit.test('should store popover instance in popover data object', function (assert) {
  45. assert.expect(1)
  46. var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover()
  47. assert.ok($popover.data('bs.popover'), 'popover instance exists')
  48. })
  49. QUnit.test('should store popover trigger in popover instance data object', function (assert) {
  50. assert.expect(1)
  51. var $popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
  52. .appendTo('#qunit-fixture')
  53. .bootstrapPopover()
  54. $popover.bootstrapPopover('show')
  55. assert.ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data')
  56. })
  57. QUnit.test('should get title and content from options', function (assert) {
  58. assert.expect(4)
  59. var done = assert.async()
  60. var $popover = $('<a href="#">@fat</a>')
  61. .appendTo('#qunit-fixture')
  62. .bootstrapPopover({
  63. title: function () {
  64. return '@fat'
  65. },
  66. content: function () {
  67. return 'loves writing tests (╯°□°)╯︵ ┻━┻'
  68. }
  69. })
  70. .on('shown.bs.popover', function () {
  71. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  72. assert.strictEqual($('.popover .popover-title').text(), '@fat', 'title correctly inserted')
  73. assert.strictEqual($('.popover .popover-content').text(), 'loves writing tests (╯°□°)╯︵ ┻━┻', 'content correctly inserted')
  74. $popover.bootstrapPopover('hide')
  75. })
  76. .on('hidden.bs.popover', function () {
  77. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  78. done()
  79. })
  80. $popover.bootstrapPopover('show')
  81. })
  82. QUnit.test('should not duplicate HTML object', function (assert) {
  83. assert.expect(6)
  84. var done = assert.async()
  85. var $div = $('<div/>').html('loves writing tests (╯°□°)╯︵ ┻━┻')
  86. var $popover = $('<a href="#">@fat</a>')
  87. .appendTo('#qunit-fixture')
  88. .bootstrapPopover({
  89. content: function () {
  90. return $div
  91. }
  92. })
  93. $popover.one('shown.bs.popover', function () {
  94. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  95. assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
  96. $popover.one('hidden.bs.popover', function () {
  97. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  98. $popover.one('shown.bs.popover', function () {
  99. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  100. assert.equal($('.popover .popover-content').html(), $div, 'content correctly inserted')
  101. $popover.one('hidden.bs.popover', function () {
  102. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  103. done()
  104. })
  105. $popover.bootstrapPopover('hide')
  106. })
  107. $popover.bootstrapPopover('show')
  108. })
  109. $popover.bootstrapPopover('hide')
  110. })
  111. $popover.bootstrapPopover('show')
  112. })
  113. QUnit.test('should get title and content from attributes', function (assert) {
  114. assert.expect(4)
  115. var done = assert.async()
  116. $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
  117. .appendTo('#qunit-fixture')
  118. .bootstrapPopover()
  119. .one('shown.bs.popover', function () {
  120. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  121. assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
  122. assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
  123. $(this).bootstrapPopover('hide')
  124. })
  125. .one('hidden.bs.popover', function () {
  126. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  127. done()
  128. })
  129. .bootstrapPopover('show')
  130. })
  131. QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) {
  132. assert.expect(4)
  133. var done = assert.async()
  134. $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
  135. .appendTo('#qunit-fixture')
  136. .bootstrapPopover({
  137. title: 'ignored title option',
  138. content: 'ignored content option'
  139. })
  140. .one('shown.bs.popover', function () {
  141. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  142. assert.strictEqual($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
  143. assert.strictEqual($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
  144. $(this).bootstrapPopover('hide')
  145. })
  146. .one('hidden.bs.popover', function () {
  147. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  148. done()
  149. })
  150. .bootstrapPopover('show')
  151. })
  152. QUnit.test('should respect custom template', function (assert) {
  153. assert.expect(3)
  154. var done = assert.async()
  155. $('<a href="#">@fat</a>')
  156. .appendTo('#qunit-fixture')
  157. .bootstrapPopover({
  158. title: 'Test',
  159. content: 'Test',
  160. template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'
  161. })
  162. .one('shown.bs.popover', function () {
  163. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  164. assert.ok($('.popover').hasClass('foobar'), 'custom class is present')
  165. $(this).bootstrapPopover('hide')
  166. })
  167. .one('hidden.bs.popover', function () {
  168. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  169. done()
  170. })
  171. .bootstrapPopover('show')
  172. })
  173. QUnit.test('should destroy popover', function (assert) {
  174. assert.expect(7)
  175. var $popover = $('<div/>')
  176. .bootstrapPopover({
  177. trigger: 'hover'
  178. })
  179. .on('click.foo', $.noop)
  180. assert.ok($popover.data('bs.popover'), 'popover has data')
  181. assert.ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event')
  182. assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event')
  183. $popover.bootstrapPopover('show')
  184. $popover.bootstrapPopover('destroy')
  185. assert.ok(!$popover.hasClass('in'), 'popover is hidden')
  186. assert.ok(!$popover.data('popover'), 'popover does not have data')
  187. assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
  188. assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
  189. })
  190. QUnit.test('should render popover element using delegated selector', function (assert) {
  191. assert.expect(2)
  192. var done = assert.async()
  193. var $div = $('<div><a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a></div>')
  194. .appendTo('#qunit-fixture')
  195. .bootstrapPopover({
  196. selector: 'a',
  197. trigger: 'click'
  198. })
  199. $div.one('shown.bs.popover', function () {
  200. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  201. $div.find('a').trigger('click')
  202. })
  203. .one('hidden.bs.popover', function () {
  204. assert.strictEqual($('.popover').length, 0, 'popover was removed')
  205. done()
  206. })
  207. $div.find('a').trigger('click')
  208. })
  209. QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) {
  210. assert.expect(1)
  211. var $content = $('<div class="content-with-handler"><a class="btn btn-warning">Button with event handler</a></div>').appendTo('#qunit-fixture')
  212. var handlerCalled = false
  213. $('.content-with-handler .btn').on('click', function () {
  214. handlerCalled = true
  215. })
  216. var $div = $('<div><a href="#">Show popover</a></div>')
  217. .appendTo('#qunit-fixture')
  218. .bootstrapPopover({
  219. html: true,
  220. trigger: 'manual',
  221. container: 'body',
  222. content: function () {
  223. return $content
  224. }
  225. })
  226. var done = assert.async()
  227. $div
  228. .one('shown.bs.popover', function () {
  229. $div
  230. .one('hidden.bs.popover', function () {
  231. $div
  232. .one('shown.bs.popover', function () {
  233. $('.content-with-handler .btn').trigger('click')
  234. $div.bootstrapPopover('destroy')
  235. assert.ok(handlerCalled, 'content\'s event handler still present')
  236. done()
  237. })
  238. .bootstrapPopover('show')
  239. })
  240. .bootstrapPopover('hide')
  241. })
  242. .bootstrapPopover('show')
  243. })
  244. QUnit.test('should throw an error when initializing popover on the document object without specifying a delegation selector', function (assert) {
  245. assert.expect(1)
  246. assert.throws(function () {
  247. $(document).bootstrapPopover({ title: 'What am I on?', content: 'My selector is missing' })
  248. }, new Error('`selector` option must be specified when initializing popover on the window.document object!'))
  249. })
  250. QUnit.test('should do nothing when an attempt is made to hide an uninitialized popover', function (assert) {
  251. assert.expect(1)
  252. var $popover = $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
  253. .appendTo('#qunit-fixture')
  254. .on('hidden.bs.popover shown.bs.popover', function () {
  255. assert.ok(false, 'should not fire any popover events')
  256. })
  257. .bootstrapPopover('hide')
  258. assert.strictEqual($popover.data('bs.popover'), undefined, 'should not initialize the popover')
  259. })
  260. QUnit.test('should throw an error when template contains multiple top-level elements', function (assert) {
  261. assert.expect(1)
  262. assert.throws(function () {
  263. $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
  264. .appendTo('#qunit-fixture')
  265. .bootstrapPopover({ template: '<div>Foo</div><div>Bar</div>' })
  266. .bootstrapPopover('show')
  267. }, new Error('popover `template` option must consist of exactly 1 top-level element!'))
  268. })
  269. QUnit.test('should fire inserted event', function (assert) {
  270. assert.expect(2)
  271. var done = assert.async()
  272. $('<a href="#">@Johann-S</a>')
  273. .appendTo('#qunit-fixture')
  274. .on('inserted.bs.popover', function () {
  275. assert.notEqual($('.popover').length, 0, 'popover was inserted')
  276. assert.ok(true, 'inserted event fired')
  277. done()
  278. })
  279. .bootstrapPopover({
  280. title: 'Test',
  281. content: 'Test'
  282. })
  283. .bootstrapPopover('show')
  284. })
  285. })