Skip to content

Commit

Permalink
Add test for less-than-ideal <div><input></div> structure
Browse files Browse the repository at this point in the history
- while not recommended, seen this sort of structure used in the wild; this tests that the plugin code can still handle these cases where the browser DOESN'T do its default checking of the input when clicking on its `<label>` magic and the plugin has to do all the work of setting the checked property itself
  • Loading branch information
patrickhlauke committed Jun 5, 2019
1 parent 1e685b3 commit c4dc4b1
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions js/tests/unit/button.js
Expand Up @@ -230,6 +230,25 @@ $(function () {
assert.ok($input.prop('checked'), 'checkbox is checked after click')
})

QUnit.test('should correctly set checked state on input and active class on the faked button when using <div><input></div> structure', function (assert) {
assert.expect(4)
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<div class="btn">' +
'<input type="checkbox" autocomplete="off" aria-label="Check">' +
'</div>' +
'</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')

var $btn = $group.children().eq(0)
var $input = $btn.children().eq(0)

assert.ok($btn.is(':not(.active)'), '<div> is initially not active')
assert.ok(!$input.prop('checked'), 'checkbox is initially not checked')
$btn[0].click() // fire a real click on the DOM node itself, not a click() on the jQuery object that just aliases to trigger('click')
assert.ok($btn.is('.active'), '<div> is active after click')
assert.ok($input.prop('checked'), 'checkbox is checked after click')
})

QUnit.test('should not do anything if the click was just sent to the outer container with data-toggle', function (assert) {
assert.expect(4)
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
Expand Down

0 comments on commit c4dc4b1

Please sign in to comment.