src/scss/bootstrap-4.0.0-alpha.6/js/tests/unit/button.js

   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     }
  20   })
  21
  22   QUnit.test('should provide no conflict', function (assert) {
  23     assert.expect(1)
  24     assert.strictEqual($.fn.button, undefined, 'button 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 $button = $el.bootstrapButton()
  31     assert.ok($button instanceof $, 'returns jquery collection')
  32     assert.strictEqual($button[0], $el[0], 'collection contains element')
  33   })
  34
  35   QUnit.test('should toggle active', function (assert) {
  36     assert.expect(2)
  37     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
  38     assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
  39     $btn.bootstrapButton('toggle')
  40     assert.ok($btn.hasClass('active'), 'btn has class active')
  41   })
  42
  43   QUnit.test('should toggle active when btn children are clicked', function (assert) {
  44     assert.expect(2)
  45     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
  46     var $inner = $('<i/>')
  47     $btn
  48       .append($inner)
  49       .appendTo('#qunit-fixture')
  50     assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
  51     $inner.trigger('click')
  52     assert.ok($btn.hasClass('active'), 'btn has class active')
  53   })
  54
  55   QUnit.test('should toggle aria-pressed', function (assert) {
  56     assert.expect(2)
  57     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
  58     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
  59     $btn.bootstrapButton('toggle')
  60     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
  61   })
  62
  63   QUnit.test('should toggle aria-pressed on buttons with container', function (assert) {
  64     assert.expect(1)
  65     var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
  66         '<button id="btn1" class="btn btn-secondary" type="button">One</button>' +
  67         '<button class="btn btn-secondary" type="button">Two</button>' +
  68       '</div>'
  69     $('#qunit-fixture').append(groupHTML)
  70     $('#btn1').bootstrapButton('toggle')
  71     assert.strictEqual($('#btn1').attr('aria-pressed'), 'true')
  72   })
  73
  74   QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) {
  75     assert.expect(2)
  76     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
  77     var $inner = $('<i/>')
  78     $btn
  79       .append($inner)
  80       .appendTo('#qunit-fixture')
  81     assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
  82     $inner.trigger('click')
  83     assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
  84   })
  85
  86   QUnit.test('should trigger input change event when toggled button has input field', function (assert) {
  87     assert.expect(1)
  88     var done = assert.async()
  89
  90     var groupHTML = '<div class="btn-group" data-toggle="buttons">'
  91       + '<label class="btn btn-primary">'
  92       + '<input type="radio" id="radio" autocomplete="off">Radio'
  93       + '</label>'
  94       + '</div>'
  95     var $group = $(groupHTML).appendTo('#qunit-fixture')
  96
  97     $group.find('input').on('change', function (e) {
  98       e.preventDefault()
  99       assert.ok(true, 'change event fired')
 100       done()
 101     })
 102
 103     $group.find('label').trigger('click')
 104   })
 105
 106   QUnit.test('should check for closest matching toggle', function (assert) {
 107     assert.expect(12)
 108     var groupHTML = '<div class="btn-group" data-toggle="buttons">'
 109       + '<label class="btn btn-primary active">'
 110       + '<input type="radio" name="options" id="option1" checked="true"> Option 1'
 111       + '</label>'
 112       + '<label class="btn btn-primary">'
 113       + '<input type="radio" name="options" id="option2"> Option 2'
 114       + '</label>'
 115       + '<label class="btn btn-primary">'
 116       + '<input type="radio" name="options" id="option3"> Option 3'
 117       + '</label>'
 118       + '</div>'
 119     var $group = $(groupHTML).appendTo('#qunit-fixture')
 120
 121     var $btn1 = $group.children().eq(0)
 122     var $btn2 = $group.children().eq(1)
 123
 124     assert.ok($btn1.hasClass('active'), 'btn1 has active class')
 125     assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
 126     assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
 127     assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
 128     $btn2.find('input').trigger('click')
 129     assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
 130     assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
 131     assert.ok($btn2.hasClass('active'), 'btn2 has active class')
 132     assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
 133
 134     $btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
 135     assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
 136     assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
 137     assert.ok($btn2.hasClass('active'), 'btn2 has active class')
 138     assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
 139   })
 140
 141 })