From 3d12b541c488ea09efced2fb987fcbf384c656bb Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 2 Oct 2019 11:43:54 +0200 Subject: return to the original file structure to avoid breaking modularity --- js/src/collapse/collapse.spec.js | 826 --------------------------------------- 1 file changed, 826 deletions(-) delete mode 100644 js/src/collapse/collapse.spec.js (limited to 'js/src/collapse/collapse.spec.js') diff --git a/js/src/collapse/collapse.spec.js b/js/src/collapse/collapse.spec.js deleted file mode 100644 index 154bc2c6b..000000000 --- a/js/src/collapse/collapse.spec.js +++ /dev/null @@ -1,826 +0,0 @@ -import Collapse from './collapse' -import EventHandler from '../dom/event-handler' -import { makeArray } from '../util/index' - -/** Test helpers */ -import { getFixture, clearFixture, jQueryMock } from '../../tests/helpers/fixture' - -describe('Collapse', () => { - let fixtureEl - - beforeAll(() => { - fixtureEl = getFixture() - }) - - afterEach(() => { - clearFixture() - }) - - describe('VERSION', () => { - it('should return plugin version', () => { - expect(Collapse.VERSION).toEqual(jasmine.any(String)) - }) - }) - - describe('Default', () => { - it('should return plugin default config', () => { - expect(Collapse.Default).toEqual(jasmine.any(Object)) - }) - }) - - describe('constructor', () => { - it('should allow jquery object in parent config', () => { - fixtureEl.innerHTML = [ - '
', - '
', - ' Toggle item', - '
Lorem ipsum
', - '
', - '
' - ].join('') - - const collapseEl = fixtureEl.querySelector('div.collapse') - const myCollapseEl = fixtureEl.querySelector('.my-collapse') - const fakejQueryObject = { - 0: myCollapseEl - } - const collapse = new Collapse(collapseEl, { - parent: fakejQueryObject - }) - - expect(collapse._config.parent).toEqual(fakejQueryObject) - expect(collapse._getParent()).toEqual(myCollapseEl) - }) - - it('should allow non jquery object in parent config', () => { - fixtureEl.innerHTML = [ - '
', - '
', - ' Toggle item', - '
Lorem ipsum
', - '
', - '
' - ].join('') - - const collapseEl = fixtureEl.querySelector('div.collapse') - const myCollapseEl = fixtureEl.querySelector('.my-collapse') - const collapse = new Collapse(collapseEl, { - parent: myCollapseEl - }) - - expect(collapse._config.parent).toEqual(myCollapseEl) - }) - - it('should allow string selector in parent config', () => { - fixtureEl.innerHTML = [ - '
', - '
', - ' Toggle item', - '
Lorem ipsum
', - '
', - '
' - ].join('') - - const collapseEl = fixtureEl.querySelector('div.collapse') - const myCollapseEl = fixtureEl.querySelector('.my-collapse') - const collapse = new Collapse(collapseEl, { - parent: 'div.my-collapse' - }) - - expect(collapse._config.parent).toEqual('div.my-collapse') - expect(collapse._getParent()).toEqual(myCollapseEl) - }) - }) - - describe('toggle', () => { - it('should call show method if show class is not present', () => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl) - - spyOn(collapse, 'show') - - collapse.toggle() - - expect(collapse.show).toHaveBeenCalled() - }) - - it('should call hide method if show class is present', () => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('.show') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - spyOn(collapse, 'hide') - - collapse.toggle() - - expect(collapse.hide).toHaveBeenCalled() - }) - - it('should find collapse children if they have collapse class too not only data-parent', done => { - fixtureEl.innerHTML = [ - '
', - '
', - ' Toggle item 1', - '
Lorem ipsum 1
', - '
', - '
', - ' Toggle item 2', - '
Lorem ipsum 2
', - '
', - '
' - ].join('') - - const parent = fixtureEl.querySelector('.my-collapse') - const collapseEl1 = fixtureEl.querySelector('#collapse1') - const collapseEl2 = fixtureEl.querySelector('#collapse2') - - const collapseList = makeArray(fixtureEl.querySelectorAll('.collapse')) - .map(el => new Collapse(el, { - parent, - toggle: false - })) - - collapseEl2.addEventListener('shown.bs.collapse', () => { - expect(collapseEl2.classList.contains('show')).toEqual(true) - expect(collapseEl1.classList.contains('show')).toEqual(false) - done() - }) - - collapseList[1].toggle() - }) - }) - - describe('show', () => { - it('should do nothing if is transitioning', () => { - fixtureEl.innerHTML = '
' - - spyOn(EventHandler, 'trigger') - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapse._isTransitioning = true - collapse.show() - - expect(EventHandler.trigger).not.toHaveBeenCalled() - }) - - it('should do nothing if already shown', () => { - fixtureEl.innerHTML = '
' - - spyOn(EventHandler, 'trigger') - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapse.show() - - expect(EventHandler.trigger).not.toHaveBeenCalled() - }) - - it('should show a collapsed element', done => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapseEl.addEventListener('show.bs.collapse', () => { - expect(collapseEl.style.height).toEqual('0px') - }) - collapseEl.addEventListener('shown.bs.collapse', () => { - expect(collapseEl.classList.contains('show')).toEqual(true) - expect(collapseEl.style.height).toEqual('') - done() - }) - - collapse.show() - }) - - it('should show a collapsed element on width', done => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapseEl.addEventListener('show.bs.collapse', () => { - expect(collapseEl.style.width).toEqual('0px') - }) - collapseEl.addEventListener('shown.bs.collapse', () => { - expect(collapseEl.classList.contains('show')).toEqual(true) - expect(collapseEl.style.width).toEqual('') - done() - }) - - collapse.show() - }) - - it('should collapse only the first collapse', done => { - fixtureEl.innerHTML = [ - '
', - '
', - '
', - '
', - '
', - '
' - ].join('') - - const el1 = fixtureEl.querySelector('#collapse1') - const el2 = fixtureEl.querySelector('#collapse2') - const collapse = new Collapse(el1, { - toggle: false - }) - - el1.addEventListener('shown.bs.collapse', () => { - expect(el1.classList.contains('show')).toEqual(true) - expect(el2.classList.contains('show')).toEqual(true) - done() - }) - - collapse.show() - }) - - it('should not fire shown when show is prevented', done => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - const expectEnd = () => { - setTimeout(() => { - expect().nothing() - done() - }, 10) - } - - collapseEl.addEventListener('show.bs.collapse', e => { - e.preventDefault() - expectEnd() - }) - - collapseEl.addEventListener('shown.bs.collapse', () => { - throw new Error('should not fire shown event') - }) - - collapse.show() - }) - }) - - describe('hide', () => { - it('should do nothing if is transitioning', () => { - fixtureEl.innerHTML = '
' - - spyOn(EventHandler, 'trigger') - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapse._isTransitioning = true - collapse.hide() - - expect(EventHandler.trigger).not.toHaveBeenCalled() - }) - - it('should do nothing if already shown', () => { - fixtureEl.innerHTML = '
' - - spyOn(EventHandler, 'trigger') - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapse.hide() - - expect(EventHandler.trigger).not.toHaveBeenCalled() - }) - - it('should hide a collapsed element', done => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - collapseEl.addEventListener('hidden.bs.collapse', () => { - expect(collapseEl.classList.contains('show')).toEqual(false) - expect(collapseEl.style.height).toEqual('') - done() - }) - - collapse.hide() - }) - - it('should not fire hidden when hide is prevented', done => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - const expectEnd = () => { - setTimeout(() => { - expect().nothing() - done() - }, 10) - } - - collapseEl.addEventListener('hide.bs.collapse', e => { - e.preventDefault() - expectEnd() - }) - - collapseEl.addEventListener('hidden.bs.collapse', () => { - throw new Error('should not fire hidden event') - }) - - collapse.hide() - }) - }) - - describe('dispose', () => { - it('should destroy a collapse', () => { - fixtureEl.innerHTML = '
' - - const collapseEl = fixtureEl.querySelector('div') - const collapse = new Collapse(collapseEl, { - toggle: false - }) - - expect(Collapse.getInstance(collapseEl)).toEqual(collapse) - - collapse.dispose() - - expect(Collapse.getInstance(collapseEl)).toEqual(null) - }) - }) - - describe('data-api', () => { - it('should show multiple collapsed elements', done => { - fixtureEl.innerHTML = [ - '', - '
', - '
' - ].join('') - - const trigger = fixtureEl.querySelector('a') - const collapse1 = fixtureEl.querySelector('#collapse1') - const collapse2 = fixtureEl.querySelector('#collapse2') - - collapse2.addEventListener('shown.bs.collapse', () => { - expect(trigger.getAttribute('aria-expanded')).toEqual('true') - expect(trigger.classList.contains('collapsed')).toEqual(false) - expect(collapse1.classList.contains('show')).toEqual(true) - expect(collapse1.classList.contains('show')).toEqual(true) - done() - }) - - trigger.click() - }) - - it('should hide multiple collapsed elements', done => { - fixtureEl.innerHTML = [ - '', - '
', - '
' - ].join('') - - const trigger = fixtureEl.querySelector('a') - const collapse1 = fixtureEl.querySelector('#collapse1') - const collapse2 = fixtureEl.querySelector('#collapse2') - - collapse2.addEventListener('hidden.bs.collapse', () => { - expect(trigger.getAttribute('aria-expanded')).toEqual('false') - expect(trigger.classList.contains('collapsed')).toEqual(true) - expect(collapse1.classList.contains('show')).toEqual(false) - expect(collapse1.classList.contains('show')).toEqual(false) - done() - }) - - trigger.click() - }) - - it('should remove "collapsed" class from target when collapse is shown', done => { - fixtureEl.innerHTML = [ - '', - '', - '
' - ].join('') - - const link1 = fixtureEl.querySelector('#link1') - const link2 = fixtureEl.querySelector('#link2') - const collapseTest1 = fixtureEl.querySelector('#test1') - - collapseTest1.addEventListener('hidden.bs.collapse', () => { - expect(link1.getAttribute('aria-expanded')).toEqual('false') - expect(link2.getAttribute('aria-expanded')).toEqual('false') - expect(link1.classList.contains('collapsed')).toEqual(true) - expect(link2.classList.contains('collapsed')).toEqual(true) - done() - }) - - link1.click() - }) - - it('should allow accordion to use children other than card', done => { - fixtureEl.innerHTML = [ - '
', - '
', - ' ', - '
', - '
', - '
', - ' ', - '
', - '
', - '
' - ].join('') - - const trigger = fixtureEl.querySelector('#linkTrigger') - const triggerTwo = fixtureEl.querySelector('#linkTriggerTwo') - const collapseOne = fixtureEl.querySelector('#collapseOne') - const collapseTwo = fixtureEl.querySelector('#collapseTwo') - - collapseOne.addEventListener('shown.bs.collapse', () => { - expect(collapseOne.classList.contains('show')).toEqual(true) - expect(collapseTwo.classList.contains('show')).toEqual(false) - - collapseTwo.addEventListener('shown.bs.collapse', () => { - expect(collapseOne.classList.contains('show')).toEqual(false) - expect(collapseTwo.classList.contains('show')).toEqual(true) - done() - }) - - triggerTwo.click() - }) - - trigger.click() - }) - - it('should not prevent event for input', done => { - fixtureEl.innerHTML = [ - '', - '
' - ].join('') - - const target = fixtureEl.querySelector('input') - const collapseEl = fixtureEl.querySelector('#collapsediv1') - - collapseEl.addEventListener('shown.bs.collapse', () => { - expect(collapseEl.classList.contains('show')).toEqual(true) - expect(target.checked).toEqual(true) - done() - }) - - target.click() - }) - - it('should allow accordion to contain nested elements', done => { - fixtureEl.innerHTML = [ - '
', - '
', - '
', - '
', - ' ', - '
', - '
', - '
', - '
', - '
', - ' ', - '
', - '
', - '
', - '
', - '
' - ].join('') - - const triggerEl = fixtureEl.querySelector('#linkTrigger') - const triggerTwoEl = fixtureEl.querySelector('#linkTriggerTwo') - const collapseOneEl = fixtureEl.querySelector('#collapseOne') - const collapseTwoEl = fixtureEl.querySelector('#collapseTwo') - - collapseOneEl.addEventListener('shown.bs.collapse', () => { - expect(collapseOneEl.classList.contains('show')).toEqual(true) - expect(triggerEl.classList.contains('collapsed')).toEqual(false) - expect(triggerEl.getAttribute('aria-expanded')).toEqual('true') - - expect(collapseTwoEl.classList.contains('show')).toEqual(false) - expect(triggerTwoEl.classList.contains('collapsed')).toEqual(true) - expect(triggerTwoEl.getAttribute('aria-expanded')).toEqual('false') - - collapseTwoEl.addEventListener('shown.bs.collapse', () => { - expect(collapseOneEl.classList.contains('show')).toEqual(false) - expect(triggerEl.classList.contains('collapsed')).toEqual(true) - expect(triggerEl.getAttribute('aria-expanded')).toEqual('false') - - expect(collapseTwoEl.classList.contains('show')).toEqual(true) - expect(triggerTwoEl.classList.contains('collapsed')).toEqual(false) - expect(triggerTwoEl.getAttribute('aria-expanded')).toEqual('true') - done() - }) - - triggerTwoEl.click() - }) - - triggerEl.click() - }) - - it('should allow accordion to target multiple elements', done => { - fixtureEl.innerHTML = [ - '
', - ' ', - ' ', - '
', - '
', - '
', - '
', - '
' - ].join('') - - const trigger = fixtureEl.querySelector('#linkTriggerOne') - const triggerTwo = fixtureEl.querySelector('#linkTriggerTwo') - const collapseOneOne = fixtureEl.querySelector('#collapseOneOne') - const collapseOneTwo = fixtureEl.querySelector('#collapseOneTwo') - const collapseTwoOne = fixtureEl.querySelector('#collapseTwoOne') - const collapseTwoTwo = fixtureEl.querySelector('#collapseTwoTwo') - const collapsedElements = { - one: false, - two: false - } - - function firstTest() { - expect(collapseOneOne.classList.contains('show')).toEqual(true) - expect(collapseOneTwo.classList.contains('show')).toEqual(true) - - expect(collapseTwoOne.classList.contains('show')).toEqual(false) - expect(collapseTwoTwo.classList.contains('show')).toEqual(false) - - triggerTwo.click() - } - - function secondTest() { - expect(collapseOneOne.classList.contains('show')).toEqual(false) - expect(collapseOneTwo.classList.contains('show')).toEqual(false) - - expect(collapseTwoOne.classList.contains('show')).toEqual(true) - expect(collapseTwoTwo.classList.contains('show')).toEqual(true) - done() - } - - collapseOneOne.addEventListener('shown.bs.collapse', () => { - if (collapsedElements.one) { - firstTest() - } else { - collapsedElements.one = true - } - }) - - collapseOneTwo.addEventListener('shown.bs.collapse', () => { - if (collapsedElements.one) { - firstTest() - } else { - collapsedElements.one = true - } - }) - - collapseTwoOne.addEventListener('shown.bs.collapse', () => { - if (collapsedElements.two) { - secondTest() - } else { - collapsedElements.two = true - } - }) - - collapseTwoTwo.addEventListener('shown.bs.collapse', () => { - if (collapsedElements.two) { - secondTest() - } else { - collapsedElements.two = true - } - }) - - trigger.click() - }) - - it('should collapse accordion children but not nested accordion children', done => { - fixtureEl.innerHTML = [ - '
', - '
', - ' ', - '
', - '
', - '
', - ' ', - '
', - '
', - '
', - '
', - '
', - '
', - ' ', - '
', - '
', - '
' - ].join('') - - const trigger = fixtureEl.querySelector('#linkTrigger') - const triggerTwo = fixtureEl.querySelector('#linkTriggerTwo') - const nestedTrigger = fixtureEl.querySelector('#nestedLinkTrigger') - const collapseOne = fixtureEl.querySelector('#collapseOne') - const collapseTwo = fixtureEl.querySelector('#collapseTwo') - const nestedCollapseOne = fixtureEl.querySelector('#nestedCollapseOne') - - function handlerCollapseOne() { - expect(collapseOne.classList.contains('show')).toEqual(true) - expect(collapseTwo.classList.contains('show')).toEqual(false) - expect(nestedCollapseOne.classList.contains('show')).toEqual(false) - - nestedCollapseOne.addEventListener('shown.bs.collapse', handlerNestedCollapseOne) - nestedTrigger.click() - collapseOne.removeEventListener('shown.bs.collapse', handlerCollapseOne) - } - - function handlerNestedCollapseOne() { - expect(collapseOne.classList.contains('show')).toEqual(true) - expect(collapseTwo.classList.contains('show')).toEqual(false) - expect(nestedCollapseOne.classList.contains('show')).toEqual(true) - - collapseTwo.addEventListener('shown.bs.collapse', () => { - expect(collapseOne.classList.contains('show')).toEqual(false) - expect(collapseTwo.classList.contains('show')).toEqual(true) - expect(nestedCollapseOne.classList.contains('show')).toEqual(true) - done() - }) - - triggerTwo.click() - nestedCollapseOne.removeEventListener('shown.bs.collapse', handlerNestedCollapseOne) - } - - collapseOne.addEventListener('shown.bs.collapse', handlerCollapseOne) - trigger.click() - }) - - it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => { - fixtureEl.innerHTML = [ - '', - '', - '', - '
', - '
' - ].join('') - - const trigger1 = fixtureEl.querySelector('#trigger1') - const trigger2 = fixtureEl.querySelector('#trigger2') - const trigger3 = fixtureEl.querySelector('#trigger3') - const target1 = fixtureEl.querySelector('#test1') - const target2 = fixtureEl.querySelector('#test2') - - const target2Shown = () => { - expect(trigger1.classList.contains('collapsed')).toEqual(false) - expect(trigger1.getAttribute('aria-expanded')).toEqual('true') - - expect(trigger2.classList.contains('collapsed')).toEqual(false) - expect(trigger2.getAttribute('aria-expanded')).toEqual('true') - - expect(trigger3.classList.contains('collapsed')).toEqual(false) - expect(trigger3.getAttribute('aria-expanded')).toEqual('true') - - target2.addEventListener('hidden.bs.collapse', () => { - expect(trigger1.classList.contains('collapsed')).toEqual(false) - expect(trigger1.getAttribute('aria-expanded')).toEqual('true') - - expect(trigger2.classList.contains('collapsed')).toEqual(true) - expect(trigger2.getAttribute('aria-expanded')).toEqual('false') - - expect(trigger3.classList.contains('collapsed')).toEqual(false) - expect(trigger3.getAttribute('aria-expanded')).toEqual('true') - - target1.addEventListener('hidden.bs.collapse', () => { - expect(trigger1.classList.contains('collapsed')).toEqual(true) - expect(trigger1.getAttribute('aria-expanded')).toEqual('false') - - expect(trigger2.classList.contains('collapsed')).toEqual(true) - expect(trigger2.getAttribute('aria-expanded')).toEqual('false') - - expect(trigger3.classList.contains('collapsed')).toEqual(true) - expect(trigger3.getAttribute('aria-expanded')).toEqual('false') - done() - }) - - trigger1.click() - }) - - trigger2.click() - } - - target2.addEventListener('shown.bs.collapse', target2Shown) - trigger3.click() - }) - }) - - describe('jQueryInterface', () => { - it('should create a collapse', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - - jQueryMock.fn.collapse = Collapse.jQueryInterface - jQueryMock.elements = [div] - - jQueryMock.fn.collapse.call(jQueryMock) - - expect(Collapse.getInstance(div)).toBeDefined() - }) - - it('should not re create a collapse', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - const collapse = new Collapse(div) - - jQueryMock.fn.collapse = Collapse.jQueryInterface - jQueryMock.elements = [div] - - jQueryMock.fn.collapse.call(jQueryMock) - - expect(Collapse.getInstance(div)).toEqual(collapse) - }) - - it('should throw error on undefined method', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - const action = 'undefinedMethod' - - jQueryMock.fn.collapse = Collapse.jQueryInterface - jQueryMock.elements = [div] - - try { - jQueryMock.fn.collapse.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } - }) - }) - - describe('getInstance', () => { - it('should return collapse instance', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - const collapse = new Collapse(div) - - expect(Collapse.getInstance(div)).toEqual(collapse) - }) - - it('should return null when there is no collapse instance', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - - expect(Collapse.getInstance(div)).toEqual(null) - }) - }) -}) -- cgit v1.2.3