POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/js/tests/unit/scrollspy.js

   1 $(function () {
   2   'use strict';
   3
   4   QUnit.module('scrollspy plugin')
   5
   6   QUnit.test('should be defined on jquery object', function (assert) {
   7     assert.expect(1)
   8     assert.ok($(document.body).scrollspy, 'scrollspy method is defined')
   9   })
  10
  11   QUnit.module('scrollspy', {
  12     beforeEach: function () {
  13       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
  14       $.fn.bootstrapScrollspy = $.fn.scrollspy.noConflict()
  15     },
  16     afterEach: function () {
  17       $.fn.scrollspy = $.fn.bootstrapScrollspy
  18       delete $.fn.bootstrapScrollspy
  19     }
  20   })
  21
  22   QUnit.test('should provide no conflict', function (assert) {
  23     assert.expect(1)
  24     assert.strictEqual($.fn.scrollspy, undefined, 'scrollspy was set back to undefined (org value)')
  25   })
  26
  27   QUnit.test('should return jquery collection containing the element', function (assert) {
  28     assert.expect(2)
  29     var $el = $('<div/>')
  30     var $scrollspy = $el.bootstrapScrollspy()
  31     assert.ok($scrollspy instanceof $, 'returns jquery collection')
  32     assert.strictEqual($scrollspy[0], $el[0], 'collection contains element')
  33   })
  34
  35   QUnit.test('should only switch "active" class on current target', function (assert) {
  36     assert.expect(1)
  37     var done = assert.async()
  38
  39     var sectionHTML = '<div id="root" class="active">'
  40         + '<div class="topbar">'
  41         + '<div class="topbar-inner">'
  42         + '<div class="container" id="ss-target">'
  43         + '<ul class="nav">'
  44         + '<li><a href="#masthead">Overview</a></li>'
  45         + '<li><a href="#detail">Detail</a></li>'
  46         + '</ul>'
  47         + '</div>'
  48         + '</div>'
  49         + '</div>'
  50         + '<div id="scrollspy-example" style="height: 100px; overflow: auto;">'
  51         + '<div style="height: 200px;">'
  52         + '<h4 id="masthead">Overview</h4>'
  53         + '<p style="height: 200px">'
  54         + 'Ad leggings keytar, brunch id art party dolor labore.'
  55         + '</p>'
  56         + '</div>'
  57         + '<div style="height: 200px;">'
  58         + '<h4 id="detail">Detail</h4>'
  59         + '<p style="height: 200px">'
  60         + 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.'
  61         + '</p>'
  62         + '</div>'
  63         + '</div>'
  64         + '</div>'
  65     var $section = $(sectionHTML).appendTo('#qunit-fixture')
  66
  67     var $scrollspy = $section
  68       .show()
  69       .find('#scrollspy-example')
  70       .bootstrapScrollspy({ target: '#ss-target' })
  71
  72     $scrollspy.on('scroll.bs.scrollspy', function () {
  73       assert.ok($section.hasClass('active'), '"active" class still on root node')
  74       done()
  75     })
  76
  77     $scrollspy.scrollTop(350)
  78   })
  79
  80   QUnit.test('should correctly select middle navigation option when large offset is used', function (assert) {
  81     assert.expect(3)
  82     var done = assert.async()
  83
  84     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
  85         + '<nav id="navigation" class="navbar">'
  86         + '<ul class="nav navbar-nav">'
  87         + '<li class="active"><a id="one-link" href="#one">One</a></li>'
  88         + '<li><a id="two-link" href="#two">Two</a></li>'
  89         + '<li><a id="three-link" href="#three">Three</a></li>'
  90         + '</ul>'
  91         + '</nav>'
  92         + '<div id="content" style="height: 200px; overflow-y: auto;">'
  93         + '<div id="one" style="height: 500px;"></div>'
  94         + '<div id="two" style="height: 300px;"></div>'
  95         + '<div id="three" style="height: 10px;"></div>'
  96         + '</div>'
  97     var $section = $(sectionHTML).appendTo('#qunit-fixture')
  98     var $scrollspy = $section
  99       .show()
 100       .filter('#content')
 101
 102     $scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
 103
 104     $scrollspy.on('scroll.bs.scrollspy', function () {
 105       assert.ok(!$section.find('#one-link').parent().hasClass('active'), '"active" class removed from first section')
 106       assert.ok($section.find('#two-link').parent().hasClass('active'), '"active" class on middle section')
 107       assert.ok(!$section.find('#three-link').parent().hasClass('active'), '"active" class not on last section')
 108       done()
 109     })
 110
 111     $scrollspy.scrollTop(550)
 112   })
 113
 114   QUnit.test('should add the active class to the correct element', function (assert) {
 115     assert.expect(2)
 116     var navbarHtml =
 117         '<nav class="navbar">'
 118       + '<ul class="nav">'
 119       + '<li id="li-1"><a href="#div-1">div 1</a></li>'
 120       + '<li id="li-2"><a href="#div-2">div 2</a></li>'
 121       + '</ul>'
 122       + '</nav>'
 123     var contentHtml =
 124         '<div class="content" style="overflow: auto; height: 50px">'
 125       + '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
 126       + '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
 127       + '</div>'
 128
 129     $(navbarHtml).appendTo('#qunit-fixture')
 130     var $content = $(contentHtml)
 131       .appendTo('#qunit-fixture')
 132       .bootstrapScrollspy({ offset: 0, target: '.navbar' })
 133
 134     var testElementIsActiveAfterScroll = function (element, target) {
 135       var deferred = $.Deferred()
 136       var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
 137       var done = assert.async()
 138       $content.one('scroll', function () {
 139         assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
 140         done()
 141         deferred.resolve()
 142       })
 143       $content.scrollTop(scrollHeight)
 144       return deferred.promise()
 145     }
 146
 147     $.when(testElementIsActiveAfterScroll('#li-1', '#div-1'))
 148       .then(function () { return testElementIsActiveAfterScroll('#li-2', '#div-2') })
 149   })
 150
 151   QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
 152     assert.expect(6)
 153     var times = 0
 154     var done = assert.async()
 155     var navbarHtml = '<nav id="navigation" class="navbar">'
 156       + '<ul class="nav">'
 157       + '<li id="li-1"><a href="#div-1">div 1</a>'
 158       + '<ul>'
 159       + '<li id="li-2"><a href="#div-2">div 2</a></li>'
 160       + '</ul>'
 161       + '</li>'
 162       + '</ul>'
 163       + '</nav>'
 164
 165     var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
 166       + '<div id="div-1" style="padding: 0; margin: 0">'
 167       + '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
 168       + '</div>'
 169       + '</div>'
 170
 171     $(navbarHtml).appendTo('#qunit-fixture')
 172
 173     var $content = $(contentHtml)
 174       .appendTo('#qunit-fixture')
 175       .bootstrapScrollspy({ offset: 0, target: '#navigation' })
 176
 177     !function testActiveElements() {
 178       if (++times > 3) return done()
 179
 180       $content.one('scroll', function () {
 181         assert.ok($('#li-1').hasClass('active'), 'nav item for outer element has "active" class')
 182         assert.ok($('#li-2').hasClass('active'), 'nav item for inner element has "active" class')
 183         testActiveElements()
 184       })
 185
 186       $content.scrollTop($content.scrollTop() + 10)
 187     }()
 188   })
 189
 190   QUnit.test('should clear selection if above the first section', function (assert) {
 191     assert.expect(3)
 192     var done = assert.async()
 193
 194     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
 195         + '<nav id="navigation" class="navbar">'
 196         + '<ul class="nav navbar-nav">'
 197         + '<li class="active"><a id="one-link" href="#one">One</a></li>'
 198         + '<li><a id="two-link" href="#two">Two</a></li>'
 199         + '<li><a id="three-link" href="#three">Three</a></li>'
 200         + '</ul>'
 201         + '</nav>'
 202     $(sectionHTML).appendTo('#qunit-fixture')
 203
 204     var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
 205         + '<div id="spacer" style="height: 100px;"/>'
 206         + '<div id="one" style="height: 100px;"/>'
 207         + '<div id="two" style="height: 100px;"/>'
 208         + '<div id="three" style="height: 100px;"/>'
 209         + '<div id="spacer" style="height: 100px;"/>'
 210         + '</div>'
 211     var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
 212
 213     $scrollspy
 214       .bootstrapScrollspy({
 215         target: '#navigation',
 216         offset: $scrollspy.position().top
 217       })
 218       .one('scroll.bs.scrollspy', function () {
 219         assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
 220         assert.strictEqual($('.active').has('#two-link').length, 1, '"active" class on second section')
 221
 222         $scrollspy
 223           .one('scroll.bs.scrollspy', function () {
 224             assert.strictEqual($('.active').length, 0, 'selection cleared')
 225             done()
 226           })
 227           .scrollTop(0)
 228       })
 229       .scrollTop(201)
 230   })
 231
 232   QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) {
 233     assert.expect(5)
 234     var navbarHtml =
 235         '<nav class="navbar">'
 236       + '<ul class="nav">'
 237       + '<li id="li-100-1"><a href="#div-100-1">div 1</a></li>'
 238       + '<li id="li-100-2"><a href="#div-100-2">div 2</a></li>'
 239       + '<li id="li-100-3"><a href="#div-100-3">div 3</a></li>'
 240       + '<li id="li-100-4"><a href="#div-100-4">div 4</a></li>'
 241       + '<li id="li-100-5"><a href="#div-100-5">div 5</a></li>'
 242       + '</ul>'
 243       + '</nav>'
 244     var contentHtml =
 245         '<div class="content" style="position: relative; overflow: auto; height: 100px">'
 246       + '<div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>'
 247       + '<div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>'
 248       + '<div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>'
 249       + '<div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>'
 250       + '<div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>'
 251       + '</div>'
 252
 253     $(navbarHtml).appendTo('#qunit-fixture')
 254     var $content = $(contentHtml)
 255       .appendTo('#qunit-fixture')
 256       .bootstrapScrollspy({ offset: 0, target: '.navbar' })
 257
 258     var testElementIsActiveAfterScroll = function (element, target) {
 259       var deferred = $.Deferred()
 260       var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
 261       var done = assert.async()
 262       $content.one('scroll', function () {
 263         assert.ok($(element).hasClass('active'), 'target:' + target + ', element: ' + element)
 264         done()
 265         deferred.resolve()
 266       })
 267       $content.scrollTop(scrollHeight)
 268       return deferred.promise()
 269     }
 270
 271     $.when(testElementIsActiveAfterScroll('#li-100-5', '#div-100-5'))
 272       .then(function () { return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4') })
 273       .then(function () { return testElementIsActiveAfterScroll('#li-100-3', '#div-100-3') })
 274       .then(function () { return testElementIsActiveAfterScroll('#li-100-2', '#div-100-2') })
 275       .then(function () { return testElementIsActiveAfterScroll('#li-100-1', '#div-100-1') })
 276   })
 277
 278 })