affix.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  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/>').appendTo('#qunit-fixture')
  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"/>')
  32. .appendTo('#qunit-fixture')
  33. .bootstrapAffix()
  34. $affix.data('bs.affix').checkPosition()
  35. assert.ok(!$affix.hasClass('affix'), 'affix class was not added')
  36. })
  37. QUnit.test('should trigger affixed event after affix', function (assert) {
  38. // Disable for iOS because of: https://bugs.webkit.org/show_bug.cgi?id=172854
  39. if (window.navigator.userAgent.match(/iPhone/i)) {
  40. assert.expect(0)
  41. return
  42. }
  43. assert.expect(2)
  44. var done = assert.async()
  45. var templateHTML = '<div id="affixTarget">'
  46. + '<ul>'
  47. + '<li>Please affix</li>'
  48. + '<li>And unaffix</li>'
  49. + '</ul>'
  50. + '</div>'
  51. + '<div id="affixAfter" style="height: 20000px; display: block;"/>'
  52. $(templateHTML).appendTo(document.body)
  53. $('#affixTarget').bootstrapAffix({
  54. offset: $('#affixTarget ul').position()
  55. })
  56. $('#affixTarget')
  57. .on('affix.bs.affix', function () {
  58. assert.ok(true, 'affix event fired')
  59. }).on('affixed.bs.affix', function () {
  60. assert.ok(true, 'affixed event fired')
  61. $('#affixTarget, #affixAfter').remove()
  62. done()
  63. })
  64. setTimeout(function () {
  65. window.scrollTo(0, document.body.scrollHeight - 5)
  66. // for testing in a browser
  67. setTimeout(function () {
  68. window.scroll(0, 0)
  69. }, 150)
  70. }, 0)
  71. })
  72. QUnit.test('should affix-top when scrolling up to offset when parent has padding', function (assert) {
  73. // Disable for iOS because of: https://bugs.webkit.org/show_bug.cgi?id=172854
  74. if (window.navigator.userAgent.match(/iPhone/i)) {
  75. assert.expect(0)
  76. return
  77. }
  78. assert.expect(1)
  79. var done = assert.async()
  80. var templateHTML = '<div id="padding-offset" style="padding-top: 20px;">'
  81. + '<div id="affixTopTarget">'
  82. + '<p>Testing affix-top class is added</p>'
  83. + '</div>'
  84. + '<div style="height: 1000px; display: block;"/>'
  85. + '</div>'
  86. $(templateHTML).appendTo(document.body)
  87. $('#affixTopTarget')
  88. .bootstrapAffix({
  89. offset: { top: 120, bottom: 0 }
  90. })
  91. .on('affixed-top.bs.affix', function () {
  92. assert.ok($('#affixTopTarget').hasClass('affix-top'), 'affix-top class applied')
  93. $('#padding-offset').remove()
  94. done()
  95. })
  96. setTimeout(function () {
  97. window.scrollTo(0, document.body.scrollHeight - 5)
  98. setTimeout(function () {
  99. window.scroll(0, 119)
  100. }, 250)
  101. }, 0)
  102. })
  103. })