diff options
author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2020-05-02 12:11:24 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2020-06-16 05:04:19 +0300 |
commit | 1a0a0858efa0e1e3c6bebd38058df8ad39ca27a5 (patch) | |
tree | 7135351b96e14bda512d175af447eb9201ea737c /js/tests/unit/button.spec.js | |
parent | 1b2ea5efb1ca3cea21776bc9992a79aee47fba1a (diff) |
Remove checkbox/radio toggle from button plugin in favor of a CSS only solution
Diffstat (limited to 'js/tests/unit/button.spec.js')
-rw-r--r-- | js/tests/unit/button.spec.js | 161 |
1 files changed, 0 insertions, 161 deletions
diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js index f7caf23f62..ac32b4b897 100644 --- a/js/tests/unit/button.spec.js +++ b/js/tests/unit/button.spec.js @@ -1,11 +1,9 @@ import Button from '../../src/button' -import EventHandler from '../../src/dom/event-handler' /** Test helpers */ import { getFixture, clearFixture, - createEvent, jQueryMock } from '../helpers/fixture' @@ -51,144 +49,6 @@ describe('Button', () => { expect(btnTestParent.classList.contains('active')).toEqual(true) }) - - it('should trigger input change event when toggled button has input field', done => { - fixtureEl.innerHTML = [ - '<div class="btn-group" data-toggle="buttons">', - ' <label class="btn btn-primary">', - ' <input type="radio" id="radio" autocomplete="off"> Radio', - ' </label>', - '</div>' - ].join('') - - const input = fixtureEl.querySelector('input') - const label = fixtureEl.querySelector('label') - - input.addEventListener('change', () => { - expect().nothing() - done() - }) - - label.click() - }) - - it('should not trigger input change event when input already checked and button is active', () => { - fixtureEl.innerHTML = [ - '<button type="button" class="btn btn-primary active" data-toggle="buttons">', - ' <input type="radio" id="radio" autocomplete="off" checked> Radio', - '</button>' - ].join('') - - const button = fixtureEl.querySelector('button') - - spyOn(EventHandler, 'trigger') - - button.click() - - expect(EventHandler.trigger).not.toHaveBeenCalled() - }) - - it('should remove active when an other radio button is clicked', () => { - fixtureEl.innerHTML = [ - '<div class="btn-group btn-group-toggle" data-toggle="buttons">', - ' <label class="btn btn-secondary active">', - ' <input type="radio" name="options" id="option1" autocomplete="off" checked> Active', - ' </label>', - ' <label class="btn btn-secondary">', - ' <input type="radio" name="options" id="option2" autocomplete="off"> Radio', - ' </label>', - ' <label class="btn btn-secondary">', - ' <input type="radio" name="options" id="option3" autocomplete="off"> Radio', - ' </label>', - '</div>' - ].join('') - - const option1 = fixtureEl.querySelector('#option1') - const option2 = fixtureEl.querySelector('#option2') - - expect(option1.checked).toEqual(true) - expect(option1.parentElement.classList.contains('active')).toEqual(true) - - const clickEvent = createEvent('click') - - option2.dispatchEvent(clickEvent) - - expect(option1.checked).toEqual(false) - expect(option1.parentElement.classList.contains('active')).toEqual(false) - expect(option2.checked).toEqual(true) - expect(option2.parentElement.classList.contains('active')).toEqual(true) - }) - - it('should do nothing if the child is not an input', () => { - fixtureEl.innerHTML = [ - '<div class="btn-group btn-group-toggle" data-toggle="buttons">', - ' <label class="btn btn-secondary active">', - ' <span id="option1">el 1</span>', - ' </label>', - ' <label class="btn btn-secondary">', - ' <span id="option2">el 2</span>', - ' </label>', - ' <label class="btn btn-secondary">', - ' <span>el 3</span>', - ' </label>', - '</div>' - ].join('') - - const option2 = fixtureEl.querySelector('#option2') - const clickEvent = createEvent('click') - - option2.dispatchEvent(clickEvent) - - expect().nothing() - }) - - it('should add focus class on focus event', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"><input type="text"></button>' - - const btn = fixtureEl.querySelector('.btn') - const input = fixtureEl.querySelector('input') - - const focusEvent = createEvent('focus') - input.dispatchEvent(focusEvent) - - expect(btn.classList.contains('focus')).toEqual(true) - }) - - it('should not add focus class', () => { - fixtureEl.innerHTML = '<button data-toggle="button"><input type="text"></button>' - - const btn = fixtureEl.querySelector('button') - const input = fixtureEl.querySelector('input') - - const focusEvent = createEvent('focus') - input.dispatchEvent(focusEvent) - - expect(btn.classList.contains('focus')).toEqual(false) - }) - - it('should remove focus class on blur event', () => { - fixtureEl.innerHTML = '<button class="btn focus" data-toggle="button"><input type="text"></button>' - - const btn = fixtureEl.querySelector('.btn') - const input = fixtureEl.querySelector('input') - - const focusEvent = createEvent('blur') - input.dispatchEvent(focusEvent) - - expect(btn.classList.contains('focus')).toEqual(false) - }) - - it('should not remove focus class on blur event', () => { - fixtureEl.innerHTML = '<button class="focus" data-toggle="button"><input type="text"></button>' - - const btn = fixtureEl.querySelector('button') - const input = fixtureEl.querySelector('input') - - const focusEvent = createEvent('blur') - input.dispatchEvent(focusEvent) - - expect(btn.classList.contains('focus')).toEqual(true) - }) }) describe('toggle', () => { @@ -206,27 +66,6 @@ describe('Button', () => { expect(btnEl.getAttribute('aria-pressed')).toEqual('true') expect(btnEl.classList.contains('active')).toEqual(true) }) - - it('should handle disabled attribute on non-button elements', () => { - fixtureEl.innerHTML = [ - '<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>' - ].join('') - - const btnGroupEl = fixtureEl.querySelector('.btn-group') - const btnDanger = fixtureEl.querySelector('.btn-danger') - const input = fixtureEl.querySelector('input') - - const button = new Button(btnGroupEl) - - button.toggle() - - expect(btnDanger.hasAttribute('disabled')).toEqual(true) - expect(input.checked).toEqual(false) - }) }) describe('dispose', () => { |