git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/js/tests/unit/dropdown.js

   1 $(function () {
   2
   3     module("dropdowns")
   4
   5       test("should provide no conflict", function () {
   6         var dropdown = $.fn.dropdown.noConflict()
   7         ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
   8         $.fn.dropdown = dropdown
   9       })
  10
  11       test("should be defined on jquery object", function () {
  12         ok($(document.body).dropdown, 'dropdown method is defined')
  13       })
  14
  15       test("should return element", function () {
  16         var el = $("<div />")
  17         ok(el.dropdown()[0] === el[0], 'same element returned')
  18       })
  19
  20       test("should not open dropdown if target is disabled", function () {
  21         var dropdownHTML = '<ul class="tabs">'
  22           + '<li class="dropdown">'
  23           + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
  24           + '<ul class="dropdown-menu">'
  25           + '<li><a href="#">Secondary link</a></li>'
  26           + '<li><a href="#">Something else here</a></li>'
  27           + '<li class="divider"></li>'
  28           + '<li><a href="#">Another link</a></li>'
  29           + '</ul>'
  30           + '</li>'
  31           + '</ul>'
  32           , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  33
  34         ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  35       })
  36
  37       test("should not open dropdown if target is disabled", function () {
  38         var dropdownHTML = '<ul class="tabs">'
  39           + '<li class="dropdown">'
  40           + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
  41           + '<ul class="dropdown-menu">'
  42           + '<li><a href="#">Secondary link</a></li>'
  43           + '<li><a href="#">Something else here</a></li>'
  44           + '<li class="divider"></li>'
  45           + '<li><a href="#">Another link</a></li>'
  46           + '</ul>'
  47           + '</li>'
  48           + '</ul>'
  49           , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  50
  51         ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  52       })
  53
  54       test("should add class open to menu if clicked", function () {
  55         var dropdownHTML = '<ul class="tabs">'
  56           + '<li class="dropdown">'
  57           + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
  58           + '<ul class="dropdown-menu">'
  59           + '<li><a href="#">Secondary link</a></li>'
  60           + '<li><a href="#">Something else here</a></li>'
  61           + '<li class="divider"></li>'
  62           + '<li><a href="#">Another link</a></li>'
  63           + '</ul>'
  64           + '</li>'
  65           + '</ul>'
  66           , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  67
  68         ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  69       })
  70
  71       test("should test if element has a # before assuming it's a selector", function () {
  72         var dropdownHTML = '<ul class="tabs">'
  73           + '<li class="dropdown">'
  74           + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
  75           + '<ul class="dropdown-menu">'
  76           + '<li><a href="#">Secondary link</a></li>'
  77           + '<li><a href="#">Something else here</a></li>'
  78           + '<li class="divider"></li>'
  79           + '<li><a href="#">Another link</a></li>'
  80           + '</ul>'
  81           + '</li>'
  82           + '</ul>'
  83           , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  84
  85         ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  86       })
  87
  88
  89       test("should remove open class if body clicked", function () {
  90         var dropdownHTML = '<ul class="tabs">'
  91           + '<li class="dropdown">'
  92           + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
  93           + '<ul class="dropdown-menu">'
  94           + '<li><a href="#">Secondary link</a></li>'
  95           + '<li><a href="#">Something else here</a></li>'
  96           + '<li class="divider"></li>'
  97           + '<li><a href="#">Another link</a></li>'
  98           + '</ul>'
  99           + '</li>'
 100           + '</ul>'
 101           , dropdown = $(dropdownHTML)
 102             .appendTo('#qunit-fixture')
 103             .find('[data-toggle="dropdown"]')
 104             .dropdown()
 105             .click()
 106
 107         ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
 108         $('body').click()
 109         ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed')
 110         dropdown.remove()
 111       })
 112
 113       test("should remove open class if body clicked, with multiple drop downs", function () {
 114           var dropdownHTML =
 115             '<ul class="nav">'
 116             + '    <li><a href="#menu1">Menu 1</a></li>'
 117             + '    <li class="dropdown" id="testmenu">'
 118             + '      <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <b class="caret"></b></a>'
 119             + '      <ul class="dropdown-menu" role="menu">'
 120             + '        <li><a href="#sub1">Submenu 1</a></li>'
 121             + '      </ul>'
 122             + '    </li>'
 123             + '</ul>'
 124             + '<div class="btn-group">'
 125             + '    <button class="btn">Actions</button>'
 126             + '    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>'
 127             + '    <ul class="dropdown-menu">'
 128             + '        <li><a href="#">Action 1</a></li>'
 129             + '    </ul>'
 130             + '</div>'
 131           , dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
 132           , first = dropdowns.first()
 133           , last = dropdowns.last()
 134
 135         ok(dropdowns.length == 2, "Should be two dropdowns")
 136
 137         first.click()
 138         ok(first.parents('.open').length == 1, 'open class added on click')
 139         ok($('#qunit-fixture .open').length == 1, 'only one object is open')
 140         $('body').click()
 141         ok($("#qunit-fixture .open").length === 0, 'open class removed')
 142
 143         last.click()
 144         ok(last.parent('.open').length == 1, 'open class added on click')
 145         ok($('#qunit-fixture .open').length == 1, 'only one object is open')
 146         $('body').click()
 147         ok($("#qunit-fixture .open").length === 0, 'open class removed')
 148
 149         $("#qunit-fixture").html("")
 150       })
 151
 152       test("should fire show and hide event", function () {
 153         var dropdownHTML = '<ul class="tabs">'
 154           + '<li class="dropdown">'
 155           + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 156           + '<ul class="dropdown-menu">'
 157           + '<li><a href="#">Secondary link</a></li>'
 158           + '<li><a href="#">Something else here</a></li>'
 159           + '<li class="divider"></li>'
 160           + '<li><a href="#">Another link</a></li>'
 161           + '</ul>'
 162           + '</li>'
 163           + '</ul>'
 164           , dropdown = $(dropdownHTML)
 165             .appendTo('#qunit-fixture')
 166             .find('[data-toggle="dropdown"]')
 167             .dropdown()
 168
 169         stop()
 170
 171         dropdown
 172           .parent('.dropdown')
 173           .bind('show.bs.dropdown', function () {
 174             ok(true, 'show was called')
 175           })
 176           .bind('hide.bs.dropdown', function () {
 177             ok(true, 'hide was called')
 178             start()
 179           })
 180
 181         dropdown.click()
 182         $(document.body).click()
 183       })
 184
 185
 186       test("should fire shown and hiden event", function () {
 187         var dropdownHTML = '<ul class="tabs">'
 188           + '<li class="dropdown">'
 189           + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
 190           + '<ul class="dropdown-menu">'
 191           + '<li><a href="#">Secondary link</a></li>'
 192           + '<li><a href="#">Something else here</a></li>'
 193           + '<li class="divider"></li>'
 194           + '<li><a href="#">Another link</a></li>'
 195           + '</ul>'
 196           + '</li>'
 197           + '</ul>'
 198           , dropdown = $(dropdownHTML)
 199             .appendTo('#qunit-fixture')
 200             .find('[data-toggle="dropdown"]')
 201             .dropdown()
 202
 203         stop()
 204
 205         dropdown
 206           .parent('.dropdown')
 207           .bind('shown.bs.dropdown', function () {
 208             ok(true, 'show was called')
 209           })
 210           .bind('hidden.bs.dropdown', function () {
 211             ok(true, 'hide was called')
 212             start()
 213           })
 214
 215         dropdown.click()
 216         $(document.body).click()
 217       })
 218
 219 })