Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
  • Donald Hruska's avatar
    Don't assume the project is hosted at the root (#94) · ef4f8e90
    Donald Hruska authored 
    * Don't assume the project is hosted at the root
* Require package.json in webpack.config.prod.js and use homepage if set; otherwise use '/'

* Fix package.json path and add sample package.json for tests

* Update publicPath to use relative path portion of URL defined in homepage

* Update successful bundle generation message

* Show bundle generation success message based on presence of homepage in package.json
    ef4f8e90
collapse.js 34.90 KiB
1 
$(function () {
2 
  'use strict'
3
4 
  QUnit.module('collapse plugin')
5
6 
  QUnit.test('should be defined on jquery object', function (assert) {
7 
    assert.expect(1)
8 
    assert.ok($(document.body).collapse, 'collapse method is defined')
9 
  })
10
11 
  QUnit.module('collapse', {
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.bootstrapCollapse = $.fn.collapse.noConflict()
15 
    },
16 
    afterEach: function () {
17 
      $.fn.collapse = $.fn.bootstrapCollapse
18 
      delete $.fn.bootstrapCollapse
19 
      $('#qunit-fixture').html('')
20 
    }
21 
  })
22
23 
  QUnit.test('should provide no conflict', function (assert) {
24 
    assert.expect(1)
25 
    assert.strictEqual(typeof $.fn.collapse, 'undefined', 'collapse was set back to undefined (org value)')
26 
  })
27
28 
  QUnit.test('should throw explicit error on undefined method', function (assert) {
29 
    assert.expect(1)
30 
    var $el = $('<div/>')
31 
    $el.bootstrapCollapse()
32 
    try {
33 
      $el.bootstrapCollapse('noMethod')
34 
    } catch (err) {
35 
      assert.strictEqual(err.message, 'No method named "noMethod"')
36 
    }
37 
  })
38
39 
  QUnit.test('should return jquery collection containing the element', function (assert) {
40 
    assert.expect(2)
41 
    var $el = $('<div/>')
42 
    var $collapse = $el.bootstrapCollapse()
43 
    assert.ok($collapse instanceof $, 'returns jquery collection')
44 
    assert.strictEqual($collapse[0], $el[0], 'collection contains element')
45 
  })
46
47 
  QUnit.test('should show a collapsed element', function (assert) {
48 
    assert.expect(2)
49 
    var done = assert.async()
50 
    var $el = $('<div class="collapse"/>')
51
52 
    $el.one('shown.bs.collapse', function () {
53 
      assert.ok($el.hasClass('show'), 'has class "show"')
54 
      assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
55 
      done()
56 
    }).bootstrapCollapse('show')
57 
  })
58
59 
  QUnit.test('should show multiple collapsed elements', function (assert) {
60 
    assert.expect(4)
61 
    var done = assert.async()
62 
    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href=".multi"/>').appendTo('#qunit-fixture')
63 
    var $el = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
64 
    var $el2 = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
65 
    $el.one('shown.bs.collapse', function () {
66 
      assert.ok($el.hasClass('show'), 'has class "show"')
67 
      assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
68 
    })
69 
    $el2.one('shown.bs.collapse', function () {
70 
      assert.ok($el2.hasClass('show'), 'has class "show"')
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
assert.ok(!/height/i.test($el2.attr('style')), 'has height reset') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should collapse only the first collapse', function (assert) { assert.expect(2) var done = assert.async() var html = [ '<div class="panel-group" id="accordion1">', '<div class="panel">', '<div id="collapse1" class="collapse"/>', '</div>', '</div>', '<div class="panel-group" id="accordion2">', '<div class="panel">', '<div id="collapse2" class="collapse show"/>', '</div>', '</div>' ].join('') $(html).appendTo('#qunit-fixture') var $el1 = $('#collapse1') var $el2 = $('#collapse2') $el1.one('shown.bs.collapse', function () { assert.ok($el1.hasClass('show')) assert.ok($el2.hasClass('show')) done() }).bootstrapCollapse('show') }) QUnit.test('should hide a collapsed element', function (assert) { assert.expect(1) var $el = $('<div class="collapse"/>').bootstrapCollapse('hide') assert.ok(!$el.hasClass('show'), 'does not have class "show"') }) QUnit.test('should not fire shown when show is prevented', function (assert) { assert.expect(1) var done = assert.async() $('<div class="collapse"/>') .on('show.bs.collapse', function (e) { e.preventDefault() assert.ok(true, 'show event fired') done() }) .on('shown.bs.collapse', function () { assert.ok(false, 'shown event fired') }) .bootstrapCollapse('show') }) QUnit.test('should reset style to auto after finishing opening collapse', function (assert) { assert.expect(2) var done = assert.async() $('<div class="collapse" style="height: 0px"/>') .on('show.bs.collapse', function () { assert.strictEqual(this.style.height, '0px', 'height is 0px') }) .on('shown.bs.collapse', function () { assert.strictEqual(this.style.height, '', 'height is auto') done() }) .bootstrapCollapse('show') }) QUnit.test('should reset style to auto after finishing closing collapse', function (assert) {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
assert.expect(1) var done = assert.async() $('<div class="collapse"/>') .on('shown.bs.collapse', function () { $(this).bootstrapCollapse('hide') }) .on('hidden.bs.collapse', function () { assert.strictEqual(this.style.height, '', 'height is auto') done() }) .bootstrapCollapse('show') }) QUnit.test('should remove "collapsed" class from target when collapse is shown', function (assert) { assert.expect(1) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') $('<div id="test1"/>') .appendTo('#qunit-fixture') .on('shown.bs.collapse', function () { assert.ok(!$target.hasClass('collapsed'), 'target does not have collapsed class') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) { assert.expect(1) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') $('<div id="test1" class="show"/>') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.ok($target.hasClass('collapsed'), 'target has collapsed class') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) { assert.expect(2) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture') $('<div id="test1"/>') .appendTo('#qunit-fixture') .on('shown.bs.collapse', function () { assert.ok(!$target.hasClass('collapsed'), 'target trigger does not have collapsed class') assert.ok(!$alt.hasClass('collapsed'), 'alt trigger does not have collapsed class') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) { assert.expect(2) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture') var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
$('<div id="test1" class="show"/>') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.ok($target.hasClass('collapsed'), 'target has collapsed class') assert.ok($alt.hasClass('collapsed'), 'alt trigger has collapsed class') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) { assert.expect(0) var done = assert.async() var $test = $('<div id="test1" class="show"/>') .appendTo('#qunit-fixture') .on('hide.bs.collapse', function () { assert.ok(false) }) $test.bootstrapCollapse('show') setTimeout(done, 0) }) QUnit.test('should open a collapse when initialized with "show" option if not already shown', function (assert) { assert.expect(1) var done = assert.async() var $test = $('<div id="test1" />') .appendTo('#qunit-fixture') .on('show.bs.collapse', function () { assert.ok(true) }) $test.bootstrapCollapse('show') setTimeout(done, 0) }) QUnit.test('should not show a collapse when initialized with "hide" option if already hidden', function (assert) { assert.expect(0) var done = assert.async() $('<div class="collapse"></div>') .appendTo('#qunit-fixture') .on('show.bs.collapse', function () { assert.ok(false, 'showing a previously-uninitialized hidden collapse when the "hide" method is called') }) .bootstrapCollapse('hide') setTimeout(done, 0) }) QUnit.test('should hide a collapse when initialized with "hide" option if not already hidden', function (assert) { assert.expect(1) var done = assert.async() $('<div class="collapse show"></div>') .appendTo('#qunit-fixture') .on('hide.bs.collapse', function () { assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called') }) .bootstrapCollapse('hide') setTimeout(done, 0) })
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
QUnit.test('should remove "collapsed" class from active accordion target', function (assert) { assert.expect(3) var done = assert.async() var accordionHTML = '<div id="accordion">' + '<div class="card"/>' + '<div class="card"/>' + '<div class="card"/>' + '</div>' var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0)) $('<div id="body1" class="show" data-parent="#accordion"/>').appendTo($groups.eq(0)) var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" />').appendTo($groups.eq(1)) $('<div id="body2" data-parent="#accordion"/>').appendTo($groups.eq(1)) var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" />').appendTo($groups.eq(2)) $('<div id="body3" data-parent="#accordion"/>') .appendTo($groups.eq(2)) .on('shown.bs.collapse', function () { assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"') assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"') assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"') done() }) EventHandler.trigger($target3[0], 'click') }) QUnit.test('should allow dots in data-parent', function (assert) { assert.expect(3) var done = assert.async() var accordionHTML = '<div class="accordion">' + '<div class="card"/>' + '<div class="card"/>' + '<div class="card"/>' + '</div>' var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0)) $('<div id="body1" class="show" data-parent=".accordion"/>').appendTo($groups.eq(0)) var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2"/>').appendTo($groups.eq(1)) $('<div id="body2" data-parent=".accordion"/>').appendTo($groups.eq(1)) var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3"/>').appendTo($groups.eq(2)) $('<div id="body3" data-parent=".accordion"/>') .appendTo($groups.eq(2)) .on('shown.bs.collapse', function () { assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"') assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"') assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"') done() }) EventHandler.trigger($target3[0], 'click') }) QUnit.test('should set aria-expanded="true" on trigger/control when collapse is shown', function (assert) { assert.expect(1)
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') $('<div id="test1"/>') .appendTo('#qunit-fixture') .on('shown.bs.collapse', function () { assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should set aria-expanded="false" on trigger/control when collapse is hidden', function (assert) { assert.expect(1) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') $('<div id="test1" class="show"/>') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) { assert.expect(2) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture') $('<div id="test1"/>') .appendTo('#qunit-fixture') .on('shown.bs.collapse', function () { assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on trigger/control is "true"') assert.strictEqual($alt.attr('aria-expanded'), 'true', 'aria-expanded on alternative trigger/control is "true"') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) { assert.expect(2) var done = assert.async() var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture') $('<div id="test1" class="show"/>') .appendTo('#qunit-fixture') .on('hidden.bs.collapse', function () { assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on trigger/control is "false"') assert.strictEqual($alt.attr('aria-expanded'), 'false', 'aria-expanded on alternative trigger/control is "false"') done() }) EventHandler.trigger($target[0], 'click') }) QUnit.test('should change aria-expanded from active accordion trigger/control to "false" and set the trigger/control for the newly active one to "true"', function (assert) { assert.expect(3) var done = assert.async()