Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
button.js 7.76 KiB
1 
$(function () {
2 
  'use strict'
3
4 
  QUnit.module('button plugin')
5
6 
  QUnit.test('should be defined on jquery object', function (assert) {
7 
    assert.expect(1)
8 
    assert.ok($(document.body).button, 'button method is defined')
9 
  })
10
11 
  QUnit.module('button', {
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.bootstrapButton = $.fn.button.noConflict()
15 
    },
16 
    afterEach: function () {
17 
      $.fn.button = $.fn.bootstrapButton
18 
      delete $.fn.bootstrapButton
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.button, 'undefined', 'button was set back to undefined (org value)')
26 
  })
27
28 
  QUnit.test('should return jquery collection containing the element', function (assert) {
29 
    assert.expect(2)
30 
    var $el = $('<div/>')
31 
    var $button = $el.bootstrapButton()
32 
    assert.ok($button instanceof $, 'returns jquery collection')
33 
    assert.strictEqual($button[0], $el[0], 'collection contains element')
34 
  })
35
36 
  QUnit.test('should toggle active', function (assert) {
37 
    assert.expect(2)
38 
    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
39 
    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
40 
    $btn.bootstrapButton('toggle')
41 
    assert.ok($btn.hasClass('active'), 'btn has class active')
42 
  })
43
44 
  QUnit.test('should toggle active when btn children are clicked', function (assert) {
45 
    assert.expect(2)
46 
    var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
47 
    var $inner = $('<i/>')
48 
    $btn
49 
      .append($inner)
50 
      .appendTo('#qunit-fixture')
51 
    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
52 
    $inner.trigger('click')
53 
    assert.ok($btn.hasClass('active'), 'btn has class active')
54 
  })
55
56 
  QUnit.test('should toggle aria-pressed', function (assert) {
57 
    assert.expect(2)
58 
    var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
59 
    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
60 
    $btn.bootstrapButton('toggle')
61 
    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
62 
  })
63
64 
  QUnit.test('should toggle aria-pressed on buttons with container', function (assert) {
65 
    assert.expect(1)
66 
    var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
67 
        '<button id="btn1" class="btn btn-secondary" type="button">One</button>' +
68 
        '<button class="btn btn-secondary" type="button">Two</button>' +
69 
      '</div>'
70 
    $('#qunit-fixture').append(groupHTML)
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
$('#btn1').bootstrapButton('toggle') assert.strictEqual($('#btn1').attr('aria-pressed'), 'true') }) QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) { assert.expect(2) var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>') var $inner = $('<i/>') $btn .append($inner) .appendTo('#qunit-fixture') assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false') $inner.trigger('click') assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true') }) QUnit.test('should trigger input change event when toggled button has input field', function (assert) { assert.expect(1) var done = assert.async() var groupHTML = '<div class="btn-group" data-toggle="buttons">' + '<label class="btn btn-primary">' + '<input type="radio" id="radio" autocomplete="off">Radio' + '</label>' + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') $group.find('input').on('change', function (e) { e.preventDefault() assert.ok(true, 'change event fired') done() }) $group.find('label').trigger('click') }) QUnit.test('should check for closest matching toggle', function (assert) { assert.expect(12) var groupHTML = '<div class="btn-group" data-toggle="buttons">' + '<label class="btn btn-primary active">' + '<input type="radio" name="options" id="option1" checked="true"> Option 1' + '</label>' + '<label class="btn btn-primary">' + '<input type="radio" name="options" id="option2"> Option 2' + '</label>' + '<label class="btn btn-primary">' + '<input type="radio" name="options" id="option3"> Option 3' + '</label>' + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') var $btn1 = $group.children().eq(0) var $btn2 = $group.children().eq(1) assert.ok($btn1.hasClass('active'), 'btn1 has active class') assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked') assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class') assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked') $btn2.find('input').trigger('click') assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class') assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') assert.ok($btn2.hasClass('active'), 'btn2 has active class') assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked') $btn2.find('input').trigger('click') // Clicking an already checked radio should not un-check it assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class') assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') assert.ok($btn2.hasClass('active'), 'btn2 has active class') assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked') })
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) { assert.expect(2) var groupHTML = '<div class="btn-group" data-toggle="buttons">' + '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>' + '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>' + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') var $btn1 = $group.children().eq(0) var $btn2 = $group.children().eq(1) $btn1.find('input').trigger('click') assert.ok($btn1.is(':not([aria-pressed])'), 'label for nested checkbox input has not been given an aria-pressed attribute') $btn2.find('input').trigger('click') assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute') }) QUnit.test('should handle disabled attribute on non-button elements', function (assert) { assert.expect(2) var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' + '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' + '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' + '</label>' + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') var $btn = $group.children().eq(0) var $input = $btn.children().eq(0) $btn.trigger('click') assert.ok($btn.is(':not(.active)'), 'button did not become active') assert.ok(!$input.is(':checked'), 'checkbox did not get checked') }) QUnit.test('dispose should remove data and the element', function (assert) { assert.expect(2) var $el = $('<div/>') var $button = $el.bootstrapButton() assert.ok(typeof $button.data('bs.button') !== 'undefined') $button.data('bs.button').dispose() assert.ok(typeof $button.data('bs.button') === 'undefined') }) QUnit.test('should return button version', function (assert) { assert.expect(1) if (typeof Button !== 'undefined') { assert.ok(typeof Button.VERSION === 'string') } else { assert.notOk() } }) })