affix.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. $(function () {
  2. 'use strict';
  3. QUnit.module('affix plugin')
  4. QUnit.test('should be defined on jquery object', function (assert) {
  5. assert.expect(1)
  6. assert.ok($(document.body).affix, 'affix method is defined')
  7. })
  8. QUnit.module('affix', {
  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.bootstrapAffix = $.fn.affix.noConflict()
  12. },
  13. afterEach: function () {
  14. $.fn.affix = $.fn.bootstrapAffix
  15. delete $.fn.bootstrapAffix
  16. }
  17. })
  18. QUnit.test('should provide no conflict', function (assert) {
  19. assert.expect(1)
  20. assert.strictEqual($.fn.affix, undefined, 'affix 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 $affix = $el.bootstrapAffix()
  26. assert.ok($affix instanceof $, 'returns jquery collection')
  27. assert.strictEqual($affix[0], $el[0], 'collection contains element')
  28. })
  29. QUnit.test('should exit early if element is not visible', function (assert) {
  30. assert.expect(1)
  31. var $affix = $('<div style="display: none"/>').bootstrapAffix()
  32. $affix.data('bs.affix').checkPosition()
  33. assert.ok(!$affix.hasClass('affix'), 'affix class was not added')
  34. })
  35. QUnit.test('should trigger affixed event after affix', function (assert) {
  36. assert.expect(2)
  37. var done = assert.async()
  38. var templateHTML = '<div id="affixTarget">'
  39. + '<ul>'
  40. + '<li>Please affix</li>'
  41. + '<li>And unaffix</li>'
  42. + '</ul>'
  43. + '</div>'
  44. + '<div id="affixAfter" style="height: 20000px; display: block;"/>'
  45. $(templateHTML).appendTo(document.body)
  46. $('#affixTarget').bootstrapAffix({
  47. offset: $('#affixTarget ul').position()
  48. })
  49. $('#affixTarget')
  50. .on('affix.bs.affix', function () {
  51. assert.ok(true, 'affix event fired')
  52. }).on('affixed.bs.affix', function () {
  53. assert.ok(true, 'affixed event fired')
  54. $('#affixTarget, #affixAfter').remove()
  55. done()
  56. })
  57. setTimeout(function () {
  58. window.scrollTo(0, document.body.scrollHeight)
  59. setTimeout(function () {
  60. window.scroll(0, 0)
  61. }, 16) // for testing in a browser
  62. }, 0)
  63. })
  64. QUnit.test('should affix-top when scrolling up to offset when parent has padding', function (assert) {
  65. assert.expect(1)
  66. var done = assert.async()
  67. var templateHTML = '<div id="padding-offset" style="padding-top: 20px;">'
  68. + '<div id="affixTopTarget">'
  69. + '<p>Testing affix-top class is added</p>'
  70. + '</div>'
  71. + '<div style="height: 1000px; display: block;"/>'
  72. + '</div>'
  73. $(templateHTML).appendTo(document.body)
  74. $('#affixTopTarget')
  75. .bootstrapAffix({
  76. offset: { top: 120, bottom: 0 }
  77. })
  78. .on('affixed-top.bs.affix', function () {
  79. assert.ok($('#affixTopTarget').hasClass('affix-top'), 'affix-top class applied')
  80. $('#padding-offset').remove()
  81. done()
  82. })
  83. setTimeout(function () {
  84. window.scrollTo(0, document.body.scrollHeight)
  85. setTimeout(function () {
  86. window.scroll(0, 119)
  87. }, 250)
  88. }, 250)
  89. })
  90. })